<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 導航設計趨勢!關于圖標式導航的改進

    2014-2-24    藍藍設計的小編

     

    轉載藍藍設計(   www.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://www.skdbbs.com/

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 久久亚洲国产精品123区| 亚洲国产综合91精品麻豆| 国产精品一级片| 亚洲精品二三区| 国产精品亚洲不卡一区二区三区| 99热精品在线观看| 日韩精品国产另类专区| 久久久人妻精品无码一区| 视频二区国产精品职场同事| 久久婷婷国产综合精品| 亚洲欧洲精品成人久久奇米网| 国产精品无码免费专区午夜| 欧美久久精品一级c片片| 国产精品多p对白交换绿帽| 亚洲欧美精品AAAAAA片| 四虎成人精品在永久在线| 国产三级精品三级在专区| 91无码人妻精品一区二区三区L| 国产AV午夜精品一区二区三区 | 精品无码国产一区二区三区51安 | 亚洲一区爱区精品无码| 国产网红无码精品视频| 手机日韩精品视频在线看网站| 精品无码久久久久久久久久 | 久久精品无码专区免费东京热| 亚洲欧美日韩国产一区二区三区精品| 人妻无码精品久久亚瑟影视| 久久久久亚洲精品男人的天堂 | 99久久综合国产精品二区| 四虎成人精品免费影院| 欧美日韩精品一区二区在线播放 | 精品人妻少妇一区二区三区在线 | 国产精品视频网站你懂得| 91精品国产91久久久久福利| 成人精品一区二区三区中文字幕 | 精品中文高清欧美| 麻豆国内精品久久久久久| 欧美精品91欧美日韩操| 午夜精品久久影院蜜桃| 综合国产精品第一页| 日韩精品国产另类专区|