2014-2-24 藍藍設計的小編
轉載藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不知不覺的，很多網頁設計中采用了圖標式導航（Navigation）——一般使用三道杠作為圖標，用以導航界面設計。
這種導航的好處是節省空間，讓界面更簡潔。
圖標式導航的案例
這是YouTube的圖標式導航(移動版):
這是Squarespace的圖標式導航：
AWARD的圖標式導航不拘一格：
問題在于，點擊圖標式導航之后，圖標本身沒有任何變化。也就是說：操作缺乏反饋。
按鈕的狀態不同，樣式也不同，這樣才能有效引導用戶。
我們拿開關來舉例。開關也是一種按鈕，一般有兩種情況：
1 打開燈；
2 關閉燈；
所以說，圖標式導航的操作缺乏反饋。點擊圖標能實現兩種功能：展示導航菜單、關閉/隱藏導航菜單。那么圖標也應該有兩種外觀以做區分。
可以采用這種方法來提供更明顯的視覺線索，從而更好的引導用戶操作。
這里有一個叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技術，其實技術上也不復雜，你若有心自己也能寫出來。
好處便在于:
§ 提供用戶視覺線索；
§ 圖標更具語義，一種圖標，一種狀態；
§ 優秀的動效轉換能夠吸引用戶注意，讓用戶迅速找到導航菜單。
對比一下，更有說服力，我用這種辦法對第案例3進行了改進：
更好的指引效果，其實不僅可以改變圖標形狀，改變圖標顏色不是也可以嗎？這里就不多說了，給大家一點想象的空間。
ui設計少不了思考，希望大家有所收獲。
原文地址：http://m.skdbbs.com/