導(dǎo)航菜單對(duì)于用戶的使用來(lái)說(shuō)尤為重要，本文是我從實(shí)際工作出發(fā)，結(jié)合自身產(chǎn)品和過(guò)去經(jīng)驗(yàn)對(duì)于 B 端產(chǎn)品導(dǎo)航進(jìn)行的一次全面總結(jié)。

前言

在 B 端后臺(tái)系統(tǒng)中，導(dǎo)航菜單是至關(guān)重要的交互元素，每個(gè)菜單項(xiàng)通常都固定在特定位置，難以更改。對(duì)于用戶而言，導(dǎo)航菜單的使用目的明確，可以幫助用戶快速找到并執(zhí)行特定功能。因此，導(dǎo)航的核心作用在于分發(fā)和引導(dǎo)功能，幫助用戶在復(fù)雜的后臺(tái)界面中高效定位并進(jìn)行操作。

一、認(rèn)識(shí)導(dǎo)航

在現(xiàn)實(shí)生活中，我們經(jīng)常依賴不同形式的"導(dǎo)航"來(lái)尋找目標(biāo)物品。

1. 圖書(shū)館的書(shū)架分類：通過(guò)清晰的書(shū)架標(biāo)簽和分類指引，讓我們快速找到所需的書(shū)籍。
2. 商場(chǎng)的洗手間指示牌：明確的指引幫助顧客迅速找到洗手間，避免迷路或浪費(fèi)時(shí)間。
3. 醫(yī)院的科室牌：通過(guò)科室導(dǎo)向標(biāo)識(shí)，患者可以高效地找到對(duì)應(yīng)的診療科室。

這些現(xiàn)實(shí)中的導(dǎo)航方式和 B 端設(shè)計(jì)中的導(dǎo)航原理相似，都是通過(guò)簡(jiǎn)潔明確的指引幫助用戶快速、準(zhǔn)確地達(dá)到目標(biāo)。

數(shù)字屏幕環(huán)境中，用戶對(duì)于導(dǎo)航的需求同樣顯著，因此，可以將導(dǎo)航界定為"承擔(dān)頁(yè)面信息引導(dǎo)功能的組件"，統(tǒng)稱之為導(dǎo)航組件。

1. 導(dǎo)航的作用及角色究竟是什么？

導(dǎo)航的核心功能在于對(duì)產(chǎn)品的各項(xiàng)功能進(jìn)行有序分發(fā)與引導(dǎo)，確保用戶能夠高效且準(zhǔn)確地穿梭于各個(gè)模塊之間。為實(shí)現(xiàn)這一作用，我們需要深入考慮"用戶來(lái)源何處？欲往何方？當(dāng)前身處何地？"這三個(gè)關(guān)鍵問(wèn)題，并將其與具體的組件設(shè)計(jì)相結(jié)合，從而詳細(xì)闡述這些組件在導(dǎo)航體系中所發(fā)揮的作用。

① 目前在哪？

在 B 端導(dǎo)航中，明確當(dāng)前位置至關(guān)重要。由于系統(tǒng)中常涉及頁(yè)面跳轉(zhuǎn)和關(guān)聯(lián)，標(biāo)明當(dāng)前位置能幫助用戶清楚了解自己的位置，便于操作。常見(jiàn)的組件包括頁(yè)頭、分頁(yè)、步驟條、錨點(diǎn)和導(dǎo)航菜單。

對(duì)于復(fù)雜系統(tǒng)，頁(yè)頭設(shè)計(jì)尤為重要，它能幫助用戶快速理解當(dāng)前系統(tǒng)位置，避免迷失方向。像阿里云和騰訊云等云產(chǎn)品，因業(yè)務(wù)廣泛，頁(yè)頭的使用頻率很高，以確保用戶能清楚知道自己所在的位置

② 去向哪？

在導(dǎo)航設(shè)計(jì)中，頁(yè)面流向需要清晰指示。常用的組件如錨點(diǎn)、分頁(yè)、下拉菜單和導(dǎo)航菜單，幫助用戶了解頁(yè)面的流向，確保導(dǎo)航功能的有效分發(fā)。

二、四種常見(jiàn)導(dǎo)航

三、導(dǎo)航設(shè)計(jì)原則

1. 遵循 7±2 原則

導(dǎo)航菜單的設(shè)計(jì)應(yīng)遵循"7±2 原則"，即建議最多不超過(guò) 9 個(gè)選項(xiàng)，最少不低于 5 個(gè)選項(xiàng)。

這一原則源自 1956 年喬治·米勒對(duì)短時(shí)記憶能力的定量研究發(fā)現(xiàn)：人類頭腦在最佳狀態(tài)下能記憶的信息塊數(shù)量為 7 個(gè)左右，浮動(dòng)范圍為±2。當(dāng)記憶的信息項(xiàng)超過(guò) 5-9 項(xiàng)時(shí)，人類的記憶力開(kāi)始下降，容易出錯(cuò)。

在實(shí)際生活中，我們常將一長(zhǎng)串?dāng)?shù)字分成大約 7 個(gè)一組來(lái)記憶，以降低記憶難度。米勒將這種分組記憶的單位稱為"組塊"。因此，在設(shè)計(jì)導(dǎo)航菜單時(shí)，合理控制選項(xiàng)數(shù)量，遵循"7±2 原則"，有助于提升用戶體驗(yàn)和記憶效率。

根據(jù) 7±2 原則，導(dǎo)航菜單的選項(xiàng)數(shù)量應(yīng)控制在 9 個(gè)以內(nèi)，以免增加用戶查找難度；若少于 5 個(gè)，則可能效率不高。當(dāng)選項(xiàng)超過(guò) 9 個(gè)時(shí)，分組尤為關(guān)鍵。

通過(guò)對(duì)菜單進(jìn)行分類，可以簡(jiǎn)化查找過(guò)程，提高效率，從而提升用戶體驗(yàn)。

說(shuō)的太干，我們看看實(shí)際案例

① 小鵝通

小鵝通的導(dǎo)航包含 14 個(gè)菜單，并且各菜單之間的形式和表現(xiàn)方式存在較大差異，這導(dǎo)致用戶在使用時(shí)容易產(chǎn)生混亂和困惑。導(dǎo)航設(shè)計(jì)的統(tǒng)一性和一致性缺乏，影響了用戶的導(dǎo)航體驗(yàn)。

② 微盟

微盟有 11 個(gè)一級(jí)菜單，這明顯超出了"7±2"的設(shè)計(jì)原則，即一個(gè)用戶在短時(shí)間內(nèi)能夠有效處理的信息量。超出這一數(shù)量會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。此外，微盟的導(dǎo)航菜單缺乏有效分組，導(dǎo)致視覺(jué)上沒(méi)有明顯的層次感，使得用戶難以快速找到所需功能，影響了信息的查找和記憶。

③ 有贊

有贊的導(dǎo)航菜單數(shù)量雖然也超過(guò) 9 個(gè)，但它采用了合理的分組設(shè)計(jì)，將相似的功能進(jìn)行歸類，從而有效提升了用戶查找信息的效率。通過(guò)分組，用戶能夠更快速地定位所需功能，整體設(shè)計(jì)相對(duì)更符合用戶需求和體驗(yàn)。

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

當(dāng)導(dǎo)航菜單超過(guò)兩級(jí)層級(jí)時(shí)，通常表明產(chǎn)品在用戶體驗(yàn)設(shè)計(jì)上缺乏深入思考。

導(dǎo)航菜單的層級(jí)越多，用戶體驗(yàn)通常會(huì)受到影響。對(duì)于那些具有三級(jí)導(dǎo)航的菜單，往往會(huì)通過(guò)設(shè)計(jì)優(yōu)化將部分導(dǎo)航合并或隱藏，以簡(jiǎn)化用戶操作，減輕他們的認(rèn)知負(fù)擔(dān)，從而提升整體體驗(yàn)。

舉個(gè)例子

① 有贊-商品管理

在有贊零售的導(dǎo)航菜單中，雖然有三個(gè)層級(jí)，但通過(guò)交互優(yōu)化，二級(jí)和三級(jí)菜單被直接展示，形成了一個(gè)統(tǒng)一的視圖。這種設(shè)計(jì)有效減少了用戶的層層尋找，提高了操作效率。

3. 鼠標(biāo)懸停還是鼠標(biāo)點(diǎn)擊

在導(dǎo)航設(shè)計(jì)中，點(diǎn)擊與懸停（hover）操作看似簡(jiǎn)單，但它們的適用場(chǎng)景和設(shè)計(jì)屬性差異卻很大。雖然這兩種操作方式本身并沒(méi)有絕對(duì)的對(duì)與錯(cuò)，但不同的場(chǎng)景需要不同的設(shè)計(jì)策略。

① 鼠標(biāo)懸停操作

鼠標(biāo)懸停觸發(fā)的操作通常持續(xù)時(shí)間較短，這可能會(huì)讓用戶感到操作不夠穩(wěn)定，容易產(chǎn)生挫敗感。尤其在選擇下一級(jí)菜單時(shí)，鼠標(biāo)的移動(dòng)也可能導(dǎo)致菜單消失或不響應(yīng)，進(jìn)一步加劇用戶的不適。因此，設(shè)計(jì)時(shí)需要特別注意懸停操作的流暢性和時(shí)長(zhǎng)。

適用場(chǎng)景： 懸停操作通常適合用于只有一級(jí)菜單的場(chǎng)景，能夠快速顯示子菜單，不會(huì)讓用戶感到迷失或困擾。

② 鼠標(biāo)點(diǎn)擊操作

鼠標(biāo)點(diǎn)擊操作多用于多級(jí)導(dǎo)航。點(diǎn)擊后，用戶能夠獲得明確的反饋，知道菜單不會(huì)因?yàn)槭髽?biāo)移開(kāi)而突然消失。這種形式更加穩(wěn)定，適用于需要多層級(jí)導(dǎo)航的場(chǎng)景。點(diǎn)擊操作提供了更清晰的互動(dòng)路徑，能夠有效減少操作上的不確定性。

適用場(chǎng)景： 點(diǎn)擊操作適合用于復(fù)雜的導(dǎo)航結(jié)構(gòu)，尤其是多級(jí)菜單，需要明確的指示和反饋來(lái)確保用戶操作順暢。

總結(jié)

在選擇懸停還是點(diǎn)擊操作時(shí)，設(shè)計(jì)師應(yīng)根據(jù)具體的導(dǎo)航層級(jí)和用戶需求進(jìn)行思考。
懸停操作適合簡(jiǎn)單、直觀的菜單，而點(diǎn)擊操作則更適合復(fù)雜的、多層級(jí)的菜單結(jié)構(gòu)。兩者之間的選擇和設(shè)計(jì)差異，直接影響用戶體驗(yàn)的流暢度和直觀性。

四、導(dǎo)航層級(jí)

1. 顏色區(qū)分

顏色區(qū)分作為一種直接且有效的視覺(jué)表達(dá)方式，廣泛應(yīng)用于后臺(tái)頁(yè)面中，幫助用戶快速識(shí)別不同狀態(tài)和功能。

舉個(gè)例子

① 微信顏色變革

微信在 2018 年 12 月發(fā)布的 7.0 版本中，將頂部導(dǎo)航欄的顏色從黑色改為白色，引起了用戶的廣泛討論和爭(zhēng)議。然而，隨著時(shí)間的推移，用戶逐漸適應(yīng)了這一改變，甚至開(kāi)始忘記了最初的爭(zhēng)議。這一過(guò)程反映了顏色變化在設(shè)計(jì)中的重要性，也體現(xiàn)了用戶對(duì)于設(shè)計(jì)演變的逐步接受和適應(yīng)。

這一變化說(shuō)明，設(shè)計(jì)中的顏色變動(dòng)雖然可能在初期引發(fā)不適，但在時(shí)間的推移和用戶習(xí)慣的培養(yǎng)下，最終能夠被接受并成為常態(tài)。因此，顏色作為區(qū)分和表達(dá)狀態(tài)的工具，其影響力和接受度在不同階段是不斷變化的。

② 網(wǎng)頁(yè)顏色變革

2019 年，YouTube、Twitch、Twitter 等平臺(tái)的 WEB 端進(jìn)行了大規(guī)模改版，普遍去除了多余的塊面和灰色背景，通過(guò)增加留白和空間，簡(jiǎn)化頁(yè)面布局。這種設(shè)計(jì)趨勢(shì)強(qiáng)調(diào)簡(jiǎn)潔性，減少視覺(jué)負(fù)擔(dān)，使頁(yè)面更加清晰、舒適，提升了用戶體驗(yàn)。

總結(jié)

如果 WEB 端開(kāi)始趨向簡(jiǎn)潔，那么 B 端產(chǎn)品的設(shè)計(jì)也很可能會(huì)朝這個(gè)方向發(fā)展。
在 B 端設(shè)計(jì)中，顏色的區(qū)分常用于導(dǎo)航層和內(nèi)容層之間，以明確區(qū)分不同的業(yè)務(wù)模塊。這種方式簡(jiǎn)潔直觀，尤其適用于復(fù)雜系統(tǒng)

舉個(gè)例子

① 飛書(shū)

左側(cè)導(dǎo)航深色，能夠讓用戶更加沉浸式體驗(yàn)，因?yàn)槠聊贿吘墳樯钌?，用戶在適應(yīng)能夠做到區(qū)分

2. 投影區(qū)分

移動(dòng)端投影效果的廣泛應(yīng)用正影響 WEB 端設(shè)計(jì)，特別是在導(dǎo)航中，Z 軸空間的運(yùn)用通過(guò)彌散投影和分層設(shè)計(jì)提升頁(yè)面層次感，使功能層級(jí)更清晰，有助于用戶快速理解導(dǎo)航結(jié)構(gòu)，提升易用性和體驗(yàn)。

舉個(gè)例子

在交互設(shè)計(jì)中，Z 軸的作用尤為關(guān)鍵。它通過(guò)分隔不同層級(jí)、實(shí)現(xiàn)層級(jí)間的自然過(guò)渡，顯著增強(qiáng)頁(yè)面的層次感和結(jié)構(gòu)清晰度。

① Teambition（阿里巴巴在線協(xié)作工具）

頁(yè)面設(shè)計(jì)通過(guò)投影效果突顯層級(jí)關(guān)系，幫助用戶直觀理解頁(yè)面結(jié)構(gòu)和功能。這種設(shè)計(jì)不僅提升了頁(yè)面的可用性，也優(yōu)化了用戶的導(dǎo)航體驗(yàn)。

3. 分割線區(qū)分

分割線在設(shè)計(jì)中往往用于區(qū)分不同區(qū)域，但其功能性并不強(qiáng)，更多的是為了提升設(shè)計(jì)感。對(duì)于產(chǎn)品來(lái)說(shuō)，分割線需要在視覺(jué)上做到適度平衡：如果分割線過(guò)深，頁(yè)面會(huì)顯得割裂；如果分割線過(guò)淺，區(qū)域劃分又不夠明確。因此，設(shè)計(jì)師在使用分割線時(shí)需要精準(zhǔn)把控。

舉個(gè)例子

① Dribbble 案例

很多設(shè)計(jì)通過(guò)簡(jiǎn)單的線條與空間的結(jié)合，將導(dǎo)航區(qū)和內(nèi)容區(qū)分開(kāi)，營(yíng)造了良好的視覺(jué)效果。這種設(shè)計(jì)形式非常美觀，但如果你是剛開(kāi)始嘗試做導(dǎo)航，建議不要輕易采用，因?yàn)樗髮?duì)頁(yè)面空間的把控非常嚴(yán)格，稍有不慎可能影響整體的設(shè)計(jì)效果和用戶體驗(yàn)。

4. 菜單廣度：導(dǎo)航菜單中每一個(gè)層級(jí)包含的菜單項(xiàng)數(shù)目為廣度

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

舉個(gè)例子

① 騰訊云（菜單數(shù)量多）

騰訊云采用了一種新的導(dǎo)航模式：

1. 全部菜單導(dǎo)航： 展示所有 100+個(gè)云產(chǎn)品，用戶可以查看完整列表。
2. 搜索菜單： 通過(guò)搜索框，用戶能夠快速篩選出自己需要的產(chǎn)品，提升查找效率。

這種設(shè)計(jì)在保證業(yè)務(wù)需求的同時(shí)，通過(guò)個(gè)性化的方式，使得大量菜單能夠被有效地整合進(jìn)一個(gè)導(dǎo)航欄。這樣不僅滿足了不同用戶的需求，還提升了用戶的操作便捷性。

5. 菜單深度：導(dǎo)航菜單層級(jí)的數(shù)目為深度

當(dāng)面對(duì)菜單深度過(guò)深的情況時(shí)，設(shè)計(jì)師可以從以下幾個(gè)方面進(jìn)行優(yōu)化考慮：

① 與產(chǎn)品經(jīng)理溝通是否到位

與產(chǎn)品經(jīng)理的溝通至關(guān)重要，首先需明確菜單架構(gòu)設(shè)計(jì)的初衷，判斷是否有重新梳理的空間，并探討現(xiàn)有菜單層級(jí)是否過(guò)于復(fù)雜及優(yōu)化的可能性。為提高溝通效率，設(shè)計(jì)師可提前使用思維導(dǎo)圖工具梳理菜單目錄，既能理清結(jié)構(gòu)，又能為后續(xù)討論節(jié)省時(shí)間并提升效率。

② 用戶體驗(yàn)地圖的繪制

在 B 端產(chǎn)品中，雖然用戶的需求多樣且復(fù)雜，但通過(guò)研究用戶的操作步驟，常常能夠找到一些規(guī)律。設(shè)計(jì)師可以基于這些規(guī)律，對(duì)菜單進(jìn)行優(yōu)化。

例如，在醫(yī)療系統(tǒng)中，根據(jù)不同角色（如前臺(tái)、咨詢師、醫(yī)生和老板）的需求，設(shè)計(jì)師可以明確每個(gè)角色所關(guān)注的核心信息。老板可能最關(guān)心門(mén)店數(shù)據(jù)、營(yíng)業(yè)額、醫(yī)生的治療量等，而醫(yī)生可能更多關(guān)注患者的治療記錄。根據(jù)這些角色需求繪制用戶體驗(yàn)地圖，明確每個(gè)角色的操作流程和頻繁使用的功能，從而設(shè)計(jì)出合理的菜單層級(jí)和結(jié)構(gòu)。

通過(guò)這種方式，設(shè)計(jì)師可以確保每個(gè)角色的需求都被準(zhǔn)確地映射到菜單結(jié)構(gòu)上，避免不必要的層級(jí)和復(fù)雜操作，提升整個(gè)系統(tǒng)的可用性和效率。

通過(guò)這種方式，設(shè)計(jì)師可以確保每個(gè)角色的需求都被準(zhǔn)確地映射到菜單結(jié)構(gòu)上，避免不必要的層級(jí)和復(fù)雜操作，提升整個(gè)系統(tǒng)的可用性和效率。

五、提升易用性

1. 我的菜單

對(duì)于面向多角色用戶的 B 端產(chǎn)品，可以考慮增加一個(gè)"我的菜單"選項(xiàng)。這一功能通過(guò)標(biāo)簽化和自定義菜單，讓用戶能夠?qū)⒊Ｓ玫牟藛雾?xiàng)進(jìn)行快捷添加。用戶可以根據(jù)自己的需求，快速選擇和跳轉(zhuǎn)到常用功能。

舉個(gè)例子

① 印象筆記

用戶可以將常用的筆記本或模塊添加到快捷方式欄中，方便快速訪問(wèn)。這種方式大大提高了用戶在使用過(guò)程中的效率，避免了每次都要從繁雜的菜單中找到特定功能的困擾。

通過(guò)這種定制化的菜單設(shè)計(jì)，用戶能夠根據(jù)自己的工作習(xí)慣和需求，靈活配置導(dǎo)航，使得 B 端產(chǎn)品的使用體驗(yàn)更加個(gè)性化、便捷。

2. 角色配置

如果 B 端產(chǎn)品服務(wù)于不同的用戶角色，那么在導(dǎo)航設(shè)計(jì)時(shí)，可以根據(jù)用戶的角色差異，提供個(gè)性化的導(dǎo)航展示。這種方式通過(guò)角色篩選，能夠簡(jiǎn)化復(fù)雜的導(dǎo)航結(jié)構(gòu)，提高導(dǎo)航的針對(duì)性和效率。

舉個(gè)例子

管理員可以根據(jù)公司的業(yè)務(wù)需求，為不同角色配置專屬的導(dǎo)航權(quán)限。

例如，管理員可以為前臺(tái)、經(jīng)理、技術(shù)人員等不同角色，定制不同的菜單選項(xiàng)和功能權(quán)限。這樣一來(lái)，每個(gè)角色只會(huì)看到與自己工作相關(guān)的功能，避免了菜單的冗余展示，提高了整體的使用效率。

這種設(shè)計(jì)方法不僅減少了用戶操作時(shí)的認(rèn)知負(fù)擔(dān)，還使得導(dǎo)航結(jié)構(gòu)更加清晰，避免了多余的功能展示。通過(guò)精細(xì)化的角色配置，滿足了不同用戶的需求，同時(shí)也降低了設(shè)計(jì)和維護(hù)的復(fù)雜度。

總結(jié)

導(dǎo)航是 B 端產(chǎn)品的骨骼和地圖，串聯(lián)起復(fù)雜業(yè)務(wù)與高效操作的橋梁。設(shè)計(jì)師需深刻理解導(dǎo)航的核心作用，從結(jié)構(gòu)布局到層級(jí)規(guī)劃、從原則定義到體驗(yàn)優(yōu)化，全方位把控，才能打造簡(jiǎn)潔高效、用戶友好的導(dǎo)航體系，為業(yè)務(wù)賦能、為用戶減負(fù)。

作者：iFlytek STC UXD