導航設計趨勢！關于圖標式導航的改進

不知不覺的，很多網頁設計中采用了圖標式導航（Navigation）——一般使用三道杠作為圖標，用以導航。
這種導航的好處是節省空間，讓界面更簡潔。

相關推薦：
網頁新趨勢：革命性的創新網頁導航設計
大型網站導航設計指南

圖標式導航的案例

這是YouTube 的圖標式導航(移動版):

這是Squarespace的圖標式導航：

AWARD的圖標式導航不拘一格：

問題所在

問題在于，點擊圖標式導航之后，圖標本身沒有任何變化。也就是說：操作缺乏反饋。

按鈕的狀態不同，樣式也不同，這樣才能有效引導用戶。

我們拿開關來舉例。開關也是一種按鈕，一般有兩種情況：

1 打開燈；
2 關閉燈；

所以說，圖標式導航的操作缺乏反饋。點擊圖標能實現兩種功能：展示導航菜單、關閉/隱藏導航菜單。那么圖標也應該有兩種外觀以做區分。

解決方案: 圖標轉換

可以采用這種方法來提供更明顯的視覺線索，從而更好的引導用戶操作。

這里有一個叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技術，其實技術上也不復雜，你若有心自己也能寫出來。

好處便在于:

§ 提供用戶視覺線索；
§ 圖標更具語義，一種圖標，一種狀態；
§ 優秀的動效轉換能夠吸引用戶注意，讓用戶迅速找到導航菜單。

對比一下，更有說服力，我用這種辦法對第案例3進行了改進：

更好的指引效果，其實不僅可以改變圖標形狀，改變圖標顏色不是也可以嗎？這里就不多說了，給大家一點想象的空間。
設計少不了思考，希望大家有所收獲。

原文地址：http://designinstruct.com/web-design/navicon-transformicons/
轉摘請注明優設網譯文出處，謝謝各位小編。

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