每個(gè)網(wǎng)頁的設(shè)計(jì)都需要包括導(dǎo)航，那么導(dǎo)航架構(gòu)該如何設(shè)計(jì)？作者結(jié)合之前用戶體驗(yàn)設(shè)計(jì)的相關(guān)經(jīng)驗(yàn)給大家分享關(guān)于導(dǎo)航架構(gòu)設(shè)計(jì)的思路，希望對你有所幫助。

過完元宵佳節(jié)就正式進(jìn)入新的一年了，告別與家人團(tuán)聚的歡樂重新回歸繁忙的工作生活中，今天結(jié)合之前用戶體驗(yàn)設(shè)計(jì)的相關(guān)經(jīng)驗(yàn)給大家分享一篇關(guān)于導(dǎo)航架構(gòu)設(shè)計(jì)的文章。

一、導(dǎo)航是什么

導(dǎo)航：是一種對信息的分類，能夠幫助用戶找到想要的信息，完成預(yù)期的任務(wù)。導(dǎo)航映射到我們物理世界中就是路牌、導(dǎo)覽、線路示意圖等。導(dǎo)航在B端產(chǎn)品中是不可或缺的，用戶依賴導(dǎo)航在各個(gè)頁面中進(jìn)行跳轉(zhuǎn)去完成預(yù)期的任務(wù)。

二、導(dǎo)航的作用

1. 確定用戶的位置：

B端產(chǎn)品由于業(yè)務(wù)的復(fù)雜性和用戶角色的多樣性，導(dǎo)致頁面層級(jí)結(jié)構(gòu)較多，清晰的導(dǎo)航可以告訴用戶“自己在哪里”，避免用戶在產(chǎn)品中迷路；

2.告訴用戶如何使用產(chǎn)品：

清晰一致的導(dǎo)航能夠幫助用戶規(guī)劃行程明確地提示用戶從哪里開始，能進(jìn)行哪些操作，能去往哪里，幫助用戶快速找到所需內(nèi)容；

3.告訴用戶這里有什么：

B端產(chǎn)品中系統(tǒng)架構(gòu)通常通過導(dǎo)航結(jié)構(gòu)劃分，通過導(dǎo)航層次分級(jí)、導(dǎo)航文案引導(dǎo)可以快速呈現(xiàn)產(chǎn)品的層級(jí)和內(nèi)容。

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

全局導(dǎo)航：

可以覆蓋整個(gè)產(chǎn)品的通路但不一定包含全局信息，往往是產(chǎn)品的一級(jí)信息分類；是用戶操作路徑上貫穿始終的導(dǎo)航，不一定一步就讓用戶快速完成自己的目標(biāo)，但一定是在用戶完成目標(biāo)的關(guān)鍵節(jié)點(diǎn)上；全局導(dǎo)航需要具有良好的穩(wěn)定性和拓展性。

局部導(dǎo)航：

局部導(dǎo)航與全局導(dǎo)航有層級(jí)關(guān)系，局部導(dǎo)航幫助用戶進(jìn)入更加深層級(jí)的頁面；常作為產(chǎn)品的二級(jí)導(dǎo)航出現(xiàn)；

輔助導(dǎo)航：

提供用戶在全局/局部導(dǎo)航不可到達(dá)的本產(chǎn)品相關(guān)內(nèi)容的快捷途徑（如頁面內(nèi)的頁簽導(dǎo)航）；

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

對頁面內(nèi)容進(jìn)行解釋說明的導(dǎo)航（如文字超級(jí)鏈接引導(dǎo)用戶搜索相關(guān)內(nèi)容）；

友好導(dǎo)航：

給用戶提供一個(gè)便利的途徑，在需要的時(shí)候能夠找到信息入口，幫助提升網(wǎng)站可用性的功能（如用戶、消息、登錄、幫助等導(dǎo)航）；

遠(yuǎn)程導(dǎo)航：

不包含在產(chǎn)品結(jié)構(gòu)中，以獨(dú)立的方式獨(dú)立存在于產(chǎn)品內(nèi)幫助用戶跳轉(zhuǎn)到其他產(chǎn)品中去（如網(wǎng)站地圖、索引表等）。

四、導(dǎo)航菜單的廣度與深度

導(dǎo)航菜單廣度：

導(dǎo)航菜單每一層級(jí)包含的菜單數(shù)目（如一級(jí)導(dǎo)航的總個(gè)數(shù)）為廣度，菜單數(shù)目越多則廣度越大。

導(dǎo)航菜單廣度的處理方法：

• 刪除：平庸的產(chǎn)品設(shè)計(jì)往往堆砌更多功能而忽視用戶主要目標(biāo)，當(dāng)發(fā)現(xiàn)功能與用戶目標(biāo)相悖時(shí)可以刪除冗余的功能尋求滿足用戶目標(biāo)的精簡方案，減少用戶認(rèn)知負(fù)擔(dān)；
• 分組：信息分組是確保頁面清晰的常用策略，這同樣適用于功能層面上方便快速查閱檢索；
• 隱藏：當(dāng)鼠標(biāo)懸停時(shí)拓展出臨時(shí)模態(tài)選項(xiàng)區(qū)域，可以充分利用屏幕空間；
• 轉(zhuǎn)移：當(dāng)一個(gè)功能既不能刪除、分組也不能隱藏，就可以用轉(zhuǎn)移的方法包括設(shè)備轉(zhuǎn)移（因?yàn)槠聊淮笮∮绊懸恍┊a(chǎn)品的高級(jí)功能使用，所以在手機(jī)端往往進(jìn)行簡化隱藏只在電腦端呈現(xiàn)）、軟件轉(zhuǎn)移（把一些產(chǎn)品功能抽離到其他軟件上）、向用戶轉(zhuǎn)移（提供用戶自定義功能如常用功能快捷入口）。

導(dǎo)航菜單深度：

導(dǎo)航菜單層級(jí)的數(shù)目為深度（如一級(jí)菜單/二級(jí)菜單/三級(jí)菜單），層級(jí)越多則深度越大。

導(dǎo)航深度的處理方法：

• 根據(jù)用戶角色需求和使用場景梳理產(chǎn)品架構(gòu)：當(dāng)發(fā)現(xiàn)功能層級(jí)過深時(shí)，可以根據(jù)用戶角色和使用場景給功能分組，如哪些功能需求是相互關(guān)聯(lián)在一起的（創(chuàng)建會(huì)議邀請時(shí)，需要看到與會(huì)人的日歷是否有排期）就需要考慮用同一個(gè)頁面視圖來集成所有相關(guān)功能；
• 運(yùn)用面包屑導(dǎo)航：頁面層級(jí)多于2層，可嘗試用面包屑導(dǎo)航，它的優(yōu)勢是可以看到當(dāng)前頁面的位置軌跡，且可返回到任意想要返回的位置；
• 減少頁面跳轉(zhuǎn)：當(dāng)頁面功能存在關(guān)聯(lián)性時(shí)候，可以用覆蓋層彈窗來減少頁面跳轉(zhuǎn)。

五、導(dǎo)航的顏色

我們先記住一個(gè)重要的原則：讓導(dǎo)航在每一頁上，以一致的外觀出現(xiàn)在相同的位置，會(huì)讓用戶確認(rèn)自己仍然待在這個(gè)網(wǎng)站上。

• 導(dǎo)航用色與產(chǎn)品品牌匹配：這里要考慮色盲和色弱用戶視覺體驗(yàn)，可以用色彩工具查看選取的色彩是否對色彩障礙用戶同樣友好。
• 盡量讓產(chǎn)品在不佳的環(huán)境中視覺感受良好，有些色彩往往在Mac電腦下展示很漂亮，在其他低分辨率的設(shè)備下容易偏色。所以需要考慮不同設(shè)備下產(chǎn)品顏色的展示效果，做綜合挑選和評(píng)估；
• 避免用高飽和度和高亮度的顏色：B端產(chǎn)品設(shè)計(jì)中，用戶往往需要長時(shí)間專注工作內(nèi)容，而明亮的導(dǎo)航顏色會(huì)使人感到視覺疲勞，不利于導(dǎo)航層級(jí)和內(nèi)容更好地展示，因此應(yīng)避免使用高亮度和高飽和度的顏色；
• 可嘗試用帶有色相的深灰色：B端產(chǎn)品往往以PC端用戶居多。從屏幕分辨率角度考慮，導(dǎo)航的顏色盡量選用深色，這樣在不同終端實(shí)際展現(xiàn)效果的包容性比較強(qiáng)，也有利于系統(tǒng)層級(jí)的展示，從而更好地突出內(nèi)容。

六、導(dǎo)航的形態(tài)

頂部導(dǎo)航：

自上而下的頂部布局結(jié)構(gòu)符合用戶的瀏覽習(xí)慣，其排版穩(wěn)定，不受顯示器的影響，無左側(cè)垂直導(dǎo)航干擾，用戶作業(yè)沉浸感強(qiáng)在網(wǎng)頁設(shè)計(jì)中較受歡迎。不足之處是橫向布局的拓展性較弱，能夠放置的條目也是有限的：一方面受瀏覽器寬度限制，水平方式欄目長度受限，欄目數(shù)量不宜過多。欄目命名中文字?jǐn)?shù)2~5個(gè)，欄目數(shù)目不超過7個(gè)比較合適；另外一方面，如果是有中英文切換功能的話，英文欄目長度很可能比中文的長，而屏幕寬度有限，容易出現(xiàn)內(nèi)容密集或排不下的情況。

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

因此頂部導(dǎo)航適用于業(yè)務(wù)簡單，導(dǎo)航欄目較少，追求沉浸式體驗(yàn)，輕操作的產(chǎn)品；

側(cè)邊導(dǎo)航：

因其可拓展的布局結(jié)構(gòu)在B端產(chǎn)品中比較受歡迎，它雖占據(jù)頁面主視覺區(qū)，但豎向的布局能夠展示更多條目，當(dāng)每個(gè)分類模塊的數(shù)量較多（條目信息一般遵循5±2原則）可通過收起折疊信息；

中文文字寬度較短，側(cè)邊導(dǎo)航能最大發(fā)揮出他的優(yōu)勢，能最大限度減少空間的使用率；B端產(chǎn)品的業(yè)務(wù)復(fù)雜，以及對于擴(kuò)展性的要求較高，每個(gè)企業(yè)都想做一個(gè)又大又全的產(chǎn)品，因此側(cè)邊導(dǎo)航欄更加適合業(yè)務(wù)的實(shí)際需求；

一級(jí)導(dǎo)航在左側(cè)時(shí)，導(dǎo)航可固定，使用戶在操作和瀏覽時(shí)可以快速定位和切換當(dāng)前位置，用戶使用效率高、遲疑和錯(cuò)誤更少，用戶追求的是使用產(chǎn)品完成目標(biāo)任務(wù)，注重的是功能完整性和操作便捷性。

但是導(dǎo)航放在左側(cè)，排版受客戶端顯示器影響大；打斷用戶的正常閱讀順序，內(nèi)容展示區(qū)寬度受限，不利于沉浸式體驗(yàn)。

因此側(cè)邊導(dǎo)航適用于有一定復(fù)雜度，需要頻繁切換，重操作的產(chǎn)品；

混合導(dǎo)航：

將頂部導(dǎo)航與側(cè)邊導(dǎo)航進(jìn)行結(jié)合。通常將一級(jí)導(dǎo)航菜單放置頂部，通過一級(jí)菜單的點(diǎn)擊后，展示側(cè)邊的二、三級(jí)菜單。層級(jí)與欄目擴(kuò)展性強(qiáng)，最深可支持4級(jí)結(jié)構(gòu)有極強(qiáng)的包容性，可以承載更多復(fù)雜的邏輯關(guān)系。菜單交互路徑長，部分欄目與不同層級(jí)欄目間距離可能較遠(yuǎn)，切換效率受限；導(dǎo)航占屏幕面積大，內(nèi)容頁面寬高展示區(qū)域受限。

因此混合導(dǎo)航適用于量級(jí)大，模塊多且復(fù)雜度較高的產(chǎn)品。

七、導(dǎo)航的研究

效率對于多個(gè)級(jí)別的導(dǎo)航菜單是至關(guān)重要的，菜單的層級(jí)越多消耗的時(shí)間越長，最常見的是三級(jí)導(dǎo)航。常見的三級(jí)導(dǎo)航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。

JR Kingsburg 曾經(jīng)做過一次實(shí)驗(yàn)（A comparison of three-level menu navigation structures for web design），研究 3 層導(dǎo)航中，哪種組合使用效率更高。研究方向包括操作時(shí)間、操作遲疑、錯(cuò)誤移動(dòng)、錯(cuò)誤點(diǎn)擊和喜好排名，研究表明：

• 左側(cè)導(dǎo)航比頂部導(dǎo)航效率更高，當(dāng)一級(jí)導(dǎo)航和二級(jí)導(dǎo)航分開時(shí)，識(shí)別速度更快，總之：左-上-上、上-左-左排版時(shí)效率最高；
• 猶豫是指用戶在將光標(biāo)從一個(gè)導(dǎo)航移動(dòng)到另一個(gè)導(dǎo)航時(shí)猶豫不決思考的時(shí)長。在所有布局中，左-上-上結(jié)構(gòu)的猶豫值最小，上-左-上猶豫值最大。其中當(dāng)二級(jí)和三級(jí)導(dǎo)航在同一平面時(shí)猶豫值最??；
• 當(dāng)一級(jí)導(dǎo)航在左側(cè)時(shí)，光標(biāo)移動(dòng)較少。一級(jí)和二級(jí)導(dǎo)航分開時(shí)，光標(biāo)移動(dòng)也較少。當(dāng)二級(jí)和三級(jí)導(dǎo)航在同一方向時(shí)光標(biāo)移動(dòng)較少。左-左-左和上-上-上的光標(biāo)移動(dòng)量最少，上-上-左和上-左-上的光標(biāo)移動(dòng)量最大。當(dāng)所有導(dǎo)航都在同一方向時(shí)，用戶就更難將光標(biāo)移到錯(cuò)誤的平面上。
• 單擊次數(shù)過多表示選擇錯(cuò)誤。當(dāng)一級(jí)導(dǎo)航在左側(cè)時(shí)，選擇錯(cuò)誤率最低（左側(cè)與頂部相比錯(cuò)誤率減少了80%）。當(dāng)一級(jí)和二級(jí)導(dǎo)航都在頂部時(shí)，會(huì)出現(xiàn)大量的選擇錯(cuò)誤。上-上-上和上-上-左效率最差，當(dāng)二級(jí)和三級(jí)導(dǎo)航與一級(jí)導(dǎo)航不在同一方向時(shí)，選擇錯(cuò)誤率會(huì)大幅度降低。
• 大多數(shù)用戶更喜歡一級(jí)導(dǎo)航在左側(cè)，最優(yōu)布局是左-左-左和左-上-上。人們強(qiáng)烈傾向于二級(jí)和三級(jí)導(dǎo)航在同一方向。
• 根據(jù)所有類別的表現(xiàn)，對每個(gè)布局進(jìn)行總體評(píng)分。性能最好的導(dǎo)航布局是左-上-上，其次是左-左-左。表現(xiàn)最差的兩個(gè)是上-上-左和上-左-上。在兩個(gè)最好之中，左-上-上比左-左-左快17秒左右。

八、導(dǎo)航的設(shè)計(jì)

設(shè)計(jì)理論：

導(dǎo)航盡量扁平保持穩(wěn)定：對于B端產(chǎn)品來說穩(wěn)定相當(dāng)重要！因?yàn)锽端產(chǎn)品對于用戶來說使用和學(xué)習(xí)成本、門檻較大，如果你很頻繁地對其路徑進(jìn)行修改調(diào)整，用戶就會(huì)因?yàn)楫a(chǎn)品不符合操作的習(xí)慣、心智模型對產(chǎn)品很容易滋生負(fù)面情緒，對于產(chǎn)品本身來說這樣的傷害是需要盡量避免的；

導(dǎo)航需要易于擴(kuò)展：當(dāng)我們的產(chǎn)品的功能增多時(shí)，尤其是二級(jí)導(dǎo)航的項(xiàng)目增多，導(dǎo)致原來如果是橫向布局的導(dǎo)航不得不改成縱向布局的導(dǎo)航，這就是所謂的因?yàn)楫a(chǎn)品的變化發(fā)生很大的變化。所以在選擇導(dǎo)航布局的時(shí)候就需要打下一個(gè)很好的基礎(chǔ)便于日后的拓展；

導(dǎo)航需要清晰可見操作易懂：站在一個(gè)外觀和交互共同的層面去看，導(dǎo)航的大小一定要足夠，而且其位置一定要是用戶認(rèn)為足夠清晰的，確保在視覺反饋的的層面對于用戶來說是友好的。其次就是所有的可交互區(qū)域需要有積極的響應(yīng)，與內(nèi)容區(qū)要有對比，可以將其稱為界面的熱情度，這也是一個(gè)優(yōu)秀界面的自我修養(yǎng)。

設(shè)計(jì)方法：

• 整理產(chǎn)品層級(jí)框架:弄清楚每一個(gè)導(dǎo)航項(xiàng)的內(nèi)容以及用戶的操作路徑，制定出一個(gè)能滿足層級(jí)顯示和操作的交互結(jié)構(gòu)出來，值得注意的是，導(dǎo)航選項(xiàng)中，并不是所有的選項(xiàng)都是用來跳轉(zhuǎn)的，有的菜單是用來輔助區(qū)分內(nèi)容和用來展開的，我們可以在菜單上標(biāo)注說明；
• 區(qū)分用戶角色與權(quán)限：對于B端產(chǎn)品來說，不同的用戶看到內(nèi)容是不一樣的，可以考慮根據(jù)用戶角色的不同，給用戶不同的權(quán)限；
• 明確用戶關(guān)于導(dǎo)航菜單的使用頻次：高頻次的可以高優(yōu)展示，低頻次的可以降低權(quán)重，甚至隱藏，這里我們想要搞清楚用戶的使用頻次，有兩個(gè)方法：用戶調(diào)研、數(shù)據(jù)埋點(diǎn)，這樣我們得到使用頻次，結(jié)合我們整理好的一級(jí)導(dǎo)航和二級(jí)導(dǎo)航，按照我們使用頻次排序；
• 設(shè)計(jì)合適的導(dǎo)航布局：這里我們可以回顧下前文關(guān)于導(dǎo)航廣度/深度、顏色、形態(tài)、研究的內(nèi)容，結(jié)合我們實(shí)際的業(yè)務(wù)需求去設(shè)計(jì)合適的導(dǎo)航布局。

九、導(dǎo)航改版案例分享

項(xiàng)目背景：

產(chǎn)品線領(lǐng)導(dǎo)對于當(dāng)前產(chǎn)品的導(dǎo)航結(jié)構(gòu)現(xiàn)狀表達(dá)不滿，要求進(jìn)行改版。

產(chǎn)品現(xiàn)狀：

• 使用高飽和度和亮度的顏色：明亮的導(dǎo)航顏色會(huì)使人感到視覺疲勞，不利于導(dǎo)航層級(jí)和內(nèi)容更好地展示；
• 面包屑路徑分割了一/二級(jí)導(dǎo)航：增加了鼠標(biāo)移動(dòng)距離，從而增加用戶操作時(shí)間、降低了用戶使用效率；
• 缺乏一致性：各個(gè)子產(chǎn)品框架內(nèi)容分區(qū)、交互、視覺不統(tǒng)一，導(dǎo)致整體品牌感知弱，一致性差；
• 空間利用率低：功能列表占頁面左側(cè)50px空間，空間利用率較低，且影響了頁面沉浸感；
• 各種狀態(tài)對比不夠明顯：導(dǎo)航的大小、位置、視覺反饋不夠清晰，可交互區(qū)域需要有積極的響應(yīng)，與內(nèi)容區(qū)要有對比。

用戶痛點(diǎn)：

• 多個(gè)子產(chǎn)品導(dǎo)航架構(gòu)整體體驗(yàn)不一致；
• 多個(gè)子產(chǎn)品視覺風(fēng)格不同；
• 部分二級(jí)導(dǎo)航個(gè)數(shù)較多，當(dāng)前交互方式效率不高；
• 反饋不夠清晰，空間布局有些凌亂。

設(shè)計(jì)思路：

• 嘗試用帶有色相的深灰色：在不同終端實(shí)際展現(xiàn)效果的包容性比較強(qiáng)，也有利于系統(tǒng)層級(jí)的展示，從而更好地突出內(nèi)容；
• 舍棄割裂頁面層級(jí)的面包屑路徑：減少了鼠標(biāo)移動(dòng)距離，從而減少用戶操作時(shí)間、提升了用戶使用效率；
• 保持一致性：各個(gè)子產(chǎn)品框架內(nèi)容分區(qū)、交互、視覺統(tǒng)一，保證整體一致性；
• 提升空間利用率：舍棄左側(cè)功能列表占頁面，提升空間利用率，增強(qiáng)頁面沉浸感；
• 完善不同狀態(tài)的效果：導(dǎo)航的大小、位置、視覺反饋對于用戶來說是清晰的，所有的可交互區(qū)域有積極的響應(yīng)，與內(nèi)容區(qū)有足夠?qū)Ρ龋?/li>
• 尊重用戶習(xí)慣：保留原系統(tǒng)部分用戶操作習(xí)慣，避免增加用戶較大的學(xué)習(xí)成本。

改版設(shè)計(jì)效果：

總結(jié)

• 對于功能較多的B端產(chǎn)品，是否考慮了根據(jù)用戶角色配置權(quán)限功能，保持每級(jí)的導(dǎo)航菜單項(xiàng)在7+/-2個(gè)左右（導(dǎo)航菜單廣度），避免過多導(dǎo)致用戶難以記憶。對于一般產(chǎn)品來說，菜單層級(jí)最多到三級(jí)（導(dǎo)航菜單深度）就可以了，層級(jí)不易過深。
• 導(dǎo)航的設(shè)計(jì)在范圍層要考慮產(chǎn)品功能的數(shù)量及嵌套關(guān)系以及以后產(chǎn)品的版本迭代；在用戶層要考慮用戶的認(rèn)知負(fù)荷（思考和記憶）、視覺負(fù)荷（瀏覽習(xí)慣與辨識(shí)度）、行動(dòng)負(fù)荷（點(diǎn)擊、操作鼠標(biāo)左右拖動(dòng)進(jìn)度條、頁面是否需要經(jīng)常切換等）；在內(nèi)容層要考慮頁面以何種內(nèi)容為主，內(nèi)容在橫向上還是縱向上需要更大的展示區(qū)域。
• 導(dǎo)航菜單語言清晰易理解，信息歸類屬性界限清晰，如果有中英文切換功能的話，需要考慮中英文的語言差異導(dǎo)致字符長度不同。

后面還會(huì)根據(jù)自己的實(shí)際工作經(jīng)歷，持續(xù)分享B端產(chǎn)品經(jīng)理成長之旅相關(guān)內(nèi)容，感興趣的朋友歡迎加關(guān)注評(píng)論交流，大家一起進(jìn)步前行。最后祝大家新年新氣象，工作順利步步高升！