早在兩年前，我寫過一篇關(guān)于導(dǎo)航菜單的文章。這篇文章幫助到了很多同學(xué)進入 B 端領(lǐng)域。然而，兩年過去了，行業(yè)在不斷發(fā)展，文章中的很多觀點都不太適用于目前的 B 端環(huán)境。

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

一、導(dǎo)航的定義丨什么是導(dǎo)航？

在現(xiàn)實世界中，我們在尋找東西時會有許多"導(dǎo)航"的指引。

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

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

但是你會發(fā)現(xiàn)，在日常的溝通中，我們對于導(dǎo)航的理解還是會存在偏差，這里把同學(xué)們最常犯的幾個問題進行匯總，來和大家進行講解。

1. 導(dǎo)航定義常見的問題

①導(dǎo)航與導(dǎo)航菜單的關(guān)系？

其實在日常的工作當中，我們經(jīng)常就會把 導(dǎo)航菜單與導(dǎo)航進行混淆。

比如 下圖，在溝通時我們就會說你的導(dǎo)航設(shè)計很不合理！

其實這里描述的不是導(dǎo)航，更應(yīng)該是導(dǎo)航菜單。

首先導(dǎo)航菜單是導(dǎo)航的一種實現(xiàn)方式，又或者叫做導(dǎo)航里面包含導(dǎo)航菜單。

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

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

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

比如在下圖中，請問哪一個為系統(tǒng)當中的導(dǎo)航？并說明原因

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

判斷一個內(nèi)容是否為導(dǎo)航，會有這一下幾個依據(jù)

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

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

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

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

2）是否具備導(dǎo)航結(jié)構(gòu)組織頁面：

導(dǎo)航通常具有明確的結(jié)構(gòu)，以 B 端系統(tǒng)為例，主要包含 主導(dǎo)航、子導(dǎo)航、全局導(dǎo)航 以及部分 輔助功能，而在核心內(nèi)容上，主要就是存在 主次區(qū)別，并且這樣能夠清晰地引導(dǎo)用戶進行導(dǎo)航的操作。

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

很多時候?qū)Ш饺菀着c菜單、操作進行混淆，在設(shè)計時我們就需要將這兩種情況單獨拎出來，比如在 Keynote、Sketch 里面，我們經(jīng)常會將工具欄與導(dǎo)航進行混淆。

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

而導(dǎo)航是引導(dǎo)頁面架構(gòu)，本質(zhì)上需要跳轉(zhuǎn)到其他頁面，所以存在明顯區(qū)別。

2. 導(dǎo)航的分析

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

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

然后將其二級菜單進行拆解，通過思維導(dǎo)圖得到一個完整的產(chǎn)品架構(gòu)。

這里要注意，很多同學(xué)會認為只有左側(cè)的部分才是其導(dǎo)航，其實并不然，因為導(dǎo)航剛才講到分為：整體導(dǎo)航與區(qū)域?qū)Ш?，而?ONES 產(chǎn)品的設(shè)計中，其實就是將側(cè)邊與頂部融合，共同使用，這一點也得到了 ONES 設(shè)計師的證實。

通過這樣的產(chǎn)品架構(gòu)圖我們就能快速知道頁面信息應(yīng)該如何優(yōu)化。

3. 導(dǎo)航的術(shù)語

了解了導(dǎo)航的分析過后，我們再說說導(dǎo)航的基礎(chǔ)術(shù)語，關(guān)于基礎(chǔ)術(shù)語主要有三個：寬度、深度、關(guān)聯(lián)度。

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

導(dǎo)航的深度指的是 整體整體導(dǎo)航路徑的深度，可以把它簡單理解為這個導(dǎo)航菜單有多少個層級。比如我們還是以上方的 ONES 產(chǎn)品為例，深度增加就是我們在測試管理當中再增加一層導(dǎo)航，將它的層級變?yōu)楦訌?fù)雜。

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

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

二、了解各大設(shè)計系統(tǒng)的"導(dǎo)航"

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

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

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

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

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

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

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

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

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

至于在自己的設(shè)計系統(tǒng)當中，最終要選擇哪些部分？主要是要根據(jù)自身產(chǎn)品去做取舍。

三、導(dǎo)航的作用丨導(dǎo)航到底充當什么角色？

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

你來自哪？

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

對于頁面來說，我們在設(shè)計時經(jīng)常需要將頁面當中的面包屑導(dǎo)航外露出來。

比如在頁面設(shè)計中，導(dǎo)航部分與內(nèi)容區(qū)域之間通常會預(yù)留一部分空白，用于呈現(xiàn)面包屑。通過這樣的設(shè)計，用戶能夠快速理解自己所處的位置，并且可以快速回退。

目前在哪？

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

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

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

像阿里云、騰訊云這些產(chǎn)品中，你會發(fā)現(xiàn)"頁頭"一詞出現(xiàn)的頻率異常高。這是因為云產(chǎn)品的系統(tǒng)產(chǎn)品線很多，業(yè)務(wù)范圍廣泛。用戶很容易在頁面中迷失方向，因此需要提供一個組件位置，讓用戶知道自己當前所在的位置。

去向哪？

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

四、導(dǎo)航的劃分丨講解不同導(dǎo)航組件下的歸類

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

整體導(dǎo)航：主要針對整個網(wǎng)站、系統(tǒng)的導(dǎo)航設(shè)計，它是顆粒度最大引導(dǎo)，通常就是我們所說的 導(dǎo)航菜單。

而在每一個 B 端系統(tǒng)當中都會存在一個整體導(dǎo)航，通過整體導(dǎo)航能夠搭建出整個產(chǎn)品的大致框架。

區(qū)域?qū)Ш剑褐饕槍Φ氖悄骋粋€模塊下的頁面，進行頁面上的分類指引。比如面包屑、下拉菜單、步驟條、分頁、頁頭、錨點 等等...

區(qū)域?qū)Ш街饕糜趦?yōu)化導(dǎo)航的細節(jié)，因為每一個整體導(dǎo)航不可能完全涵蓋所有導(dǎo)航菜單。因此，我們可以通過區(qū)域?qū)Ш絹韮?yōu)化整體導(dǎo)航的層級和細節(jié)。

關(guān)于整體導(dǎo)航與區(qū)域?qū)Ш?，本身兩者就是相輔相成的關(guān)系，很多時候 整體的導(dǎo)航菜單 沒有辦法滿足所有模塊的實際情況，這時候我們便可以使用區(qū)域?qū)Ш絹磉M行優(yōu)化。

比如在 ONES 的導(dǎo)航菜單當中，左側(cè)的側(cè)邊為導(dǎo)航菜單，而右側(cè)的 Tab 其實就是一個典型的區(qū)域?qū)Ш健Ｋ膶?dǎo)航結(jié)構(gòu)就是由這兩部分共同構(gòu)成。

五、導(dǎo)航的重要性

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

設(shè)計師的第一個需求

許多同學(xué)在成功入職后的第一個需求其實都是導(dǎo)航，因為大多數(shù)的產(chǎn)品尋找設(shè)計師代表著這個產(chǎn)品本身就會存在很多問題，而導(dǎo)航就是所有矛盾的開始，因此很多時候?qū)Ш奖闶谴蠖鄶?shù)設(shè)計師的處女作，而一個導(dǎo)航需求做得成功與否就將會決定你試用期的去留。

所以我們必須了解導(dǎo)航的整體設(shè)計，才能夠讓你順利的入職。

新用戶的第一次體驗

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

同事們的第一個了解

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

因此設(shè)計好一個導(dǎo)航，有利于我們在企業(yè)當中提高自己的設(shè)計話語權(quán)，因此格外重要。

作者： CE青年Youthce