早在兩年前，我寫過一篇關于導航菜單的文章。這篇文章幫助到了很多同學進入 B 端領域。然而，兩年過去了，行業在不斷發展，文章中的很多觀點都不太適用于目前的 B 端環境。

現在，大家對于 B 端設計越來越重視。因此，最近我計劃將之前不太過時的文章內容進行深挖。就像游戲界的重制版本一樣，我們可以重制 導航、篩選、表格 等文章，如果覺得不錯，也別忘了點贊轉發，那我們正式開始吧！

更多導航設計干貨：

一、導航的定義丨什么是導航？

在現實世界中，我們在尋找東西時會有許多“導航”的指引。

比如你在商場中尋找洗手間，那你就會去查看商場中的道路指引；你要在超市尋找一瓶旺仔牛奶，那你就會先找到飲料分區，然后根據內容劃分再進行尋找；你要在圖書館尋找一本書，同樣可以根據樓層、類別、書架編號一步一步跟隨著指引進行尋找，這其實就是生活中的“導航”。

而在屏幕世界中，我們對導航也有著同樣的需求，因此可以將導航定義為 “起到頁面信息引導作用的組件”，都叫做導航。

但是你會發現，在日常的溝通中，我們對于導航的理解還是會存在偏差，這里把同學們最常犯的幾個問題進行匯總，來和大家進行講解。

1. 導航定義常見的問題

①導航與導航菜單的關系？

其實在日常的工作當中，我們經常就會把 導航菜單與導航進行混淆。

比如 下圖，在溝通時我們就會說你的導航設計很不合理！

其實這里描述的不是導航，更應該是導航菜單。

首先導航菜單是導航的一種實現方式，又或者叫做導航里面包含導航菜單。

并且在上圖的頁面當中，導航可以是 面包屑、下拉菜單、步驟條，但是導航菜單只會是唯一，因此在使用術語時要更為精準，不要混淆導航和導航菜單的使用。

②如何判斷它是否為導航？是長得像就可以了嗎？

導航在實際項目中會與很多組件進行混淆，因此也就導致了在使用時我們需要仔細判斷才能得出結論。

比如在下圖中，請問哪一個為系統當中的導航？并說明原因

其實我們通過仔細的辨別發現，第二張圖 ONES 產品里面，對于這部分 標簽頁的定義為 導航，而在第一張圖 Coding 中，對于標簽頁的定義則為篩選。

判斷一個內容是否為導航，會有這一下幾個依據

1）是否起到了功能鏈接的作用：

因為導航主要是幫助用戶快速訪問系統的不同頁面，而在上圖當中，Coding 產品很明顯就是在執行 項目當中的篩選操作，即 項目 當中的 我參與的、我管理的、全部項目、已歸檔，它只是將重要的數據篩選提高層級，因此不是導航。

而在 ONES 當中其實是知識庫管理下的三個內容模塊，分別是 概覽、頁面組、與我共享、配置中心。很明顯起到的是功能的鏈接，因此歸納為導航。

這里需要再補充一下，導航和篩選其實本質上是因為 標簽頁(Tabs) ，本身就會有 導航與數據篩選兩個功能

2）是否具備導航結構組織頁面：

導航通常具有明確的結構，以 B 端系統為例，主要包含 主導航、子導航、全局導航 以及部分 輔助功能，而在核心內容上，主要就是存在 主次區別，并且這樣能夠清晰地引導用戶進行導航的操作。

3）操作需要進行頁面的變化：

很多時候導航容易與菜單、操作進行混淆，在設計時我們就需要將這兩種情況單獨拎出來，比如在 Keynote、Sketch 里面，我們經常會將工具欄與導航進行混淆。

工具欄展示當前視圖相關操作的常用命令和控件。本質上集合的是操作

而導航是引導頁面架構，本質上需要跳轉到其他頁面，所以存在明顯區別。

2. 導航的分析

關于導航部分的分析，我們整體會采取思維導圖的方式進行拆解，比如我們現在以 ONES 為例（大家也可以打開 ONES 和我一起去分析分析）

首先進入到首頁當中，我們能夠發現 ONES 首頁里會包含有 項目管理、知識庫管理、項目管理、測試管理、流水線管理、工單管理、效能管理、產品管理、工時管理、版本管理。

然后將其二級菜單進行拆解，通過思維導圖得到一個完整的產品架構。

這里要注意，很多同學會認為只有左側的部分才是其導航，其實并不然，因為導航剛才講到分為：整體導航與區域導航，而在 ONES 產品的設計中，其實就是將側邊與頂部融合，共同使用，這一點也得到了 ONES 設計師的證實。

通過這樣的產品架構圖我們就能快速知道頁面信息應該如何優化。

3. 導航的術語

了解了導航的分析過后，我們再說說導航的基礎術語，關于基礎術語主要有三個：寬度、深度、關聯度。

導航的寬度指的并不是 導航菜單的固定寬度，而是我們在設計時一級導航菜單究竟有多少，舉一個簡單例子，我們增加了 ONES 產品里的導航菜單，將它的一級導航增加到了 13 個，那這個時候便是導航菜單的寬度增加。

導航的深度指的是 整體整體導航路徑的深度，可以把它簡單理解為這個導航菜單有多少個層級。比如我們還是以上方的 ONES 產品為例，深度增加就是我們在測試管理當中再增加一層導航，將它的層級變為更加復雜。

導航的場景度是指在頁面當中，是否會根據用戶的特定場景去優化整體的導航，使用局部導航來使頁面信息進行跳轉。因為我們想要優化整體的導航結構，除了最簡單的導航菜單的類型上進行優化之外，我們還可以在不同的場景當中，提供鏈接進行頁面的快速跳轉。

這部分我們后面會提供實際案例來進行講解。

二、了解各大設計系統的“導航”

關于導航的組件定義，不同團隊對于他們的要求都不太一樣。首先我們先看大家非常熟悉的 Ant Design，在 Ant Design 當中，我們會把：錨點、面包屑、下拉菜單、導航菜單、分頁、步驟條 都將其分類在導航的目錄下，整體的規劃相對較為全面。

而 Arco Design 則相對簡單，將：面包屑、下拉菜單、菜單 、頁頭、分頁、步驟條 歸類到了導航當中，很明顯是將目前他們用到的歸納到了導航當中。

SAP 的 Frori 則更為特殊，將 Action Sheet、Breadcrumb、Button、Icon Tab bar、Link、Smart Link 都統一歸納為導航當中。但這里需要注意，SAP 把 操作與導航放在一起，因此會存在像是 Button 這些內容在導航中存在。

關于這樣的差異，我常常說一句話，別人的設計師也不是傻子，那他們這樣分類的原因是什么？希望能夠通他們的不同去分析立場上的差異。

首先 Ant Design 算是國內較大的開源設計系統，使用的人群非常之多，因此這個設計系統對于領域的探索也就導致在導航的限定當中，它們的范圍會更為廣闊一些。

在 Arco Design 當中，它和 Ant 的區別主要是在錨點以及頁頭的部分。

無論是在 Arco Pro 還是在很多字節的后臺頁面當中都會高頻使用頁頭，并且頁頭主要功能就是內容概覽和引導頁面操作，并且在頁頭處也會存在返回等入口，因此也符合導航的定義。

而在 SAP 當中，由于缺乏了解，這里沒辦法去展開聊，如果有了解的同學也歡迎在我們評論區補充。

最后，我們作為一個研究者，對于上述提到的設計系統，我們的選擇肯定是集大成者，也就是對于上面的結果取并集，然后再增加一些我個人的理解然后得出以下部分：導航菜單、面包屑、下拉菜單、步驟條、分頁、頁頭、錨點

至于在自己的設計系統當中，最終要選擇哪些部分？主要是要根據自身產品去做取舍。

三、導航的作用丨導航到底充當什么角色？

導航本身的作用就是對產品功能進行分發、引導，讓用戶可以高效、準確的在各模塊間穿梭。但想如何做到這個作用，我們就需要將 **你來自哪？去向哪？目前在哪？**結合著組件，來講解組件的作用。

你來自哪？

主要需要讓用戶快速理解你從哪里來？面包屑導航就會起到如此作用。

對于頁面來說，我們在設計時經常需要將頁面當中的面包屑導航外露出來。

比如在頁面設計中，導航部分與內容區域之間通常會預留一部分空白，用于呈現面包屑。通過這樣的設計，用戶能夠快速理解自己所處的位置，并且可以快速回退。

目前在哪？

當前位置在哪？對于 B 端導航來說至關重要。因為在一個系統中經常會涉及到頁面跳轉、頁面關聯，這就導致我們需要將頁面所在位置標注清楚，方便用戶知道他目前的具體情況。

同時在組件的使用上，會采取 頁頭、分頁、步驟條、錨點、導航菜單 等組件達到此目的。

對于一些復雜的系統來說，頁頭的設計至關重要。它能夠給到用戶思維慣性，讓他能夠快速理解目前的系統位置，方便我們進行操作。

像阿里云、騰訊云這些產品中，你會發現“頁頭”一詞出現的頻率異常高。這是因為云產品的系統產品線很多，業務范圍廣泛。用戶很容易在頁面中迷失方向，因此需要提供一個組件位置，讓用戶知道自己當前所在的位置。

去向哪？

因為在任何一個導航中，我們最終都需要流轉。因此，頁面中的具體流向需要清楚地交代。我們常使用錨點、分頁、下拉菜單和導航菜單等組件來指示流向。這些組件都是為了讓我們了解產品的具體流向，以便頁面起到導航分發的作用。

四、導航的劃分丨講解不同導航組件下的歸類

這么多組件，它們的功能都是相同的嗎？其實并不然，在整個導航當中一共會分為兩種不同的使用場景，那我們就會將其區分為兩種類型。

整體導航：主要針對整個網站、系統的導航設計，它是顆粒度最大引導，通常就是我們所說的 導航菜單。

而在每一個 B 端系統當中都會存在一個整體導航，通過整體導航能夠搭建出整個產品的大致框架。

區域導航：主要針對的是某一個模塊下的頁面，進行頁面上的分類指引。比如面包屑、下拉菜單、步驟條、分頁、頁頭、錨點 等等...

區域導航主要用于優化導航的細節，因為每一個整體導航不可能完全涵蓋所有導航菜單。因此，我們可以通過區域導航來優化整體導航的層級和細節。

關于整體導航與區域導航，本身兩者就是相輔相成的關系，很多時候 整體的導航菜單 沒有辦法滿足所有模塊的實際情況，這時候我們便可以使用區域導航來進行優化。

比如在 ONES 的導航菜單當中，左側的側邊為導航菜單，而右側的 Tab 其實就是一個典型的區域導航。它的導航結構就是由這兩部分共同構成。

五、導航的重要性

導航就像人體內的毛細血管一樣，溝通著每個器官。雖然在日常使用中，人們可能沒有意識到它的存在，但對于導航模塊本身來說，其設計非常重要。

設計師的第一個需求

許多同學在成功入職后的第一個需求其實都是導航，因為大多數的產品尋找設計師代表著這個產品本身就會存在很多問題，而導航就是所有矛盾的開始，因此很多時候導航便是大多數設計師的處女作，而一個導航需求做得成功與否就將會決定你試用期的去留。

所以我們必須了解導航的整體設計，才能夠讓你順利的入職。

新用戶的第一次體驗

導航是新用戶進入到系統第一個需要去接觸的功能，因此對于很多企業來說，導航設計的好壞將直接影響用戶對于這個產品的理解，比如你的導航晦澀難懂，那極有可能在查看的導航后悻悻而退。

同事們的第一個了解

導航對于 B 端產品的資深用戶來說，也同樣非常重要。在一個資深用戶使用產品時，它一定會在多個產品模塊之間隨意切換，而切換時能否順暢，需要多少的切換步驟對于一個資深用戶來說都非常重要，假設需要反復切換，那對于用戶來說就顯得十分痛苦。

因此設計好一個導航，有利于我們在企業當中提高自己的設計話語權，因此格外重要。

下篇文章，我們聊聊導航的實際組件用法~

歡迎關注作者的微信公眾號： CE青年Youthce