讓酷炫的文字交互效果點(diǎn)亮你的網(wǎng)頁(yè)設(shè)計(jì)

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

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

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

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

一個(gè)用戶在瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，注意到某些文字，當(dāng)他用鼠標(biāo)懸停、滑過(guò)、單擊、拖動(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è)印象深刻。

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

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

> 正文的文字顏色為深灰色，建議選用#333333到#666666之間的顏色，若選用其他文字顏色作為正文主色調(diào)時(shí)，安全起見(jiàn)可采用明度不大于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)下劃線。

雖然沒(méi)有特別設(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í)，可以通過(guò)鼠標(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ì)和用戶體驗(yàn)，并在這些領(lǐng)域比國(guó)內(nèi)發(fā)展得更早。不過(guò)目前國(guó)內(nèi)有些公司也開(kāi)始關(guān)注這一塊，一些新的中文網(wǎng)站開(kāi)始出現(xiàn)很好的文字交互，成功吸引了很多用戶關(guān)注。

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

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