2022-9-2 純純
在B端產品做設計的時候，第一件事是決定界面的結構布局，導航放在哪成為一件亟需要考慮的事情。典型的，有橫向導航與縱向導航之分，拿ant design來舉例，如下面2張圖所示；
兩者看起來都行，但選擇哪個，心理會有第一眼的直覺，但光有直覺不行，還得羅列個123出來，這樣展示方案的時候，才能服己服人。
橫向導航
優點：
通常使用比較少的菜單，簡單，容易記憶；
位于頁面頂部，不占用橫向空間；
由于位于頂部，在視覺上更突出，更容易識別；
菜單選項之間視覺權重的區分更明顯，左邊最強右邊最弱；
缺點：
擴展性有限，不能很好的承載大量和多層級菜單；
占用屏幕高度，特備是當固定于屏幕頂部時；
來回切換菜單選項時，橫向移動鼠標的距離更長，操作效率更低；
縱向導航
優點：
能夠承載的菜單項數量和層級更多，擴展性強；
不占用屏幕高度且可以收起，為內容提供更多空間；
在菜單間切換時鼠標移動距離短；
能夠更好地適應屏幕寬度較小的設備；
缺點：
菜單數量多層級復雜時，不容易記憶；
菜單選項文字不宜過長，可能會截斷；
各菜單選項之間的視覺權重差別不明顯。
他們都可以在已有的方向上進行擴展，如下圖
橫向導航擴展
但總體來說，單獨的橫向導航方式層級不能超過3層，多于3級就不利于用戶的閱讀和選擇。
縱向導航擴展
相對于橫向縱向的拓展性強，不管多少級都可以一致往下加，但層級高過于3層，用戶對導航的分辨和記憶會明顯下降。
當然，有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求，他們有那么，根據以上特點，我們也可以有如下組合的形式。
組合導航
很明顯，這樣的組合導航，適用于一級導航不太多（做好少于5個）且內容權重差別很明顯，一級導航之后的導航內容和層級比較多且內容復雜。
另外，如果嫌縱向導航占空間，則可以考慮將縱向導航做成可折疊收起的模式，適用于貼著瀏覽器的縱向導航。
可折疊的縱向導航
總結一下：
橫向導航易記憶、易看，各導航權重區分明顯，越靠左越重要，但切換效率慢； 2.縱向導航擴展性強，可折疊，各導航權重區分不明顯，切換效率更高；3.如果兩者都不能單獨滿足，可嘗試組合的形式。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：Sophia的玲瓏閣 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司