www.pmcaff.com
本文為PMCAFF作者 CE大人 於社區發佈
導航菜單對於用戶的使用來說尤為重要，本文是我從實際工作出發，結合自身產品和過去經驗對於導航進行的一次全面總結
前言在任意一個B端後臺系統中，導航菜單都是不可或缺的一部分，每個導航菜單都有其固定位置，通常這個位置是不可撼動的。所以說：導航菜單是B端產品層級重要的交互控件
對於B端產品的用戶而言，他們使用導航菜單目的性很強到後臺主要是對具體功能進行操作，導航菜單在功能的引導中發揮了巨大作用。因此，其主要的功能就是對B端產品進行分發、引導；幫助用戶在複雜的後臺頁面中，尋找出自己真正想要的功能
分享內容：
一、合理規劃
二、確定菜單廣度和深度
三、菜單層級有區分
四、導航可配置
五、四種常見導航菜單
一合理規劃
1.1遵循7±2 原則
導航菜單建議最多不要超過 9 個，最少不要低於5個
原則解釋：1956 年喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有 7（±2）項信息塊，在記憶了 5-9 項信息後人類的頭腦就開始出錯。
在生活中我們經常會把一長串的數字分成 7 個左右的數組來記憶，這樣會使難度降低很多，米勒稱這種單位為“組塊”
是不是通過分組記憶以後，自己能記住的更多？這就是7±2 原則的分組
通過上面7+-2原則描述我們明確到：在導航菜單當中，超過 9 個會給用戶查找時帶來困難，低於 5 個說明導航菜單的分發效率不夠高效
有人會說，在實際業務中，不會有那麼理想，如果需要超過 9 個時，應該怎麼辦？
超過9個時，一定要對菜單進行分組，因為導航過多，用戶尋找會十分迷茫，通過分組的方式，能夠對菜單進行再次分類，提高查找效率
說的太乾不如舉個栗子：
比如在微盟、有贊、小鵝通的導航設計當中，微盟、小鵝通有很大不足，我們來一一拆解
小鵝通：共有14個導航菜單， 且菜單之間形式不同，表現也會有所差異， 也因此對於用戶而言使用起來會產生很強的疑惑感
微盟：一共有11個一級菜單，不符合7+-2原則，同時也能夠感受到在視覺層面上，微盟的導航菜單沒有分組，難以尋找和記憶
有贊：雖然在導航的數量上也是有9個以上，但是它對菜單進行分組，有效提高了用戶查找時的效率，因此在設計上更加合理
如果菜單欄數量過多怎麼辦？下方2.1小節會有講到～
1.2 導航菜單不能隱藏超過兩級
導航菜單隱藏超過兩級時，代表著產品在用戶的使用規劃中，沒有深入思考整個用戶體驗
導航菜單層級越多，用戶體驗就會越差，你會發現一些擁有三級導航的菜單，都會通過設計優化來實現隱藏導航的合併，從而減少用戶操作負擔
比如有贊就是一個典型例子，在有贊零售的導航菜單中其實是有三個層級，但是通過交互層面的優化，將二、三級菜單直接展示出來，形成一個整體，提升了用戶體驗避免用戶層層尋找
同時在交互上，採用 懸停+點擊結合的形式，用戶即可以通過懸停鼠標進行快捷操作。同時又可以通過點擊，確定跳轉查看該一級導航下的菜單，能夠提高用戶的操作效率
1.3 鼠標懸停還是鼠標點擊
作為導航來說，其操作本身並不多，但是設計上，點擊與懸停(hover)之間，還是存在很大差距
這裡想要說明這兩個操作本身而言，並沒有對與錯，但是適用場景的不同，導致在設計屬性上存在著較大差異
鼠標懸停操作
鼠標在懸停時觸發的操作時間太短暫，會給用戶帶來很強烈的挫敗感，同時在懸停選擇下一級菜單時，鼠標移動懸停也同要會造成這樣的結果，因此在設計時，對鼠標懸停時的操作要格外留意。通常在懸停操作當中，只適用於只有一個菜單層級的菜單選項，這樣用戶在操作時更加方便
鼠標點擊操作
鼠標點擊操作多發生於多級導航進行操作，同時鼠標點擊的形式，會給用戶正向的反饋，用戶點擊後明確知道菜單欄不會隱藏，因此在兩個操作之間進行選擇操作時一定要多加思考
二確定菜單廣度和深度
導航菜單廣度和深度的區別
菜單廣度：導航菜單中每一個層級包含的菜單項數目為廣度
菜單深度：導航菜單層級的數目為深度深廣度平衡幫助用戶進行快速選擇，通過能夠對整個產品架構有著第一眼的認識
2.1當菜單廣度過大時，怎麼辦？
當菜單廣度過大，我們也能夠通過設計的方法來優化導航菜單
我舉一個比較具有代表性的例子：騰訊雲
騰訊雲目前擁有大概100+個雲產品，他們都分佈在導航菜單上，因此在導航設計上，它採取一種新的模式：1.全部菜單導航+2.搜索菜單+3.自定義導航
在全部菜單中，展示了騰訊雲100+個雲產品項目，通過搜索進行篩選得到用戶想要的菜單。同時在導航欄上，支持用戶去自定義5個菜單選項，也因此用戶將常用的菜單添加至此，也更方便用戶去尋找。這樣在滿足業務的前提下，通過一些個性的設計，使100+個菜單也能夠塞得進整個導航中
2.2菜單深度過深時，怎麼辦？
當面臨菜單深度過深時，通常需要從幾個方面去考慮：
與產品經理溝通是否到位這裡主要是想通過與產品經理的溝通，瞭解到菜單的架構設計的原因，以及能否為你的設計進行一次重新的梳理，尋找一些值得優化的點
建議在尋找產品經理之間，自己能夠通過一些思維導圖的軟件將自己產品的菜單目錄全部羅列出來，能夠先多思考，為下面的溝通節約時間、提高效率
用戶體驗地圖的繪製在一個B端產品中，用戶的目的雖然複雜，但是研究用戶每一步操作，還是會查找出一些規律，我們可以從這些規律中，做些文章
比如我們之前在一個醫療系統中，根據角色的不同，將醫療角色分為：前臺、諮詢師、醫生、老闆這四種角色，每個角色所關心的點都會有所不同。比如
老闆：最關心每個門店目前的的情況數據，比如門店營業額、門店待客數、每個醫生的治療量以及治療最少的醫生。這些都代表著他不同場景下使用的習慣。
將這些情況分析以後，提煉出核心的需求點。
然後繪製完成他們的用戶地圖後，根據角色，明確每一個角色的日常操作有哪些，從而確定我們所有菜單所展示的位置以及整個菜單的層級關係
三菜單層級有區分
我將常見的導航區分進行總結，分為以下三種形式：
3.1顏色區分
顏色區分作為最直接最有效的一種形式，這種形式也是後臺頁面最初的狀態，我通常會用顏色區分和移動端頂部狀態欄的演變史做對比，就其功能而言他們都有很多相似的點：
微信在2018年12月份時，發佈微信7.0，將頂部導航由黑色轉變為白色，引得大家爭論不休，而經過時間不斷洗禮，大家也逐漸接受這個了事情，漸漸忘去
2019年也有類似的事情發生，有幾個產品的WEB端進行了一系列的大改，YouTube、Twitch、Twitter都進行了重新設計，他們也不約而同的將塊面去除，去掉多餘的的灰色，通過留白和空間將頁面拉開
這是否是下一個WEB端所要追尋的趨勢，我還不得而知～
如果WEB端都有此改變，那麼B端產品還會遠嗎？
說回B端設計，顏色上的區分和移動端類似，更多體現在導航層和內容層之間的區別，因為從本質上講，這兩個本身就屬於不同的業務模塊，通過顏色的區分，是最為直接，最簡單的一種方式。
這種形式常見於很多複雜系統，例如：飛書
小嘮一句：飛書的文檔功能以及協同工作比釘釘好用太多，如果大家現在還在尋找協同軟件，可以試試飛書～
左側導航為深，能夠讓用戶更沉浸的體驗，因為屏幕邊緣都為深色，用戶在使用時能夠真正做到有區分
3.2 投影區分
在現如今的移動端產品，投影大行其道，彌散投影，高級投影隨處可見，也逐漸影響更多WEB端的產品使用投影。增加自身產品Z軸空間
Z軸空間給導航帶來了的縱深感，同時能夠在功能層級上，通過分層設計，使頁面層級關係十分明確，引導用戶使用導航。
Material Design設計的出現，正是Z軸空間的鼻祖，在我們的屏幕中開闢了第三個設計緯度，在Z軸上展示增加了更多的交互形式。在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直於屏幕的軸，我們通過引入 Z 軸在交互設計中呈現三維的物理空間感，使頁面內容能夠得到有效區分
比如Teambiton在頁面中運用投影，強化了頁面層級的關係
3.3 分割線區分
分割線針對導航功能性不高，同時要滿足很高設計感的產品
分割線太深，頁面十分割裂，分割線太淺，頁面劃分又不明確，因此需要設計師對分割線的把控十分合理
分割線在Dribbble上見到過很多，通過簡單的線條加上空間的分割，將導航區與內容區分開，形成很好的視覺感受。如果你是剛開始嘗試做導航，不太建議嘗試這種形式，因為對於頁面空間的把控要十分苛刻
四導航可配置
B端產品易操作性中，導航可配置操作算得上是一個重要的點。其中最主要是通過配置操作實現導航易用性的提升而如何讓菜單可配置，通常的做法有兩種。
4.1 我的菜單
如果你的產品是針對多數角色不同的用戶進行設計，那麼在導航設計時，可以考慮增加一個菜單選項：我的菜單，對於菜單進行標籤處理
設置一個我的菜單，將用戶常用的菜單進行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過這樣的自定義，用戶在常用的菜單下，能夠通過我的菜單進行快速跳轉
舉個栗子：
在印象筆記當中，其快捷方式就是可以將用戶想要的模塊放置在此，可以快速跳轉
4.2 角色配置
如果你的產品是為特定幾類角色進行服務，那麼在導航設計時，可以考慮根據用戶角色的不同，給用戶不同的導航展示
通過角色的篩選，使用對於複雜導航進行簡化，同時管理員可以根據自身公司的業務不同，給用戶配置出不同的角色權限予以滿足用戶的導航需求，這樣在設計層面上能夠減少很多不必要的麻煩～
五四種常見導航菜單
5.1 側邊導航
側邊導航在國內的 B 端產品當中最為常見的
將菜單欄放置在左側，頁面佈局上基本為左右結構，將導航菜單放置左側固定
因為側邊導航在國內產品中最為常見，因此把他是優先提出來講，國內廠商對於側邊欄導航的尤為偏愛，在很多人心目中，感覺就只有側邊導航和其他導航兩種導航形式，也就造成了在 B 端產品的發展也逐漸趨同。不過現階段大家對於 B 端產品的重視，在設計上也開始多元化，話不多說，我們先來看看側邊導航的優點有哪些~
優點：
擴展性較強：多級導航可以流暢展示，可以涵蓋很多大而全的產品
展示靈活：側邊導 航可收折，收折過後用戶的橫向核心空間將會增大大，頁面展示效率也會大大提高
快速定位：視覺啟始線統一，用戶可以根據首字進行查找，方便查找
缺點：
不易閱讀：側邊導航文字垂直排列，有悖於眼動的正常視覺方向
閱讀沉浸感低：側邊導航容易打斷用戶的正常閱讀順序，使閱讀感降低
線上產品：
我們拿有贊零售進行舉例，他就是一個典型例子。
菜單欄+功能菜單共有 15 個，然後通過導航的間隔將菜單進行分組，最多一個導航菜單共 9 個，滿足7+-2原則
同時可以看到，有贊在使用三級導航時，通過右側面積統一展示二、三級導航，方便了用戶導航展示的同時優化了用戶的使用體驗
為什麼國內B端產品大多數是側邊導航？
我在我的設計剪貼板中有回答過這一個問題，就直接分享給大家～
5.2 頂部導航
頂部導航在國外的產品當中，算是較為常見的。
將菜單欄放置在頂部，頁面佈局上基本為上下結構，將導航菜單放置上方固定
頂部導航早期出現於各類門戶網站：比如企業官網，各種諮詢類的網站經常會採取這樣的導航形式。說回B端產品中，頂部導航通常在B端產品中也是十分常見的，其中以國外產品最為集中，比如國外CRM三劍客：
salesforces、hubspot、zoho都是採取的頂部導航的形式。
優點：
滿足閱讀習慣：導航為水平佈局，閱讀方式更貼近眼動的正常閱讀順序
沉浸感強：頂部導航通常不會打斷用戶的閱讀行為，對用戶的干擾少
設備影響小：導航頂部，整體頁面穩定，頁面對於用戶顯示器分辨率影響較小
缺點：
通用性差：同時受導航欄標題文字限制，對於每一個菜單的字數限制嚴格
橫向 Tab 數量少：承載不了太多菜單數量，超過 7 個後菜單排佈會十分困難，橫向空間利用率差
擴展性差：水平導航最好不要超過二級菜單，超過二級菜單，用戶使用成本高
線上產品：
salesforce
銷售 CRM 傳奇人物，千億美元估值，每年營收百億美元，無疑是 B 端產品當中的一個標杆。
如果你是做 CRM，或者是 B 端產品，必看的一個競品。
salesforce採取的就是一個頂部導航，只是不同的是，salesforce 的頂部導航更多是將頁頭的功能進行合併疊加，雖然 salesforce 的交互方式不算優秀，但是因為其業務線不斷龐大，這樣才能支撐其整條業務線。就因為這樣的問題，需要設計師在設計時，要考慮到整個系統的一個擴展性問題。做 B 端產品的交互設計有點類似我對面後端同學寫代碼，我們現在設計的這個交互最少要滿足未來一到兩年公司的已規劃好的產品的擴展問題。
hubspot
Hubspot 採取就是頂部菜單，同時二級菜單下拉展示，同時 Hubspot 是按照角色去劃分頂部菜單，能夠給用戶減輕認知負擔，更好的被用戶所使用。同時在一些設計小細節上，比如頂部的主題色，既可以提升品牌感，同時在是適當時可以作為進度進行一個展示，使用戶能夠更加深入的感知到其設計
5.3 混合導航
在 B 端產品中，感覺混合導航就是一個後期之秀
它在頁面佈局為頂部和側邊，簡單來講，就是將頂部導航與側邊導航進行結合。通常將一級導航菜單放置頂部，通過一級菜單的點擊後，展示側邊的二、三級菜單。在一些產品擁有複雜的邏輯關係，菜單之間關係分明的產品中，混合導航也越來越被大眾所接受。在很多複雜的系統當中，混合導航真的是很不錯的一個選擇，我們來看看他的優缺點：
優點：
承載大型業務：在導航上，他能夠展示 3 級甚至 4 級菜單，對於很多大型 B 端項目，混合導航算是更加合理的選擇
擴展性強：對以後有規劃大量功能的產品，用混合導航，能使之後菜單擴展性更強
缺點：
佔用面積大：要切換多個菜單，所以頂部和左側會佔用大量的空間
菜單交互路徑長：一、二級菜單間來回交互成本高，操作繁瑣
線上產品：
各類雲產品
雲產品其實就是一個很好的例子，比如 阿里雲，他們因為自身產品線眾多，對於導航的設計也是以複雜著稱，多數情況下，面對這種複雜的導航時都會採取混合導航。他們能夠通過混合導航，使用戶對於導航每一個功能模塊有一個深刻的認識。
金蝶
金蝶-星空定位就以 Paas 進行定製銷售，分析過他的產品你就瞭解到，他一共有 100+個菜單，同時算是金蝶的王牌產品，因此對於此類產品，應該著重去了解，也因此，對於每一個模塊，都是通過大標題+小標題的形式進行設計，使用戶在使用時能夠明確知道自己想要什麼
現在各大複雜的產品都會採取混合導航，這樣對於產品的架構以及各類菜單層級的分析也會起到很大的幫助～
5.4 平臺類導航的新趨勢：
平臺類導航是我們團隊內部自己的取名，給他的定義通常是擁有很多模塊比如Teambition、明道雲、擁有很多個模塊，通過一個統一的平臺進行內容的分發，比如移動端的釘釘、企業微信、紛享銷客都採用同樣的方式，但在WEB端當中，平臺導航通常伴隨著其他導航同時出現，
比如最近很火明道雲、就是使用了在我們看來的平臺導航，他們將自己的產品分別陳列在頁面的核心區域，通過對於工作臺的設計，形成對於頁面的展示，同時形成一個平臺類的導航，於此相對應的還有釘釘後臺管理頁面以及企業微信後臺管理頁面，他們都是通過一個個平臺類的模塊對導航進行分發的～
閱讀更多 PMCAFF產品經理社區 的文章
