在 B 端產(chǎn)品做設(shè)計(jì)的時(shí)候，第一件事是決定界面的結(jié)構(gòu)布局，導(dǎo)航放在哪成為一件急需考慮的事情。典型的，有橫向?qū)Ш脚c縱向?qū)Ш街郑?ant design 來舉例，如下面 2 張圖所示。

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

△ 橫向?qū)Ш?/p>

橫向?qū)Ш?/span>

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

△ 縱向?qū)Ш?/p>

縱向?qū)Ш?/span>

優(yōu)點(diǎn)：

1. 能夠承載的菜單項(xiàng)數(shù)量和層級更多，擴(kuò)展性強(qiáng)。
2. 不占用屏幕高度且可以收起，為內(nèi)容提供更多空間。
3. 在菜單間切換時(shí)鼠標(biāo)移動(dòng)距離短。
4. 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備。

缺點(diǎn)：

1. 菜單數(shù)量多層級復(fù)雜時(shí)，不容易記憶。
2. 菜單選項(xiàng)文字不宜過長，可能會(huì)截?cái)唷?/li>
3. 各菜單選項(xiàng)之間的視覺權(quán)重差別不明顯。

他們都可以在已有的方向上進(jìn)行擴(kuò)展，如下圖：

△ 橫向?qū)Ш綌U(kuò)展

但總體來說，單獨(dú)的橫向?qū)Ш椒绞綄蛹壊荒艹^ 3 層，多于 3 級就不利于用戶的閱讀和選擇。

△ 縱向?qū)Ш綌U(kuò)展

相對于橫向，縱向的拓展性強(qiáng)，不管多少級都可以一直往下加，但層級高過于 3 層，用戶對導(dǎo)航的分辨和記憶會(huì)明顯下降。

當(dāng)然，有時(shí)候單獨(dú)只有橫向或者縱向一種導(dǎo)航不能完全滿足我們的需求，根據(jù)以上特點(diǎn)，我們也可以有如下組合的形式。

△ 組合導(dǎo)航

很明顯，這樣的組合導(dǎo)航，適用于一級導(dǎo)航不太多（最好少于 5 個(gè)）且內(nèi)容權(quán)重差別很明顯，一級導(dǎo)航之后的導(dǎo)航內(nèi)容和層級比較多且內(nèi)容復(fù)雜。

另外，如果嫌縱向?qū)Ш秸伎臻g，則可以考慮將縱向?qū)Ш阶龀煽烧郫B收起的模式，適用于貼著瀏覽器的縱向?qū)Ш健?/p>

△ 可折疊的縱向?qū)Ш?/p>

總結(jié)

• 橫向?qū)Ш揭子洃洝⒁卓矗鲗?dǎo)航權(quán)重區(qū)分明顯，越靠左越重要，但切換效率慢。
• 縱向?qū)Ш綌U(kuò)展性強(qiáng)，可折疊，各導(dǎo)航權(quán)重區(qū)分不明顯，切換效率更高。
• 如果兩者都不能單獨(dú)滿足，可嘗試組合的形式。

更多導(dǎo)航設(shè)計(jì)經(jīng)驗(yàn)：

歡迎關(guān)注作者的微信公眾號：「Sophia的玲瓏閣」