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

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

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

在現(xiàn)實(shí)世界中，我們?cè)趯ふ覗|西時(shí)會(huì)有許多"導(dǎo)航"的指引。

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

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

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

1. 導(dǎo)航定義常見(jiàn)的問(wèn)題

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

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

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

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

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

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

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

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

比如在下圖中，請(qǐng)問(wèn)哪一個(gè)為系統(tǒng)當(dāng)中的導(dǎo)航？并說(shuō)明原因

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

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

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

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

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

這里需要再補(bǔ)充一下，導(dǎo)航和篩選其實(shí)本質(zhì)上是因?yàn)?標(biāo)簽頁(yè)(Tabs) ，本身就會(huì)有 導(dǎo)航與數(shù)據(jù)篩選兩個(gè)功能

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

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

3）操作需要進(jìn)行頁(yè)面的變化：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這部分我們后面會(huì)提供實(shí)際案例來(lái)進(jìn)行講解。

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

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

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

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

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

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

在 Arco Design 當(dāng)中，它和 Ant 的區(qū)別主要是在錨點(diǎn)以及頁(yè)頭的部分。

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

而在 SAP 當(dāng)中，由于缺乏了解，這里沒(méi)辦法去展開(kāi)聊，如果有了解的同學(xué)也歡迎在我們?cè)u(píng)論區(qū)補(bǔ)充。

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

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

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

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

你來(lái)自哪？

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

對(duì)于頁(yè)面來(lái)說(shuō)，我們?cè)谠O(shè)計(jì)時(shí)經(jīng)常需要將頁(yè)面當(dāng)中的面包屑導(dǎo)航外露出來(lái)。

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

目前在哪？

當(dāng)前位置在哪？對(duì)于 B 端導(dǎo)航來(lái)說(shuō)至關(guān)重要。因?yàn)樵谝粋€(gè)系統(tǒng)中經(jīng)常會(huì)涉及到頁(yè)面跳轉(zhuǎn)、頁(yè)面關(guān)聯(lián)，這就導(dǎo)致我們需要將頁(yè)面所在位置標(biāo)注清楚，方便用戶知道他目前的具體情況。

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

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

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

去向哪？

因?yàn)樵谌魏我粋€(gè)導(dǎo)航中，我們最終都需要流轉(zhuǎn)。因此，頁(yè)面中的具體流向需要清楚地交代。我們常使用錨點(diǎn)、分頁(yè)、下拉菜單和導(dǎo)航菜單等組件來(lái)指示流向。這些組件都是為了讓我們了解產(chǎn)品的具體流向，以便頁(yè)面起到導(dǎo)航分發(fā)的作用。

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

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

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

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

區(qū)域?qū)Ш剑褐饕槍?duì)的是某一個(gè)模塊下的頁(yè)面，進(jìn)行頁(yè)面上的分類(lèi)指引。比如面包屑、下拉菜單、步驟條、分頁(yè)、頁(yè)頭、錨點(diǎn) 等等...

區(qū)域?qū)Ш街饕糜趦?yōu)化導(dǎo)航的細(xì)節(jié)，因?yàn)槊恳粋€(gè)整體導(dǎo)航不可能完全涵蓋所有導(dǎo)航菜單。因此，我們可以通過(guò)區(qū)域?qū)Ш絹?lái)優(yōu)化整體導(dǎo)航的層級(jí)和細(xì)節(jié)。

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

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

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

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

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

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

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

新用戶的第一次體驗(yàn)

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

同事們的第一個(gè)了解

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

因此設(shè)計(jì)好一個(gè)導(dǎo)航，有利于我們?cè)谄髽I(yè)當(dāng)中提高自己的設(shè)計(jì)話語(yǔ)權(quán)，因此格外重要。

作者： CE青年Youthce