<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

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

          2013-11-15    藍藍設計的小編

          轉載藍藍設計(   www.syprn.cn  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的   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進行了改進:

          更好的指引效果,其實不僅可以改變圖標形狀,改變圖標顏色不是也可以嗎?這里就不多說了,給大家一點想象的空間。

          設計少不了思考,希望大家有所收獲。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合