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

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

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

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

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

一個用戶在瀏覽一個網(wǎng)頁時，注意到某些文字，當(dāng)他用鼠標(biāo)懸停、滑過、單擊、拖動(交互行為)與文字(交互對象)互動時，看到文字發(fā)生了變化(交互反饋)。

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

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

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

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

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

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

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

接著正式介紹幾個文字交互效果的案例。

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

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

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

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

當(dāng)鼠標(biāo)懸停在按鈕文字上時，文字顏色和圖標(biāo)發(fā)生變化，用戶能明確這是一個鏈接。這類效果讓用戶體驗到和網(wǎng)站的互動，同時它還有一種號召力，暗示并鼓勵用戶去點擊嘗試。

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

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

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

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

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

如下圖：

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

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

3. 按鈕效果

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

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

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

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

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

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

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