在網(wǎng)頁(yè)設(shè)計(jì)中卒落，如果網(wǎng)站主頁(yè)色彩處理得好，能讓整個(gè)網(wǎng)站錦上添花蜂桶。而一些交互效果的巧妙使用儡毕，不僅讓網(wǎng)頁(yè)瞬間亮起來(lái)，甚至在提升用戶感知度和感官體驗(yàn)上可以起到無(wú)可替代的作用。

我們這里所說的交互主要是指腰湾，用戶通過鼠標(biāo)的懸停雷恃、滑動(dòng)、單擊费坊、拖動(dòng)等交互方式來(lái)觸發(fā)事件倒槐，與目標(biāo)對(duì)象產(chǎn)生互動(dòng)。

本系列文章關(guān)于網(wǎng)頁(yè)文字設(shè)計(jì)附井，我們就先分享文字的交互效果讨越。

文字交互過程的場(chǎng)景應(yīng)該是這樣的：

一個(gè)用戶在瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，注意到某些文字永毅，當(dāng)他用鼠標(biāo)懸停把跨、滑過、單擊沼死、拖動(dòng)（交互行為）與文字（交互對(duì)象）互動(dòng)時(shí)着逐，看到文字發(fā)生了變化（交互反饋）。

這些變化可以是字體大小變化意蛀、顏色發(fā)生改變耸别，也可能是一些動(dòng)態(tài)效果。好的交互效果能引起用戶的好奇心浸间，增加他們?yōu)g覽網(wǎng)頁(yè)時(shí)長(zhǎng)太雨，讓他們對(duì)你的網(wǎng)頁(yè)印象深刻。

說到文字顏色的變化魁蒜，這里分享三個(gè)關(guān)于網(wǎng)頁(yè)文字顏色的小規(guī)范：

>同一個(gè)網(wǎng)站需要定出主文字顏色囊扳，特殊情況可以有2種左右的輔助文字顏色。

>正文的文字顏色為深灰色兜看，建議選用#333333到#666666之間的顏色锥咸，若選用其他文字顏色作為正文主色調(diào)時(shí)，安全起見可采用明度不大于30%的顏色细移。

>藍(lán)色的文字一般會(huì)在絕大多數(shù)超鏈接位置使用搏予，其他地方應(yīng)謹(jǐn)慎使用。

最最重要的一點(diǎn)是弧轧，規(guī)范可以靈活應(yīng)用雪侥，但一定要考慮網(wǎng)頁(yè)的整體配色。

下圖是常用文字顏色推薦精绎，可做參考：

接著正式介紹幾個(gè)文字交互效果的案例速缨。

1.文字顏色變化和下劃線

鼠標(biāo)懸停時(shí)，文字顏色發(fā)生變化和出現(xiàn)下劃線很多時(shí)候用于網(wǎng)頁(yè)中的超鏈接代乃，雖然大部分網(wǎng)站會(huì)將超鏈接文字顏色設(shè)置成藍(lán)色帶下劃線的樣式（常規(guī)旬牲、傳統(tǒng)、用戶習(xí)慣、易讀性高）原茅，但這并不是唯一的樣式吭历。

超鏈接除了需要在大段文字中脫穎而出，還應(yīng)該考慮用戶的閱讀體驗(yàn)擂橘。很多網(wǎng)站的超鏈接設(shè)計(jì)在提升用戶體驗(yàn)上在不斷優(yōu)化創(chuàng)新晌区。

在M&M’s的活動(dòng)網(wǎng)站中，按鈕中的小圖標(biāo)本身就有動(dòng)態(tài)效果贝室，很容易吸引人的注意力契讲。

當(dāng)鼠標(biāo)懸停在按鈕文字上時(shí)，文字顏色和圖標(biāo)發(fā)生變化滑频，用戶能明確這是一個(gè)鏈接捡偏。這類效果讓用戶體驗(yàn)到和網(wǎng)站的互動(dòng)，同時(shí)它還有一種號(hào)召力峡迷，暗示并鼓勵(lì)用戶去點(diǎn)擊嘗試银伟。

而在蘋果官網(wǎng)中，超鏈接的效果是鼠標(biāo)懸停時(shí)文字出現(xiàn)下劃線绘搞。

雖然沒有特別設(shè)置文字顏色彤避，但文字右側(cè)的小箭頭有一個(gè)引導(dǎo)作用，讓用戶明白這里可以點(diǎn)擊夯辖。當(dāng)我們把鼠標(biāo)放到文字上時(shí)琉预，文字底部則出現(xiàn)一條和文字同顏色的下劃線，強(qiáng)化了鏈接的特征蒿褂。

以上兩個(gè)案例分別采用了超鏈接的典型特征圆米，即鼠標(biāo)懸停時(shí)文字顏色變化、文字出現(xiàn)下劃線啄栓，這樣的形式可以實(shí)現(xiàn)與用戶的良好互動(dòng)娄帖。

2.出現(xiàn)新信息

在十年后網(wǎng)站中，這一部分設(shè)計(jì)展示了各個(gè)分類的名稱昙楚，當(dāng)我們將鼠標(biāo)懸停在某個(gè)分類下近速，交互中會(huì)出現(xiàn)新的文字信息，然后文字整體向上移動(dòng)堪旧，向用戶展示了各個(gè)分類的熱門程度削葱。

如下圖：

當(dāng)用戶第一眼看到這部分時(shí)，版塊內(nèi)容干凈清晰淳梦，他可以直接點(diǎn)擊進(jìn)入自己感興趣的分類佩耳，而當(dāng)他不知道選擇哪個(gè)分類時(shí)，可以通過鼠標(biāo)懸停獲取新信息谭跨，以此了解每個(gè)分類的熱門程度。

網(wǎng)站顯得動(dòng)感，還為用戶提供了一種選擇方式螃宙。

3.按鈕效果

AnyForWeb網(wǎng)站頭部“關(guān)于我們”的設(shè)計(jì)為按鈕樣式蛮瞄，原本是紅色線框紅色文字，鼠標(biāo)懸停時(shí)則變?yōu)榘咨淖趾图t色按鈕的樣式谆扎。

這樣懸停效果展現(xiàn)了網(wǎng)站上獨(dú)特的小細(xì)節(jié)挂捅，用戶不經(jīng)意發(fā)現(xiàn)后，感受到一種趣味交互的體驗(yàn)堂湖。

4.文字懸停動(dòng)態(tài)效果

下面是網(wǎng)上幾個(gè)典型的文字Hover懸停效果闲先，希望能給設(shè)計(jì)師一些靈感。

在實(shí)際網(wǎng)站設(shè)計(jì)中无蜂，很多酷炫的交互效果都出自國(guó)外網(wǎng)站伺糠，歐美設(shè)計(jì)師注重交互設(shè)計(jì)和用戶體驗(yàn)，并在這些領(lǐng)域比國(guó)內(nèi)發(fā)展得更早斥季。不過目前國(guó)內(nèi)有些公司也開始關(guān)注這一塊训桶，一些新的中文網(wǎng)站開始出現(xiàn)很好的文字交互，成功吸引了很多用戶關(guān)注酣倾。

具備好交互的網(wǎng)站一定會(huì)越來(lái)越受到用戶青睞舵揭，也將會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展趨勢(shì)。

所以咱們?cè)O(shè)計(jì)師也要趕快行動(dòng)躁锡，通過不斷的學(xué)習(xí)和嘗試積累經(jīng)驗(yàn)午绳，再用一些些適用的小創(chuàng)意，讓我們?cè)O(shè)計(jì)的網(wǎng)頁(yè)Bling~Bling~