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

前言

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

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

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

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

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

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

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

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

① 目前在哪？

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

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

② 去向哪？

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

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

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

1. 遵循 7±2 原則

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

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

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

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

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

說的太干，我們看看實際案例

① 小鵝通

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

② 微盟

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

③ 有贊

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

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

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

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

舉個例子

① 有贊-商品管理

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

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

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

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

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

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

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

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

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

總結(jié)

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

四、導(dǎo)航層級

1. 顏色區(qū)分

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

舉個例子

① 微信顏色變革

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

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

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

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

總結(jié)

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

舉個例子

① 飛書

左側(cè)導(dǎo)航深色，能夠讓用戶更加沉浸式體驗，因為屏幕邊緣為深色，用戶在適應(yīng)能夠做到區(qū)分

2. 投影區(qū)分

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

舉個例子

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

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

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

3. 分割線區(qū)分

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

舉個例子

① Dribbble 案例

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

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

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

舉個例子

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

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

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

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

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

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

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

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

② 用戶體驗地圖的繪制

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

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

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

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

五、提升易用性

1. 我的菜單

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

舉個例子

① 印象筆記

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

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

2. 角色配置

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

舉個例子

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

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

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

總結(jié)

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

作者：iFlytek STC UXD