2020-2-21 資深UI設(shè)計(jì)者
導(dǎo)航菜單對(duì)于用戶的使用來(lái)說(shuō)尤為重要，本文是我從實(shí)際工作出發(fā)，結(jié)合自身產(chǎn)品和過(guò)去經(jīng)驗(yàn)對(duì)于導(dǎo)航進(jìn)行的一次全面總結(jié)。
在任意一個(gè) B 端后臺(tái)系統(tǒng)中，導(dǎo)航菜單都是不可或缺的一部分，每個(gè)導(dǎo)航菜單都有其固定位置，通常這個(gè)位置是不可撼動(dòng)的。所以說(shuō)：導(dǎo)航菜單是 B 端產(chǎn)品層級(jí)重要的交互控件。
對(duì)于 B 端產(chǎn)品的用戶而言，他們使用導(dǎo)航菜單的目的性很強(qiáng)。
到后臺(tái)主要是對(duì)具體功能進(jìn)行操作，導(dǎo)航菜單在功能的引導(dǎo)中發(fā)揮了巨大作用。因此，其主要的功能就是對(duì) B 端產(chǎn)品進(jìn)行分發(fā)、引導(dǎo)；幫助用戶在復(fù)雜的后臺(tái)頁(yè)面中，尋找出自己真正想要的功能。
導(dǎo)航菜單建議最多不要超過(guò) 9 個(gè)，最少不要低于 5 個(gè)。
原則解釋：1956 年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行的定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有 7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開(kāi)始出錯(cuò)。
在生活中我們經(jīng)常會(huì)把一長(zhǎng)串的數(shù)字分成 7 個(gè)左右的數(shù)組來(lái)記憶，這樣會(huì)使難度降低很多，米勒稱這種單位為「組塊」。
是不是通過(guò)分組記憶以后，自己能記住的更多？這就是 7±2 原則的分組。
通過(guò)上面 7±2 原則描述我們明確到：在導(dǎo)航菜單當(dāng)中，超過(guò) 9 個(gè)會(huì)給用戶查找時(shí)帶來(lái)困難，低于 5 個(gè)說(shuō)明導(dǎo)航菜單的分發(fā)效率不夠。
有人會(huì)說(shuō)，在實(shí)際業(yè)務(wù)中，不會(huì)有那么理想，如果需要超過(guò) 9 個(gè)時(shí)，應(yīng)該怎么辦？
超過(guò) 9 個(gè)時(shí)，一定要對(duì)菜單進(jìn)行分組，因?yàn)閷?dǎo)航過(guò)多，用戶尋找會(huì)十分迷茫，通過(guò)分組的方式，能夠?qū)Σ藛芜M(jìn)行再次分類，提高查找效率。
舉個(gè)例子：
比如在微盟、有贊、小鵝通的導(dǎo)航設(shè)計(jì)當(dāng)中，微盟、小鵝通有很大不足，我們來(lái)一一拆解。
導(dǎo)航菜單隱藏超過(guò)兩級(jí)時(shí)，代表著產(chǎn)品在用戶的使用規(guī)劃中，沒(méi)有深入思考整個(gè)用戶體驗(yàn)
導(dǎo)航菜單層級(jí)越多，用戶體驗(yàn)就會(huì)越差，你會(huì)發(fā)現(xiàn)一些擁有三級(jí)導(dǎo)航的菜單，都會(huì)通過(guò)設(shè)計(jì)優(yōu)化來(lái)實(shí)現(xiàn)隱藏導(dǎo)航的合并，從而減少用戶操作負(fù)擔(dān)。
比如有贊就是一個(gè)典型例子，在有贊零售的導(dǎo)航菜單中其實(shí)是有三個(gè)層級(jí)，但是通過(guò)交互層面的優(yōu)化，將二、三級(jí)菜單直接展示出來(lái)，形成一個(gè)整體，提升了用戶體驗(yàn)避免用戶層層尋找。
同時(shí)在交互上，采用懸停+點(diǎn)擊結(jié)合的形式，用戶既可以通過(guò)懸停鼠標(biāo)進(jìn)行快捷操作。同時(shí)又可以通過(guò)點(diǎn)擊，確定跳轉(zhuǎn)查看該一級(jí)導(dǎo)航下的菜單，能夠提高用戶的操作效率。
作為導(dǎo)航來(lái)說(shuō)，其操作本身并不多，但是設(shè)計(jì)上，點(diǎn)擊與懸停（hover）之間，還是存在很大差距。
這里想要說(shuō)明這兩個(gè)操作本身而言，并沒(méi)有對(duì)與錯(cuò)，但是適用場(chǎng)景的不同，導(dǎo)致在設(shè)計(jì)屬性上存在著較大差異。
鼠標(biāo)懸停操作
鼠標(biāo)在懸停時(shí)觸發(fā)的操作時(shí)間太短暫，會(huì)給用戶帶來(lái)很強(qiáng)烈的挫敗感，同時(shí)在懸停選擇下一級(jí)菜單時(shí)，鼠標(biāo)移動(dòng)懸停也同樣會(huì)造成這樣的結(jié)果。因此在設(shè)計(jì)時(shí)，對(duì)鼠標(biāo)懸停時(shí)的操作要格外留意。通常在懸停操作當(dāng)中，只適用于只有一個(gè)菜單層級(jí)的菜單選項(xiàng)，這樣用戶在操作時(shí)更加方便。
鼠標(biāo)點(diǎn)擊操作
鼠標(biāo)點(diǎn)擊操作多發(fā)生于多級(jí)導(dǎo)航進(jìn)行操作，同時(shí)鼠標(biāo)點(diǎn)擊的形式，會(huì)給用戶正向的反饋，用戶點(diǎn)擊后明確知道菜單欄不會(huì)隱藏，因此在兩個(gè)操作之間進(jìn)行選擇操作時(shí)一定要多加思考。
導(dǎo)航菜單廣度和深度的區(qū)別：
深廣度平衡幫助用戶進(jìn)行快速選擇，能夠?qū)φ麄€(gè)產(chǎn)品架構(gòu)有著第一眼的認(rèn)識(shí)。
當(dāng)菜單廣度過(guò)大，我們也能夠通過(guò)設(shè)計(jì)的方法來(lái)優(yōu)化導(dǎo)航菜單。
我舉一個(gè)比較具有代表性的例子：騰訊云。
騰訊云目前擁有大概 100+ 個(gè)云產(chǎn)品，他們都分布在導(dǎo)航菜單上，因此在導(dǎo)航設(shè)計(jì)上，它采取一種新的模式：全部菜單導(dǎo)航、搜索菜單、自定義導(dǎo)航。
在全部菜單中，展示了騰訊云 100+ 個(gè)云產(chǎn)品項(xiàng)目，通過(guò)搜索進(jìn)行篩選得到用戶想要的菜單。同時(shí)在導(dǎo)航欄上，支持用戶去自定義 5 個(gè)菜單選項(xiàng)，也因此用戶將常用的菜單添加至此，更方便用戶去尋找。這樣在滿足業(yè)務(wù)的前提下，通過(guò)一些個(gè)性的設(shè)計(jì)，使 100+個(gè)菜單也能夠塞得進(jìn)整個(gè)導(dǎo)航中。
當(dāng)面臨菜單深度過(guò)深時(shí)，通常需要從以下幾個(gè)方面去考慮。
與產(chǎn)品經(jīng)理溝通是否到位
這里主要是想通過(guò)與產(chǎn)品經(jīng)理的溝通，了解到菜單的架構(gòu)設(shè)計(jì)的原因，以及能否為你的設(shè)計(jì)進(jìn)行一次重新的梳理，尋找一些值得優(yōu)化的點(diǎn)。
建議在尋找產(chǎn)品經(jīng)理之間，自己能夠通過(guò)一些思維導(dǎo)圖的軟件將自己產(chǎn)品的菜單目錄全部羅列出來(lái)，能夠先多思考，為下面的溝通節(jié)約時(shí)間、提率。
用戶體驗(yàn)地圖的繪制
在一個(gè) B 端產(chǎn)品中，用戶的目的雖然復(fù)雜，但是研究用戶每一步操作，還是會(huì)查找出一些規(guī)律，我們可以從這些規(guī)律中做些文章。
比如我們之前在一個(gè)醫(yī)療系統(tǒng)中，根據(jù)角色的不同，將醫(yī)療角色分為：前臺(tái)、咨詢師、醫(yī)生、老板這四種角色，每個(gè)角色所關(guān)心的點(diǎn)都會(huì)有所不同。
老板最關(guān)心每個(gè)門店目前的情況數(shù)據(jù)，比如門店?duì)I業(yè)額、門店待客數(shù)、每個(gè)醫(yī)生的治療量以及治療最少的醫(yī)生。這些都代表著他不同場(chǎng)景下使用的習(xí)慣。
將這些情況分析以后，提煉出核心的需求點(diǎn)。
然后繪制完成他們的用戶地圖后，根據(jù)角色，明確每一個(gè)角色的日常操作有哪些，從而確定我們所有菜單所展示的位置以及整個(gè)菜單的層級(jí)關(guān)系。
我將常見(jiàn)的導(dǎo)航區(qū)分進(jìn)行總結(jié)，分為以下三種形式。
1. 顏色區(qū)分
顏色區(qū)分作為最直接最有效的一種形式，這種形式也是后臺(tái)頁(yè)面最初的狀態(tài)，我通常會(huì)用顏色區(qū)分和移動(dòng)端頂部狀態(tài)欄的演變史做對(duì)比，就其功能而言他們都有很多相似的點(diǎn)。
微信在 2018 年 12 月份時(shí)，發(fā)布微信 7.0，將頂部導(dǎo)航由黑色轉(zhuǎn)變?yōu)榘咨?，引得大家?zhēng)論不休，而經(jīng)過(guò)時(shí)間不斷洗禮，大家也逐漸接受了這個(gè)事情，漸漸忘去。
延伸閱讀：
2019 年也有類似的事情發(fā)生，有幾個(gè)產(chǎn)品的 WEB 端進(jìn)行了一系列的大改，YouTube、Twitch、Twitter 都進(jìn)行了重新設(shè)計(jì)，他們也不約而同的將塊面去除，去掉多余的灰色，通過(guò)留白和空間將頁(yè)面拉開(kāi)。
這是否是下一個(gè) WEB 端所要追尋的趨勢(shì)，我還不得而知。
如果 WEB 端都有此改變，那么 B 端產(chǎn)品還會(huì)遠(yuǎn)嗎？
說(shuō)回 B 端設(shè)計(jì)，顏色上的區(qū)分和移動(dòng)端類似，更多體現(xiàn)在導(dǎo)航層和內(nèi)容層之間的區(qū)別，因?yàn)閺谋举|(zhì)上講，這兩個(gè)本身就屬于不同的業(yè)務(wù)模塊，通過(guò)顏色的區(qū)分，是最為直接，最簡(jiǎn)單的一種方式。
這種形式常見(jiàn)于很多復(fù)雜系統(tǒng)，例如：飛書(shū)。
左側(cè)導(dǎo)航為深色，能夠讓用戶獲得更沉浸的體驗(yàn)，因?yàn)槠聊贿吘壎紴樯钌脩粼谑褂脮r(shí)能夠真正做到有區(qū)分。
2. 投影區(qū)分
在現(xiàn)如今的移動(dòng)端產(chǎn)品，投影大行其道，彌散投影，高級(jí)投影隨處可見(jiàn)，也逐漸影響更多 WEB 端的產(chǎn)品使用投影，增加自身產(chǎn)品 Z 軸空間。
Z 軸空間給導(dǎo)航帶來(lái)了縱深感，同時(shí)也能夠在功能層級(jí)上，通過(guò)分層設(shè)計(jì)，使頁(yè)面層級(jí)關(guān)系明確，引導(dǎo)用戶使用導(dǎo)航。
Material Design 設(shè)計(jì)的出現(xiàn)，正是 Z 軸空間的鼻祖，在我們的屏幕中開(kāi)辟了第三個(gè)設(shè)計(jì)維度，在 Z 軸上展示增加了更多的交互形式。在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直于屏幕的軸，我們通過(guò)引入 Z 軸在交互設(shè)計(jì)中呈現(xiàn)三維的物理空間感，使頁(yè)面內(nèi)容能夠得到有效區(qū)分。
比如 Teambiton 在頁(yè)面中運(yùn)用投影，強(qiáng)化了頁(yè)面層級(jí)的關(guān)系：
3. 分割線區(qū)分
分割線針對(duì)導(dǎo)航功能性不高，同時(shí)要滿足很高設(shè)計(jì)感的產(chǎn)品。
分割線太深，頁(yè)面十分割裂，分割線太淺，頁(yè)面劃分又不明確，因此需要設(shè)計(jì)師對(duì)分割線的把控十分合理。
分割線在 Dribbble 上見(jiàn)到過(guò)很多，通過(guò)簡(jiǎn)單的線條加上空間的分割，將導(dǎo)航區(qū)與內(nèi)容區(qū)分開(kāi)，形成很好的視覺(jué)感受。如果你是剛開(kāi)始嘗試做導(dǎo)航，不太建議嘗試這種形式，因?yàn)閷?duì)于頁(yè)面空間的把控要十分苛刻。
B 端產(chǎn)品易操作性中，導(dǎo)航可配置操作算得上是一個(gè)重要的點(diǎn)。其中最主要是通過(guò)配置操作實(shí)現(xiàn)導(dǎo)航易用性的提升，而如何讓菜單可配置，通常的做法有兩種。
1. 我的菜單
如果你的產(chǎn)品是針對(duì)多數(shù)角色不同的用戶進(jìn)行設(shè)計(jì)，那么在導(dǎo)航設(shè)計(jì)時(shí)，可以考慮增加一個(gè)菜單選項(xiàng)：我的菜單，對(duì)于菜單進(jìn)行標(biāo)簽處理。
設(shè)置一個(gè)我的菜單，將用戶常用的菜單進(jìn)行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過(guò)這樣的自定義，用戶在常用的菜單下，能夠通過(guò)我的菜單進(jìn)行快速跳轉(zhuǎn)。
舉個(gè)例子：在印象筆記當(dāng)中，其快捷方式就是可以將用戶想要的模塊放置在此，可以快速跳轉(zhuǎn)。
2. 角色配置
如果你的產(chǎn)品是為特定幾類角色進(jìn)行服務(wù)，那么在導(dǎo)航設(shè)計(jì)時(shí)，可以考慮根據(jù)用戶角色的不同，給用戶不同的導(dǎo)航展示。
通過(guò)角色的篩選，對(duì)復(fù)雜導(dǎo)航進(jìn)行簡(jiǎn)化，同時(shí)管理員可以根據(jù)自身公司的業(yè)務(wù)不同，給用戶配置出不同的角色權(quán)限予以滿足用戶的導(dǎo)航需求，這樣在設(shè)計(jì)層面上能夠減少很多不必要的麻煩。
側(cè)邊導(dǎo)航是國(guó)內(nèi)的 B 端產(chǎn)品當(dāng)中最為常見(jiàn)的。
將菜單欄放置在左側(cè)，頁(yè)面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。
因?yàn)閭?cè)邊導(dǎo)航在國(guó)內(nèi)產(chǎn)品中最為常見(jiàn)，因此把它優(yōu)先提出來(lái)講，國(guó)內(nèi)廠商對(duì)于側(cè)邊欄導(dǎo)航尤為偏愛(ài)，在很多人心目中，感覺(jué)就只有側(cè)邊導(dǎo)航和其他導(dǎo)航兩種導(dǎo)航形式，也就造成了在 B 端產(chǎn)品的發(fā)展也逐漸趨同。不過(guò)現(xiàn)階段大家對(duì)于 B 端產(chǎn)品的重視，在設(shè)計(jì)上也開(kāi)始多元化。話不多說(shuō)，我們先來(lái)看看側(cè)邊導(dǎo)航的優(yōu)點(diǎn)有哪些。
優(yōu)點(diǎn)
缺點(diǎn)
線上產(chǎn)品：我們拿有贊零售進(jìn)行舉例，他就是一個(gè)典型例子。
菜單欄+功能菜單共有 15 個(gè)，然后通過(guò)導(dǎo)航的間隔將菜單進(jìn)行分組，最多一個(gè)導(dǎo)航菜單共 9 個(gè)，滿足 7±2 原則。
同時(shí)可以看到，有贊在使用三級(jí)導(dǎo)航時(shí)，通過(guò)右側(cè)面積統(tǒng)一展示二、三級(jí)導(dǎo)航，方便了用戶導(dǎo)航展示的同時(shí)，優(yōu)化了用戶的使用體驗(yàn)。
為什么國(guó)內(nèi)B端產(chǎn)品大多數(shù)是側(cè)邊導(dǎo)航？
我在我的設(shè)計(jì)剪貼板中有回答過(guò)這一個(gè)問(wèn)題，直接分享給大家。
頂部導(dǎo)航在國(guó)外的產(chǎn)品當(dāng)中，算是較為常見(jiàn)的。
將菜單欄放置在頂部，頁(yè)面布局上基本為上下結(jié)構(gòu)，將導(dǎo)航菜單放置上方固定。
頂部導(dǎo)航早期出現(xiàn)于各類門戶網(wǎng)站，比如企業(yè)官網(wǎng)，各種咨詢類的網(wǎng)站經(jīng)常會(huì)采取這樣的導(dǎo)航形式。說(shuō)回 B 端產(chǎn)品中，頂部導(dǎo)航通常在 B 端產(chǎn)品中也是十分常見(jiàn)的，其中以國(guó)外產(chǎn)品最為集中，比如國(guó)外 CRM 三劍客：salesforces、hubspot、zoho 都是采取的頂部導(dǎo)航的形式。
優(yōu)點(diǎn)
缺點(diǎn)
線上產(chǎn)品：
△ salesforce
銷售 CRM 傳奇人物，千億美元估值，每年?duì)I收百億美元，無(wú)疑是 B 端產(chǎn)品當(dāng)中的一個(gè)標(biāo)桿。
如果你是做 CRM，或者是 B 端產(chǎn)品，必看的一個(gè)競(jìng)品。
salesforce 采取的就是一個(gè)頂部導(dǎo)航，只是不同的是，salesforce 的頂部導(dǎo)航更多是將頁(yè)頭的功能進(jìn)行合并疊加，雖然 salesforce 的交互方式不算優(yōu)秀，但是因?yàn)槠錁I(yè)務(wù)線不斷龐大，這樣才能支撐其整條業(yè)務(wù)線。就因?yàn)檫@樣的問(wèn)題，需要設(shè)計(jì)師在設(shè)計(jì)時(shí)，要考慮到整個(gè)系統(tǒng)的一個(gè)擴(kuò)展性問(wèn)題。做 B 端產(chǎn)品的交互設(shè)計(jì)有點(diǎn)類似后端同學(xué)寫(xiě)代碼，我們現(xiàn)在設(shè)計(jì)的這個(gè)交互最少要滿足未來(lái)一到兩年公司的已規(guī)劃好的產(chǎn)品的擴(kuò)展問(wèn)題。
△ hubspot
Hubspot 采取就是頂部菜單，二級(jí)菜單下拉展示，同時(shí) Hubspot 是按照角色去劃分頂部菜單，能夠給用戶減輕認(rèn)知負(fù)擔(dān)，更好的被用戶所使用。同時(shí)在一些設(shè)計(jì)小細(xì)節(jié)上，比如頂部的主題色，既可以提升品牌感，同時(shí)在適當(dāng)時(shí)可以作為進(jìn)度進(jìn)行一個(gè)展示，使用戶能夠更加深入地感知到其設(shè)計(jì)。
在 B 端產(chǎn)品中，感覺(jué)混合導(dǎo)航也是一個(gè)后起之秀。
它的頁(yè)面布局為頂部和側(cè)邊，簡(jiǎn)單來(lái)講，就是將頂部導(dǎo)航與側(cè)邊導(dǎo)航進(jìn)行結(jié)合。通常將一級(jí)導(dǎo)航菜單放置頂部，通過(guò)一級(jí)菜單的點(diǎn)擊后，展示側(cè)邊的二、三級(jí)菜單。在一些擁有復(fù)雜的邏輯關(guān)系，菜單之間關(guān)系分明的產(chǎn)品中，混合導(dǎo)航也越來(lái)越被大眾所接受。在很多復(fù)雜的系統(tǒng)當(dāng)中，混合導(dǎo)航真的是很不錯(cuò)的一個(gè)選擇，我們來(lái)看看他的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
缺點(diǎn)
線上產(chǎn)品
云產(chǎn)品其實(shí)就是一個(gè)很好的例子，比如阿里云，他們因?yàn)樽陨懋a(chǎn)品線眾多，對(duì)于導(dǎo)航的設(shè)計(jì)也是以復(fù)雜著稱，多數(shù)情況下，面對(duì)這種復(fù)雜的導(dǎo)航時(shí)都會(huì)采取混合導(dǎo)航。他們能夠通過(guò)混合導(dǎo)航，使用戶對(duì)于導(dǎo)航每一個(gè)功能模塊都有一個(gè)深刻的認(rèn)識(shí)。
金蝶-星空定位就以 Paas 進(jìn)行定制銷售，分析過(guò)他的產(chǎn)品你就會(huì)了解到，他一共有 100+ 個(gè)菜單，同時(shí)算是金蝶的王牌產(chǎn)品，因此對(duì)于此類產(chǎn)品，應(yīng)該著重去了解，也因此，對(duì)于每一個(gè)模塊，都是通過(guò)大標(biāo)題+小標(biāo)題的形式進(jìn)行設(shè)計(jì)，使用戶在使用時(shí)能夠明確知道自己想要什么。
現(xiàn)在各大復(fù)雜的產(chǎn)品都會(huì)采取混合導(dǎo)航，這樣對(duì)于產(chǎn)品的架構(gòu)以及各類菜單層級(jí)的分析也會(huì)起到很大的幫助。
平臺(tái)類導(dǎo)航是我們團(tuán)隊(duì)內(nèi)部自己的取名，給他的定義通常是擁有很多模塊，比如 Teambition、明道云，擁有很多個(gè)模塊，通過(guò)一個(gè)統(tǒng)一的平臺(tái)進(jìn)行內(nèi)容的分發(fā)，比如移動(dòng)端的釘釘、企業(yè)微信、紛享銷客都采用同樣的方式，但在 WEB 端當(dāng)中，平臺(tái)導(dǎo)航通常伴隨著其他導(dǎo)航同時(shí)出現(xiàn)。
比如最近很火的明道云，就是使用了平臺(tái)導(dǎo)航，他們將自己的產(chǎn)品分別陳列在頁(yè)面的核心區(qū)域，通過(guò)對(duì)于工作臺(tái)的設(shè)計(jì)，形成對(duì)頁(yè)面的展示，同時(shí)形成一個(gè)平臺(tái)類的導(dǎo)航，于此相對(duì)應(yīng)的還有釘釘后臺(tái)管理頁(yè)面，以及企業(yè)微信后臺(tái)管理頁(yè)面，他們都是通過(guò)一個(gè)個(gè)平臺(tái)類的模塊對(duì)導(dǎo)航進(jìn)行分發(fā)的。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com