導(dǎo)航菜單對于用戶的使用來說尤為重要，本文是我從實際工作出發(fā)，結(jié)合自身產(chǎn)品和過去經(jīng)驗對于導(dǎo)航進行的一次全面總結(jié)

在任意一個B端后臺系統(tǒng)中，導(dǎo)航菜單都是不可或缺的一部分，每個導(dǎo)航菜單都有其固定位置，通常這個位置是不可撼動的。所以說：導(dǎo)航菜單是B端產(chǎn)品層級重要的交互控件

對于B端產(chǎn)品的用戶而言，他們使用導(dǎo)航菜單目的性很強

到后臺主要是對具體功能進行操作，導(dǎo)航菜單在功能的引導(dǎo)中發(fā)揮了巨大作用。因此，其主要的功能就是對B端產(chǎn)品進行分發(fā)、引導(dǎo)；幫助用戶在復(fù)雜的后臺頁面中，尋找出自己真正想要的功能。

分享內(nèi)容：

1. 合理規(guī)劃
2. 確定菜單廣度和深度
3. 菜單層級有區(qū)分
4. 導(dǎo)航可配置
5. 四種常見導(dǎo)航菜單

一、合理規(guī)劃

1.1 遵循7±2 原則

導(dǎo)航菜單建議最多不要超過 9 個，最少不要低于5個。

原則解釋：1956 年喬治米勒對短時記憶能力進行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有 7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。

在生活中我們經(jīng)常會把一長串的數(shù)字分成 7 個左右的數(shù)組來記憶，這樣會使難度降低很多，米勒稱這種單位為“組塊”。

是不是通過分組記憶以后，自己能記住的更多？這就是7±2 原則的分組。

通過上面7+-2原則描述我們明確到：在導(dǎo)航菜單當中，超過 9 個會給用戶查找時帶來困難，低于 5 個說明導(dǎo)航菜單的分發(fā)效率不夠高效。

有人會說，在實際業(yè)務(wù)中，不會有那么理想，如果需要超過 9 個時，應(yīng)該怎么辦？

超過9個時，一定要對菜單進行分組，因為導(dǎo)航過多，用戶尋找會十分迷茫，通過分組的方式，能夠?qū)Σ藛芜M行再次分類，提高查找效率。

說的太干不如舉個栗子：

比如在微盟、有贊、小鵝通的導(dǎo)航設(shè)計當中，微盟、小鵝通有很大不足，我們來一一拆解。

小鵝通：共有14個導(dǎo)航菜單， 且菜單之間形式不同，表現(xiàn)也會有所差異， 也因此對于用戶而言使用起來會產(chǎn)生很強的疑惑感

微盟：一共有11個一級菜單，不符合7+-2原則，同時也能夠感受到在視覺層面上，微盟的導(dǎo)航菜單沒有分組，難以尋找和記憶

有贊：雖然在導(dǎo)航的數(shù)量上也是有9個以上，但是它對菜單進行分組，有效提高了用戶查找時的效率，因此在設(shè)計上更加合理

如果菜單欄數(shù)量過多怎么辦？下方2.1小節(jié)會有講到～

1.2 導(dǎo)航菜單不能隱藏超過兩級

導(dǎo)航菜單隱藏超過兩級時，代表著產(chǎn)品在用戶的使用規(guī)劃中，沒有深入思考整個用戶體驗。

導(dǎo)航菜單層級越多，用戶體驗就會越差，你會發(fā)現(xiàn)一些擁有三級導(dǎo)航的菜單，都會通過設(shè)計優(yōu)化來實現(xiàn)隱藏導(dǎo)航的合并，從而減少用戶操作負擔。

比如有贊就是一個典型例子，在有贊零售的導(dǎo)航菜單中其實是有三個層級，但是通過交互層面的優(yōu)化，將二、三級菜單直接展示出來，形成一個整體，提升了用戶體驗避免用戶層層尋找。

同時在交互上，采用 懸停+點擊結(jié)合的形式，用戶即可以通過懸停鼠標進行快捷操作。同時又可以通過點擊，確定跳轉(zhuǎn)查看該一級導(dǎo)航下的菜單，能夠提高用戶的操作效率。

1.3 鼠標懸停還是鼠標點擊

作為導(dǎo)航來說，其操作本身并不多，但是設(shè)計上，點擊與懸停(hover)之間，還是存在很大差距。

這里想要說明這兩個操作本身而言，并沒有對與錯，但是適用場景的不同，導(dǎo)致在設(shè)計屬性上存在著較大差異。

（1）鼠標懸停操作

鼠標在懸停時觸發(fā)的操作時間太短暫，會給用戶帶來很強烈的挫敗感，同時在懸停選擇下一級菜單時，鼠標移動懸停也同要會造成這樣的結(jié)果。因此在設(shè)計時，對鼠標懸停時的操作要格外留意。通常在懸停操作當中，只適用于只有一個菜單層級的菜單選項，這樣用戶在操作時更加方便。

（2）鼠標點擊操作

鼠標點擊操作多發(fā)生于多級導(dǎo)航進行操作，同時鼠標點擊的形式，會給用戶正向的反饋，用戶點擊后明確知道菜單欄不會隱藏，因此在兩個操作之間進行選擇操作時一定要多加思考.

二、確定菜單廣度和深度

導(dǎo)航菜單廣度和深度的區(qū)別：

• 菜單廣度：導(dǎo)航菜單中每一個層級包含的菜單項數(shù)目為廣度
• 菜單深度：導(dǎo)航菜單層級的數(shù)目為深度

深廣度平衡幫助用戶進行快速選擇，通過能夠?qū)φ麄€產(chǎn)品架構(gòu)有著第一眼的認識。

2.1 當菜單廣度過大時，怎么辦？

當菜單廣度過大，我們也能夠通過設(shè)計的方法來優(yōu)化導(dǎo)航菜單

我舉一個比較具有代表性的例子：騰訊云。

騰訊云目前擁有大概100+個云產(chǎn)品，他們都分布在導(dǎo)航菜單上，因此在導(dǎo)航設(shè)計上，它采取一種新的模式：1.全部菜單導(dǎo)航+2.搜索菜單+3.自定義導(dǎo)航。

在全部菜單中，展示了騰訊云100+個云產(chǎn)品項目，通過搜索進行篩選得到用戶想要的菜單。同時在導(dǎo)航欄上，支持用戶去自定義5個菜單選項。也因此用戶將常用的菜單添加至此，也更方便用戶去尋找。

這樣在滿足業(yè)務(wù)的前提下，通過一些個性的設(shè)計，使100+個菜單也能夠塞得進整個導(dǎo)航中。

2.2 菜單深度過深時，怎么辦？

當面臨菜單深度過深時，通常需要從幾個方面去考慮：

（1）與產(chǎn)品經(jīng)理溝通是否到位

這里主要是想通過與產(chǎn)品經(jīng)理的溝通，了解到菜單的架構(gòu)設(shè)計的原因，以及能否為你的設(shè)計進行一次重新的梳理，尋找一些值得優(yōu)化的點。

建議在尋找產(chǎn)品經(jīng)理之間，自己能夠通過一些思維導(dǎo)圖的軟件將自己產(chǎn)品的菜單目錄全部羅列出來，能夠先多思考，為下面的溝通節(jié)約時間、提高效率。

（2）用戶體驗地圖的繪制

在一個B端產(chǎn)品中，用戶的目的雖然復(fù)雜，但是研究用戶每一步操作，還是會查找出一些規(guī)律，我們可以從這些規(guī)律中，做些文章.

比如我們之前在一個醫(yī)療系統(tǒng)中，根據(jù)角色的不同，將醫(yī)療角色分為：前臺、咨詢師、醫(yī)生、老板這四種角色，每個角色所關(guān)心的點都會有所不同。

比如：

老板：最關(guān)心每個門店目前的的情況數(shù)據(jù)，比如門店營業(yè)額、門店待客數(shù)、每個醫(yī)生的治療量以及治療最少的醫(yī)生。這些都代表著他不同場景下使用的習(xí)慣。

將這些情況分析以后，提煉出核心的需求點。

然后繪制完成他們的用戶地圖后，根據(jù)角色，明確每一個角色的日常操作有哪些，從而確定我們所有菜單所展示的位置以及整個菜單的層級關(guān)系。

三、菜單層級有區(qū)分

我將常見的導(dǎo)航區(qū)分進行總結(jié)，分為以下三種形式：

3.1 顏色區(qū)分

顏色區(qū)分作為最直接最有效的一種形式，這種形式也是后臺頁面最初的狀態(tài)，我通常會用顏色區(qū)分和移動端頂部狀態(tài)欄的演變史做對比，就其功能而言他們都有很多相似的點：

微信在2018年12月份時，發(fā)布微信7.0，將頂部導(dǎo)航由黑色轉(zhuǎn)變?yōu)榘咨么蠹覡幷摬恍?，而?jīng)過時間不斷洗禮，大家也逐漸接受這個了事情，漸漸忘去。

2019年也有類似的事情發(fā)生，有幾個產(chǎn)品的WEB端進行了一系列的大改，YouTube、Twitch、Twitter都進行了重新設(shè)計，他們也不約而同的將塊面去除，去掉多余的的灰色，通過留白和空間將頁面拉開。

?

這否是是下一個WEB端所要追尋的趨勢，我還不得而知～

?如果WEB端都有此改變，那么B端產(chǎn)品還會遠嗎？

說回B端設(shè)計，顏色上的區(qū)分和移動端類似，更多體現(xiàn)在導(dǎo)航層和內(nèi)容層之間的區(qū)別，因為從本質(zhì)上講，這兩個本身就屬于不同的業(yè)務(wù)模塊，通過顏色的區(qū)分，是最為直接，最簡單的一種方式。

這種形式常見于很多復(fù)雜系統(tǒng)，例如：飛書。

小嘮一句：飛書的文檔功能以及協(xié)同工作比釘釘好用太多，如果大家現(xiàn)在還在尋找協(xié)同軟件，可以試試飛書～

左側(cè)導(dǎo)航為深，能夠讓用戶更沉浸的體驗，因為屏幕邊緣都為深色，用戶在使用時能夠真正做到有區(qū)分。

3.2 投影區(qū)分

在現(xiàn)如今的移動端產(chǎn)品，投影大行其道，彌散投影，高級投影隨處可見，也逐漸影響更多WEB端的產(chǎn)品使用投影。增加自身產(chǎn)品Z軸空間。

Z軸空間給導(dǎo)航帶來了的縱深感，同時能夠在功能層級上，通過分層設(shè)計，使頁面層級關(guān)系十分明確，引導(dǎo)用戶使用導(dǎo)航。

Material Design設(shè)計的出現(xiàn)，正是Z軸空間的鼻祖，在我們的屏幕中開辟了第三個設(shè)計緯度，在Z軸上展示增加了更多的交互形式。在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直于屏幕的軸，我們通過引入 Z 軸在交互設(shè)計中呈現(xiàn)三維的物理空間感，使頁面內(nèi)容能夠得到有效區(qū)分。

比如Teambiton在頁面中運用投影，強化了頁面層級的關(guān)系。

3.3 分割線區(qū)分

分割線針對導(dǎo)航功能性不高，同時要滿足很高設(shè)計感的產(chǎn)品。

分割線太深，頁面十分割裂，分割線太淺，頁面劃分又不明確，因此需要設(shè)計師對分割線的把控十分合理。

分割線在Dribbble上見到過很多，通過簡單的線條加上空間的分割，將導(dǎo)航區(qū)與內(nèi)容區(qū)分開，形成很好的視覺感受。如果你是剛開始嘗試做導(dǎo)航，不太建議嘗試這種形式，因為對于頁面空間的把控要十分苛刻。

四、導(dǎo)航可配置

B端產(chǎn)品易操作性中，導(dǎo)航可配置操作算得上是一個重要的點。其中最主要是通過配置操作實現(xiàn)導(dǎo)航易用性的提升而如何讓菜單可配置，通常的做法有兩種。

4.1 我的菜單

如果你的產(chǎn)品是針對多數(shù)角色不同的用戶進行設(shè)計，那么在導(dǎo)航設(shè)計時，可以考慮增加一個菜單選項：我的菜單，對于菜單進行標簽處理。

設(shè)置一個我的菜單，將用戶常用的菜單進行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過這樣的自定義，用戶在常用的菜單下，能夠通過我的菜單進行快速跳轉(zhuǎn)。

舉個栗子：

在印象筆記當中，其快捷方式就是可以將用戶想要的模塊放置在此，可以快速跳轉(zhuǎn)。

4.2 角色配置

如果你的產(chǎn)品是為特定幾類角色進行服務(wù)，那么在導(dǎo)航設(shè)計時，可以考慮根據(jù)用戶角色的不同，給用戶不同的導(dǎo)航展示。

通過角色的篩選，使用對于復(fù)雜導(dǎo)航進行簡化，同時管理員可以根據(jù)自身公司的業(yè)務(wù)不同，給用戶配置出不同的角色權(quán)限予以滿足用戶的導(dǎo)航需求，這樣在設(shè)計層面上能夠減少很多不必要的麻煩～

五、四種常見導(dǎo)航菜單

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

側(cè)邊導(dǎo)航在國內(nèi)的 B 端產(chǎn)品當中最為常見的。將菜單欄放置在左側(cè)，頁面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。

因為側(cè)邊導(dǎo)航在國內(nèi)產(chǎn)品中最為常見，因此把他是優(yōu)先提出來講。國內(nèi)廠商對于側(cè)邊欄導(dǎo)航的尤為偏愛，在很多人心目中，感覺就只有側(cè)邊導(dǎo)航和其他導(dǎo)航兩種導(dǎo)航形式，也就造成了在 B 端產(chǎn)品的發(fā)展也逐漸趨同。

不過現(xiàn)階段大家對于 B 端產(chǎn)品的重視，在設(shè)計上也開始多元化，話不多說，我們先來看看側(cè)邊導(dǎo)航的優(yōu)點有哪些~

優(yōu)點：

擴展性較強：多級導(dǎo)航可以流暢展示，可以涵蓋很多大而全的產(chǎn)品。

展示靈活：側(cè)邊導(dǎo) 航可收折，收折過后用戶的橫向核心空間將會增大大，頁面展示效率也會大大提高。

快速定位：視覺啟始線統(tǒng)一，用戶可以根據(jù)首字進行查找，方便查找。

缺點：

不易閱讀：側(cè)邊導(dǎo)航文字垂直排列，有悖于眼動的正常視覺方向。

閱讀沉浸感低：側(cè)邊導(dǎo)航容易打斷用戶的正常閱讀順序，使閱讀感降低。

線上產(chǎn)品：

我們拿有贊零售進行舉例，他就是一個典型例子。

菜單欄+功能菜單共有 15 個，然后通過導(dǎo)航的間隔將菜單進行分組，最多一個導(dǎo)航菜單共 9 個，滿足7+-2原則。

同時可以看到，有贊在使用三級導(dǎo)航時，通過右側(cè)面積統(tǒng)一展示二、三級導(dǎo)航，方便了用戶導(dǎo)航展示的同時優(yōu)化了用戶的使用體驗。

5.2 頂部導(dǎo)航

頂部導(dǎo)航在國外的產(chǎn)品當中，算是較為常見的。

將菜單欄放置在頂部，頁面布局上基本為上下結(jié)構(gòu)，將導(dǎo)航菜單放置上方固定。

頂部導(dǎo)航早期出現(xiàn)于各類門戶網(wǎng)站：比如企業(yè)官網(wǎng)，各種咨詢類的網(wǎng)站經(jīng)常會采取這樣的導(dǎo)航形式。說回B端產(chǎn)品中，頂部導(dǎo)航通常在B端產(chǎn)品中也是十分常見的，其中以國外產(chǎn)品最為集中，比如國外CRM三劍客：salesforces、hubspot、zoho都是采取的頂部導(dǎo)航的形式。

優(yōu)點：

滿足閱讀習(xí)慣：導(dǎo)航為水平布局，閱讀方式更貼近眼動的正常閱讀順序

沉浸感強：頂部導(dǎo)航通常不會打斷用戶的閱讀行為，對用戶的干擾少

設(shè)備影響?。?/strong>導(dǎo)航頂部，整體頁面穩(wěn)定，頁面對于用戶顯示器分辨率影響較小