編輯導讀：導航欄是用戶對產品架構了解的第一途徑，是作為產品各個功能之間的橋梁，能夠對產品功能進行分發、引導。本文作者以B端產品的導航欄為例，對其進行分析，希望對你有幫助。

一、定義

B 端導航欄，是 B 端產品最重要的模塊，對于大多數用戶來說，使用B端產品主要是對具體功能進行操作，而導航欄作為產品各個功能的橋梁，他的作用是對產品功能進行分發、引導，讓用戶可以高效、準確的在各模塊間穿梭。

導航欄的作用可以歸納為以下4點：

• 作用一：這里有什么，告訴用戶這里有些什么，導航欄通過將功能結構可視化的方法，告知用戶產品有哪些功能；
• 作用二：我在哪里，確定用戶的位置，好的導航會告訴用戶當前所處位置，避免迷路；
• 作用三：怎么去，告訴用戶如何使用，好的導航能夠幫助用戶規劃行程，執行完這一步操作后，下一步該去哪操作，幫用戶快速找到所需內容；
• 作用四：怎么回，告訴用戶怎么返回，逆向導航，告知用戶路徑或者規劃好用戶的返回路徑，讓用戶可以無感回到起始頁面。

二、菜單

B端產品設計中，導航欄是功能菜單的載體，核心是功能。因此在進行導航欄設計時，一個非常重要的前提就是要對菜單進行規劃，整理。

2.1 菜單的歷史變遷

2.2 整理菜單

導航欄設計，必然要滿足 “導航” 這個核心目標，組件的樣式、交互必須為功能服務。通常情況下，導航是反映產品功能模塊的入口，產品中包含多少模塊、子模塊，就需要有序的布置到導航里面。我們可以通過思維導圖的將菜單羅列出來，思維導圖能解釋不同功能層級的結構和從屬關系，尤其是當菜單數量多，且層級超過兩級的時候，思維導圖就顯得很有必要了。

理想狀態下，導航菜單建議最多不要超過 9 個，最少不要低于5個。

根據“7±2原則”描述明確到：在導航菜單當中，超過 9 個會給用戶查找時帶來困難，低于 5 個說明導航菜單的分配效率不夠高效。但在實際業務中，很多時候會超過9個菜單，這時需要對菜單進行分組，因為導航過多，用戶尋找會十分迷茫，通過分組的方式，能夠對菜單進行再次分類，提高查找效率。

7±2原則解釋：1956 年喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。

2.3 菜單的深度和廣度

當菜單廣度過大，我們也能夠通過設計的方法來優化導航菜單，

• 方法一：增加搜索欄，篩選菜單；
• 方法二：千人千面，據用戶角色的不同，展示不同的菜單，大部分 B 端用戶并不需要使用到全部功能菜單，管理員可以根據自身公司的業務不同，給用戶配置出不同的角色權限予以滿足用戶的導航需求，這樣在設計層面上能夠減少很多不必要的麻煩。

某云目前擁有大概100+功能，這些都需要在導航菜單上顯示，因此在導航設計上，它的模式是：全部菜單導航+搜索菜單

2.4 導航菜單不能隱藏超過兩級

導航菜單隱藏超過兩級時，代表著產品在用戶的使用規劃中，沒有深入思考整個用戶體驗，導航菜單層級越多，用戶查找就會越慢，有一些三級導航的菜單，會通過設計優化來實現隱藏導航的合并，從而減少用戶操作負擔。

三、導航

3.1 導航欄-PC

多種導航欄類型，該如何選擇？功能型產品適合側邊導航，側邊導航效率高、遲疑和錯誤更少，用戶也普遍比較喜歡，信息型產品適合頂部導航，比如門戶網站。

Jennifer Rose Kingsburg 曾經對網頁的三級菜單導航進行過一份研究，結論是左側導航相對頂部導航優點更多些

3.1.1 側邊導航欄

將菜單欄放置在左側，頁面布局上基本為左右結構，側邊導航在國內產品中最為常見，國內廠商對于側邊欄導航的尤為偏愛，也就造成了現在 B 端產品的發展也逐漸趨同。

那么為什么國內B端為什么大多數是側邊導航欄呢？我把這種現象歸納為以下3個原因：

• 原因一：中文文字寬度較短，側邊導航能最大發揮出他的優勢，能最大限度減少空間的使用率；
• 原因二：國內的業務復雜，以及對于擴展性的要求較高，每個企業都想做一個又大又全的產品，因此側邊導航欄更加適合國內的實際需求；
• 原因三：一級導航在左側時，效率高、遲疑和錯誤更少，用戶追求的是使用產品完成目標任務，注重的是功能完整性和操作便捷性。

3.1.2 頂部導航欄

將菜單欄放置在頂部，頁面布局上基本為上下結構，頂部導航早期出現于各類門戶網站，比如企業官網，各種咨詢類的網站經常會采取這樣的導航形式。頂部導航通常在B端產品中也是十分常見的，但還是以國外產品最為集中。

3.1.3 混合導航欄

將頂部導航與側邊導航進行結合。通常將一級導航菜單放置頂部，通過一級菜單的點擊后，展示側邊的二、三級菜單。在一些產品擁有復雜的邏輯關系，菜單之間關系分明的產品中，混合導航也是一個不錯的選擇。

3.2 導航欄-APP

3.2.1 拇指熱區

移動端的交互都在手掌上完成，因此，在對移動端產品進行設計時，手勢是不可忽略的一部分。

拇指熱區概念來源于交互大神 Steve Hoober 的一個觀察實驗，他發現在手機大屏時代，大部分的用戶是以下圖的方式抓握手機：以拇指的底部為支點，抵在手機的右下角。

設計導航系統的時候，也會遵循拇指熱區的原則，把主要功能放在綠色區域，輔助功能放在黃色或者紅色區域。

3.2.2 底部導航欄

APP最常使用的導航模式，用于一級目錄的導航，位于頁面底部，無論用戶單手還是雙手操作都能輕松點擊，能告訴用戶當前位置及用戶切換統一層級之間的不同模塊。底部Tab欄具有很強的包容性，可以形成最基本的信息框架，然后用其他的導航模式來承載具體的功能和內容。展現形式有文字 + icon，也有純icon形式，大部分是文字+icon，可能是減少用戶記憶負擔。

優點：可以在第一時間讓用戶了解使用頻率最高、最重要的功能和信息，同時能夠支持用戶在不同模塊之間的快速切換。

缺點：底部導航欄超過5個就容易引起誤點操作，同時在底部會占據一定的屏幕空間。

3.2.3 底部（舵式）拓展欄

為了突出中間的功能，把Tab做的比較突出，鼓勵用戶更多使用該功能。常見的APP如某魚、某乎等使用了這種導航欄，把第三個Tab標簽做的更加突出，放進了一些常用的功能。

優點：可以提高導航欄趣味性，讓用戶貢獻更多的內容。

缺點：此類導航也是一種二級導航，既然是重要功能為什么會放在二級導航呢？把重要功能放在二級界面，會增加用戶的記憶負擔以及操作負擔。

3.2.4 頂部Tab欄

用于展示同一模塊下不同類別的信息或者篩選不用模塊的信息，一般二級導航且支持左右滑動。

優點：可以很好地扁平化信息層級，讓用戶可以迅速實現同一模塊下不同類別信息之間的切換并且不會迷失方向。

缺點：位于頂部切換起來不是很方便，同時占據空間，導致屏幕可展現區域變少。

3.2.5 側邊（矩式）導航欄

通常針對產品偏沉浸式閱讀的情況下使用，主導航模塊切換頻率低，放入其中的模塊使用頻率低。常與底部標簽式導航組合使用，將一級頁面內的信息再細分，給人以清晰的呈現方式。通過把非核心功能的低頻操作都放到一個抽屜里，使得用戶獲得沉浸式的體驗，而且能夠集中用戶的注意力，讓用戶去更好地完成核心功能，不被打擾。

優點：用戶可以將注意力放在首頁，減少其他類型的導航帶來分散用戶注意力的情況，給用戶更沉浸式的操作感和閱讀感，同時可以最大限度利用屏幕空間。

缺點：側邊導航屬于二級導航，用戶使用的頻率會降低，不利于產品頁面流量的最大化，越放在下面的功能點擊率越低，如果產品框架比較大，有很多功能需要推廣時，一般不用此類導航。

3.2.6 列表式導航欄

通常用來展示某個具體模塊內容的信息進行分類，以列表的形式呈現大量的條目。多用于輔助主導航來展現信息甚至更多層次的內容，有時候需要一些提示信息。

優點：

• 列表式結構具有很強的延展性，調整的彈性高，菜單的排序更符合人的閱讀習慣，它的導航效率高；
• 可以引入字母索引，在菜單很多時對菜單進行二次分類。

缺點：承載的信息種類比較單一，容易引起用戶的單調感，很難讓用戶長時間停留，如果列表中蘊含的信息量比較龐大，往往需要加入搜索功能或者索引，否則用戶會遇到尋找信息的困難。

3.2.7 宮格式導航欄

一般作為信息或平臺的入口，為產品或項目信息提供聚合的載體，適合承載訂閱類產品或眾多屬性差異非常明顯的分類信息，此類導航信息的呈現內容比較少，但是每個項目選取的效率比較高。

優點：

• 可以通過入口來進行流量的分發，具有較強的延展性，可以無限擴展內容；
• 可以劃分多個內容、多個模式，由不同團隊獨立開發每個模塊再聚合。

缺點：

• 宮格式結構是信息或平臺的入口，所以具體的信息往往隱藏在下一級界面，用戶無法第一時間看到信息，會增加用戶的認知成本；
• 同時多個入口的情況下用戶選擇壓力大，不同入口之間缺乏聯動性，有可能會增加用戶的操作。

3.2.8 卡片式導航欄

宮格式導航的一種延展形式，通過增加內容的可視化程度讓每個條目呈現更多的信息。它能根據頁面內容的變化及時更新圖片，適合以圖片為主的內容，像新聞、美食、旅行、視頻圖片等經常使用，常作為二級導航。

優點：對運營量的要求比較低，而且單個條目的轉化率會相應的提高。

缺點：當運營量較大的時候，這種結構會降低用戶尋找信息的效率。

3.2.9 輪播（平鋪）式導航

適用于足夠扁平化的內容和隨意瀏覽的閱讀模式，將所有信息平鋪在一個頁面，很容易帶來高大上的視覺體驗。

優點：最大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換的手勢，操作起來也非常方便。

缺點：用戶只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，容易迷失位置。

四、設計落地-以PC端為例

4.1 第一步：整理層級框架

制定出一個能滿足層級顯示和操作的交互結構出來，值得注意的是，導航選項中，并不是所有的選項都是用來跳轉的，有的菜單是用來輔助區分內容和用來展開的，我們可以在菜單上標注說明。

4.2 第二步：思維導圖提取信息

現狀：一級菜單11個，二級菜單37個，最多有三級，產品經理反饋二期會有新增功能

分析：一級菜單目前11個已經超過頂部導航的顯示范圍，且后續會不定數量新增，考慮到導航的擴展性及容納性，側邊導航可能更適合產品本身

4.3 第三步：設計導航欄

整理好上方的內容層級，到具體設計步驟里，首先要做的，就是制定出一個能滿足層級顯示和操作的交互結構出來。

再整理一遍，側邊欄的內容包含：

• 不可點擊的分類標題
• 可以展開的一級分類
• 可以實現跳轉的一級分類
• 可以點擊的二級分類

而可交互的元素，對應的交互狀態就包括：

• 鼠標懸浮一級菜單樣式
• 鼠標懸浮二級菜單樣式
• 選中一級分類，一級分類高亮
• 展開一級并選中二級分類，二級分類高亮

先用原型做個示意，它的狀態包含了默認、選中一級、選中二級三種情況：

4.4 第四步：導航欄的選中樣式

菜單的選中樣式是指示用戶當前所處位置的重要因素

設計時要注意：

• 子級和父級之間的區分
• 懸停狀態與選中狀態的區分
• 如果有懸停展開的子級，就要注意，顯示懸停菜單時，一級菜單盡量不出現背景填充的樣式。

4.5 第五步：功能拓展

前面提到，產品二期會有新功能上線，后面還會有三期、四期…需要考慮導航欄的可拓展性，功能太多該怎么調整？

思考方向：側欄如何容納超過一屏的菜單？如何快速找到我想要的功能？

解決方案1：單一用戶或角色所需要使用的功能菜單一般只有幾個，管理員可以針對角色或用戶進行權限配置，特定角色展示特定菜單；

解決方案2：可以增加搜索欄，對菜單進行快速查找。

4.6 最后落地

通過上述的分析與整理，便得出能滿足我們現有功能的導航欄。

注意踩坑：如果一種導航模式用起來不夠好用，是否需要在重構時切換到另外一種模式呢？根據 Jira 的用戶測試，95% 的老用戶對于這種情況會感到非常迷惑，即使是再小的導航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導航模式，一旦選定，盡量不要改變，所以在選擇使用何種導航時，一定要結合產品的特性來謹慎選擇。

Jira的用戶測試：https://link.uisdc.com/?redirect=https://community.atlassian.com/t5/Jira-articles/A-better-navigation-for-Jira-Cloud-is-coming-soon-available-now/ba-p/1216077

五、逆向導航

橫向導航和前進導航分別指引用戶操作的水平漸進和層級漸進，逆向導航則負責對反向軌跡進行定義和實施，三者結合，實現對頁面的全局操控。

PC產品，通過頁面常駐的導航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉。相較之下，移動端的逆向導航需要進行更多的設計。后面的討論以移動端為例。

逆向導航的概念官方定義出自Material Design：從用戶行為維度，分成三類：Lateral navigation（橫向導航）、Forward navigation（前進導航）以及Reverse navigation（逆向導航）

5.1 什么時候需要逆向導航？

5.2 反向導航的設計要點

1. 邏輯：操作閉環

不管是由用戶還是系統觸發，都必須保留回退的通路。使用過程中不能給用戶留下死胡同、斷頭路。

2. 體驗：滿足預期

在完成第一步的基礎上，需要對反向導航做更多的思考。

• 當用戶進入比較深的頁面，并不一定希望按照順序依次返回。
• 當任務流結束的時候，用戶更期待返回“首頁”,而不是“上一頁”。

90%的情況下，我們可以用 “從哪來回哪去“的方式滿足需求。但是在B端產品中，容易出現鏈條很長的任務流，用戶一個頁面一個頁面地操作，最后完成提交或者保存。這時候用戶進入層級太深，“逐層返回“的方式就不太合適了，回到首頁更符合用戶的預期。

六、結束語

工作中還有很多可以進行深入研究的地方，這里就說到這，文中如有不當的地方，歡迎大家一起交流。

作者：WOWdesign，研究設計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

本文由 @WOWdesign 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。