編輯導(dǎo)讀：導(dǎo)航欄是用戶對(duì)產(chǎn)品架構(gòu)了解的第一途徑，是作為產(chǎn)品各個(gè)功能之間的橋梁，能夠?qū)Ξa(chǎn)品功能進(jìn)行分發(fā)、引導(dǎo)。本文作者以 B 端產(chǎn)品的導(dǎo)航欄為例，對(duì)其進(jìn)行分析，希望對(duì)你有幫助。

一、定義

B 端導(dǎo)航欄，是 B 端產(chǎn)品最重要的模塊，對(duì)于大多數(shù)用戶來(lái)說(shuō)，使用 B 端產(chǎn)品主要是對(duì)具體功能進(jìn)行操作，而導(dǎo)航欄作為產(chǎn)品各個(gè)功能的橋梁，他的作用是對(duì)產(chǎn)品功能進(jìn)行分發(fā)、引導(dǎo)，讓用戶可以高效、準(zhǔn)確的在各模塊間穿梭。

導(dǎo)航欄的作用可以歸納為以下 4 點(diǎn)：

作用一：這里有什么，告訴用戶這里有些什么，導(dǎo)航欄通過(guò)將功能結(jié)構(gòu)可視化的方法，告知用戶產(chǎn)品有哪些功能；

作用二：我在哪里，確定用戶的位置，好的導(dǎo)航會(huì)告訴用戶當(dāng)前所處位置，避免迷路；

作用三：怎么去，告訴用戶如何使用，好的導(dǎo)航能夠幫助用戶規(guī)劃行程，執(zhí)行完這一步操作后，下一步該去哪操作，幫用戶快速找到所需內(nèi)容；

作用四：怎么回，告訴用戶怎么返回，逆向?qū)Ш?，告知用戶路徑或者?guī)劃好用戶的返回路徑，讓用戶可以無(wú)感回到起始頁(yè)面。

二、菜單

B 端產(chǎn)品設(shè)計(jì)中，導(dǎo)航欄是功能菜單的載體，核心是功能。因此在進(jìn)行導(dǎo)航欄設(shè)計(jì)時(shí)，一個(gè)非常重要的前提就是要對(duì)菜單進(jìn)行規(guī)劃，整理。

1. 菜單的歷史變遷

2. 整理菜單

導(dǎo)航欄設(shè)計(jì)，必然要滿足 “導(dǎo)航” 這個(gè)核心目標(biāo)，組件的樣式、交互必須為功能服務(wù)。通常情況下，導(dǎo)航是反映產(chǎn)品功能模塊的入口，產(chǎn)品中包含多少模塊、子模塊，就需要有序的布置到導(dǎo)航里面。我們可以通過(guò)思維導(dǎo)圖的將菜單羅列出來(lái)，思維導(dǎo)圖能解釋不同功能層級(jí)的結(jié)構(gòu)和從屬關(guān)系，尤其是當(dāng)菜單數(shù)量多，且層級(jí)超過(guò)兩級(jí)的時(shí)候，思維導(dǎo)圖就顯得很有必要了。

理想狀態(tài)下，導(dǎo)航菜單建議最多不要超過(guò) 9 個(gè)，最少不要低于 5 個(gè)。

根據(jù)“7±2 原則”描述明確到：在導(dǎo)航菜單當(dāng)中，超過(guò) 9 個(gè)會(huì)給用戶查找時(shí)帶來(lái)困難，低于 5 個(gè)說(shuō)明導(dǎo)航菜單的分配效率不夠高效。但在實(shí)際業(yè)務(wù)中，很多時(shí)候會(huì)超過(guò) 9 個(gè)菜單，這時(shí)需要對(duì)菜單進(jìn)行分組，因?yàn)閷?dǎo)航過(guò)多，用戶尋找會(huì)十分迷茫，通過(guò)分組的方式，能夠?qū)Σ藛芜M(jìn)行再次分類，提高查找效率。

7±2 原則解釋：1956 年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有 7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開(kāi)始出錯(cuò)。

3. 菜單的深度和廣度

當(dāng)菜單廣度過(guò)大，我們也能夠通過(guò)設(shè)計(jì)的方法來(lái)優(yōu)化導(dǎo)航菜單，

方法一：增加搜索欄，篩選菜單；

方法二：千人千面，據(jù)用戶角色的不同，展示不同的菜單，大部分 B 端用戶并不需要使用到全部功能菜單，管理員可以根據(jù)自身公司的業(yè)務(wù)不同，給用戶配置出不同的角色權(quán)限予以滿足用戶的導(dǎo)航需求，這樣在設(shè)計(jì)層面上能夠減少很多不必要的麻煩。

某云目前擁有大概 100+功能，這些都需要在導(dǎo)航菜單上顯示，因此在導(dǎo)航設(shè)計(jì)上，它的模式是：全部菜單導(dǎo)航+搜索菜單

4. 導(dǎo)航菜單不能隱藏超過(guò)兩級(jí)

導(dǎo)航菜單隱藏超過(guò)兩級(jí)時(shí)，代表著產(chǎn)品在用戶的使用規(guī)劃中，沒(méi)有深入思考整個(gè)用戶體驗(yàn)，導(dǎo)航菜單層級(jí)越多，用戶查找就會(huì)越慢，有一些三級(jí)導(dǎo)航的菜單，會(huì)通過(guò)設(shè)計(jì)優(yōu)化來(lái)實(shí)現(xiàn)隱藏導(dǎo)航的合并，從而減少用戶操作負(fù)擔(dān)。

三、導(dǎo)航

1. 導(dǎo)航欄-PC

多種導(dǎo)航欄類型，該如何選擇？功能型產(chǎn)品適合側(cè)邊導(dǎo)航，側(cè)邊導(dǎo)航效率高、遲疑和錯(cuò)誤更少，用戶也普遍比較喜歡，信息型產(chǎn)品適合頂部導(dǎo)航，比如門戶網(wǎng)站。

Jennifer Rose Kingsburg 曾經(jīng)對(duì)網(wǎng)頁(yè)的三級(jí)菜單導(dǎo)航進(jìn)行過(guò)一份研究，結(jié)論是左側(cè)導(dǎo)航相對(duì)頂部導(dǎo)航優(yōu)點(diǎn)更多些

① 側(cè)邊導(dǎo)航欄

將菜單欄放置在左側(cè)，頁(yè)面布局上基本為左右結(jié)構(gòu)，側(cè)邊導(dǎo)航在國(guó)內(nèi)產(chǎn)品中最為常見(jiàn)，國(guó)內(nèi)廠商對(duì)于側(cè)邊欄導(dǎo)航的尤為偏愛(ài)，也就造成了現(xiàn)在 B 端產(chǎn)品的發(fā)展也逐漸趨同。

那么為什么國(guó)內(nèi) B 端為什么大多數(shù)是側(cè)邊導(dǎo)航欄呢？我把這種現(xiàn)象歸納為以下 3 個(gè)原因：

原因一：中文文字寬度較短，側(cè)邊導(dǎo)航能最大發(fā)揮出他的優(yōu)勢(shì)，能最大限度減少空間的使用率；

原因二：國(guó)內(nèi)的業(yè)務(wù)復(fù)雜，以及對(duì)于擴(kuò)展性的要求較高，每個(gè)企業(yè)都想做一個(gè)又大又全的產(chǎn)品，因此側(cè)邊導(dǎo)航欄更加適合國(guó)內(nèi)的實(shí)際需求；

原因三：一級(jí)導(dǎo)航在左側(cè)時(shí)，效率高、遲疑和錯(cuò)誤更少，用戶追求的是使用產(chǎn)品完成目標(biāo)任務(wù)，注重的是功能完整性和操作便捷性。

② 頂部導(dǎo)航欄

將菜單欄放置在頂部，頁(yè)面布局上基本為上下結(jié)構(gòu)，頂部導(dǎo)航早期出現(xiàn)于各類門戶網(wǎng)站，比如企業(yè)官網(wǎng)，各種咨詢類的網(wǎng)站經(jīng)常會(huì)采取這樣的導(dǎo)航形式。頂部導(dǎo)航通常在 B 端產(chǎn)品中也是十分常見(jiàn)的，但還是以國(guó)外產(chǎn)品最為集中。

③ 混合導(dǎo)航欄

將頂部導(dǎo)航與側(cè)邊導(dǎo)航進(jìn)行結(jié)合。通常將一級(jí)導(dǎo)航菜單放置頂部，通過(guò)一級(jí)菜單的點(diǎn)擊后，展示側(cè)邊的二、三級(jí)菜單。在一些產(chǎn)品擁有復(fù)雜的邏輯關(guān)系，菜單之間關(guān)系分明的產(chǎn)品中，混合導(dǎo)航也是一個(gè)不錯(cuò)的選擇。

2. 導(dǎo)航欄-APP

① 拇指熱區(qū)

移動(dòng)端的交互都在手掌上完成，因此，在對(duì)移動(dòng)端產(chǎn)品進(jìn)行設(shè)計(jì)時(shí)，手勢(shì)是不可忽略的一部分。

拇指熱區(qū)概念來(lái)源于交互大神 Steve Hoober 的一個(gè)觀察實(shí)驗(yàn)，他發(fā)現(xiàn)在手機(jī)大屏?xí)r代，大部分的用戶是以下圖的方式抓握手機(jī)：以拇指的底部為支點(diǎn)，抵在手機(jī)的右下角。

設(shè)計(jì)導(dǎo)航系統(tǒng)的時(shí)候，也會(huì)遵循拇指熱區(qū)的原則，把主要功能放在綠色區(qū)域，輔助功能放在黃色或者紅色區(qū)域。

② 底部導(dǎo)航欄

APP 最常使用的導(dǎo)航模式，用于一級(jí)目錄的導(dǎo)航，位于頁(yè)面底部，無(wú)論用戶單手還是雙手操作都能輕松點(diǎn)擊，能告訴用戶當(dāng)前位置及用戶切換統(tǒng)一層級(jí)之間的不同模塊。底部 Tab 欄具有很強(qiáng)的包容性，可以形成最基本的信息框架，然后用其他的導(dǎo)航模式來(lái)承載具體的功能和內(nèi)容。展現(xiàn)形式有文字 + icon，也有純 icon 形式，大部分是文字+icon，可能是減少用戶記憶負(fù)擔(dān)。

優(yōu)點(diǎn)：可以在第一時(shí)間讓用戶了解使用頻率最高、最重要的功能和信息，同時(shí)能夠支持用戶在不同模塊之間的快速切換。

缺點(diǎn)：底部導(dǎo)航欄超過(guò) 5 個(gè)就容易引起誤點(diǎn)操作，同時(shí)在底部會(huì)占據(jù)一定的屏幕空間。

③ 底部（舵式）拓展欄

為了突出中間的功能，把 Tab 做的比較突出，鼓勵(lì)用戶更多使用該功能。常見(jiàn)的 APP 如某魚(yú)、某乎等使用了這種導(dǎo)航欄，把第三個(gè) Tab 標(biāo)簽做的更加突出，放進(jìn)了一些常用的功能。

優(yōu)點(diǎn)：可以提高導(dǎo)航欄趣味性，讓用戶貢獻(xiàn)更多的內(nèi)容。

缺點(diǎn)：此類導(dǎo)航也是一種二級(jí)導(dǎo)航，既然是重要功能為什么會(huì)放在二級(jí)導(dǎo)航呢？把重要功能放在二級(jí)界面，會(huì)增加用戶的記憶負(fù)擔(dān)以及操作負(fù)擔(dān)。

④ 頂部 Tab 欄

用于展示同一模塊下不同類別的信息或者篩選不用模塊的信息，一般二級(jí)導(dǎo)航且支持左右滑動(dòng)。

優(yōu)點(diǎn)：可以很好地扁平化信息層級(jí)，讓用戶可以迅速實(shí)現(xiàn)同一模塊下不同類別信息之間的切換并且不會(huì)迷失方向。

缺點(diǎn)：位于頂部切換起來(lái)不是很方便，同時(shí)占據(jù)空間，導(dǎo)致屏幕可展現(xiàn)區(qū)域變少。

⑤ 側(cè)邊（矩式）導(dǎo)航欄

通常針對(duì)產(chǎn)品偏沉浸式閱讀的情況下使用，主導(dǎo)航模塊切換頻率低，放入其中的模塊使用頻率低。常與底部標(biāo)簽式導(dǎo)航組合使用，將一級(jí)頁(yè)面內(nèi)的信息再細(xì)分，給人以清晰的呈現(xiàn)方式。通過(guò)把非核心功能的低頻操作都放到一個(gè)抽屜里，使得用戶獲得沉浸式的體驗(yàn)，而且能夠集中用戶的注意力，讓用戶去更好地完成核心功能，不被打擾。

優(yōu)點(diǎn)：用戶可以將注意力放在首頁(yè)，減少其他類型的導(dǎo)航帶來(lái)分散用戶注意力的情況，給用戶更沉浸式的操作感和閱讀感，同時(shí)可以最大限度利用屏幕空間。

缺點(diǎn)：側(cè)邊導(dǎo)航屬于二級(jí)導(dǎo)航，用戶使用的頻率會(huì)降低，不利于產(chǎn)品頁(yè)面流量的最大化，越放在下面的功能點(diǎn)擊率越低，如果產(chǎn)品框架比較大，有很多功能需要推廣時(shí)，一般不用此類導(dǎo)航。

⑥ 列表式導(dǎo)航欄

通常用來(lái)展示某個(gè)具體模塊內(nèi)容的信息進(jìn)行分類，以列表的形式呈現(xiàn)大量的條目。多用于輔助主導(dǎo)航來(lái)展現(xiàn)信息甚至更多層次的內(nèi)容，有時(shí)候需要一些提示信息。

優(yōu)點(diǎn)：

列表式結(jié)構(gòu)具有很強(qiáng)的延展性，調(diào)整的彈性高，菜單的排序更符合人的閱讀習(xí)慣，它的導(dǎo)航效率高；

可以引入字母索引，在菜單很多時(shí)對(duì)菜單進(jìn)行二次分類。

缺點(diǎn)：

承載的信息種類比較單一，容易引起用戶的單調(diào)感，很難讓用戶長(zhǎng)時(shí)間停留，如果列表中蘊(yùn)含的信息量比較龐大，往往需要加入搜索功能或者索引，否則用戶會(huì)遇到尋找信息的困難。

⑦ 宮格式導(dǎo)航欄

一般作為信息或平臺(tái)的入口，為產(chǎn)品或項(xiàng)目信息提供聚合的載體，適合承載訂閱類產(chǎn)品或眾多屬性差異非常明顯的分類信息，此類導(dǎo)航信息的呈現(xiàn)內(nèi)容比較少，但是每個(gè)項(xiàng)目選取的效率比較高。

優(yōu)點(diǎn)：

1. 可以通過(guò)入口來(lái)進(jìn)行流量的分發(fā)，具有較強(qiáng)的延展性，可以無(wú)限擴(kuò)展內(nèi)容；
2. 可以劃分多個(gè)內(nèi)容、多個(gè)模式，由不同團(tuán)隊(duì)獨(dú)立開(kāi)發(fā)每個(gè)模塊再聚合。

缺點(diǎn)：

1. 宮格式結(jié)構(gòu)是信息或平臺(tái)的入口，所以具體的信息往往隱藏在下一級(jí)界面，用戶無(wú)法第一時(shí)間看到信息，會(huì)增加用戶的認(rèn)知成本；
2. 同時(shí)多個(gè)入口的情況下用戶選擇壓力大，不同入口之間缺乏聯(lián)動(dòng)性，有可能會(huì)增加用戶的操作。

⑧ 卡片式導(dǎo)航欄

宮格式導(dǎo)航的一種延展形式，通過(guò)增加內(nèi)容的可視化程度讓每個(gè)條目呈現(xiàn)更多的信息。它能根據(jù)頁(yè)面內(nèi)容的變化及時(shí)更新圖片，適合以圖片為主的內(nèi)容，像新聞、美食、旅行、視頻圖片等經(jīng)常使用，常作為二級(jí)導(dǎo)航。

優(yōu)點(diǎn)：對(duì)運(yùn)營(yíng)量的要求比較低，而且單個(gè)條目的轉(zhuǎn)化率會(huì)相應(yīng)的提高。

缺點(diǎn)：當(dāng)運(yùn)營(yíng)量較大的時(shí)候，這種結(jié)構(gòu)會(huì)降低用戶尋找信息的效率。

⑨ 輪播（平鋪）式導(dǎo)航

適用于足夠扁平化的內(nèi)容和隨意瀏覽的閱讀模式，將所有信息平鋪在一個(gè)頁(yè)面，很容易帶來(lái)高大上的視覺(jué)體驗(yàn)。

優(yōu)點(diǎn)：最大程度的保證了頁(yè)面的簡(jiǎn)潔性和內(nèi)容的完整性，且一般都會(huì)結(jié)合滑動(dòng)切換的手勢(shì)，操作起來(lái)也非常方便。

缺點(diǎn)：用戶只能切換的相鄰頁(yè)面，很難跳轉(zhuǎn)到非相鄰的頁(yè)面，容易迷失位置。

四、設(shè)計(jì)落地-以 PC 端為例

1. 第一步：整理層級(jí)框架

制定出一個(gè)能滿足層級(jí)顯示和操作的交互結(jié)構(gòu)出來(lái)，值得注意的是，導(dǎo)航選項(xiàng)中，并不是所有的選項(xiàng)都是用來(lái)跳轉(zhuǎn)的，有的菜單是用來(lái)輔助區(qū)分內(nèi)容和用來(lái)展開(kāi)的，我們可以在菜單上標(biāo)注說(shuō)明。

2. 第二步：思維導(dǎo)圖提取信息

現(xiàn)狀：一級(jí)菜單 11 個(gè)，二級(jí)菜單 37 個(gè)，最多有三級(jí)，產(chǎn)品經(jīng)理反饋二期會(huì)有新增功能

分析：一級(jí)菜單目前 11 個(gè)已經(jīng)超過(guò)頂部導(dǎo)航的顯示范圍，且后續(xù)會(huì)不定數(shù)量新增，考慮到導(dǎo)航的擴(kuò)展性及容納性，側(cè)邊導(dǎo)航可能更適合產(chǎn)品本身

3. 第三步：設(shè)計(jì)導(dǎo)航欄

整理好上方的內(nèi)容層級(jí)，到具體設(shè)計(jì)步驟里，首先要做的，就是制定出一個(gè)能滿足層級(jí)顯示和操作的交互結(jié)構(gòu)出來(lái)。

再整理一遍，側(cè)邊欄的內(nèi)容包含：

1. 不可點(diǎn)擊的分類標(biāo)題
2. 可以展開(kāi)的一級(jí)分類
3. 可以實(shí)現(xiàn)跳轉(zhuǎn)的一級(jí)分類
4. 可以點(diǎn)擊的二級(jí)分類

而可交互的元素，對(duì)應(yīng)的交互狀態(tài)就包括：

1. 鼠標(biāo)懸浮一級(jí)菜單樣式
2. 鼠標(biāo)懸浮二級(jí)菜單樣式
3. 選中一級(jí)分類，一級(jí)分類高亮
4. 展開(kāi)一級(jí)并選中二級(jí)分類，二級(jí)分類高亮

先用原型做個(gè)示意，它的狀態(tài)包含了默認(rèn)、選中一級(jí)、選中二級(jí)三種情況：

4. 第四步：導(dǎo)航欄的選中樣式

菜單的選中樣式是指示用戶當(dāng)前所處位置的重要因素

設(shè)計(jì)時(shí)要注意：

1. 子級(jí)和父級(jí)之間的區(qū)分
2. 懸停狀態(tài)與選中狀態(tài)的區(qū)分
3. 如果有懸停展開(kāi)的子級(jí)，就要注意，顯示懸停菜單時(shí)，一級(jí)菜單盡量不出現(xiàn)背景填充的樣式。

5. 第五步：功能拓展

前面提到，產(chǎn)品二期會(huì)有新功能上線，后面還會(huì)有三期、四期…需要考慮導(dǎo)航欄的可拓展性，功能太多該怎么調(diào)整？

思考方向：側(cè)欄如何容納超過(guò)一屏的菜單？如何快速找到我想要的功能？

解決方案 1：?jiǎn)我挥脩艋蚪巧枰褂玫墓δ懿藛我话阒挥袔讉€(gè)，管理員可以針對(duì)角色或用戶進(jìn)行權(quán)限配置，特定角色展示特定菜單；

解決方案 2：可以增加搜索欄，對(duì)菜單進(jìn)行快速查找。

6. 最后落地

通過(guò)上述的分析與整理，便得出能滿足我們現(xiàn)有功能的導(dǎo)航欄。

注意踩坑：如果一種導(dǎo)航模式用起來(lái)不夠好用，是否需要在重構(gòu)時(shí)切換到另外一種模式呢？根據(jù) Jira 的用戶測(cè)試，95% 的老用戶對(duì)于這種情況會(huì)感到非常迷惑，即使是再小的導(dǎo)航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導(dǎo)航模式，一旦選定，盡量不要改變，所以在選擇使用何種導(dǎo)航時(shí)，一定要結(jié)合產(chǎn)品的特性來(lái)謹(jǐn)慎選擇。

五、逆向?qū)Ш?/h4>

橫向?qū)Ш胶颓斑M(jìn)導(dǎo)航分別指引用戶操作的水平漸進(jìn)和層級(jí)漸進(jìn)，逆向?qū)Ш絼t負(fù)責(zé)對(duì)反向軌跡進(jìn)行定義和實(shí)施，三者結(jié)合，實(shí)現(xiàn)對(duì)頁(yè)面的全局操控。

PC 產(chǎn)品，通過(guò)頁(yè)面常駐的導(dǎo)航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉(zhuǎn)。相較之下，移動(dòng)端的逆向?qū)Ш叫枰M(jìn)行更多的設(shè)計(jì)。后面的討論以移動(dòng)端為例。

逆向?qū)Ш降母拍罟俜蕉x出自 Material Design：從用戶行為維度，分成三類：Lateral navigation（橫向?qū)Ш剑?、Forward navigation（前進(jìn)導(dǎo)航）以及 Reverse navigation（逆向?qū)Ш剑?/p>

1. 什么時(shí)候需要逆向?qū)Ш剑?/strong>

2. 反向?qū)Ш降脑O(shè)計(jì)要點(diǎn)

① 邏輯：操作閉環(huán)

不管是由用戶還是系統(tǒng)觸發(fā)，都必須保留回退的通路。使用過(guò)程中不能給用戶留下死胡同、斷頭路。

② 體驗(yàn)：滿足預(yù)期

在完成第一步的基礎(chǔ)上，需要對(duì)反向?qū)Ш阶龈嗟乃伎肌?/p>

1. 當(dāng)用戶進(jìn)入比較深的頁(yè)面，并不一定希望按照順序依次返回。
2. 當(dāng)任務(wù)流結(jié)束的時(shí)候，用戶更期待返回“首頁(yè)”,而不是“上一頁(yè)”。

90%的情況下，我們可以用 “從哪來(lái)回哪去“的方式滿足需求。但是在 B 端產(chǎn)品中，容易出現(xiàn)鏈條很長(zhǎng)的任務(wù)流，用戶一個(gè)頁(yè)面一個(gè)頁(yè)面地操作，最后完成提交或者保存。這時(shí)候用戶進(jìn)入層級(jí)太深，“逐層返回“的方式就不太合適了，回到首頁(yè)更符合用戶的預(yù)期。

六、結(jié)束語(yǔ)

工作中還有很多可以進(jìn)行深入研究的地方，這里就說(shuō)到這，文中如有不當(dāng)?shù)牡胤剑瑲g迎大家一起交流。

作者：WOWDesign