每個網頁的設計都需要包括導航，那么導航架構該如何設計？作者結合之前用戶體驗設計的相關經驗給大家分享關于導航架構設計的思路，希望對你有所幫助。

過完元宵佳節(jié)就正式進入新的一年了，告別與家人團聚的歡樂重新回歸繁忙的工作生活中，今天結合之前用戶體驗設計的相關經驗給大家分享一篇關于導航架構設計的文章。

一、導航是什么

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

二、導航的作用

1. 確定用戶的位置：

B端產品由于業(yè)務的復雜性和用戶角色的多樣性，導致頁面層級結構較多，清晰的導航可以告訴用戶“自己在哪里”，避免用戶在產品中迷路；

2.告訴用戶如何使用產品：

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

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

B端產品中系統(tǒng)架構通常通過導航結構劃分，通過導航層次分級、導航文案引導可以快速呈現產品的層級和內容。

三、導航的分類

全局導航：

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

局部導航：

局部導航與全局導航有層級關系，局部導航幫助用戶進入更加深層級的頁面；常作為產品的二級導航出現；

輔助導航：

提供用戶在全局/局部導航不可到達的本產品相關內容的快捷途徑（如頁面內的頁簽導航）；

內嵌導航：

對頁面內容進行解釋說明的導航（如文字超級鏈接引導用戶搜索相關內容）；

友好導航：

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

遠程導航：

不包含在產品結構中，以獨立的方式獨立存在于產品內幫助用戶跳轉到其他產品中去（如網站地圖、索引表等）。

四、導航菜單的廣度與深度

導航菜單廣度：

導航菜單每一層級包含的菜單數目（如一級導航的總個數）為廣度，菜單數目越多則廣度越大。

導航菜單廣度的處理方法：

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

導航菜單深度：

導航菜單層級的數目為深度（如一級菜單/二級菜單/三級菜單），層級越多則深度越大。

導航深度的處理方法：

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

五、導航的顏色

我們先記住一個重要的原則：讓導航在每一頁上，以一致的外觀出現在相同的位置，會讓用戶確認自己仍然待在這個網站上。

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

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

頂部導航：

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

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

側邊導航：

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

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

一級導航在左側時，導航可固定，使用戶在操作和瀏覽時可以快速定位和切換當前位置，用戶使用效率高、遲疑和錯誤更少，用戶追求的是使用產品完成目標任務，注重的是功能完整性和操作便捷性。

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

因此側邊導航適用于有一定復雜度，需要頻繁切換，重操作的產品；

混合導航：

將頂部導航與側邊導航進行結合。通常將一級導航菜單放置頂部，通過一級菜單的點擊后，展示側邊的二、三級菜單。層級與欄目擴展性強，最深可支持4級結構有極強的包容性，可以承載更多復雜的邏輯關系。菜單交互路徑長，部分欄目與不同層級欄目間距離可能較遠，切換效率受限；導航占屏幕面積大，內容頁面寬高展示區(qū)域受限。

因此混合導航適用于量級大，模塊多且復雜度較高的產品。

七、導航的研究

效率對于多個級別的導航菜單是至關重要的，菜單的層級越多消耗的時間越長，最常見的是三級導航。常見的三級導航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。

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

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

八、導航的設計

設計理論：

導航盡量扁平保持穩(wěn)定：對于B端產品來說穩(wěn)定相當重要！因為B端產品對于用戶來說使用和學習成本、門檻較大，如果你很頻繁地對其路徑進行修改調整，用戶就會因為產品不符合操作的習慣、心智模型對產品很容易滋生負面情緒，對于產品本身來說這樣的傷害是需要盡量避免的；

導航需要易于擴展：當我們的產品的功能增多時，尤其是二級導航的項目增多，導致原來如果是橫向布局的導航不得不改成縱向布局的導航，這就是所謂的因為產品的變化發(fā)生很大的變化。所以在選擇導航布局的時候就需要打下一個很好的基礎便于日后的拓展；

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

設計方法：

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

九、導航改版案例分享

項目背景：

產品線領導對于當前產品的導航結構現狀表達不滿，要求進行改版。

產品現狀：

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

用戶痛點：

• 多個子產品導航架構整體體驗不一致；
• 多個子產品視覺風格不同；
• 部分二級導航個數較多，當前交互方式效率不高；
• 反饋不夠清晰，空間布局有些凌亂。

設計思路：

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

改版設計效果：

總結

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

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