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

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

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

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

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

1. 確定用戶的位置：

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

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

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

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

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

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

全局導(dǎo)航：

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

局部導(dǎo)航：

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

輔助導(dǎo)航：

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

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

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

友好導(dǎo)航：

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

遠程導(dǎo)航：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頂部導(dǎo)航：

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

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

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

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

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

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

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

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

混合導(dǎo)航：

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

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

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

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

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

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

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

設(shè)計理論：

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

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

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

設(shè)計方法：

• 整理產(chǎn)品層級框架:弄清楚每一個導(dǎo)航項的內(nèi)容以及用戶的操作路徑，制定出一個能滿足層級顯示和操作的交互結(jié)構(gòu)出來，值得注意的是，導(dǎo)航選項中，并不是所有的選項都是用來跳轉(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)重，甚至隱藏，這里我們想要搞清楚用戶的使用頻次，有兩個方法：用戶調(diào)研、數(shù)據(jù)埋點，這樣我們得到使用頻次，結(jié)合我們整理好的一級導(dǎo)航和二級導(dǎo)航，按照我們使用頻次排序；
• 設(shè)計合適的導(dǎo)航布局：這里我們可以回顧下前文關(guān)于導(dǎo)航廣度/深度、顏色、形態(tài)、研究的內(nèi)容，結(jié)合我們實際的業(yè)務(wù)需求去設(shè)計合適的導(dǎo)航布局。

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

項目背景：

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

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

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

用戶痛點：

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

設(shè)計思路：

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

改版設(shè)計效果：

總結(jié)

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

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