生活中，我們會(huì)看到路標(biāo)、指示面板、箭頭指引諸如此類的常見(jiàn)的導(dǎo)航，其實(shí)網(wǎng)絡(luò)中也有很多導(dǎo)航指引。導(dǎo)航有什么用呢？導(dǎo)航設(shè)計(jì)又要遵循什么規(guī)范？本文作者介紹了Web端后臺(tái)導(dǎo)航設(shè)計(jì)規(guī)范，一起來(lái)看一下吧。

近幾年做的后臺(tái)產(chǎn)品比較多，就梳理了一些關(guān)于后臺(tái)設(shè)計(jì)方面的規(guī)范，今天主要分享的是關(guān)于后臺(tái)導(dǎo)航這一塊，希望能帶來(lái)一些啟發(fā)。

回到生活中，平時(shí)我們?cè)诠珗@里看到的路標(biāo)，逛超市時(shí)看到的指示面板，進(jìn)地鐵里路過(guò)的一些箭頭指引，諸如此類常見(jiàn)的導(dǎo)航。

其實(shí)在網(wǎng)絡(luò)中也會(huì)有很多導(dǎo)航指引，那什么是導(dǎo)航？導(dǎo)航有什么用呢？導(dǎo)航設(shè)計(jì)要遵循什么規(guī)范呢？主要有哪些類型呢？

……

01 導(dǎo)航

首先來(lái)看看什么導(dǎo)航，導(dǎo)航就是清晰的告訴用戶當(dāng)前所處的位置，以及方便快捷的指引用戶想要去的地方。

在互聯(lián)網(wǎng)中導(dǎo)航的目的也是用來(lái)告訴用戶在當(dāng)前產(chǎn)品中，用戶現(xiàn)在在哪兒，之后可以去哪兒去，意思和線下的指示牌一樣的。

02 導(dǎo)航設(shè)計(jì)的原則

那我們?cè)谠O(shè)計(jì)這些的時(shí)候要遵循哪些原則呢？通常有以下兩個(gè)：

1. 可尋性：用戶可以隨時(shí)定位到他們想要尋找信息的具體位置，以便快速查閱信息。
2. 高效性：對(duì)用戶而言要省時(shí)、高效，因?yàn)橛脩舻哪托牟](méi)有那么多。

其中主要包括三點(diǎn)：

1. 多個(gè)入口：對(duì)于同一個(gè)功能，尤其是重要核心功能提供多個(gè)入口，方便用戶及時(shí)使用。
2. 提供逃生艙：比如小程序里面的“首頁(yè)”logo，后臺(tái)產(chǎn)品的logo，都是可以點(diǎn)擊以后直接回到首頁(yè)的，然后重新啟動(dòng)信息搜索。
3. 提供捷徑：提供訪問(wèn)內(nèi)容的捷徑，如鏈接跳轉(zhuǎn)、自定義添加常用功能等。

03 導(dǎo)航常見(jiàn)四種路徑

一般情況下，一個(gè)完善的導(dǎo)航路徑，應(yīng)該允許用戶可以沿著多種路徑進(jìn)行移動(dòng)，而不僅僅是單一的線路。

1. 平移：同層級(jí)跳轉(zhuǎn)，比如一級(jí)菜單之間的平行跳轉(zhuǎn)。
2. 下鉆：進(jìn)入低層級(jí)的內(nèi)容，比如一級(jí)菜單到二級(jí)菜單，二級(jí)菜單到三級(jí)菜單之間的流轉(zhuǎn)。
3. 返回：返向?yàn)g覽歷史或高層級(jí)內(nèi)容，也就是從低層級(jí)菜單向高層級(jí)菜單回流。
4. 聯(lián)想導(dǎo)航：根據(jù)內(nèi)容之間的相關(guān)性形成跳轉(zhuǎn)，方便用戶查看想看的內(nèi)容信息。

04 常見(jiàn)六種導(dǎo)航類型

1. 全局導(dǎo)航：清晰的展示網(wǎng)站的整體核心組織架構(gòu)

1）頂部導(dǎo)航菜單

頂部導(dǎo)航菜單就是把每個(gè)一級(jí)菜單的超鏈接連成一行，放在網(wǎng)站的頂部，供用戶點(diǎn)擊使用。

頂部導(dǎo)航菜單的形式如下所示，它主要有以下幾個(gè)特點(diǎn)：

a.內(nèi)容層級(jí)簡(jiǎn)單明了，適用瀏覽性強(qiáng)和比較前臺(tái)化的產(chǎn)品應(yīng)用。

b.各菜單權(quán)重常常與排列順序呈正相關(guān)關(guān)系，排列順序影響用戶使用頻次，即越排在前面使用頻率越高。

c.一級(jí)菜單類目建議控制在 2-7 個(gè)以內(nèi)，中文字長(zhǎng) 2-6 個(gè)。

d.菜單層級(jí)建議控制在1-2 個(gè)層級(jí)；超出 2 個(gè)層級(jí)時(shí)，建議采用彈出式導(dǎo)航。

2）側(cè)邊導(dǎo)航菜單

大概形式如下所示，一般一級(jí)菜單在屏幕的左側(cè)。

它主要有以下幾個(gè)特點(diǎn)：

a.適合信息層級(jí)多、操作切換頻率高、有一定的復(fù)雜度、需要頻繁切換菜單的系統(tǒng)。

b.拓展性較強(qiáng)，可支持多個(gè)菜單，建議菜單多于 6 個(gè)時(shí)使用。不過(guò)類目數(shù)量沒(méi)有受限制，可配合滾動(dòng)條一起使用。

c.可以承載多個(gè)層級(jí)，但建議控制在 1-3 個(gè)。

d.允許的菜單字?jǐn)?shù)長(zhǎng)度較長(zhǎng)。

e.優(yōu)點(diǎn)是易于掃讀，可見(jiàn)性強(qiáng)，比頂部導(dǎo)航更靈活，易于向下擴(kuò)展各菜單，各菜單重要性受菜單排列順序影響較小。

f.缺點(diǎn)是減少了整個(gè)屏幕內(nèi)容的展示區(qū)寬度，易受客戶端顯示器影響。

3）混合式導(dǎo)航菜單

混合導(dǎo)航菜單的形式如下所示，混合方式層級(jí)與菜單欄目擴(kuò)展性強(qiáng)，適用于量級(jí)大、模塊多且復(fù)雜度較高的系統(tǒng)。

4）工具導(dǎo)航菜單

通常放在Web端網(wǎng)站的右上角，對(duì)于長(zhǎng)久以來(lái)習(xí)慣這個(gè)位置的網(wǎng)民而言，用戶也能更快在這個(gè)位置找到他們想找的內(nèi)容。

內(nèi)容通常包括：全局搜索、消息中心、用戶幫助、、收藏夾、購(gòu)物車(chē)、個(gè)人中心、賬號(hào)登錄退出、語(yǔ)言切換等。

小提示：不要將頁(yè)面內(nèi)的操作功能放到工具導(dǎo)航菜單里去。

2. 子站點(diǎn)導(dǎo)航

為了減輕用戶認(rèn)知的成本，企業(yè)級(jí)產(chǎn)品經(jīng)常采用層級(jí)+數(shù)據(jù)庫(kù)混合結(jié)構(gòu)的信息架構(gòu)，將較深幾個(gè)層級(jí)組織為一個(gè)子站點(diǎn)，降低單個(gè)站點(diǎn)層級(jí)數(shù)量，來(lái)讓用戶快速感知到具體的功能。

還有另一種子站點(diǎn)，它的場(chǎng)景是面對(duì)一些流程復(fù)雜、需要較大工作空間的任務(wù)，以子站點(diǎn)的方式沉浸式處理任務(wù)。

3. 頁(yè)內(nèi)導(dǎo)航

該種導(dǎo)航適合在信息架構(gòu)中處于較低層級(jí)的內(nèi)容中，主要包括以下幾種類型：

1）頁(yè)頭

頁(yè)頭位于頁(yè)內(nèi)容上方，主要作用是用來(lái)表現(xiàn)頁(yè)面主題、頁(yè)內(nèi)信息導(dǎo)航、頁(yè)面級(jí)內(nèi)容操作等。

2）Tree 樹(shù)型控件

頁(yè)面內(nèi)多層次的結(jié)構(gòu)展示，如下所示：

3）錨點(diǎn)

在各個(gè)頁(yè)面分區(qū)之間跳轉(zhuǎn)，當(dāng)平鋪呈現(xiàn)的內(nèi)容過(guò)長(zhǎng)時(shí)使用。

4）回到頂部

快速回到頁(yè)面頂部，常見(jiàn)的頁(yè)面超過(guò)一屏右下角出現(xiàn)的“頂部”按鈕，點(diǎn)擊立即回到頁(yè)面頂部。

5）走馬燈

循環(huán)播放一系列內(nèi)容，比如平時(shí)常見(jiàn)的海報(bào)輪播圖，如下所示。

4. 下鉆類導(dǎo)航

就是點(diǎn)擊進(jìn)入信息架構(gòu)下層內(nèi)容，默認(rèn)站內(nèi)跳轉(zhuǎn)，站外新開(kāi)內(nèi)容頁(yè)，比如后臺(tái)中列表操作欄下鉆的詳情場(chǎng)景。

5. 返回類導(dǎo)航

1）返回按鈕

一般標(biāo)題會(huì)和面包屑一起出現(xiàn)。

小提示：一般情況下，有面包屑時(shí)標(biāo)題默認(rèn)不推薦使用返回按鈕。頁(yè)頭中的返回按鈕相當(dāng)于一個(gè)短面包屑，用于返回上一層級(jí)頁(yè)面。

2）面包屑

展現(xiàn)當(dāng)前頁(yè)面在網(wǎng)站結(jié)構(gòu)中的位置。

小提示：在少于三個(gè)層級(jí)時(shí)無(wú)需展示，此時(shí)的全局導(dǎo)航能直接呈現(xiàn)位置，用戶可通過(guò)面包屑直接返回上級(jí)頁(yè)面。

6. 聯(lián)想類導(dǎo)航

1）步驟條

按照任務(wù)完成順序引導(dǎo)用戶一步步向前移動(dòng)，讓用戶清楚任務(wù)的進(jìn)度條。

適用場(chǎng)景：

1. 用戶訪問(wèn)路徑是線性的。
2. 步驟條將復(fù)雜的任務(wù)分解為易于處理的小任務(wù)，減少用戶出錯(cuò)，更快完成任務(wù)。

2）上一篇下一篇

方便用戶隨意切換相關(guān)聯(lián)的內(nèi)容信息。

小結(jié)

六種常見(jiàn)導(dǎo)航：

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

無(wú)論選擇何種導(dǎo)航，它的目的都是清晰的指引用戶，方便用戶在網(wǎng)站上自由、快捷的跳轉(zhuǎn)，那么我們?cè)谠O(shè)計(jì)的時(shí)候只要兼顧具體的使用場(chǎng)景挑選相應(yīng)的導(dǎo)航即可。

后臺(tái)其他部分后續(xù)會(huì)慢慢更新，今天的分享到這~