你是否有過(guò)這樣的體驗(yàn)，進(jìn)入龐大且陌生的火車(chē)站后迷失方向：從哪里進(jìn)站？在哪里安檢？取票窗口在哪？這時(shí)你迫切需要一個(gè)準(zhǔn)確的導(dǎo)視牌，幫助你在建筑空間中定位，并找到前進(jìn)方向。

在軟件系統(tǒng)中用戶(hù)也會(huì)面臨類(lèi)似的問(wèn)題。帶著目標(biāo)進(jìn)入系統(tǒng)后，用戶(hù)會(huì)通過(guò)網(wǎng)頁(yè)內(nèi)散布著的信息氣味，去尋覓目標(biāo)功能入口，而提供這些信息和入口的便是導(dǎo)航系統(tǒng)。它解決了用戶(hù)"我在哪""到哪里去"的問(wèn)題，并為用戶(hù)提供移動(dòng)方式即頁(yè)面間跳轉(zhuǎn)。

本文將基于 B 端場(chǎng)景的全局導(dǎo)航展開(kāi)，歸納總結(jié)相關(guān)概念并提出設(shè)計(jì)建議。

一、為什么需要全局導(dǎo)航

根據(jù)導(dǎo)航的觸達(dá)范圍，在 B 端設(shè)計(jì)中常使用的導(dǎo)航可分六種類(lèi)型：

其中全局導(dǎo)航聯(lián)結(jié)了系統(tǒng)的所有板塊，從系統(tǒng)整體為用戶(hù)提供定位與導(dǎo)航，允許用戶(hù)在系統(tǒng)淺層進(jìn)行橫向移動(dòng)。全局導(dǎo)航是用戶(hù)使用網(wǎng)站功能的第一觸點(diǎn)，和首頁(yè)內(nèi)容一起塑造了用戶(hù)對(duì)網(wǎng)站的第一印象。全局導(dǎo)航對(duì)用戶(hù)體驗(yàn)的影響可以歸納為以下幾點(diǎn)：

1. 呈現(xiàn)信息架構(gòu)：構(gòu)建用戶(hù)對(duì)網(wǎng)站功能和內(nèi)容的整體認(rèn)知。
2. 提供關(guān)于當(dāng)前位置的線(xiàn)索：幫助用戶(hù)了解當(dāng)前位置與可前進(jìn)路徑。
3. 提供可訪(fǎng)問(wèn)入口：幫助用戶(hù)快速抵達(dá)目標(biāo)頁(yè)面。
4. 提供一致性的產(chǎn)品體驗(yàn)：全局導(dǎo)航通常是所有頁(yè)面的共同元素，可以強(qiáng)化品牌形象。

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

1. 導(dǎo)航菜單的構(gòu)成

導(dǎo)航菜單由多個(gè)菜單項(xiàng)集合而成。

1. 容器：承載導(dǎo)航菜單內(nèi)容的容器，容器顏色通常與頁(yè)面背景色形成對(duì)比。
2. 選項(xiàng)內(nèi)容：通過(guò)簡(jiǎn)短文本表述菜單選項(xiàng)選項(xiàng)，也可以采用圖標(biāo)+文本的形式。
3. 交互狀態(tài)：normal、hover、press、disable，點(diǎn)擊菜單熱區(qū)后跳轉(zhuǎn)至對(duì)應(yīng)的頁(yè)面。

在頁(yè)面瀏覽過(guò)程中，用戶(hù)的瀏覽動(dòng)線(xiàn)是從左上到右下進(jìn)行掃視，因此全局導(dǎo)航普遍被放置在頁(yè)面頂部，或者頁(yè)面左側(cè)，由此產(chǎn)生了常用的幾種全局導(dǎo)航菜單范式。

2. 水平導(dǎo)航菜單

導(dǎo)航菜單放置于頁(yè)面頂欄，橫向水平延展。其中選項(xiàng)優(yōu)先級(jí)從左到右遞減。

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

1. 導(dǎo)航欄面積較小，有較大屏幕空間用于內(nèi)容展示。
2. 頁(yè)面簡(jiǎn)潔，選項(xiàng)數(shù)量有限，減輕用戶(hù)的認(rèn)知負(fù)載。
3. 在長(zhǎng)頁(yè)面中，導(dǎo)航上下布局與用戶(hù)瀏覽方向一致（縱向滾動(dòng)查看），沉浸感更強(qiáng)。

缺點(diǎn)

1. 導(dǎo)航菜單間切換較為不便。
2. 若菜單選項(xiàng)名稱(chēng)過(guò)長(zhǎng)、數(shù)量過(guò)多會(huì)受到橫向尺寸限制。
3. 導(dǎo)航菜單橫向排布，用戶(hù)掃視效率低。

適用于：導(dǎo)航菜單數(shù)量較少的場(chǎng)景；內(nèi)容向下延展的長(zhǎng)頁(yè)面，如官網(wǎng)頁(yè)面

3. 垂直導(dǎo)航菜單

導(dǎo)航菜單放置于頁(yè)面左側(cè)欄，縱向垂直延展。其中選項(xiàng)優(yōu)先級(jí)從上到下遞減。

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

1. 用戶(hù)可以快速在導(dǎo)航菜單之間切換。
2. 充足的縱向空間可以容納更多選項(xiàng)，選項(xiàng)過(guò)多時(shí)可以對(duì)一級(jí)導(dǎo)航進(jìn)行分類(lèi)。
3. 縱向排布的菜單內(nèi)容，方便用戶(hù)快速掃視并識(shí)別。

缺點(diǎn)

1. 導(dǎo)航欄面積較大，用于內(nèi)容展示的區(qū)域變小。
2. 視覺(jué)突出，瀏覽過(guò)程中打斷感強(qiáng)。
3. 適用于：導(dǎo)航項(xiàng)較多、功能屬性強(qiáng)的場(chǎng)景，如大部分 toB 網(wǎng)頁(yè)。

4. 混合式導(dǎo)航菜單

同時(shí)使用水平導(dǎo)航菜單和垂直導(dǎo)航菜單。通常頂欄為一級(jí)導(dǎo)航，承載全局類(lèi)目和功能；側(cè)邊欄為二級(jí)導(dǎo)航，提供具體網(wǎng)站架構(gòu)和功能。

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

1. 外顯一級(jí)、二級(jí)導(dǎo)航，提升網(wǎng)站結(jié)構(gòu)可見(jiàn)性。
2. 可以容納更多信息層級(jí)。
3. 充分利用屏幕空間，信息密度高 。

缺點(diǎn)

1. 菜單面積較大，視覺(jué)復(fù)雜度高。
2. 用戶(hù)瀏覽動(dòng)線(xiàn)復(fù)雜，需要合理設(shè)計(jì)架構(gòu)。

適合量級(jí)大，復(fù)雜度高的的系統(tǒng)，如各種云服務(wù)后臺(tái)。

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

1. 彈出

為了容納更多的信息量級(jí)，hover 在一級(jí)導(dǎo)航下可以彈出二級(jí)菜單。

頂部導(dǎo)航/側(cè)邊導(dǎo)航的不同彈出方式：

當(dāng)二級(jí)菜單內(nèi)容過(guò)多時(shí)，也可以像各種云服務(wù)網(wǎng)站一樣彈出站點(diǎn)地圖。但需要對(duì)二級(jí)導(dǎo)航進(jìn)行合理分類(lèi)、規(guī)劃，否則影響用戶(hù)信息搜尋速度。

2. 搜索

當(dāng)二級(jí)導(dǎo)航過(guò)多時(shí)，增加搜索功能可以幫助用戶(hù)更快速觸達(dá)入口。

四、設(shè)計(jì)建議

用戶(hù)使用導(dǎo)航菜單是一個(gè)信息尋覓的過(guò)程，包括信號(hào)捕獲、行為實(shí)施、反饋與評(píng)估等流程。在系統(tǒng)設(shè)計(jì)時(shí)需要注意全局導(dǎo)航的可用性，確保用戶(hù)快速找到目標(biāo)入口，提高系統(tǒng)使用效率。本環(huán)節(jié)將從導(dǎo)航使用體驗(yàn)出發(fā)，對(duì)全局導(dǎo)航的設(shè)計(jì)要點(diǎn)進(jìn)行歸納總結(jié)。

全局要有足夠的視覺(jué)權(quán)重，默認(rèn)折疊全局導(dǎo)航會(huì)使用戶(hù)難以發(fā)現(xiàn)入口。一般默認(rèn)側(cè)邊欄展開(kāi)，不需要時(shí)收起。

保持結(jié)構(gòu)簡(jiǎn)潔，若導(dǎo)航層級(jí)過(guò)深（如三級(jí)導(dǎo)航及以上）可見(jiàn)性將大大降低。

控制水平菜單選項(xiàng)數(shù)量，避免過(guò)長(zhǎng)溢出，同時(shí)需要考慮未來(lái)業(yè)務(wù)的可拓展性。

保證可讀易于掃視。菜單選項(xiàng)名稱(chēng)保持辨識(shí)度，避免大量使用重復(fù)文本。

準(zhǔn)確映射內(nèi)容，跳轉(zhuǎn)頁(yè)面的可預(yù)見(jiàn)性，采用易于理解和識(shí)別的名稱(chēng)/圖標(biāo)。

五、小結(jié)

全局導(dǎo)航是 B 端系統(tǒng)中不可或缺的一環(huán)，目前已經(jīng)有非常成熟的設(shè)計(jì)解決方案。水平菜單和垂直菜單都很大程度上平衡了界面簡(jiǎn)潔和功能實(shí)用，在 B 端系統(tǒng)得到廣泛應(yīng)用。

在系統(tǒng)設(shè)計(jì)前期，需要根據(jù)內(nèi)容整體框架和頁(yè)面布局，選擇合適的導(dǎo)航菜單類(lèi)型。在全局導(dǎo)航的具體設(shè)計(jì)中，則需要著重考慮提高菜單選項(xiàng)的可見(jiàn)性和用戶(hù)使用效率。

最后，用戶(hù)的交互行為不僅依賴(lài)當(dāng)下的界面外觀和內(nèi)容，還依賴(lài)用戶(hù)的先驗(yàn)知識(shí)和使用經(jīng)驗(yàn)，因此優(yōu)秀的導(dǎo)航系統(tǒng)應(yīng)該與用戶(hù)的心智模型相匹配。

作者：應(yīng)謀鬼計(jì)