摩登3注册-摩登3测速官网在 B 端產品做設計的時候，第一件事是決定界面的結構布局，導航放在哪成為一件急需考慮的事情。典型的，有橫嚮導航與縱嚮導航之分，拿 ant design 來舉例，如下面 2 張圖所示。
兩者看起來都行，但選擇哪個，心裏會有第一眼的直覺，但光有直覺不行，還得羅列個 123 出來，這樣展示方案的時候，才能服己服人。
△ 橫嚮導航
橫嚮導航
優點：
- 通常使用比較少的菜單，簡單，容易記憶。
- 位於頁面頂部，不佔用橫向空間。
- 由於位於頂部，在視覺上更突出，更容易識別。
- 菜單選項之間視覺權重的區分更明顯，左邊最強右邊最弱。
缺點：
- 擴展性有限，不能很好地承載大量和多層級菜單。
- 佔用屏幕高度，特別是當固定於屏幕頂部時。
- 來回切換菜單選項時，橫向移動鼠標的距離更長，操作效率更低。
△ 縱嚮導航
縱嚮導航
優點：
- 能夠承載的菜單項數量和層級更多，擴展性強。
- 不佔用屏幕高度且可以收起，為內容提供更多空間。
- 在菜單間切換時鼠標移動距離短。
- 能夠更好地適應屏幕寬度較小的設備。
缺點：
- 菜單數量多層級複雜時，不容易記憶。
- 菜單選項文字不宜過長，可能會截斷。
- 各菜單選項之間的視覺權重差別不明顯。
他們都可以在已有的方向上進行擴展，如下圖：
△ 橫嚮導航擴展
但總體來說，單獨的橫嚮導航方式層級不能超過 3 層，多於 3 級就不利於用戶的閱讀和選擇。
△ 縱嚮導航擴展
相對於橫向，縱向的拓展性強，不管多少級都可以一直往下加，但層級高過於 3 層，用戶對導航的分辨和記憶會明顯下降。
當然，有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求，根據以上特點，我們也可以有如下組合的形式。
△ 組合導航
很明顯，這樣的組合導航，適用於一級導航不太多（最好少於 5 個）且內容權重差別很明顯，一級導航之後的導航內容和層級比較多且內容複雜。
另外，如果嫌縱嚮導航占空間，則可以考慮將縱嚮導航做成可摺疊收起的模式，適用於貼着瀏覽器的縱嚮導航。
△ 可摺疊的縱嚮導航
總結
- 橫嚮導航易記憶、易看，各導航權重區分明顯，越靠左越重要，但切換效率慢。
- 縱嚮導航擴展性強，可摺疊，各導航權重區分不明顯，切換效率更高。
- 如果兩者都不能單獨滿足，可嘗試組合的形式。
更多導航設計經驗：
6000 字乾貨！B端產品的導航菜單設計5步法
導航菜單設計對用戶使用、體驗都尤為重要，來看高手經驗的全面總結，更新你的導航菜單知識體系，全程乾貨，快來學習！
閱讀文章 >>
歡迎關注作者的微信公眾號：「Sophia的玲瓏閣」
未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5首頁_該用哪類B端設計導航？來看這份對比！
