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

　　我們這(zhè)裡(lǐ)所說的交互主要是指，用戶通過(guò)鼠标的懸停、滑動、單擊、拖動等交互方式來觸發(fā)事(shì)件，與目标對(duì)象産生互動。

　　天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

　　本系列文章關于網頁文字設計，我們就先分享文字的交互效果。

　　文字交互過(guò)程的場景應該是這(zhè)樣(yàng)的：

　　一個用戶在浏覽一個網頁時，注意到某些文字，當他用鼠标懸停、滑過(guò)、單擊、拖動(交互行爲)與文字(交互對(duì)象)互動時，看到文字發(fā)生了變化(交互反饋)。

　　這(zhè)些變化可以是字體大小變化、顔色發(fā)生改變，也可能(néng)是一些動态效果。好(hǎo)的交互效果能(néng)引起(qǐ)用戶的好(hǎo)奇心，增加他們浏覽網頁時長(cháng)，讓他們對(duì)你的網頁印象深刻。

　　說到文字顔色的變化，這(zhè)裡(lǐ)分享三個關于網頁文字顔色的小規範：

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

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

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

　　最最重要的一點是，規範可以靈活應用，但一定要考慮網頁的整體配色。

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

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

　　鼠标懸停時，文字顔色發(fā)生變化和出現下劃線很多時候用于網頁中的超鏈接，雖然大部分網站會將(jiāng)超鏈接文字顔色設置成(chéng)藍色帶下劃線的樣(yàng)式(常規、傳統、用戶習慣、易讀性高)，但這(zhè)并不是唯一的樣(yàng)式。

　　超鏈接除了需要在大段文字中脫穎而出，還(hái)應該考慮用戶的閱讀體驗。很多網站的超鏈接設計在提升用戶體驗上在不斷優化創新。

　　在M&M’s的活動網站中，按鈕中的小圖标本身就有動态效果，很容易吸引人的注意力。

　　當鼠标懸停在按鈕文字上時，文字顔色和圖标發(fā)生變化，用戶能(néng)明确這(zhè)是一個鏈接。這(zhè)類效果讓用戶體驗到和網站的互動，同時它還(hái)有一種(zhǒng)号召力，暗示并鼓勵用戶去點擊嘗試。

　　而在蘋果官網中，超鏈接的效果是鼠标懸停時文字出現下劃線。

　　雖然沒(méi)有特别設置文字顔色，但文字右側的小箭頭有一個引導作用，讓用戶明白這(zhè)裡(lǐ)可以點擊。當我們把鼠标放到文字上時，文字底部則出現一條和文字同顔色的下劃線，強化了鏈接的特征。

　　以上兩(liǎng)個案例分别采用了超鏈接的典型特征，即鼠标懸停時文字顔色變化、文字出現下劃線，這(zhè)樣(yàng)的形式可以實現與用戶的良好(hǎo)互動。

　　2. 出現新信息

　　在十年後(hòu)網站中，這(zhè)一部分設計展示了各個分類的名稱，當我們將(jiāng)鼠标懸停在某個分類下，交互中會出現新的文字信息，然後(hòu)文字整體向(xiàng)上移動，向(xiàng)用戶展示了各個分類的熱門程度。

　　當用戶第一眼看到這(zhè)部分時，版塊内容幹淨清晰，他可以直接點擊進(jìn)入自己感興趣的分類，而當他不知道(dào)選擇哪個分類時，可以通過(guò)鼠标懸停獲取新信息，以此了解每個分類的熱門程度。

　　網站顯得動感，還(hái)爲用戶提供了一種(zhǒng)選擇方式。

　　3. 按鈕效果

　　AnyForWeb網站頭部“關于我們”的設計爲按鈕樣(yàng)式，原本是紅色線框紅色文字，鼠标懸停時則變爲白色文字和紅色按鈕的樣(yàng)式。

　　這(zhè)樣(yàng)懸停效果展現了網站上獨特的小細節，用戶不經(jīng)意發(fā)現後(hòu)，感受到一種(zhǒng)趣味交互的體驗。

　　4.文字懸停動态效果

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

　　在實際網站設計中，很多酷炫的交互效果都(dōu)出自國(guó)外網站，他們注重交互設計和用戶體驗，并在這(zhè)些領域比國(guó)内發(fā)展得更早。不過(guò)目前國(guó)内有些公司也開(kāi)始關注這(zhè)一塊，一些新的中文網站開(kāi)始出現很好(hǎo)的文字交互，成(chéng)功吸引了很多用戶關注。

　　具備好(hǎo)交互的網站一定會越來越受到用戶青睐，也將(jiāng)會成(chéng)爲網頁設計的發(fā)展趨勢。

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

　　注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。