一文讀懂如何打造B端導(dǎo)航設(shè)計

時間：2022-08-23 15:48:02 | 來源：網(wǎng)站運營

時間：2022-08-23 15:48:02 來源：網(wǎng)站運營

B端導(dǎo)航前言介紹

導(dǎo)航作為網(wǎng)站或者平臺的骨架，是產(chǎn)品設(shè)計中不容忽視的一環(huán)。最近有幸接觸到關(guān)于B端專題分享月，課程中學(xué)到了很多關(guān)于導(dǎo)航的知識，于是結(jié)合自身對導(dǎo)航設(shè)計的理解，并綜合當(dāng)下導(dǎo)航設(shè)計相關(guān)的資料書籍，對B端導(dǎo)航設(shè)計作如下闡述，從多角度深入細節(jié)去解析導(dǎo)航，總結(jié)的一些方法和思考分享給小伙伴們，也希望大家從更多的角度跟我一起探討。
本文主要從導(dǎo)航的結(jié)構(gòu)層面出發(fā)去分析系統(tǒng)導(dǎo)航控件的組成與樣式，而不是僅僅停留在導(dǎo)航的外觀和形式上。









1.1 導(dǎo)航的定義

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

假設(shè)：同事約我們到一個陌生的大型商場吃飯，當(dāng)我們到商場后，我們會通過什么找到約定的餐廳？
一般情況，我們都會通過商場樓層索引找到餐廳所在樓層和區(qū)域吧。如果商場里索引指示清楚的話，我們就能快速找到約定的飯店，不然，我們會感到困擾，自己瞎找，走了很多冤枉路還不一定找到，最后只能尋求朋友或商場工作人員幫助，難免會有不滿。



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

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



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


1.2 導(dǎo)航的作用

1、告訴用戶這里有些什么。導(dǎo)航通過讓層次結(jié)構(gòu)可視化，從而告訴用戶網(wǎng)站上有些什么，有效地體現(xiàn)站點內(nèi)容。

2、告訴用戶如何使用網(wǎng)站。好的導(dǎo)航能夠幫助用戶規(guī)劃行程，含蓄地告訴用戶該從哪里開始，能進行哪些選擇，幫用戶快速找到所需內(nèi)容。

3、確定用戶的位置。當(dāng)用戶到達某一個地方，好的導(dǎo)航會告訴用戶“你在哪里”讓他們知道所在位置，避免迷路。










可能提到導(dǎo)航分類就會想到：頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等；但是這些都不是今天我們要討論的重點，這些都只是導(dǎo)航不同的外觀形式的區(qū)分，哪有人就有疑問了：那導(dǎo)航和導(dǎo)航條是一致的嗎？
導(dǎo)航條也僅是導(dǎo)航的一種外觀。今天我們要說的是從結(jié)構(gòu)和交互層面出發(fā)，針對對象去解析我們的導(dǎo)航。




2.1 全局導(dǎo)航 Global Navigation

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





2.2 局部導(dǎo)航 Local Navigation

特點：
1、在同一個架構(gòu)中，可以到這個節(jié)點的上下一級的通路
2、有嚴格的父子級關(guān)系，局部導(dǎo)航與全局導(dǎo)航有層級關(guān)系，局部導(dǎo)航幫助用戶進入更加特定的頁面
通常情況下，一個通路代表一個界面（這里的通路是交互上的概念），一般局部導(dǎo)航為二級導(dǎo)航；





2.3 輔助導(dǎo)航 Supplementary Navition
特點：
1、提供用戶在全局/局部導(dǎo)航不可到達的相關(guān)內(nèi)容的快捷途徑
2、這個快捷途徑是在本產(chǎn)品內(nèi)的

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





2.4 內(nèi)嵌導(dǎo)航
特點：
1、也叫上下文導(dǎo)航，潛入頁面自身內(nèi)容的導(dǎo)航
2、通常同在上下文超級鏈接，引導(dǎo)搜索等





2.5 友好導(dǎo)航
特點：
1、給用戶提供一個便利的前進途徑，在需要的時候能找到信息入口，幫助提升網(wǎng)站可用性的功能，并不是主要功能，但卻不能缺少，通常擺放位置在界面右上角。

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





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










3.1 導(dǎo)航的外觀
導(dǎo)航的類型有很多種，同樣結(jié)構(gòu)的導(dǎo)航可以使用不同的外形，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。
各類導(dǎo)航中的字體大小可根據(jù)組件庫進行統(tǒng)一設(shè)定。
頂欄菜單多為一級菜單，點擊切換頁面，或作為下拉菜單的父級，將子級菜單合理分類。
側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。
下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點擊兩種。
步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。










4.1 導(dǎo)航盡量扁平，保持穩(wěn)定就算要多一次點擊
三次點擊已被證實無效，保證穩(wěn)定的結(jié)構(gòu)，多一次點擊也未必是壞事。
在B端界面中我們盡量不要修改它的操作路徑，如果跟C端一樣頻繁的去改變它的路徑，去改變他的結(jié)構(gòu) ，用戶就會產(chǎn)生負面情緒，理想狀態(tài)下，用戶需要點擊的導(dǎo)航層級越少，那么用戶到達他們的目標(biāo)頁面也就越快越清晰，信息層級越深，則用戶越容易被誤導(dǎo)，但是B端用戶對點擊次數(shù)多少是不太關(guān)注的，反而會因為修改了操作路徑產(chǎn)生厭惡感。
網(wǎng)站導(dǎo)航的目標(biāo)是為了讓用戶快速找到自己所需的內(nèi)容，不能一味的追求扁平的導(dǎo)航結(jié)構(gòu)，使得整個網(wǎng)站的信息分類混亂。所以，要根據(jù)情況綜合考慮信息分類的廣度與深度，對于信息的分類，常見的可以通過卡片分類法來進行劃分。

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



再比如，我們平時使用微信的朋友圈流量非常大，按照一般的交互優(yōu)化是要提升朋友圈的權(quán)重，將它放在下面的Tab欄，而微信一直保存它原來的入口方式：打開微信——發(fā)現(xiàn)——朋友圈，是因為只有這樣才能尊重用戶的使用路徑。所以在B端過程中，為了保持穩(wěn)定多一次點擊，


4.2 最好便于拓展
保證導(dǎo)航不會由于產(chǎn)品的變化，發(fā)生很大的變化。
豎向?qū)Ш酵卣剐员容^強，一級導(dǎo)航的數(shù)目可以展示更多，而且層次清晰，一二三導(dǎo)航都可以流暢展示。





4.3 清晰可見，操作易懂
導(dǎo)航大小足夠、位置是用戶熟悉的，要有積極的響應(yīng)、與內(nèi)容區(qū)要有對比
積極響應(yīng)的意思：一個頁面夠不夠積極，取決于它給我的反饋夠不夠積極，比如鼠標(biāo)hover上去會不會變色、變大、往上移一個像素等。這個是一個頁面積極響應(yīng)的態(tài)度清晰可見、操作易懂。




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





4.5 不要讓用戶有驚喜
避免因為有趣所以設(shè)計，要符合用戶預(yù)期，這對B端設(shè)計非常重要，可能在C端設(shè)計沒有任何問題，它需要一定的小驚喜，但是toB 一定不要，并且符合用戶預(yù)期，避免因為有趣去設(shè)計





4.6 導(dǎo)航的反饋需要保持一致
文字鏈和帶“跳轉(zhuǎn)”的文字鏈，他代表的隱喻是不一樣的





4.7 導(dǎo)航不一定要有層級關(guān)系
他只要做好信息分類，讓用戶完成任務(wù)，盡到導(dǎo)航的本職。









5.1 全局導(dǎo)航樣式與分析
因B端用戶在進入一個系統(tǒng)時，通常情況下都是抱有明確目的性，所以此處聚焦分析“結(jié)構(gòu)導(dǎo)航中的全局導(dǎo)航”
常用的B端全局導(dǎo)航樣式有三種，分別為：頂部水平導(dǎo)航、側(cè)邊垂直導(dǎo)航、混合導(dǎo)航，這里我們可以參考我的上篇講B端組件庫的文章里的導(dǎo)航組件部分：https://www.zcool.com.cn/article/ZMTIzMTEwMA==.html，里面有詳解講解三款樣式的適用場景以及它們的優(yōu)缺點。




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






基于以上的結(jié)構(gòu)、定義、外觀，我們該如何把理論落地到我們的業(yè)務(wù)線呢？下面我們用一個具體案例來對導(dǎo)航的交互層面設(shè)計進行一個深度體驗，這里我還是以小鵝通作為我們的案例，總共分為六步。


1、搞清楚每一個導(dǎo)航項的定義

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



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


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





3、區(qū)分一下權(quán)限
針對B端來說，不同的用戶看到內(nèi)容是不一樣的，可以考慮根據(jù)用戶角色的不同，給用戶不同的權(quán)限，這又是一個嶄新的話題，一個角色可能有多個賬號，可能有多個用戶



因此我們可以很好的得出，針對不同的角色，可以展示不同的內(nèi)容，雖然我們劃分了不同的角色，比如運營人員和管理員，但是我們還可以把他們劃分到二級項里面去，因為我們是允許耦合的情況發(fā)生的。


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

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

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




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





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





6、設(shè)計合適的導(dǎo)航布局
這一步就是涉及到布局和外觀面了，這里我們的可以回顧下上面的全局導(dǎo)航的布局，反正記住一點就是可用性永遠大于體驗。




補充貼士
當(dāng)二級項導(dǎo)航內(nèi)容過多時，可以再做一個分類的命名






最后

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

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

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

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

在導(dǎo)航設(shè)計上面，設(shè)計師還是有很多突破的，但是改變用戶的習(xí)慣是要成本的，剛接觸后臺產(chǎn)品的時候，最希望能把產(chǎn)品做的美觀，工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要，產(chǎn)出的設(shè)計成果也應(yīng)該有理有據(jù)、支撐整個設(shè)計體系。在后臺產(chǎn)品的設(shè)計過程中，更應(yīng)該把寶貴的時間用在更值得關(guān)注的事物上，讓設(shè)計師能夠輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨有的閃光點，從而切實解決問題和實現(xiàn)價值，大家一起加油吧！！



參考資料：
CCTalk夏敘老師《關(guān)于導(dǎo)航欄的解構(gòu)和分析》
后臺系統(tǒng)的導(dǎo)航設(shè)計：組成與呈現(xiàn)：http://www.woshipm.com/pd/1051921.html
淺談web端導(dǎo)航設(shè)計 @UED頻道：https://zhuanlan.zhihu.com/p/40405686
UI進階干貨-詳解B端產(chǎn)品&C端產(chǎn)品：https://zhuanlan.zhihu.com/p/70713465