不知不覺(jué)的，很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡(jiǎn)潔。

相關(guān)推薦：
網(wǎng)頁(yè)新趨勢(shì)：革命性的創(chuàng)新網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)
大型網(wǎng)站導(dǎo)航設(shè)計(jì)指南

圖標(biāo)式導(dǎo)航的案例

這是YouTube 的圖標(biāo)式導(dǎo)航(移動(dòng)版):

這是Squarespace的圖標(biāo)式導(dǎo)航：

AWARD的圖標(biāo)式導(dǎo)航不拘一格：

問(wèn)題所在

問(wèn)題在于，點(diǎn)擊圖標(biāo)式導(dǎo)航之后，圖標(biāo)本身沒(méi)有任何變化。也就是說(shuō)：操作缺乏反饋。

按鈕的狀態(tài)不同，樣式也不同，這樣才能有效引導(dǎo)用戶。

我們拿開關(guān)來(lái)舉例。開關(guān)也是一種按鈕，一般有兩種情況：

1 打開燈；
2 關(guān)閉燈；

所以說(shuō)，圖標(biāo)式導(dǎo)航的操作缺乏反饋。點(diǎn)擊圖標(biāo)能實(shí)現(xiàn)兩種功能：展示導(dǎo)航菜單、關(guān)閉/隱藏導(dǎo)航菜單。那么圖標(biāo)也應(yīng)該有兩種外觀以做區(qū)分。

解決方案: 圖標(biāo)轉(zhuǎn)換

可以采用這種方法來(lái)提供更明顯的視覺(jué)線索，從而更好的引導(dǎo)用戶操作。

這里有一個(gè)叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技術(shù)，其實(shí)技術(shù)上也不復(fù)雜，你若有心自己也能寫出來(lái)。

好處便在于:

§ 提供用戶視覺(jué)線索；
§ 圖標(biāo)更具語(yǔ)義，一種圖標(biāo)，一種狀態(tài)；
§ 優(yōu)秀的動(dòng)效轉(zhuǎn)換能夠吸引用戶注意，讓用戶迅速找到導(dǎo)航菜單。

對(duì)比一下，更有說(shuō)服力，我用這種辦法對(duì)第案例3進(jìn)行了改進(jìn)：

更好的指引效果，其實(shí)不僅可以改變圖標(biāo)形狀，改變圖標(biāo)顏色不是也可以嗎？這里就不多說(shuō)了，給大家一點(diǎn)想象的空間。
設(shè)計(jì)少不了思考，希望大家有所收獲。

原文地址：http://designinstruct.com/web-design/navicon-transformicons/
轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量56萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：