2014-2-24 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.dzxscac.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
不知不覺(jué)的，很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航界面設(shè)計(jì)。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡(jiǎn)潔。
這是YouTube的圖標(biāo)式導(dǎo)航(移動(dòng)版):
這是Squarespace的圖標(biāo)式導(dǎo)航：
AWARD的圖標(biāo)式導(dǎo)航不拘一格：
問(wèn)題在于，點(diǎn)擊圖標(biāo)式導(dǎo)航之后，圖標(biāo)本身沒(méi)有任何變化。也就是說(shuō)：操作缺乏反饋。
按鈕的狀態(tài)不同，樣式也不同，這樣才能有效引導(dǎo)用戶。
我們拿開(kāi)關(guān)來(lái)舉例。開(kāi)關(guān)也是一種按鈕，一般有兩種情況：
1 打開(kāi)燈；
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ū)分。
可以采用這種方法來(lái)提供更明顯的視覺(jué)線索，從而更好的引導(dǎo)用戶操作。
這里有一個(gè)叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技術(shù)，其實(shí)技術(shù)上也不復(fù)雜，你若有心自己也能寫(xiě)出來(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)想象的空間。
ui設(shè)計(jì)少不了思考，希望大家有所收獲。
原文地址：http://m.dzxscac.cn/
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.dzxscac.cn