設(shè)計(jì)師必看｜B 端設(shè)計(jì)之導(dǎo)航菜單的設(shè)計(jì) 5 步法

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

轉(zhuǎn)自：CE青年

編輯：章欣怡

共 6585 字 28 圖  預(yù)計(jì)閱讀 17 分鐘

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

前言

在任意一個(gè) B 端后臺(tái)系統(tǒng)中，導(dǎo)航菜單都是不可或缺的一部分，每個(gè)導(dǎo)航菜單都有其固定位置，通常這個(gè)位置是不可撼動(dòng)的。所以說：導(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)頁面中，尋找出自己真正想要的功能。

分享內(nèi)容：

一、合理規(guī)劃

二、確定菜單廣度和深度

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

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

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

一、合理規(guī)劃

1.1 遵循 7±2 原則

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

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

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

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

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

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

超過 9 個(gè)時(shí)，一定要對(duì)菜單進(jìn)行分組，因?yàn)閷?dǎo)航過多，用戶尋找會(huì)十分迷茫，通過分組的方式，能夠?qū)Σ藛芜M(jìn)行再次分類，提高查找效率。

說的太干不如舉個(gè)栗子??：

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

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

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

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

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

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

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

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

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

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

1.3 鼠標(biāo)懸停還是鼠標(biāo)點(diǎn)擊

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

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

鼠標(biāo)懸停操作

鼠標(biāo)在懸停時(shí)觸發(fā)的操作時(shí)間太短暫，會(huì)給用戶帶來很強(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ū)別

菜單廣度：導(dǎo)航菜單中每一個(gè)層級(jí)包含的菜單項(xiàng)數(shù)目為廣度

菜單深度：導(dǎo)航菜單層級(jí)的數(shù)目為深度

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

2.1 當(dāng)菜單廣度過大時(shí)，怎么辦？

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

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

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

在全部菜單中，展示了騰訊云 100+ 個(gè)云產(chǎn)品項(xiàng)目，通過搜索進(jìn)行篩選得到用戶想要的菜單。同時(shí)在導(dǎo)航欄上，支持用戶去自定義 5 個(gè)菜單選項(xiàng)，也因此用戶將常用的菜單添加至此，也更方便用戶去尋找。這樣在滿足業(yè)務(wù)的前提下，通過一些個(gè)性的設(shè)計(jì)，使 100+ 個(gè)菜單也能夠塞得進(jìn)整個(gè)導(dǎo)航中。

2.2 菜單深度過深時(shí)，怎么辦？

當(dāng)面臨菜單深度過深時(shí)，通常需要從幾個(gè)方面去考慮：

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

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

建議在尋找產(chǎn)品經(jīng)理之間，自己能夠通過一些思維導(dǎo)圖的軟件將自己產(chǎn)品的菜單目錄全部羅列出來，能夠先多思考，為下面的溝通節(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)系。

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

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

3.1 顏色區(qū)分

顏色區(qū)分作為最直接最有效的一種形式，這種形式也是后臺(tái)頁面最初的狀態(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)過時(shí)間不斷洗禮，大家也逐漸接受這個(gè)了事情，漸漸忘去。

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

?

這否是是下一個(gè) WEB 端所要追尋的趨勢(shì)，我還不得而知～

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

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

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

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

左側(cè)導(dǎo)航為深，能夠讓用戶更沉浸的體驗(yàn)，因?yàn)槠聊贿吘壎紴樯钌脩粼谑褂脮r(shí)能夠真正做到有區(qū)分。

3.2 投影區(qū)分

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

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

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

比如 Teambiton 在頁面中運(yùn)用投影，強(qiáng)化了頁面層級(jí)的關(guān)系。

3.3 分割線區(qū)分

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

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

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

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

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

4.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)行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過這樣的自定義，用戶在常用的菜單下，能夠通過我的菜單進(jìn)行快速跳轉(zhuǎn)。

舉個(gè)栗子??：

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

4.2 角色配置

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

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

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

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

側(cè)邊導(dǎo)航在國(guó)內(nèi)的 B 端產(chǎn)品當(dāng)中最為常見的。

將菜單欄放置在左側(cè)，頁面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。

因?yàn)閭?cè)邊導(dǎo)航在國(guó)內(nèi)產(chǎn)品中最為常見，因此把他是優(yōu)先提出來講，國(guó)內(nèi)廠商對(duì)于側(cè)邊欄導(dǎo)航的尤為偏愛，在很多人心目中，感覺就只有側(cè)邊導(dǎo)航和其他導(dǎo)航兩種導(dǎo)航形式，也就造成了在 B 端產(chǎn)品的發(fā)展也逐漸趨同。不過現(xiàn)階段大家對(duì)于 B 端產(chǎn)品的重視，在設(shè)計(jì)上也開始多元化，話不多說，我們先來看看側(cè)邊導(dǎo)航的優(yōu)點(diǎn)有哪些~

優(yōu)點(diǎn)：

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

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

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

缺點(diǎn)：

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

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

線上產(chǎn)品：

我們拿有贊零售進(jìn)行舉例，他就是一個(gè)典型例子。

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

同時(shí)可以看到，有贊在使用三級(jí)導(dǎo)航時(shí)，通過右側(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ì)剪貼板中有回答過這一個(gè)問題，就直接分享給大家～

5.2 頂部導(dǎo)航

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

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

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

優(yōu)點(diǎn)：

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

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

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

缺點(diǎn)：

通用性差：同時(shí)受導(dǎo)航欄標(biāo)題文字限制，對(duì)于每一個(gè)菜單的字?jǐn)?shù)限制嚴(yán)格。

橫向 Tab 數(shù)量少：承載不了太多菜單數(shù)量，超過 7 個(gè)后菜單排布會(huì)十分困難，橫向空間利用率差。

擴(kuò)展性差：水平導(dǎo)航最好不要超過二級(jí)菜單，超過二級(jí)菜單，用戶使用成本高。

線上產(chǎn)品：

salesforce

銷售 CRM 傳奇人物，千億美元估值，每年?duì)I收百億美元，無疑是 B 端產(chǎn)品當(dāng)中的一個(gè)標(biāo)桿。

如果你是做 CRM，或者是 B 端產(chǎn)品，必看的一個(gè)競(jìng)品。

salesforce 采取的就是一個(gè)頂部導(dǎo)航，只是不同的是，salesforce 的頂部導(dǎo)航更多是將頁頭的功能進(jìn)行合并疊加，雖然 salesforce 的交互方式不算優(yōu)秀，但是因?yàn)槠錁I(yè)務(wù)線不斷龐大，這樣才能支撐其整條業(yè)務(wù)線。就因?yàn)檫@樣的問題，需要設(shè)計(jì)師在設(shè)計(jì)時(shí)，要考慮到整個(gè)系統(tǒng)的一個(gè)擴(kuò)展性問題。做 B 端產(chǎn)品的交互設(shè)計(jì)有點(diǎn)類似我對(duì)面后端同學(xué)寫代碼，我們現(xiàn)在設(shè)計(jì)的這個(gè)交互最少要滿足未來一到兩年公司的已規(guī)劃好的產(chǎn)品的擴(kuò)展問題。

hubspot

Hubspot 采取就是頂部菜單，同時(shí)二級(jí)菜單下拉展示，同時(shí) Hubspot 是按照角色去劃分頂部菜單，能夠給用戶減輕認(rèn)知負(fù)擔(dān)，更好的被用戶所使用。同時(shí)在一些設(shè)計(jì)小細(xì)節(jié)上，比如頂部的主題色，既可以提升品牌感，同時(shí)在是適當(dāng)時(shí)可以作為進(jìn)度進(jìn)行一個(gè)展示，使用戶能夠更加深入的感知到其設(shè)計(jì)。

5.3 混合導(dǎo)航

在 B 端產(chǎn)品中，感覺混合導(dǎo)航就是一個(gè)后期之秀。

它在頁面布局為頂部和側(cè)邊，簡(jiǎn)單來講，就是將頂部導(dǎo)航于側(cè)邊導(dǎo)航進(jìn)行結(jié)合。通常將一級(jí)導(dǎo)航菜單放置頂部，通過一級(jí)菜單的點(diǎn)擊后，展示側(cè)邊的二、三級(jí)菜單。在一些產(chǎn)品擁有復(fù)雜的邏輯關(guān)系，菜單之間關(guān)系分明的產(chǎn)品中，混合導(dǎo)航也越來越被大眾所接受。在很多復(fù)雜的系統(tǒng)當(dāng)中，混合導(dǎo)航真的是很不錯(cuò)的一個(gè)選擇，我們來看看他的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

承載大型業(yè)務(wù)：在導(dǎo)航上，他能夠展示 3 級(jí)甚至 4 級(jí)菜單，對(duì)于很多大型 B 端項(xiàng)目，混合導(dǎo)航算是更加合理的選擇。

擴(kuò)展性強(qiáng)：對(duì)以后有規(guī)劃大量功能的產(chǎn)品，用混合導(dǎo)航，能使之后菜單擴(kuò)展性更強(qiáng)。

缺點(diǎn)：

占用面積大：要切換多個(gè)菜單，所以頂部和左側(cè)會(huì)占用大量的空間。

菜單交互路徑長(zhǎng)：一、二級(jí)菜單間來回交互成本高，操作繁瑣。

線上產(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)航。他們能夠通過混合導(dǎo)航，使用戶對(duì)于導(dǎo)航每一個(gè)功能模塊有一個(gè)深刻的認(rèn)識(shí)。

金蝶

金蝶-星空定位就以 Paas 進(jìn)行定制銷售，分析過他的產(chǎn)品你就了解到，他一共有 100+個(gè)菜單，同時(shí)算是金蝶的王牌產(chǎn)品，因此對(duì)于此類產(chǎn)品，應(yīng)該著重去了解，也因此，對(duì)于每一個(gè)模塊，都是通過大標(biāo)題+小標(biāo)題的形式進(jìn)行設(shè)計(jì)，使用戶在使用時(shí)能夠明確知道自己想要什么。

現(xiàn)在各大復(fù)雜的產(chǎn)品都會(huì)采取混合導(dǎo)航，這樣對(duì)于產(chǎn)品的架構(gòu)以及各類菜單層級(jí)的分析也會(huì)起到很大的幫助～

5.4 平臺(tái)類導(dǎo)航的新趨勢(shì)：

平臺(tái)類導(dǎo)航是我們團(tuán)隊(duì)內(nèi)部自己的取名，給他的定義通常是擁有很多模塊比如 Teambition、明道云、擁有很多個(gè)模塊，通過一個(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)品分別陳列在頁面的核心區(qū)域，通過對(duì)于工作臺(tái)的設(shè)計(jì)，形成對(duì)于頁面的展示，同時(shí)形成一個(gè)平臺(tái)類的導(dǎo)航，于此相對(duì)應(yīng)的還有釘釘后臺(tái)管理頁面以及企業(yè)微信后臺(tái)管理頁面，他們都是通過一個(gè)個(gè)平臺(tái)類的模塊對(duì)導(dǎo)航進(jìn)行分發(fā)的～

最后的絮叨叨

我相信，看到這里的同學(xué)都是勇士，給大家聊聊自己的心得吧～

其實(shí)這篇文章的原型，來自對(duì)于公司新產(chǎn)品的導(dǎo)航設(shè)計(jì)分享，我希望自己把最近幾年接觸到的內(nèi)容整理一下，用一個(gè)系列的文章來去闡述 B 端產(chǎn)品的整個(gè)架構(gòu)，如果大家想看什么文章，歡迎私信～

—  The end  —

?? 原創(chuàng)文章精選??

一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？

游戲新手指導(dǎo)怎么做？一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship

后疫情時(shí)代，如何通過服務(wù)設(shè)計(jì)恢復(fù)真正的人際互動(dòng)？

?? 我們一起聊設(shè)計(jì) ???♂?

高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群

期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）