在 B 端產品做設計的時候,第一件事是決定界面的結構布局,導航放在哪成為一件急需考慮的事情。典型的,有橫向導航與縱向導航之分,拿 ant design 來舉例,如下面 2 張圖所示。

兩者看起來都行,但選擇哪個,心里會有第一眼的直覺,但光有直覺不行,還得羅列個 123 出來,這樣展示方案的時候,才能服己服人。

△ 橫向導航

橫向導航

優點:

  1. 通常使用比較少的菜單,簡單,容易記憶。
  2. 位于頁面頂部,不占用橫向空間。
  3. 由于位于頂部,在視覺上更突出,更容易識別。
  4. 菜單選項之間視覺權重的區分更明顯,左邊最強右邊最弱。

缺點:

  1. 擴展性有限,不能很好地承載大量和多層級菜單。
  2. 占用屏幕高度,特別是當固定于屏幕頂部時。
  3. 來回切換菜單選項時,橫向移動鼠標的距離更長,操作效率更低。

△ 縱向導航

縱向導航

優點:

  1. 能夠承載的菜單項數量和層級更多,擴展性強。
  2. 不占用屏幕高度且可以收起,為內容提供更多空間。
  3. 在菜單間切換時鼠標移動距離短。
  4. 能夠更好地適應屏幕寬度較小的設備。

缺點:

  1. 菜單數量多層級復雜時,不容易記憶。
  2. 菜單選項文字不宜過長,可能會截斷。
  3. 各菜單選項之間的視覺權重差別不明顯。

他們都可以在已有的方向上進行擴展,如下圖:

△ 橫向導航擴展

但總體來說,單獨的橫向導航方式層級不能超過 3 層,多于 3 級就不利于用戶的閱讀和選擇。

△ 縱向導航擴展

相對于橫向,縱向的拓展性強,不管多少級都可以一直往下加,但層級高過于 3 層,用戶對導航的分辨和記憶會明顯下降。

當然,有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求,根據以上特點,我們也可以有如下組合的形式。

△ 組合導航

很明顯,這樣的組合導航,適用于一級導航不太多(最好少于 5 個)且內容權重差別很明顯,一級導航之后的導航內容和層級比較多且內容復雜。

另外,如果嫌縱向導航占空間,則可以考慮將縱向導航做成可折疊收起的模式,適用于貼著瀏覽器的縱向導航。

△ 可折疊的縱向導航

總結

  • 橫向導航易記憶、易看,各導航權重區分明顯,越靠左越重要,但切換效率慢。
  • 縱向導航擴展性強,可折疊,各導航權重區分不明顯,切換效率更高。
  • 如果兩者都不能單獨滿足,可嘗試組合的形式。

更多導航設計經驗:

歡迎關注作者的微信公眾號:「Sophia的玲瓏閣」

點贊 11
收藏 60
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏