• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI培訓教程之面包屑設計指南

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-02-13 17:32

        不論是手機還是PC端,面包屑都是用來尋找路徑的重要組件,可以讓用戶了解當前頁面在整個網站結構的所處位置。NN/g 從 1995 年就開始推薦大家使用面包屑,因為它能在對界面設計產生極少影響的前提下,為用戶提供很多便利。

        面包屑設計指南

        如果一個用戶從首頁一層一層抵達最終頁面,也許 TA 對自己身處何處還算有概念。但是如果用戶從外部鏈接或者快捷入口進來,可能對當前的頁面層級一無所知,此時面包屑就能引導他們快速了解網站架構。

        一個底層頁面所展示出來的信息也許是非常精準片面的,而面包屑則能展示更大門類的信息,從而將用戶引向上層頁面。

        下文會按照PC端到手機端的順序,介紹十一條面包屑的設計指南。

        PC端

        1. 不要用面包屑代替導航頁簽

        網站導航和面包屑也許看起來有些相似,但是功能與使用場景完全不同,不應該以簡化頁面為目的只保留其中一個。

        面包屑設計指南

        2. 面包屑應該用來展示系統層級,而不是歷史記錄

        如果用戶是從首頁層層深入,系統層級與歷史記錄是沒有區別的,但是如果用戶從外部鏈接進入,這兩個差別就大了。為了給用戶提供真正有用的信息,面包屑展示的不應該是歷史記錄,而應該是系統層級。

        面包屑設計指南

        3. 如果網站有兩個父層級(如兩個同級首頁),應該只展示一個

        有的網站可能有兩個平級的首頁,這種情況下一定要選擇其中一個作為面包屑的第一項,同時列出兩個是不可取的。

        面包屑設計指南

        4. 當前頁一定是面包屑的最后一項

        不要覺得在面包屑上再寫一遍當前頁的標題就重復了信息,不太好,面包屑的最后一項如果不是當前頁,會讓用戶產生困惑的。

        面包屑設計指南

        5. 面包屑中最后一項(當前頁)不需要鏈接到自身

        面包屑的每一項都要放鏈接的,除了最后一項,因為放一個指向當前頁的鏈接不但沒有必要,還會讓用戶懷疑最后一項到底和當前頁是不是同一頁。

        面包屑設計指南

        6. 面包屑的層級應該是網站的頁面層級,而不是分類層級,也不應該包括無內容的導航頁

        邏輯上的父級(如商品上級分類),除非有真實的頁面存在,否則不需要放在面包屑里。此外,諸如網站地圖一類可有可無的層級,也最好不要加到面包屑里。

        面包屑設計指南

        7. 如果網站層級不多或沒有分支,就不需要面包屑了

        如果面包屑只有兩級,或者根本沒有分支,那么它存在的必要性就很小了。再考慮到網站簡潔美觀性,這時還不如不要面包屑。

        面包屑設計指南

        8. 面包屑的第一項應該鏈接首頁

        面包屑的第一項如果不是首頁,用戶可能會無疑問這個面包屑不可信或者該網站根本沒有首頁。

        面包屑設計指南

        手機端

        9. 不要把面包屑分行

        就算面包屑有點長,分行也絕對不是一個好的 idea。

        面包屑設計指南

        10. 不要用太小的文字

        縮小文字也許能夠展示更長的信息,但是用戶如果點擊不到或者看不清,面包屑存在的意義就沒有了。

        面包屑設計指南

        11. 可以考慮只保留上一級面包屑

        考慮到手機用戶的使用習慣和使用需求,可以不用把面包屑完整列出。

        面包屑設計指南

        總結

        面包屑是用戶尋找相關內容的輔助工具,對于從外部鏈接進入的場景十分有用。確保面包屑里每一項都可以點擊,并且可以查看同一層級的其它內容。在手機端,面包屑可能難以展示完全,可以根據用戶使用方式縮短其長度。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:UI教程之如何用C4D快速實現動畫風格?
        下一篇:UI培訓教程之表單設計的常見錯誤與解法

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>