前言：

對于B端而言他們使用導(dǎo)航菜單目的性很強，到后臺主要是對具體功能進行操作。因此，其主要的功能就是對B端產(chǎn)品進行分發(fā)、引導(dǎo)，幫助用戶找到自己想要的功能。

分享內(nèi)容：

1. 導(dǎo)航是什么，存在的意義

2. 導(dǎo)航的設(shè)計目標

3. 其設(shè)計原則

4. 設(shè)計建議

5. 幾種常見的導(dǎo)航類型

1. 存在的意義

導(dǎo)航用來展示當前產(chǎn)品中，用戶在哪兒，可以去哪兒。在廣義上，任何告知用戶他在哪里，他能去什么地方以及如何到達那里的方式，都可以稱之為導(dǎo)航。當設(shè)計者使用導(dǎo)航或者自定義一些導(dǎo)航結(jié)構(gòu)時，請注意：

a. 盡可能提供標識、上下文線索，避免用戶迷路。

b. 保持導(dǎo)航樣式和行為一致或者減少導(dǎo)航數(shù)量，降低用戶學(xué)習(xí)成本。

c. 盡可能減少頁面間的跳轉(zhuǎn)（例如：一個常見任務(wù)需要多個頁面跳轉(zhuǎn)時，請減少至一到兩次），讓用戶移動距離保持簡短。

導(dǎo)航菜單是將內(nèi)容信息友好地展示給用戶的有效方式。在確定好網(wǎng)站的信息架構(gòu)后，應(yīng)當按需選取適當?shù)膶?dǎo)航菜單樣式。

2. 設(shè)計目標

導(dǎo)航菜單是讓用戶明確知曉當前所處產(chǎn)品中的位置，并方便快捷地帶用戶到他想去的地方。

3. 設(shè)計原則

可循性

用戶可定位到他們想要的信息。

高效

a. 多接入點：對同一目的地提供多個鏈接。

b. 捷徑：提供訪問內(nèi)容的捷徑，如相關(guān)鏈接。

c. 逃生艙：點擊 logo 回到首頁重新啟動信息搜尋。

4. 設(shè)計建議

信息架構(gòu)

? 設(shè)計時應(yīng)盡量保持淺平寬的信息架構(gòu)層級；

? 從用戶的使用路徑考慮導(dǎo)航，而非僅基于層級結(jié)構(gòu)；

? 常見的組織方式有：

a. 按主題，例如產(chǎn)品提供的服務(wù)或內(nèi)容分類，好處是直接呈現(xiàn)站點的內(nèi)容范圍。

b. 按受眾群體，例如管理員、運營、操作員。

c. 按任務(wù)，例如了解合作模式、聯(lián)系合作專員、簽約流程、合作聯(lián)調(diào)、業(yè)務(wù)運營、客戶服務(wù)。

導(dǎo)航路徑

完善的導(dǎo)航應(yīng)該允許用戶沿多種路徑移動：

a-平移：同層級跳轉(zhuǎn)

b-下鉆：進入低層級的內(nèi)容

c-返回：返向瀏覽歷史或高層級內(nèi)容

d-聯(lián)想導(dǎo)航：根據(jù)相關(guān)性導(dǎo)航至內(nèi)容

5. 類型

正確理解和使用導(dǎo)航組件對產(chǎn)品全局體驗至關(guān)重要。

我們將導(dǎo)航劃分為以下 6 種類型：

a. 全局導(dǎo)航（側(cè)邊導(dǎo)航、頂部導(dǎo)航、彈出式導(dǎo)航）

b. 子站點導(dǎo)航（沉浸式導(dǎo)航、多級站點導(dǎo)航）

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

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

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

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

全局導(dǎo)航（側(cè)邊、頂部、彈出式）

全局導(dǎo)航體現(xiàn)網(wǎng)站的核心組織結(jié)構(gòu)。

頂部導(dǎo)航菜單

頂部導(dǎo)航菜單的形式就是把超鏈接連成一行，信息內(nèi)容層級比較簡單明了，適用在瀏覽性強的門戶性質(zhì)以及比較前臺化的應(yīng)用。一級類目建議在 2-7 個以內(nèi)。標題長度 4-15 個字符長度為好，中文字長 2-6 個。

a. 各菜單權(quán)重常常與排列順序呈正相關(guān)，即排列順序影響用戶使用頻次。

b. 建議 2~7 項內(nèi)容使用。

c. 建議 1-2 個層級；超出 2 個層級時，建議采用彈出式導(dǎo)航。

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

垂直導(dǎo)航較橫向的導(dǎo)航更靈活，易于向下擴展， 且允許的標簽長度較長。類目數(shù)量不限，可配合滾動條使用，適合信息層級多、操作切換頻率高的管理性質(zhì)的應(yīng)用。

a. 很多菜單時使用，建議菜單多于 6 項時使用。

b. 可以承載多個層級，但建議 1-3 個層級。

c. 企業(yè)級產(chǎn)品推薦使用側(cè)欄導(dǎo)航，其可見性更好易于掃讀，各菜單重要性受菜單排列順序影響較小。

彈出式導(dǎo)航

用于拓展導(dǎo)航承載層級，適用于大型網(wǎng)站。站點地圖式導(dǎo)航可以讓用戶對整個網(wǎng)站的可用功能一目了然。

a. 不要讓用戶延著狹窄的懸停路徑獲取導(dǎo)航菜單。

b. 不要讓用戶逐層打開每層菜單去查找，低效又困難。（此建議僅針對導(dǎo)航類菜單，不適用于操作類菜單。）

子站點導(dǎo)航（沉浸式、多級站點）

企業(yè)級產(chǎn)品常采用層級+數(shù)據(jù)庫混合結(jié)構(gòu)的信息架構(gòu)，這種信息架構(gòu)通常層級較深，為了實現(xiàn)用戶感知層面的淺平寬，將較深幾個層級組織為一個子站點，降低單個站點層級數(shù)量，減輕用戶認知負擔(dān)。

另一種子站點場景是，面對一些任務(wù)復(fù)雜，需要較大的工作空間，以子站點的方式沉浸式處理任務(wù)。最常見的是編輯器。子站點模式下，對全站導(dǎo)航功能需求低，通常只需提供一個返回上級或回到首頁的出口。

（此處的數(shù)據(jù)庫是一種信息架構(gòu)形式，各頁面內(nèi)容獨立，但都遵循一致的形式/格式。）

沉浸式導(dǎo)航

用于處理較為復(fù)雜或需要較大工作空間的任務(wù)

多級站點導(dǎo)航

a. 菜單數(shù)量較多的子站點使用。

b. 子站點設(shè)計上，應(yīng)明顯區(qū)別于全站導(dǎo)航，使得進入子站點需要成較大的過渡波動，提示用戶進入了新的空間。

下鉆類導(dǎo)航

點擊進入信息架構(gòu)下層內(nèi)容，默認站內(nèi)跳轉(zhuǎn)，站外新開標簽頁，典型場景為列表下鉆至詳情。

返回類導(dǎo)航

面包屑

反映當前頁面在網(wǎng)站結(jié)構(gòu)中的位置，在少于三個層級時無需展示，此時的全局導(dǎo)航能直接呈現(xiàn)位置。用戶可通過面包屑返回上級頁面。

作者：鹿優(yōu)優(yōu)
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.li-bodun.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司