起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識一文讀懂如何打造B端導航設計
編輯導語：B端產品對于導航界面的結構設計比較注重，用戶在進入頁面的第一時間就對整個頁面有一個大概的初印象，而且B端產品的功能性較強，所以對于設計方面要格外注意；本文作者分享了關于打造B端導航設計的思考，我們一起來了解一下。
導航作為網站或者平臺的骨架，是產品設計中不容忽視的一環。
最近有幸接觸到關于B端專題分享，課程中學到了很多關于導航的知識，于是結合自身對導航設計的理解，并綜合當下導航設計相關的資料書籍，對B端導航設計作如下闡述；從多角度深入細節去解析導航，總結的一些方法和思考分享給小伙伴們，也希望大家從更多的角度跟我一起探討。
本文主要從導航的結構層面出發去分析系統導航控件的組成與樣式，而不是僅僅停留在導航的外觀和形式上。
一、認識導航
1. 導航的定義
我們先來圈定一下導航的范圍，我們研究的是B端的導航設計，那到底啥是導航？
假設：同事約我們到一個陌生的大型商場吃飯，當我們到商場后，我們會通過什么找到約定的餐廳？
一般情況，我們都會通過商場樓層索引找到餐廳所在樓層和區域吧。如果商場里索引指示清楚的話，我們就能快速找到約定的飯店，不然，我們會感到困擾，自己瞎找，走了很多冤枉路還不一定找到，最后只能尋求朋友或商場工作人員幫助，難免會有不滿。
其實商場樓層索引與B端導航作用很像，都是為了告訴我們，這里有什么、我可以做什么、我在什么位置？導航就是一種對信息的分類，幫助用戶找到想要的信息，完成預期的任務，告訴用戶從哪里來？用戶在哪里？用戶可以去哪兒？
很多同學會將它和菜單弄混淆，菜單是一種對動作的分類和集合，點擊菜單之后，會立馬產生相應的動作，而導航點擊后，你看到的是信息分類的合集。
而且在B端系統中的后臺系統是根據具體業務設計的，作為一個后臺系統設計師，知道如何在狹小的屏幕空間選擇合理的導航形式表達業務內容是很重要的。
2. 導航的作用
- 告訴用戶這里有些什么。導航通過讓層次結構可視化，從而告訴用戶網站上有些什么，有效地體現站點內容。
- 告訴用戶如何使用網站。好的導航能夠幫助用戶規劃行程，含蓄地告訴用戶該從哪里開始，能進行哪些選擇，幫用戶快速找到所需內容。
- 確定用戶的位置。當用戶到達某一個地方，好的導航會告訴用戶“你在哪里”讓他們知道所在位置，避免迷路。
二、導航的分類
可能提到導航分類就會想到：頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等；但是這些都不是今天我們要討論的重點，這些都只是導航不同的外觀形式的區分，哪有人就有疑問了：那導航和導航條是一致的嗎？
導航條也僅是導航的一種外觀。今天我們要說的是從結構和交互層面出發，針對對象去解析我們的導航。
1. 全局導航 Global Navigation
特點：
- 可以覆蓋整個產品的通路，往往是產品的一級信息分類，是用戶操作上貫穿始終的導航；
- 不一定包含全局信息，但是一定可以去到關鍵節點。
2. 局部導航 Local Navigation
特點：
- 在同一個架構中，可以到這個節點的上下一級的通路；
- 有嚴格的父子級關系，局部導航與全局導航有層級關系，局部導航幫助用戶進入更加特定的頁面。
通常情況下，一個通路代表一個界面（這里的通路是交互上的概念），一般局部導航為二級導航。
3. 輔助導航 Supplementary Navition
特點：
- 提供用戶在全局/局部導航不可到達的相關內容的快捷途徑；
- 這個快捷途徑是在本產品內的。
例如在我們站酷的收藏文件夾頁面，想要快速到達編輯作品收藏夾，這時候我們使用輔助導航，它可以幫助解決用戶下一步去哪里，還能提供什么幫助等問題，優秀的設計是讓用戶可能多的使用關聯導航，而不是全局和局部導航。
4. 內嵌導航
特點：
- 也叫上下文導航，嵌入頁面自身內容的導航；
- 通常同在上下文超級鏈接，引導搜索等。
5. 友好導航
特點：
給用戶提供一個便利的前進途徑，在需要的時候能找到信息入口，幫助提升網站可用性的功能，并不是主要功能，但卻不能缺少，通常擺放位置在界面右上角。
通常置于網站右上角關于用戶、消息、登錄、幫助等導航，比如站酷右上角消息中心、我的個人服務等。
6. 遠程導航
特點：
- 不包含在產品結構中，以獨立的方式獨立存在于產品內。
- 通常是網站地圖、索引表（地址選擇、品牌選擇）等。
三、導航的外觀
1. 導航的外觀
導航的類型有很多種，同樣結構的導航可以使用不同的外形，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可根據組件庫進行統一設定。
頂欄菜單多為一級菜單，點擊切換頁面，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
四、導航的貼士
1. 導航盡量扁平，保持穩定就算要多一次點擊
三次點擊已被證實無效，保證穩定的結構，多一次點擊也未必是壞事。
在B端界面中我們盡量不要修改它的操作路徑，如果跟C端一樣頻繁的去改變它的路徑，去改變他的結構 ，用戶就會產生負面情緒，理想狀態下，用戶需要點擊的導航層級越少，那么用戶到達他們的目標頁面也就越快越清晰，信息層級越深，則用戶越容易被誤導，但是B端用戶對點擊次數多少是不太關注的，反而會因為修改了操作路徑產生厭惡感。
網站導航的目標是為了讓用戶快速找到自己所需的內容，不能一味的追求扁平的導航結構，使得整個網站的信息分類混亂；所以，要根據情況綜合考慮信息分類的廣度與深度，對于信息的分類，常見的可以通過卡片分類法來進行劃分。
比如小鵝通的后臺導入用戶藏的很深，通過用戶管理到用戶列表，再到導入用戶。
再比如，我們平時使用微信的朋友圈流量非常大，按照一般的交互優化是要提升朋友圈的權重，將它放在下面的Tab欄，而微信一直保存它原來的入口方式：打開微信——發現——朋友圈，是因為只有這樣才能尊重用戶的使用路徑。
所以在B端過程中，為了保持穩定多一次點擊。
2. 最好便于拓展
保證導航不會由于產品的變化，發生很大的變化。
豎向導航拓展性比較強，一級導航的數目可以展示更多，而且層次清晰，一二三導航都可以流暢展示。
3. 清晰可見，操作易懂
導航大小足夠、位置是用戶熟悉的，要有積極的響應、與內容區要有對比。
積極響應的意思：一個頁面夠不夠積極，取決于它給我的反饋夠不夠積極，比如鼠標hover上去會不會變色、變大、往上移一個像素等。這個是一個頁面積極響應的態度清晰可見、操作易懂。
4. 導航項可以重復
導航可以重復，導航項也可以重復，它沒有嚴格的層級結構，它是可以重復的，也就是一個界面中，允許存在兩個主導航，同一個主導航中允許存在兩個重復的項。
5. 不要讓用戶有驚喜
避免因為有趣所以設計，要符合用戶預期，這對B端設計非常重要，可能在C端設計沒有任何問題，它需要一定的小驚喜，但是toB 一定不要，并且符合用戶預期，避免因為有趣去設計。
6. 導航的反饋需要保持一致
文字鏈和帶“跳轉”的文字鏈，他代表的隱喻是不一樣的。
7. 導航不一定要有層級關系
他只要做好信息分類，讓用戶完成任務，盡到導航的本職。
五、導航的布局
1. 全局導航樣式與分析
因B端用戶在進入一個系統時，通常情況下都是抱有明確目的性，所以此處聚焦分析“結構導航中的全局導航”
常用的B端全局導航樣式有三種，分別為：頂部水平導航、側邊垂直導航、混合導航，這里我們可以參考我的上篇講B端組件庫的文章里的導航組件部分，里面有詳解講解三款樣式的適用場景以及它們的優缺點。
所以我們做設計并不是坐在工位上想想，它是有一定方法的，搞清楚結構、定義、外觀，然后做組合，我們就能更好的規范我們的導航。
六、6步導航設計法
基于以上的結構、定義、外觀，我們該如何把理論落地到我們的業務線呢？下面我們用一個具體案例來對導航的交互層面設計進行一個深度體驗，這里我還是以小鵝通作為我們的案例，總共分為六步。
1. 搞清楚每一個導航項的定義
導航項決定了你的目標目標界面，幫助用戶找到想要的信息，完成預期的任務。
我們會發現小鵝通導航的分類是從引流到促活的路徑，但是我們在這里也會遇到很多問題：為什么會出現這類無用導航？為什么導航分類和導航項名字一樣，但是內容不一樣？為什么這個
2. 搞明白用戶的操作路徑
我們只有很好的搞明白用戶的操作路徑，才可以給任務類產品做一級分類，帶著上面的問題，基于不同角色的產品用戶體驗地圖可以得到用戶的操作路徑，這樣我們就不難理解現在小鵝通的一級側邊導航了。
3. 區分一下權限
針對B端來說，不同的用戶看到內容是不一樣的，可以考慮根據用戶角色的不同，給用戶不同的權限，這又是一個嶄新的話題，一個角色可能有多個賬號，可能有多個用戶。
因此我們可以很好的得出，針對不同的角色，可以展示不同的內容，雖然我們劃分了不同的角色，比如運營人員和管理員，但是我們還可以把他們劃分到二級項里面去，因為我們是允許耦合的情況發生的。
4. 劃分一下界面數據的本質
區分界面數據的性質，相同的數據來源，可以幫助我們區分界面性質，而且通常有一組相同的界面來圍繞。
補充：
- 元數據：數據屬性的信息,用來支持如指示存儲位置、歷史數據、資源查找、文件記錄等功能，例如一件商品、一個客戶；
- 記錄集：指定數據庫中檢索到的數據的集合，例如訂單列表、發貨列表；
- 關系列表：用來描述對象和對象的關系，比如你和我是好友、你和我在同一個企業微信群。
我們按照上面的界面數據的性質，給小鵝通區分界面性質。
我們標出相同的數據類型，發現相同關系的貌似可以歸類在一起。
5. 搞明白用戶的使用頻次
高頻次的可以高優展示，低頻次的可以降低權重，甚至隱藏，這里我們想要搞清楚用戶的使用頻次，有兩個方法：用戶調研、數據埋點，這樣我們得到一個新的一列使用頻次，結合我們整理好的一級導航和二級導航，按照我們使用頻次的排序，但是我們不用十分嚴謹的按照頻次排序，而是結合具體情況去綜合考慮。
6. 設計合適的導航布局
這一步就是涉及到布局和外觀面了，這里我們的可以回顧下上面的全局導航的布局，反正記住一點就是可用性永遠大于體驗。
7. 補充貼士
當二級項導航內容過多時，可以再做一個分類的命名。
七、最后
以上就是本文對B端導航的全面解析啦，相信大家應該知道了解到了如何打造一個比較好的B端導航，關于這方面個人建議需要關注如下幾個方面：
嚴謹的信息架構搭建是一切的前提：信息架構的搭建是網站的基礎，可嘗試采用卡片分類法對導航進行分類篩選；而對于導航設計目前已經形成的規范，個人還是建議不要走花路，改變用戶行為總是要付出代價的。
注重可視化語義表達：可采用顏色、icon等元素提高導航可視性，根據NNGstudy的研究：當用戶在網頁檢索信息時，相比于只有文案，通過顏色和icon的差異化設計的視覺指引能讓用戶快37%。
注重交互細節和觸點交互反饋：好的網頁是要能夠給到用戶積極反饋的，設計師需要加強觸點交互反饋；對同一級導航制定統一的交互行為規則、反饋及循環模式等，例如鼠標每次懸浮，菜單背景灰色顯示，文字由深灰變為藍色；另外需注意，對不同層級的導航可進行差異化處理，凸顯導航層級。
在導航設計上面，設計師還是有很多突破的，但是改變用戶的習慣是要成本的，剛接觸后臺產品的時候，最希望能把產品做的美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
大家一起加油吧??！
參考資料：
CCTalk夏敘老師《關于導航欄的解構和分析》
后臺系統的導航設計：組成與呈現：http://www.aharts.cn/pd/1051921.html
淺談web端導航設計 @UED頻道：https://zhuanlan.zhihu.com/p/40405686
UI進階干貨-詳解B端產品&C端產品：https://zhuanlan.zhihu.com/p/70713465
本文由@佩奇一只居 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
太籠統了吧，舉的例子太勉強，硬湊結論