編輯導(dǎo)語：B端產(chǎn)品對(duì)于導(dǎo)航界面的結(jié)構(gòu)設(shè)計(jì)比較注重，用戶在進(jìn)入頁面的第一時(shí)間就對(duì)整個(gè)頁面有一個(gè)大概的初印象，而且B端產(chǎn)品的功能性較強(qiáng)，所以對(duì)于設(shè)計(jì)方面要格外注意；本文作者分享了關(guān)于打造B端導(dǎo)航設(shè)計(jì)的思考，我們一起來了解一下。

導(dǎo)航作為網(wǎng)站或者平臺(tái)的骨架，是產(chǎn)品設(shè)計(jì)中不容忽視的一環(huán)。

最近有幸接觸到關(guān)于B端專題分享，課程中學(xué)到了很多關(guān)于導(dǎo)航的知識(shí)，于是結(jié)合自身對(duì)導(dǎo)航設(shè)計(jì)的理解，并綜合當(dāng)下導(dǎo)航設(shè)計(jì)相關(guān)的資料書籍，對(duì)B端導(dǎo)航設(shè)計(jì)作如下闡述；從多角度深入細(xì)節(jié)去解析導(dǎo)航，總結(jié)的一些方法和思考分享給小伙伴們，也希望大家從更多的角度跟我一起探討。

本文主要從導(dǎo)航的結(jié)構(gòu)層面出發(fā)去分析系統(tǒng)導(dǎo)航控件的組成與樣式，而不是僅僅停留在導(dǎo)航的外觀和形式上。

一、認(rèn)識(shí)導(dǎo)航

1. 導(dǎo)航的定義

我們先來圈定一下導(dǎo)航的范圍，我們研究的是B端的導(dǎo)航設(shè)計(jì)，那到底啥是導(dǎo)航？

假設(shè)：同事約我們到一個(gè)陌生的大型商場(chǎng)吃飯，當(dāng)我們到商場(chǎng)后，我們會(huì)通過什么找到約定的餐廳？

一般情況，我們都會(huì)通過商場(chǎng)樓層索引找到餐廳所在樓層和區(qū)域吧。如果商場(chǎng)里索引指示清楚的話，我們就能快速找到約定的飯店，不然，我們會(huì)感到困擾，自己瞎找，走了很多冤枉路還不一定找到，最后只能尋求朋友或商場(chǎng)工作人員幫助，難免會(huì)有不滿。

其實(shí)商場(chǎng)樓層索引與B端導(dǎo)航作用很像，都是為了告訴我們，這里有什么、我可以做什么、我在什么位置？導(dǎo)航就是一種對(duì)信息的分類，幫助用戶找到想要的信息，完成預(yù)期的任務(wù)，告訴用戶從哪里來？用戶在哪里？用戶可以去哪兒？

很多同學(xué)會(huì)將它和菜單弄混淆，菜單是一種對(duì)動(dòng)作的分類和集合，點(diǎn)擊菜單之后，會(huì)立馬產(chǎn)生相應(yīng)的動(dòng)作，而導(dǎo)航點(diǎn)擊后，你看到的是信息分類的合集。

而且在B端系統(tǒng)中的后臺(tái)系統(tǒng)是根據(jù)具體業(yè)務(wù)設(shè)計(jì)的，作為一個(gè)后臺(tái)系統(tǒng)設(shè)計(jì)師，知道如何在狹小的屏幕空間選擇合理的導(dǎo)航形式表達(dá)業(yè)務(wù)內(nèi)容是很重要的。

2. 導(dǎo)航的作用

• 告訴用戶這里有些什么。導(dǎo)航通過讓層次結(jié)構(gòu)可視化，從而告訴用戶網(wǎng)站上有些什么，有效地體現(xiàn)站點(diǎn)內(nèi)容。
• 告訴用戶如何使用網(wǎng)站。好的導(dǎo)航能夠幫助用戶規(guī)劃行程，含蓄地告訴用戶該從哪里開始，能進(jìn)行哪些選擇，幫用戶快速找到所需內(nèi)容。
• 確定用戶的位置。當(dāng)用戶到達(dá)某一個(gè)地方，好的導(dǎo)航會(huì)告訴用戶“你在哪里”讓他們知道所在位置，避免迷路。

二、導(dǎo)航的分類

可能提到導(dǎo)航分類就會(huì)想到：頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時(shí)間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等；但是這些都不是今天我們要討論的重點(diǎn)，這些都只是導(dǎo)航不同的外觀形式的區(qū)分，哪有人就有疑問了：那導(dǎo)航和導(dǎo)航條是一致的嗎？

導(dǎo)航條也僅是導(dǎo)航的一種外觀。今天我們要說的是從結(jié)構(gòu)和交互層面出發(fā)，針對(duì)對(duì)象去解析我們的導(dǎo)航。

1. 全局導(dǎo)航 Global Navigation

特點(diǎn)：

• 可以覆蓋整個(gè)產(chǎn)品的通路，往往是產(chǎn)品的一級(jí)信息分類，是用戶操作上貫穿始終的導(dǎo)航；
• 不一定包含全局信息，但是一定可以去到關(guān)鍵節(jié)點(diǎn)。

2. 局部導(dǎo)航 Local Navigation

特點(diǎn)：

• 在同一個(gè)架構(gòu)中，可以到這個(gè)節(jié)點(diǎn)的上下一級(jí)的通路；
• 有嚴(yán)格的父子級(jí)關(guān)系，局部導(dǎo)航與全局導(dǎo)航有層級(jí)關(guān)系，局部導(dǎo)航幫助用戶進(jìn)入更加特定的頁面。

通常情況下，一個(gè)通路代表一個(gè)界面（這里的通路是交互上的概念），一般局部導(dǎo)航為二級(jí)導(dǎo)航。

3. 輔助導(dǎo)航 Supplementary Navition

特點(diǎn)：

• 提供用戶在全局/局部導(dǎo)航不可到達(dá)的相關(guān)內(nèi)容的快捷途徑；
• 這個(gè)快捷途徑是在本產(chǎn)品內(nèi)的。

例如在我們站酷的收藏文件夾頁面，想要快速到達(dá)編輯作品收藏夾，這時(shí)候我們使用輔助導(dǎo)航，它可以幫助解決用戶下一步去哪里，還能提供什么幫助等問題，優(yōu)秀的設(shè)計(jì)是讓用戶可能多的使用關(guān)聯(lián)導(dǎo)航，而不是全局和局部導(dǎo)航。

4. 內(nèi)嵌導(dǎo)航

特點(diǎn)：

• 也叫上下文導(dǎo)航，嵌入頁面自身內(nèi)容的導(dǎo)航；
• 通常同在上下文超級(jí)鏈接，引導(dǎo)搜索等。

5. 友好導(dǎo)航

特點(diǎn)：

給用戶提供一個(gè)便利的前進(jìn)途徑，在需要的時(shí)候能找到信息入口，幫助提升網(wǎng)站可用性的功能，并不是主要功能，但卻不能缺少，通常擺放位置在界面右上角。

通常置于網(wǎng)站右上角關(guān)于用戶、消息、登錄、幫助等導(dǎo)航，比如站酷右上角消息中心、我的個(gè)人服務(wù)等。

6. 遠(yuǎn)程導(dǎo)航

特點(diǎn)：

• 不包含在產(chǎn)品結(jié)構(gòu)中，以獨(dú)立的方式獨(dú)立存在于產(chǎn)品內(nèi)。
• 通常是網(wǎng)站地圖、索引表（地址選擇、品牌選擇）等。

三、導(dǎo)航的外觀

1. 導(dǎo)航的外觀

導(dǎo)航的類型有很多種，同樣結(jié)構(gòu)的導(dǎo)航可以使用不同的外形，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時(shí)間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。

各類導(dǎo)航中的字體大小可根據(jù)組件庫進(jìn)行統(tǒng)一設(shè)定。

頂欄菜單多為一級(jí)菜單，點(diǎn)擊切換頁面，或作為下拉菜單的父級(jí)，將子級(jí)菜單合理分類。

側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。

下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種。

步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。

四、導(dǎo)航的貼士

1. 導(dǎo)航盡量扁平，保持穩(wěn)定就算要多一次點(diǎn)擊

三次點(diǎn)擊已被證實(shí)無效，保證穩(wěn)定的結(jié)構(gòu)，多一次點(diǎn)擊也未必是壞事。

在B端界面中我們盡量不要修改它的操作路徑，如果跟C端一樣頻繁的去改變它的路徑，去改變他的結(jié)構(gòu) ，用戶就會(huì)產(chǎn)生負(fù)面情緒，理想狀態(tài)下，用戶需要點(diǎn)擊的導(dǎo)航層級(jí)越少，那么用戶到達(dá)他們的目標(biāo)頁面也就越快越清晰，信息層級(jí)越深，則用戶越容易被誤導(dǎo)，但是B端用戶對(duì)點(diǎn)擊次數(shù)多少是不太關(guān)注的，反而會(huì)因?yàn)樾薷牧瞬僮髀窂疆a(chǎn)生厭惡感。

網(wǎng)站導(dǎo)航的目標(biāo)是為了讓用戶快速找到自己所需的內(nèi)容，不能一味的追求扁平的導(dǎo)航結(jié)構(gòu)，使得整個(gè)網(wǎng)站的信息分類混亂；所以，要根據(jù)情況綜合考慮信息分類的廣度與深度，對(duì)于信息的分類，常見的可以通過卡片分類法來進(jìn)行劃分。

比如小鵝通的后臺(tái)導(dǎo)入用戶藏的很深，通過用戶管理到用戶列表，再到導(dǎo)入用戶。

再比如，我們平時(shí)使用微信的朋友圈流量非常大，按照一般的交互優(yōu)化是要提升朋友圈的權(quán)重，將它放在下面的Tab欄，而微信一直保存它原來的入口方式：打開微信——發(fā)現(xiàn)——朋友圈，是因?yàn)橹挥羞@樣才能尊重用戶的使用路徑。

所以在B端過程中，為了保持穩(wěn)定多一次點(diǎn)擊。

2. 最好便于拓展

保證導(dǎo)航不會(huì)由于產(chǎn)品的變化，發(fā)生很大的變化。

豎向?qū)Ш酵卣剐员容^強(qiáng)，一級(jí)導(dǎo)航的數(shù)目可以展示更多，而且層次清晰，一二三導(dǎo)航都可以流暢展示。

3. 清晰可見，操作易懂

導(dǎo)航大小足夠、位置是用戶熟悉的，要有積極的響應(yīng)、與內(nèi)容區(qū)要有對(duì)比。

積極響應(yīng)的意思：一個(gè)頁面夠不夠積極，取決于它給我的反饋夠不夠積極，比如鼠標(biāo)hover上去會(huì)不會(huì)變色、變大、往上移一個(gè)像素等。這個(gè)是一個(gè)頁面積極響應(yīng)的態(tài)度清晰可見、操作易懂。

4. 導(dǎo)航項(xiàng)可以重復(fù)

導(dǎo)航可以重復(fù)，導(dǎo)航項(xiàng)也可以重復(fù)，它沒有嚴(yán)格的層級(jí)結(jié)構(gòu)，它是可以重復(fù)的，也就是一個(gè)界面中，允許存在兩個(gè)主導(dǎo)航，同一個(gè)主導(dǎo)航中允許存在兩個(gè)重復(fù)的項(xiàng)。

5. 不要讓用戶有驚喜

避免因?yàn)橛腥に栽O(shè)計(jì)，要符合用戶預(yù)期，這對(duì)B端設(shè)計(jì)非常重要，可能在C端設(shè)計(jì)沒有任何問題，它需要一定的小驚喜，但是toB 一定不要，并且符合用戶預(yù)期，避免因?yàn)橛腥とピO(shè)計(jì)。

6. 導(dǎo)航的反饋需要保持一致

文字鏈和帶“跳轉(zhuǎn)”的文字鏈，他代表的隱喻是不一樣的。

7. 導(dǎo)航不一定要有層級(jí)關(guān)系

他只要做好信息分類，讓用戶完成任務(wù)，盡到導(dǎo)航的本職。

五、導(dǎo)航的布局

1. 全局導(dǎo)航樣式與分析

因B端用戶在進(jìn)入一個(gè)系統(tǒng)時(shí)，通常情況下都是抱有明確目的性，所以此處聚焦分析“結(jié)構(gòu)導(dǎo)航中的全局導(dǎo)航”

常用的B端全局導(dǎo)航樣式有三種，分別為：頂部水平導(dǎo)航、側(cè)邊垂直導(dǎo)航、混合導(dǎo)航，這里我們可以參考我的上篇講B端組件庫的文章里的導(dǎo)航組件部分，里面有詳解講解三款樣式的適用場(chǎng)景以及它們的優(yōu)缺點(diǎn)。

所以我們做設(shè)計(jì)并不是坐在工位上想想，它是有一定方法的，搞清楚結(jié)構(gòu)、定義、外觀，然后做組合，我們就能更好的規(guī)范我們的導(dǎo)航。

六、6步導(dǎo)航設(shè)計(jì)法

基于以上的結(jié)構(gòu)、定義、外觀，我們?cè)撊绾伟牙碚撀涞氐轿覀兊臉I(yè)務(wù)線呢？下面我們用一個(gè)具體案例來對(duì)導(dǎo)航的交互層面設(shè)計(jì)進(jìn)行一個(gè)深度體驗(yàn)，這里我還是以小鵝通作為我們的案例，總共分為六步。

1. 搞清楚每一個(gè)導(dǎo)航項(xiàng)的定義

導(dǎo)航項(xiàng)決定了你的目標(biāo)目標(biāo)界面，幫助用戶找到想要的信息，完成預(yù)期的任務(wù)。

我們會(huì)發(fā)現(xiàn)小鵝通導(dǎo)航的分類是從引流到促活的路徑，但是我們?cè)谶@里也會(huì)遇到很多問題：為什么會(huì)出現(xiàn)這類無用導(dǎo)航？為什么導(dǎo)航分類和導(dǎo)航項(xiàng)名字一樣，但是內(nèi)容不一樣？為什么這個(gè)

2. 搞明白用戶的操作路徑

我們只有很好的搞明白用戶的操作路徑，才可以給任務(wù)類產(chǎn)品做一級(jí)分類，帶著上面的問題，基于不同角色的產(chǎn)品用戶體驗(yàn)地圖可以得到用戶的操作路徑，這樣我們就不難理解現(xiàn)在小鵝通的一級(jí)側(cè)邊導(dǎo)航了。

3. 區(qū)分一下權(quán)限

針對(duì)B端來說，不同的用戶看到內(nèi)容是不一樣的，可以考慮根據(jù)用戶角色的不同，給用戶不同的權(quán)限，這又是一個(gè)嶄新的話題，一個(gè)角色可能有多個(gè)賬號(hào)，可能有多個(gè)用戶。

因此我們可以很好的得出，針對(duì)不同的角色，可以展示不同的內(nèi)容，雖然我們劃分了不同的角色，比如運(yùn)營人員和管理員，但是我們還可以把他們劃分到二級(jí)項(xiàng)里面去，因?yàn)槲覀兪窃试S耦合的情況發(fā)生的。

4. 劃分一下界面數(shù)據(jù)的本質(zhì)

區(qū)分界面數(shù)據(jù)的性質(zhì)，相同的數(shù)據(jù)來源，可以幫助我們區(qū)分界面性質(zhì)，而且通常有一組相同的界面來圍繞。

補(bǔ)充：

• 元數(shù)據(jù)：數(shù)據(jù)屬性的信息,用來支持如指示存儲(chǔ)位置、歷史數(shù)據(jù)、資源查找、文件記錄等功能，例如一件商品、一個(gè)客戶；
• 記錄集：指定數(shù)據(jù)庫中檢索到的數(shù)據(jù)的集合，例如訂單列表、發(fā)貨列表；
• 關(guān)系列表：用來描述對(duì)象和對(duì)象的關(guān)系，比如你和我是好友、你和我在同一個(gè)企業(yè)微信群。

我們按照上面的界面數(shù)據(jù)的性質(zhì)，給小鵝通區(qū)分界面性質(zhì)。

我們標(biāo)出相同的數(shù)據(jù)類型，發(fā)現(xiàn)相同關(guān)系的貌似可以歸類在一起。

5. 搞明白用戶的使用頻次

高頻次的可以高優(yōu)展示，低頻次的可以降低權(quán)重，甚至隱藏，這里我們想要搞清楚用戶的使用頻次，有兩個(gè)方法：用戶調(diào)研、數(shù)據(jù)埋點(diǎn)，這樣我們得到一個(gè)新的一列使用頻次，結(jié)合我們整理好的一級(jí)導(dǎo)航和二級(jí)導(dǎo)航，按照我們使用頻次的排序，但是我們不用十分嚴(yán)謹(jǐn)?shù)陌凑疹l次排序，而是結(jié)合具體情況去綜合考慮。

6. 設(shè)計(jì)合適的導(dǎo)航布局

這一步就是涉及到布局和外觀面了，這里我們的可以回顧下上面的全局導(dǎo)航的布局，反正記住一點(diǎn)就是可用性永遠(yuǎn)大于體驗(yàn)。

7. 補(bǔ)充貼士

當(dāng)二級(jí)項(xiàng)導(dǎo)航內(nèi)容過多時(shí)，可以再做一個(gè)分類的命名。

七、最后

以上就是本文對(duì)B端導(dǎo)航的全面解析啦，相信大家應(yīng)該知道了解到了如何打造一個(gè)比較好的B端導(dǎo)航，關(guān)于這方面?zhèn)€人建議需要關(guān)注如下幾個(gè)方面：

嚴(yán)謹(jǐn)?shù)男畔⒓軜?gòu)搭建是一切的前提：信息架構(gòu)的搭建是網(wǎng)站的基礎(chǔ)，可嘗試采用卡片分類法對(duì)導(dǎo)航進(jìn)行分類篩選；而對(duì)于導(dǎo)航設(shè)計(jì)目前已經(jīng)形成的規(guī)范，個(gè)人還是建議不要走花路，改變用戶行為總是要付出代價(jià)的。

注重可視化語義表達(dá)：可采用顏色、icon等元素提高導(dǎo)航可視性，根據(jù)NNGstudy的研究：當(dāng)用戶在網(wǎng)頁檢索信息時(shí)，相比于只有文案，通過顏色和icon的差異化設(shè)計(jì)的視覺指引能讓用戶快37%。

注重交互細(xì)節(jié)和觸點(diǎn)交互反饋：好的網(wǎng)頁是要能夠給到用戶積極反饋的，設(shè)計(jì)師需要加強(qiáng)觸點(diǎn)交互反饋；對(duì)同一級(jí)導(dǎo)航制定統(tǒng)一的交互行為規(guī)則、反饋及循環(huán)模式等，例如鼠標(biāo)每次懸浮，菜單背景灰色顯示，文字由深灰變?yōu)樗{(lán)色；另外需注意，對(duì)不同層級(jí)的導(dǎo)航可進(jìn)行差異化處理，凸顯導(dǎo)航層級(jí)。

在導(dǎo)航設(shè)計(jì)上面，設(shè)計(jì)師還是有很多突破的，但是改變用戶的習(xí)慣是要成本的，剛接觸后臺(tái)產(chǎn)品的時(shí)候，最希望能把產(chǎn)品做的美觀，工作中慢慢地發(fā)現(xiàn)項(xiàng)目的背后思考更為重要，產(chǎn)出的設(shè)計(jì)成果也應(yīng)該有理有據(jù)、支撐整個(gè)設(shè)計(jì)體系。

在后臺(tái)產(chǎn)品的設(shè)計(jì)過程中，更應(yīng)該把寶貴的時(shí)間用在更值得關(guān)注的事物上，讓設(shè)計(jì)師能夠輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn)，從而切實(shí)解決問題和實(shí)現(xiàn)價(jià)值。

大家一起加油吧??！

參考資料：

CCTalk夏敘老師《關(guān)于導(dǎo)航欄的解構(gòu)和分析》

后臺(tái)系統(tǒng)的導(dǎo)航設(shè)計(jì)：組成與呈現(xiàn)：http://m.codemsi.com/pd/1051921.html

淺談web端導(dǎo)航設(shè)計(jì) @UED頻道：https://zhuanlan.zhihu.com/p/40405686

UI進(jìn)階干貨-詳解B端產(chǎn)品&C端產(chǎn)品：https://zhuanlan.zhihu.com/p/70713465

本文由@佩奇一只居 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議