你是否有過這樣的體驗，進入龐大且陌生的火車站后迷失方向：從哪里進站？在哪里安檢？取票窗口在哪？這時你迫切需要一個準確的導視牌，幫助你在建筑空間中定位，并找到前進方向。

在軟件系統中用戶也會面臨類似的問題。帶著目標進入系統后，用戶會通過網頁內散布著的信息氣味，去尋覓目標功能入口，而提供這些信息和入口的便是導航系統。它解決了用戶“我在哪”“到哪里去”的問題，并為用戶提供移動方式即頁面間跳轉。

本文將基于 B 端場景的全局導航展開，歸納總結相關概念并提出設計建議。

更多B端導航設計干貨：

一、為什么需要全局導航

根據導航的觸達范圍，在 B 端設計中常使用的導航可分六種類型：

其中全局導航聯結了系統的所有板塊，從系統整體為用戶提供定位與導航，允許用戶在系統淺層進行橫向移動。全局導航是用戶使用網站功能的第一觸點，和首頁內容一起塑造了用戶對網站的第一印象。全局導航對用戶體驗的影響可以歸納為以下幾點：

1. 呈現信息架構：構建用戶對網站功能和內容的整體認知。
2. 提供關于當前位置的線索：幫助用戶了解當前位置與可前進路徑。
3. 提供可訪問入口：幫助用戶快速抵達目標頁面。
4. 提供一致性的產品體驗：全局導航通常是所有頁面的共同元素，可以強化品牌形象。

二、全局導航的基礎樣式

1. 導航菜單的構成

導航菜單由多個菜單項集合而成。

1. 容器：承載導航菜單內容的容器，容器顏色通常與頁面背景色形成對比。
2. 選項內容：通過簡短文本表述菜單選項選項，也可以采用圖標+文本的形式。
3. 交互狀態：normal、hover、press、disable，點擊菜單熱區后跳轉至對應的頁面。

在頁面瀏覽過程中，用戶的瀏覽動線是從左上到右下進行掃視，因此全局導航普遍被放置在頁面頂部，或者頁面左側，由此產生了常用的幾種全局導航菜單范式。

2. 水平導航菜單

導航菜單放置于頁面頂欄，橫向水平延展。其中選項優先級從左到右遞減。

優點

1. 導航欄面積較小，有較大屏幕空間用于內容展示。
2. 頁面簡潔，選項數量有限，減輕用戶的認知負載。
3. 在長頁面中，導航上下布局與用戶瀏覽方向一致（縱向滾動查看），沉浸感更強。

缺點

1. 導航菜單間切換較為不便。
2. 若菜單選項名稱過長、數量過多會受到橫向尺寸限制。
3. 導航菜單橫向排布，用戶掃視效率低。

適用于：導航菜單數量較少的場景；內容向下延展的長頁面，如官網頁面

3. 垂直導航菜單

導航菜單放置于頁面左側欄，縱向垂直延展。其中選項優先級從上到下遞減。

優點

1. 用戶可以快速在導航菜單之間切換。
2. 充足的縱向空間可以容納更多選項，選項過多時可以對一級導航進行分類。
3. 縱向排布的菜單內容，方便用戶快速掃視并識別。

缺點

1. 導航欄面積較大，用于內容展示的區域變小。
2. 視覺突出，瀏覽過程中打斷感強。
3. 適用于：導航項較多、功能屬性強的場景，如大部分 toB 網頁。

4. 混合式導航菜單

同時使用水平導航菜單和垂直導航菜單。通常頂欄為一級導航，承載全局類目和功能；側邊欄為二級導航，提供具體網站架構和功能。

優點

1. 外顯一級、二級導航，提升網站結構可見性。
2. 可以容納更多信息層級。
3. 充分利用屏幕空間，信息密度高 。

缺點

1. 菜單面積較大，視覺復雜度高。
2. 用戶瀏覽動線復雜，需要合理設計架構。

適合量級大，復雜度高的的系統，如各種云服務后臺。

三、全局導航的拓展能力

1. 彈出

為了容納更多的信息量級，hover 在一級導航下可以彈出二級菜單。

頂部導航/側邊導航的不同彈出方式：

當二級菜單內容過多時，也可以像各種云服務網站一樣彈出站點地圖。但需要對二級導航進行合理分類、規劃，否則影響用戶信息搜尋速度。

2. 搜索

當二級導航過多時，增加搜索功能可以幫助用戶更快速觸達入口。

四、設計建議

用戶使用導航菜單是一個信息尋覓的過程，包括信號捕獲、行為實施、反饋與評估等流程。在系統設計時需要注意全局導航的可用性，確保用戶快速找到目標入口，提高系統使用效率。本環節將從導航使用體驗出發，對全局導航的設計要點進行歸納總結。

全局要有足夠的視覺權重，默認折疊全局導航會使用戶難以發現入口。一般默認側邊欄展開，不需要時收起。

保持結構簡潔，若導航層級過深（如三級導航及以上）可見性將大大降低。

控制水平菜單選項數量，避免過長溢出，同時需要考慮未來業務的可拓展性。

保證可讀易于掃視。菜單選項名稱保持辨識度，避免大量使用重復文本。

準確映射內容，跳轉頁面的可預見性，采用易于理解和識別的名稱/圖標。

五、小結

全局導航是 B 端系統中不可或缺的一環，目前已經有非常成熟的設計解決方案。水平菜單和垂直菜單都很大程度上平衡了界面簡潔和功能實用，在 B 端系統得到廣泛應用。

在系統設計前期，需要根據內容整體框架和頁面布局，選擇合適的導航菜單類型。在全局導航的具體設計中，則需要著重考慮提高菜單選項的可見性和用戶使用效率。

最后，用戶的交互行為不僅依賴當下的界面外觀和內容，還依賴用戶的先驗知識和使用經驗，因此優秀的導航系統應該與用戶的心智模型相匹配。

歡迎關注作者的微信公眾號：「應謀鬼計」