編輯導語：在導航欄的設計中，側邊縱向導航是比較常見的，像Elemnet和 Ant Design 這兩大熱門組件，就都使用了側邊縱向導航。為什么側邊縱向導航好呢？一起來看一下吧。

最近一直在做后臺的項目，經歷為數不多的項目中，大部分項目都使用的Elemnet或者Ant Design。

作為兩大熱門組件，其導航欄的設計，都使用了側邊縱向導航。于是今天就來探究一下，為什么側邊縱向導航好？

01 導航是什么？我們?yōu)槭裁葱枰?/h2>

在了解側邊縱向導航之前，我們需要搞清楚兩個問題，導航是什么？我們?yōu)槭裁葱枰獙Ш剑?/p>

• Element中關于導航定義：導航可以解決用戶在訪問頁面時，在哪里？去哪里？怎樣去的問題。
• Ant Design關于導航的定義：導航用來展示當前產品中，用戶在哪兒？可以去哪兒？

從上述回答，你可以了解到什么叫做導航了，那么我們接著看看現實生活中的導航是什么樣的。

當你逛街時，路牌+商場地圖+購物目標這三要素構成了你的路徑，你可以清晰地達到目的地完成自己的購物行為。在現實生活中，這樣的行為每天都被重復，非常常見。路牌+商場地圖+購物目標也就構成了一個導航。

你通過路牌知道了我在哪里，通過商場地圖知道了我要去哪，通過購物目標完成了最終的購買行為。

現實中因為一切事物都具有地理位置的對照以及實物，所以你并不容易迷失，當然路癡一樣可能會迷失。可是在網絡上，在你瀏覽某個網頁或者應用時，由于并不存在實際的產品給你，所以一旦沒有導航，你可能就會迷失在一次點擊之后，或是遺忘你當前的頁面記錄，導致你無法找到自己想要瀏覽的東西。

這個時候，導航的作用就凸現出來了，它記錄了你當前的位置，告訴你，你應該怎么去到自己想要去的地方。

02 側邊縱向導航為什么常見且好用？

在了解完導航的定義及其作用之后，我們現在需要來想一想，我們常見的導航有哪些類型？我們如何在合適的場景下去使用它們？

在B端系統(tǒng)當中，常見的導航欄有兩類：縱向導航、橫向導航。如下圖所示：

除此之外還有更多基于上述兩個導航欄拓展出來的導航欄，比如更多目錄，縮放、疊放等等，但是它們的原型都是上述兩個導航，只不過是適用于不同場景而做的的拓展。

那么為什么B端系統(tǒng)的導航欄都會選用側邊和頂部呢？這里需要借助一個新的知識點：F模式。

F形狀網頁瀏覽模式源自美國網站設計工程師杰柯伯·尼爾森在2006年4月發(fā)表的《眼睛軌跡的研究》報告。

F模式是指人們在網頁上瀏覽內容時，往往會遵循F字母的觀察模式：

1. 讀者的眼睛首先是水平運動，常常是掃過網頁內容的最上半部分，這樣就形成了一條橫向的運動軌跡。這就是F字母的第一條橫線。
2. 讀者的眼光略微下移，很典型地掃描比第一步范圍較短的區(qū)域。這就又畫了F字母中的第二條橫線。
3. 讀者朝網頁左邊的部分進行垂直掃描。有時候，這個舉動很慢而且很有系統(tǒng)性，這樣就畫了F字母中的一條豎線。

通過這次實驗，我們可以得出一個結論，那就是縱向或者橫向，能夠讓瀏覽者第一時間注意到，這也是為什么我們需要讓導航置頂，或者保持在側邊欄的一個因素。因為這些地方，會被瀏覽者重點關注。

那么為什么側邊導航會比橫向導航要好呢？我們可以從兩個方面來探究：布局和適配。

1. 布局

從布局角度來說，橫向導航有優(yōu)勢，因為橫向導航欄占據的位置非常小，通常只有一行內容。

而側邊導航欄則不同，往往需要占據一個頁面的 1/5 來做展示，會更多影響其他的內容。

但是這里面橫向導航欄有一個缺點無法避免，那就是一旦導航欄內容過多時，用戶的操作就會非常不方便，需要滾動或者隱藏后續(xù)內容，導致操作成本和認知成本過高。

2. 適配

從適配角度而言，現在多端場景越來越常見，那么橫向導航會面臨一個非常大的問題，當從PC端遷移至移動端時，因為LOGO、用戶頭像、狀態(tài)圖等信息占據頭部橫向位置，導致導航欄的內容會被進一步壓縮。

這個時候，用戶操作成本進一步提高，當導航內容過多時，用戶需要來回滑動自己的手機屏幕找到自己的位置，這違背了導航的初衷，即明確自己在哪，指引用戶到自己想去的地方。

而側邊導航欄則可以避免這個問題，側邊導航往往只有展開和收起兩個狀態(tài)，遷移到不同端上時，我們只需要讓側邊欄合理的展示對應的內容即可，用戶可以進行一定程度上的自定義，因為側邊欄往往并不需要和其他元素共用位置。

03 總結

無論是側邊導航還是橫向導航，它們的作用都是清晰的，指引用戶。我們應該基于此目的來設計導航，在合適的場景下去使用合適的導航，當導航內容過多，且使用多端設備時，我們應該更多的考慮側邊縱向導航，因為它的兼容性和操作成本更少。

當你的導航內容不多，且頁面瀏覽內容較多時，那么我們應該考慮橫向導航，提高頁面的利用率，降低導航欄所占據的版面位置。

當然無可否認的是，這兩種導航欄方式都是極其好的。

更重要的一點是，我們應該保持一個系統(tǒng)內的不同頁面之間導航欄一致，千萬不能出現A頁面使用縱向導航，B頁面使用橫向導航的情況。統(tǒng)一使用有利于用戶操作，也方便我們做優(yōu)化。

本文由 @子 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議