導航菜單在 B 端任意一個產品中都是不可缺少的，且每一個導航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題，并且引導用戶進行頁面間的跳轉操作，快速找到目標。

假如你是第一次到京東總部藍方方，進入陌生且龐大的建筑群中迷失了方向：哪里是 1 號樓？哪里是 A 座？哪里刷門禁？餐廳在哪里？這時，你就需要一個準確的導視系統，幫你在空間中定位，并且找到前進的方向。

同理，當我們使用某個軟件系統時，也會面臨同樣的問題。當用戶帶著問題和目的進入了系統，會自動去尋找目標功能入口，提供這些信息和入口的便是導航。

導航菜單在 B 端任意一個產品中都是不可缺少的，且每一個導航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題，并且引導用戶進行頁面間的跳轉操作，快速找到目標。

更多導航干貨：

根據導航的觸達范圍，在 B 端場景中常用的導航可以分類六個類型：

1. 全局導航
2. 局部導航
3. 頁內導航
4. 下鉆類導航
5. 返回類導航
6. 聯想類導航

其中全局導航可以覆蓋整個網站的通路，往往表現為網站的一級分類，它不一定包含全局信息，但是可以讓用去渠到目標關鍵節點上。全局導航對用戶體驗的影響共有兩點：

1. 呈現內容和功能的架構。全局導航相當于整個網站的骨架，支撐著內容和功能組成的身體，構建內容和功能的整體認知，扁平化用戶的任務路徑，幫助用戶了解當前位置和目標路徑。
2. 突出核心功能。將核心功能放在用戶最能接觸到的位置，適度隱藏次要功能。

并且全局導航和首頁內容共同塑造了用戶對于網站的第一印象，同時強化品牌形象。

一、全局導航的基礎樣式

導航菜單是由多個菜單項集合組成的。菜單項由容器+選項內容（圖標+文字或文字）組成，交互行為是點擊菜單熱區后跳轉到相應目標頁面。

用戶的瀏覽動線一般是左上到右下，所以全局導航一般被設置在頁面左側或頁面頂部。按照導航選項的權重或者優先級一般分為三種樣式：

1. 橫向導航

橫向導航置于頁面頂部，橫向水平延展，從左到右選項優先級遞減。橫向導航視覺干擾小，可以將較大的屏幕空間給到內容展示。但拓展性較低，更適合官網等結構簡單的產品。

2. 縱向（垂直）導航

縱向導航置于頁面左側，垂直延展，選項優先級由上而下遞減。用戶可以在不同選項中快速切換，操作效率較高；縱向空間可以容納更多菜單選項，并且可以延展二級分類。拓展性比較高，適合專注操作的后臺類產品。

但縱向導航占用面積較大，視覺比較突出，瀏覽過程中打斷感比較強。有些網站為了減小視覺面積，也經常使用折疊模式的縱向導航。

3. 縱橫式導航

同時使用橫向和縱向導航，通常橫向導航是一級導航，用于展示全局類目和功能；縱向導航為二級導航，提供具體的功能和內容。

這種導航可以容納更多的信息層級，信息密度較高。但菜單面積較大，視覺復雜度較高。適合操作比較復雜的后臺類產品，比如云產品。

二、全局導航的拓展能力

全局導航為了容納更多的信息量，就擁有強大的拓展能力，主要來承接導航菜單的深度和廣度。

1. 深度指導航的層級數目，層級越多，深度越大。

根據用戶需求和使用場景梳理產品架構，當層級過多時，需要對功能進行分組。比如哪些功能需求是互相關聯，可以組合在一起的，這時就需要考慮用一個集合頁面來承接這些功能。

當層級大于 2 個時，可以利用面包屑導航，用戶可以根據面包屑導航看到當前操作的位置和軌跡，并且方便返回到任意位置。

2. 廣度指導航每一層級包含的菜單數目，數目越多，廣度越大。

合理規劃導航廣度，就可以用到“簡約四策略”，分別是刪除、組織、隱藏、轉移。

1. 刪除：刪除不必要的功能。精簡功能，刪除多余文字，精簡按鈕等，讓用戶集中注意力，避免在冗余的功能中喪失目標感。
2. 組織：組織必須提供的功能。在視覺層面上，做到信息分層清晰；在產品層面上，做到根據內容做功能分組，讓用戶更方便查閱和尋找。分塊越少，選擇越少，用戶負擔就越小。
3. 隱藏：隱藏非核心功能。不常用但不能少的功能，可以選擇隱藏，利用漸進式的展示方式，只要不讓用戶找太久，就是有效的隱藏。
4. 轉移：轉移非擅長的功能。利用設備轉移、軟件轉移、向用戶轉移，比如將一些因為屏幕大小影響展示的功能在手機端進行隱藏，只在電腦端做展示。

三、設計要點

1. 全局導航需要有足夠的視覺權重，如果菜單選項不是特別復雜，盡量不使用全局折疊的形式。一般默認展開，不需要時可以折疊。

2. 保持結構簡潔，導航層級如果太深，比如三級導航，影響導航的可見性。

3. 控制一級導航菜單數量，以免視覺溢出過多。保證文本易于辨識，使用已于理解的圖標，減少重復文字，精簡菜單名稱。

導航如我們前進路上的指示標，指引用戶方向并承載產品內容，也是 B 端產品系統中不可缺少的一環。產品擁有清晰、一致的導航，也要兼顧導航菜單選項的可見性和用戶操作效率，讓用戶有目標感、良好的體驗感，做一個與用戶心智模型匹配的導航系統。

歡迎關注「JellyDesign」的小程序：