對(duì)B端產(chǎn)品架構(gòu)而言，一個(gè)合理的導(dǎo)航設(shè)計(jì)對(duì)能夠解決，對(duì)團(tuán)隊(duì)內(nèi)部：堆砌功能開發(fā)混亂；對(duì)外部用戶：找不到功能的問題，所以本篇主要總結(jié)一下如何正確選取合適的導(dǎo)航。


從產(chǎn)品結(jié)構(gòu)明確導(dǎo)航分類
B端后臺(tái)的導(dǎo)航大類從產(chǎn)品架構(gòu)層面來講可以分為：全局導(dǎo)航（頂部、側(cè)邊、混合）、局部導(dǎo)航（菜單欄、面包屑、選項(xiàng)卡、步驟條、文字鏈接）、輔助導(dǎo)航、內(nèi)嵌導(dǎo)航、友好導(dǎo)航和遠(yuǎn)程導(dǎo)航。

全局導(dǎo)航
表現(xiàn)為產(chǎn)品的一級(jí)導(dǎo)航，需要具有良好的穩(wěn)定性和拓展性。
提示：清晰穩(wěn)定的路徑比起少點(diǎn)擊一次更重要！

局部導(dǎo)航
局部導(dǎo)航包括：菜單欄、面包屑、選項(xiàng)卡、步驟條、文字鏈接。
特點(diǎn)：1、在同一個(gè)架構(gòu)中，可以到這個(gè)節(jié)點(diǎn)的上下一級(jí)的通路；
2、有嚴(yán)格的父子級(jí)關(guān)系，局部導(dǎo)航與全局導(dǎo)航有層級(jí)關(guān)系，局部導(dǎo)航幫助用戶進(jìn)入更 加特定的頁(yè)面。
通俗而言局部導(dǎo)航依附于全局導(dǎo)航，常作為二級(jí)導(dǎo)航出現(xiàn)。

輔助導(dǎo)航
提供用戶在全局/局部導(dǎo)航不可到達(dá)的相關(guān)內(nèi)容的快捷途徑。

內(nèi)嵌導(dǎo)航
也叫上下文導(dǎo)航，常用做對(duì)頁(yè)面中的操作項(xiàng)進(jìn)行解釋；常見的有幫助引導(dǎo)鏈接等

友好導(dǎo)航
為用戶提供便利的前進(jìn)途徑，常見于新手引導(dǎo)和幫助助手的場(chǎng)景，在不需要時(shí)可進(jìn)行隱藏。

遠(yuǎn)程導(dǎo)航
指并不包含在產(chǎn)品結(jié)構(gòu)中的功能入口；常見于網(wǎng)站地圖、OA產(chǎn)品的工作臺(tái)等。

如何進(jìn)行合適的導(dǎo)航選擇

1. 保證產(chǎn)品結(jié)構(gòu)的穩(wěn)定性

B端產(chǎn)品通常情況下都是復(fù)雜的，對(duì)用戶來說具備一定的使用門檻和學(xué)習(xí)成本。所以導(dǎo)航首先要保證產(chǎn)品架構(gòu)的穩(wěn)定性，同時(shí)也要保證交互操作路徑符合用戶操作習(xí)慣。
重點(diǎn)：不可為了追求少一次點(diǎn)擊而隨便進(jìn)行更改！

2. 便于后續(xù)擴(kuò)展

在進(jìn)行導(dǎo)航選擇時(shí)需要考慮到后續(xù)產(chǎn)品的發(fā)展情況，在保證產(chǎn)品結(jié)構(gòu)穩(wěn)定性的前提下，為后續(xù)的功能擴(kuò)展打好基礎(chǔ)。

3. 操作清晰、易懂

在多層級(jí)的導(dǎo)航中要保證每一層級(jí)導(dǎo)航的視覺反饋清晰、明確。

4. 靈活適應(yīng)

導(dǎo)航的功能選項(xiàng)可以根據(jù)使用場(chǎng)景需求來進(jìn)行靈活添加，可以為了提升效率，在不同的導(dǎo)航選項(xiàng)下出現(xiàn)相同的功能入口。

5. 保持一致的交互規(guī)范

相同類型的導(dǎo)航控件，交互樣式要保持一致；例如：飛書在面包屑的文字交互樣式和文字鏈接的交互樣式就做出了明顯的區(qū)分。

6. 可不遵循層級(jí)關(guān)系

根據(jù)導(dǎo)航的定義而言，導(dǎo)航就是對(duì)信息進(jìn)行分類，引導(dǎo)用戶完成操作。
我們可以根據(jù)用戶反饋和數(shù)據(jù)埋點(diǎn)可以將常用的操作功能進(jìn)行前置，打破層級(jí)約束，實(shí)現(xiàn)對(duì)用戶的操作提效。

根據(jù)場(chǎng)景，靈活使用導(dǎo)航

1. 頂部導(dǎo)航

頂部導(dǎo)航常用于官網(wǎng)類結(jié)構(gòu)相對(duì)簡(jiǎn)單的產(chǎn)品
優(yōu)點(diǎn)：節(jié)省空間、視覺干擾小，有沉浸式使用體驗(yàn)；
缺點(diǎn)：結(jié)構(gòu)簡(jiǎn)單，拓展性低。

2. 側(cè)邊導(dǎo)航

側(cè)邊導(dǎo)航常用于操作比較復(fù)雜，專注操作的后臺(tái)類產(chǎn)品；例如：SaaS產(chǎn)品等
優(yōu)點(diǎn)：操作效率高、拓展性強(qiáng)、更容易進(jìn)行功能收納；

3. 混合導(dǎo)航

混合導(dǎo)航常用于操作很復(fù)雜，一級(jí)二級(jí)功能條目多的后臺(tái)產(chǎn)品；例如：云產(chǎn)品（二級(jí)導(dǎo)航功能超多）
優(yōu)點(diǎn)：比較綜合

總結(jié)：

1. 一級(jí)導(dǎo)航需要具備足夠的穩(wěn)定性和拓展性

①、清晰、穩(wěn)定的路徑比少點(diǎn)擊一次更重要
②、導(dǎo)航的排序盡量不要改變用戶的操作習(xí)慣


2. 二、三級(jí)導(dǎo)航進(jìn)行合理的分組收納

利用分組控制導(dǎo)航的顆粒度。在二級(jí)導(dǎo)航只有一個(gè)時(shí)，無需設(shè)計(jì)分組


3. 判斷功能是否應(yīng)該作為全局導(dǎo)航

①、選擇相對(duì)高頻的分類，作為全局導(dǎo)航
②、低頻的分類，作為局部導(dǎo)航

作者：戴戴戴戴戴虎全

轉(zhuǎn)載請(qǐng)注明：站酷

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

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

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