導(dǎo)航菜單在 B 端任意一個(gè)產(chǎn)品中都是不可缺少的，且每一個(gè)導(dǎo)航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題，并且引導(dǎo)用戶進(jìn)行頁面間的跳轉(zhuǎn)操作，快速找到目標(biāo)。

假如你是第一次到京東總部藍(lán)方方，進(jìn)入陌生且龐大的建筑群中迷失了方向：哪里是 1 號(hào)樓？哪里是 A 座？哪里刷門禁？餐廳在哪里？這時(shí)，你就需要一個(gè)準(zhǔn)確的導(dǎo)視系統(tǒng)，幫你在空間中定位，并且找到前進(jìn)的方向。

同理，當(dāng)我們使用某個(gè)軟件系統(tǒng)時(shí)，也會(huì)面臨同樣的問題。當(dāng)用戶帶著問題和目的進(jìn)入了系統(tǒng)，會(huì)自動(dòng)去尋找目標(biāo)功能入口，提供這些信息和入口的便是導(dǎo)航。

導(dǎo)航菜單在 B 端任意一個(gè)產(chǎn)品中都是不可缺少的，且每一個(gè)導(dǎo)航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題，并且引導(dǎo)用戶進(jìn)行頁面間的跳轉(zhuǎn)操作，快速找到目標(biāo)。

根據(jù)導(dǎo)航的觸達(dá)范圍，在 B 端場景中常用的導(dǎo)航可以分類六個(gè)類型：

1. 全局導(dǎo)航
2. 局部導(dǎo)航
3. 頁內(nèi)導(dǎo)航
4. 下鉆類導(dǎo)航
5. 返回類導(dǎo)航
6. 聯(lián)想類導(dǎo)航

其中全局導(dǎo)航可以覆蓋整個(gè)網(wǎng)站的通路，往往表現(xiàn)為網(wǎng)站的一級(jí)分類，它不一定包含全局信息，但是可以讓用去渠到目標(biāo)關(guān)鍵節(jié)點(diǎn)上。全局導(dǎo)航對(duì)用戶體驗(yàn)的影響共有兩點(diǎn)：

1. 呈現(xiàn)內(nèi)容和功能的架構(gòu)。全局導(dǎo)航相當(dāng)于整個(gè)網(wǎng)站的骨架，支撐著內(nèi)容和功能組成的身體，構(gòu)建內(nèi)容和功能的整體認(rèn)知，扁平化用戶的任務(wù)路徑，幫助用戶了解當(dāng)前位置和目標(biāo)路徑。
2. 突出核心功能。將核心功能放在用戶最能接觸到的位置，適度隱藏次要功能。

并且全局導(dǎo)航和首頁內(nèi)容共同塑造了用戶對(duì)于網(wǎng)站的第一印象，同時(shí)強(qiáng)化品牌形象。

一、全局導(dǎo)航的基礎(chǔ)樣式

導(dǎo)航菜單是由多個(gè)菜單項(xiàng)集合組成的。菜單項(xiàng)由容器+選項(xiàng)內(nèi)容（圖標(biāo)+文字或文字）組成，交互行為是點(diǎn)擊菜單熱區(qū)后跳轉(zhuǎn)到相應(yīng)目標(biāo)頁面。

用戶的瀏覽動(dòng)線一般是左上到右下，所以全局導(dǎo)航一般被設(shè)置在頁面左側(cè)或頁面頂部。按照導(dǎo)航選項(xiàng)的權(quán)重或者優(yōu)先級(jí)一般分為三種樣式：

1. 橫向?qū)Ш?/strong>

橫向?qū)Ш街糜陧撁骓敳?，橫向水平延展，從左到右選項(xiàng)優(yōu)先級(jí)遞減。橫向?qū)Ш揭曈X干擾小，可以將較大的屏幕空間給到內(nèi)容展示。但拓展性較低，更適合官網(wǎng)等結(jié)構(gòu)簡單的產(chǎn)品。

2. 縱向（垂直）導(dǎo)航

縱向?qū)Ш街糜陧撁孀髠?cè)，垂直延展，選項(xiàng)優(yōu)先級(jí)由上而下遞減。用戶可以在不同選項(xiàng)中快速切換，操作效率較高；縱向空間可以容納更多菜單選項(xiàng)，并且可以延展二級(jí)分類。拓展性比較高，適合專注操作的后臺(tái)類產(chǎn)品。

但縱向?qū)Ш秸加妹娣e較大，視覺比較突出，瀏覽過程中打斷感比較強(qiáng)。有些網(wǎng)站為了減小視覺面積，也經(jīng)常使用折疊模式的縱向?qū)Ш健?/p>

3. 縱橫式導(dǎo)航

同時(shí)使用橫向和縱向?qū)Ш?，通常橫向?qū)Ш绞且患?jí)導(dǎo)航，用于展示全局類目和功能；縱向?qū)Ш綖槎?jí)導(dǎo)航，提供具體的功能和內(nèi)容。

這種導(dǎo)航可以容納更多的信息層級(jí)，信息密度較高。但菜單面積較大，視覺復(fù)雜度較高。適合操作比較復(fù)雜的后臺(tái)類產(chǎn)品，比如云產(chǎn)品。

二、全局導(dǎo)航的拓展能力

全局導(dǎo)航為了容納更多的信息量，就擁有強(qiáng)大的拓展能力，主要來承接導(dǎo)航菜單的深度和廣度。

1. 深度指導(dǎo)航的層級(jí)數(shù)目，層級(jí)越多，深度越大。

根據(jù)用戶需求和使用場景梳理產(chǎn)品架構(gòu)，當(dāng)層級(jí)過多時(shí)，需要對(duì)功能進(jìn)行分組。比如哪些功能需求是互相關(guān)聯(lián)，可以組合在一起的，這時(shí)就需要考慮用一個(gè)集合頁面來承接這些功能。

當(dāng)層級(jí)大于 2 個(gè)時(shí)，可以利用面包屑導(dǎo)航，用戶可以根據(jù)面包屑導(dǎo)航看到當(dāng)前操作的位置和軌跡，并且方便返回到任意位置。

2. 廣度指導(dǎo)航每一層級(jí)包含的菜單數(shù)目，數(shù)目越多，廣度越大。

合理規(guī)劃導(dǎo)航廣度，就可以用到“簡約四策略”，分別是刪除、組織、隱藏、轉(zhuǎn)移。

1. 刪除：刪除不必要的功能。精簡功能，刪除多余文字，精簡按鈕等，讓用戶集中注意力，避免在冗余的功能中喪失目標(biāo)感。
2. 組織：組織必須提供的功能。在視覺層面上，做到信息分層清晰；在產(chǎn)品層面上，做到根據(jù)內(nèi)容做功能分組，讓用戶更方便查閱和尋找。分塊越少，選擇越少，用戶負(fù)擔(dān)就越小。
3. 隱藏：隱藏非核心功能。不常用但不能少的功能，可以選擇隱藏，利用漸進(jìn)式的展示方式，只要不讓用戶找太久，就是有效的隱藏。
4. 轉(zhuǎn)移：轉(zhuǎn)移非擅長的功能。利用設(shè)備轉(zhuǎn)移、軟件轉(zhuǎn)移、向用戶轉(zhuǎn)移，比如將一些因?yàn)槠聊淮笮∮绊懻故镜墓δ茉谑謾C(jī)端進(jìn)行隱藏，只在電腦端做展示。

三、設(shè)計(jì)要點(diǎn)

1. 全局導(dǎo)航需要有足夠的視覺權(quán)重，如果菜單選項(xiàng)不是特別復(fù)雜，盡量不使用全局折疊的形式。一般默認(rèn)展開，不需要時(shí)可以折疊。

2. 保持結(jié)構(gòu)簡潔，導(dǎo)航層級(jí)如果太深，比如三級(jí)導(dǎo)航，影響導(dǎo)航的可見性。

3. 控制一級(jí)導(dǎo)航菜單數(shù)量，以免視覺溢出過多。保證文本易于辨識(shí)，使用已于理解的圖標(biāo)，減少重復(fù)文字，精簡菜單名稱。

導(dǎo)航如我們前進(jìn)路上的指示標(biāo)，指引用戶方向并承載產(chǎn)品內(nèi)容，也是 B 端產(chǎn)品系統(tǒng)中不可缺少的一環(huán)。產(chǎn)品擁有清晰、一致的導(dǎo)航，也要兼顧導(dǎo)航菜單選項(xiàng)的可見性和用戶操作效率，讓用戶有目標(biāo)感、良好的體驗(yàn)感，做一個(gè)與用戶心智模型匹配的導(dǎo)航系統(tǒng)。

作者：JellyDesign