生活中，我們會看到路標、指示面板、箭頭指引諸如此類的常見的導航，其實網絡中也有很多導航指引。導航有什么用呢？導航設計又要遵循什么規范？本文作者介紹了Web端后臺導航設計規范，一起來看一下吧。

近幾年做的后臺產品比較多，就梳理了一些關于后臺設計方面的規范，今天主要分享的是關于后臺導航這一塊，希望能帶來一些啟發。

回到生活中，平時我們在公園里看到的路標，逛超市時看到的指示面板，進地鐵里路過的一些箭頭指引，諸如此類常見的導航。

其實在網絡中也會有很多導航指引，那什么是導航？導航有什么用呢？導航設計要遵循什么規范呢？主要有哪些類型呢？

……

01 導航

首先來看看什么導航，導航就是清晰的告訴用戶當前所處的位置，以及方便快捷的指引用戶想要去的地方。

在互聯網中導航的目的也是用來告訴用戶在當前產品中，用戶現在在哪兒，之后可以去哪兒去，意思和線下的指示牌一樣的。

02 導航設計的原則

那我們在設計這些的時候要遵循哪些原則呢？通常有以下兩個：

1. 可尋性：用戶可以隨時定位到他們想要尋找信息的具體位置，以便快速查閱信息。
2. 高效性：對用戶而言要省時、高效，因為用戶的耐心并沒有那么多。

其中主要包括三點：

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

03 導航常見四種路徑

一般情況下，一個完善的導航路徑，應該允許用戶可以沿著多種路徑進行移動，而不僅僅是單一的線路。

1. 平移：同層級跳轉，比如一級菜單之間的平行跳轉。
2. 下鉆：進入低層級的內容，比如一級菜單到二級菜單，二級菜單到三級菜單之間的流轉。
3. 返回：返向瀏覽歷史或高層級內容，也就是從低層級菜單向高層級菜單回流。
4. 聯想導航：根據內容之間的相關性形成跳轉，方便用戶查看想看的內容信息。

04 常見六種導航類型

1. 全局導航：清晰的展示網站的整體核心組織架構

1）頂部導航菜單

頂部導航菜單就是把每個一級菜單的超鏈接連成一行，放在網站的頂部，供用戶點擊使用。

頂部導航菜單的形式如下所示，它主要有以下幾個特點：

a.內容層級簡單明了，適用瀏覽性強和比較前臺化的產品應用。

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

c.一級菜單類目建議控制在 2-7 個以內，中文字長 2-6 個。

d.菜單層級建議控制在1-2 個層級；超出 2 個層級時，建議采用彈出式導航。

2）側邊導航菜單

大概形式如下所示，一般一級菜單在屏幕的左側。

它主要有以下幾個特點：

a.適合信息層級多、操作切換頻率高、有一定的復雜度、需要頻繁切換菜單的系統。

b.拓展性較強，可支持多個菜單，建議菜單多于 6 個時使用。不過類目數量沒有受限制，可配合滾動條一起使用。

c.可以承載多個層級，但建議控制在 1-3 個。

d.允許的菜單字數長度較長。

e.優點是易于掃讀，可見性強，比頂部導航更靈活，易于向下擴展各菜單，各菜單重要性受菜單排列順序影響較小。

f.缺點是減少了整個屏幕內容的展示區寬度，易受客戶端顯示器影響。

3）混合式導航菜單

混合導航菜單的形式如下所示，混合方式層級與菜單欄目擴展性強，適用于量級大、模塊多且復雜度較高的系統。

4）工具導航菜單

通常放在Web端網站的右上角，對于長久以來習慣這個位置的網民而言，用戶也能更快在這個位置找到他們想找的內容。

內容通常包括：全局搜索、消息中心、用戶幫助、、收藏夾、購物車、個人中心、賬號登錄退出、語言切換等。

小提示：不要將頁面內的操作功能放到工具導航菜單里去。

2. 子站點導航

為了減輕用戶認知的成本，企業級產品經常采用層級+數據庫混合結構的信息架構，將較深幾個層級組織為一個子站點，降低單個站點層級數量，來讓用戶快速感知到具體的功能。

還有另一種子站點，它的場景是面對一些流程復雜、需要較大工作空間的任務，以子站點的方式沉浸式處理任務。

3. 頁內導航

該種導航適合在信息架構中處于較低層級的內容中，主要包括以下幾種類型：

1）頁頭

頁頭位于頁內容上方，主要作用是用來表現頁面主題、頁內信息導航、頁面級內容操作等。

2）Tree 樹型控件

頁面內多層次的結構展示，如下所示：

3）錨點

在各個頁面分區之間跳轉，當平鋪呈現的內容過長時使用。

4）回到頂部

快速回到頁面頂部，常見的頁面超過一屏右下角出現的“頂部”按鈕，點擊立即回到頁面頂部。

5）走馬燈

循環播放一系列內容，比如平時常見的海報輪播圖，如下所示。

4. 下鉆類導航

就是點擊進入信息架構下層內容，默認站內跳轉，站外新開內容頁，比如后臺中列表操作欄下鉆的詳情場景。

5. 返回類導航

1）返回按鈕

一般標題會和面包屑一起出現。

小提示：一般情況下，有面包屑時標題默認不推薦使用返回按鈕。頁頭中的返回按鈕相當于一個短面包屑，用于返回上一層級頁面。

2）面包屑

展現當前頁面在網站結構中的位置。

小提示：在少于三個層級時無需展示，此時的全局導航能直接呈現位置，用戶可通過面包屑直接返回上級頁面。

6. 聯想類導航

1）步驟條

按照任務完成順序引導用戶一步步向前移動，讓用戶清楚任務的進度條。

適用場景：

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

2）上一篇下一篇

方便用戶隨意切換相關聯的內容信息。

小結

六種常見導航：

1. 全局導航
2. 子站點導航
3. 頁內導航
4. 下鉆類導航
5. 返回類導航
6. 聯想類導航

無論選擇何種導航，它的目的都是清晰的指引用戶，方便用戶在網站上自由、快捷的跳轉，那么我們在設計的時候只要兼顧具體的使用場景挑選相應的導航即可。

后臺其他部分后續會慢慢更新，今天的分享到這~