圖標(biāo)式導(dǎo)航的案例
這是YouTube 的圖標(biāo)式導(dǎo)航(移動版):
這是Squarespace的圖標(biāo)式導(dǎo)航：
AWARD的圖標(biāo)式導(dǎo)航不拘一格：
問題所在
問題在于，點擊圖標(biāo)式導(dǎo)航之后，圖標(biāo)本身沒有任何變化。也就是說：操作缺乏反饋。
按鈕的狀態(tài)不同，樣式也不同，這樣才能有效引導(dǎo)用戶。
我們拿開關(guān)來舉例。開關(guān)也是一種按鈕，一般有兩種情況：
1 打開燈;
2 關(guān)閉燈;
所以說，圖標(biāo)式導(dǎo)航的操作缺乏反饋。點擊圖標(biāo)能實現(xiàn)兩種功能：展示導(dǎo)航菜單、關(guān)閉/隱藏導(dǎo)航菜單。那么圖標(biāo)也應(yīng)該有兩種外觀以做區(qū)分。
解決方案: 圖標(biāo)轉(zhuǎn)換
可以采用這種方法來提供更明顯的視覺線索，從而更好的引導(dǎo)用戶操作。
這里有一個叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技術(shù)，其實技術(shù)上也不復(fù)雜，你若有心自己也能寫出來。
好處便在于:
§ 提供用戶視覺線索;
§ 圖標(biāo)更具語義，一種圖標(biāo)，一種狀態(tài);
§ 優(yōu)秀的動效轉(zhuǎn)換能夠吸引用戶注意，讓用戶迅速找到導(dǎo)航菜單。
對比一下，更有說服力，我用這種辦法對第案例3進行了改進：
更好的指引效果，其實不僅可以改變圖標(biāo)形狀，改變圖標(biāo)顏色不是也可以嗎?這里就不多說了，給大家一點想象的空間。
設(shè)計少不了思考，希望大家有所收獲。