導(dǎo)航是每一個(gè)網(wǎng)站的靈魂所在，用戶依賴導(dǎo)航進(jìn)行不同頁(yè)面的切換，找到自己所需的。那么該如何將龐大的B端系統(tǒng)中的導(dǎo)航菜單做好呢？作者整理了3種B端導(dǎo)航菜單的布局模式，希望對(duì)你有所啟發(fā)。

導(dǎo)航菜單是一個(gè)網(wǎng)站的靈魂，用戶依賴導(dǎo)航在各個(gè)頁(yè)面中進(jìn)行跳轉(zhuǎn)。

導(dǎo)航菜單一般分為頂部導(dǎo)航和側(cè)邊導(dǎo)航，頂部導(dǎo)航提供全局性的類目和功能（常用于官網(wǎng)網(wǎng)頁(yè)的設(shè)計(jì)布局），側(cè)邊導(dǎo)航提供多級(jí)結(jié)構(gòu)來(lái)收納和排列網(wǎng)站架構(gòu)（常用于B端系統(tǒng)網(wǎng)頁(yè)的設(shè)計(jì)布局）。

導(dǎo)航菜單在B端系統(tǒng)任意一個(gè)產(chǎn)品中都是不可或缺的，在B端系統(tǒng)中導(dǎo)航菜單的層級(jí)也是至關(guān)重要的，并且每一個(gè)導(dǎo)航菜單的位置基本都是固定的，不會(huì)因?yàn)樾枨笞兓稣w位置的調(diào)整，除非是系統(tǒng)整體的改版升級(jí)。導(dǎo)航菜單在B端系統(tǒng)中的目的性很強(qiáng)，能夠?qū)ο到y(tǒng)中復(fù)雜的業(yè)務(wù)進(jìn)行劃分整理，引導(dǎo)用戶操作，便于用戶快速找到目標(biāo)（真正想要的功能）。

導(dǎo)航菜單最好服從7±2 原則，最多不超過(guò)9個(gè)，最少不低于5個(gè)，導(dǎo)航只是作為一個(gè)分類、引導(dǎo)的作用，如果導(dǎo)航菜單數(shù)量太多，用戶在使用時(shí)就會(huì)比較困惑，無(wú)法在眾多的導(dǎo)航菜單中快速找到自己想要的功能，導(dǎo)致用戶體驗(yàn)感較差。但是，如果一個(gè)龐大的B端系統(tǒng)中導(dǎo)航菜單數(shù)量卻只有三四個(gè)，那就說(shuō)明系統(tǒng)中的導(dǎo)航菜單分發(fā)不夠高效，不夠精準(zhǔn)細(xì)致。

怎樣才能將龐大的B端系統(tǒng)中的導(dǎo)航菜單做好呢？不能多也不能少，應(yīng)該怎么劃分呢？下面我整理了多種B端導(dǎo)航菜單的布局模式，不同模式所對(duì)應(yīng)的業(yè)務(wù)場(chǎng)景和導(dǎo)航菜單劃分?jǐn)?shù)量不同，我們需要根據(jù)實(shí)際場(chǎng)景選中合適的導(dǎo)航菜單模式。

一、導(dǎo)航菜單的三大模式

導(dǎo)航菜單模式細(xì)分有多種類型，這里我總的歸納為三種模式：平鋪模式、折疊模式、懸浮折疊模式。

下面分別介紹不同模式在頁(yè)面中具體的展示形式，以及使用場(chǎng)景，通過(guò)列舉產(chǎn)品案例幫助大家理解和運(yùn)用。

1. 平鋪模式

在B端系統(tǒng)中我們最常見(jiàn)的導(dǎo)航菜單就是平鋪模式，平鋪模式不言而喻，就是將菜單直接排版展示，能夠讓用戶直觀的看到系統(tǒng)的導(dǎo)航菜單，快速找到目標(biāo)功能。

平鋪模式一般是針對(duì)導(dǎo)航菜單比較少的情況，系統(tǒng)功能模塊劃分不是很復(fù)雜的場(chǎng)景，直接通過(guò)導(dǎo)航一級(jí)菜單就能夠劃分整個(gè)系統(tǒng)的業(yè)務(wù)和功能。

下面列舉幾個(gè)平鋪模式的B端系統(tǒng)的案例：

【藍(lán)湖】

藍(lán)湖的導(dǎo)航菜單就直接平鋪在左側(cè)，一目了然的可以看到所有的導(dǎo)航菜單目錄，用戶在使用時(shí)能夠快速找到對(duì)應(yīng)的菜單進(jìn)行相應(yīng)的操作。（不同的是，藍(lán)湖這里還單獨(dú)做了一個(gè)分類導(dǎo)航菜單【團(tuán)隊(duì)文件】，將該團(tuán)隊(duì)下的文件歸類在一個(gè)目錄下，形成二級(jí)目錄。

【coding】

coding也是采用平鋪模式展示所有導(dǎo)航菜單，并且遵循7±2 原則，頂部展示9個(gè)主導(dǎo)航菜單，底部導(dǎo)航菜單分組展示（例如：生態(tài)能力-CoDesign，設(shè)置-項(xiàng)目設(shè)置），導(dǎo)航菜單支持編輯，可對(duì)主導(dǎo)航菜單進(jìn)行排序和是否顯示操作。

coding的導(dǎo)航菜單設(shè)計(jì)和藍(lán)湖比較類似，都是通過(guò)平鋪模式，外加分組菜單，這樣能夠在有限的空間展示更多的分類目錄，讓信息層級(jí)展示更醒目，便于用戶查找和使用。

隨著B(niǎo)端系統(tǒng)業(yè)務(wù)的不斷發(fā)展，系統(tǒng)中的業(yè)務(wù)也逐漸復(fù)雜，系統(tǒng)中繁多的業(yè)務(wù)功能模塊也越來(lái)越多，導(dǎo)致系統(tǒng)中導(dǎo)航菜單數(shù)量也越來(lái)越多。

對(duì)于整個(gè)系統(tǒng)而言，這些導(dǎo)航菜單又是必不可少的，但是整個(gè)系統(tǒng)的用戶角色的多樣性的，不同的角色所關(guān)注的業(yè)務(wù)和功能不同，如果系統(tǒng)中都展示所有的分類，會(huì)導(dǎo)致某一些用戶無(wú)法快速找到自己想要的導(dǎo)航菜單。

例如：角色1是項(xiàng)目負(fù)責(zé)人，他更關(guān)注整個(gè)項(xiàng)目的進(jìn)展，不怎么關(guān)注代碼倉(cāng)庫(kù)、測(cè)試管理等與自己工作關(guān)系不大的模塊，如果系統(tǒng)中展示所有的導(dǎo)航菜單，角色1就會(huì)比較困惑，為了針對(duì)不同角色，我們可以為導(dǎo)航菜單開(kāi)發(fā)一個(gè)自定義的功能。

用戶通過(guò)自定義展示和排序?qū)Ш讲藛?，設(shè)置自己所關(guān)注的導(dǎo)航菜單，這樣人性化的設(shè)計(jì)也是目前和未來(lái)B端系統(tǒng)的主要趨勢(shì)。

當(dāng)右側(cè)頁(yè)面內(nèi)容比較多時(shí)，導(dǎo)航菜單占據(jù)的位置太多，為了更好的利用頁(yè)面寬度空間，導(dǎo)航欄一般也會(huì)有展開(kāi)和收起的功能，如下圖coding案例，導(dǎo)航菜單收起時(shí)，右側(cè)畫布內(nèi)容自適應(yīng)，導(dǎo)航菜單只展示圖標(biāo)，hover顯示完整導(dǎo)航菜單的名稱。

帶有二級(jí)導(dǎo)航菜單的，hover狀態(tài)時(shí)直接展示二級(jí)菜單分類，便于直接點(diǎn)擊跳轉(zhuǎn)，同時(shí)可以更清晰的知道該導(dǎo)航菜單下的分類。

【飛書】

飛書的導(dǎo)航菜單同理，只是圖標(biāo)和文本的是上下排版，也可以設(shè)置導(dǎo)航菜單的顯示/隱藏。

2. 折疊模式

折疊模式：將導(dǎo)航菜單分為多級(jí)菜單，通過(guò)展開(kāi)收起的形式查看導(dǎo)航目錄，可以接受大量的導(dǎo)航菜單目錄。

不過(guò)為了更好的體現(xiàn)導(dǎo)航的功能，一般層級(jí)最好不要超過(guò)三級(jí)，如果層級(jí)太深，導(dǎo)航的意義就不大，因?yàn)橛脩暨€是需要一級(jí)一級(jí)查找，并且不容易找到自己的目標(biāo)（如果業(yè)務(wù)確實(shí)復(fù)雜，采用折疊模式，也可以增加一個(gè)搜索功能，讓用戶可以根據(jù)關(guān)鍵詞快速查找，這樣的模式一般是針對(duì)功能模塊中的導(dǎo)航，非系統(tǒng)主導(dǎo)航菜單。）

【飛書云文檔】

我們做項(xiàng)目常用的項(xiàng)目管理和文檔管理軟件飛書中有一個(gè)單獨(dú)的模塊，飛書云文檔，模塊中的導(dǎo)航菜單就是采用折疊模式，通過(guò)對(duì)一級(jí)導(dǎo)航菜單點(diǎn)擊上下展開(kāi)/收起下級(jí)導(dǎo)航菜單，這樣可容納更多的菜單目錄。

小屏幕小，導(dǎo)航菜單只展示圖標(biāo)，hover展示導(dǎo)航菜單完整名稱（主流設(shè)計(jì)）。

【apifox】

開(kāi)發(fā)采用的代碼管理軟件apifox的導(dǎo)航菜單也是采用折疊模式，在導(dǎo)航菜單中還支持新建導(dǎo)航團(tuán)隊(duì)，這種靈活自定義的功能，滿足了不同開(kāi)發(fā)團(tuán)隊(duì)的不同需求。

【公眾號(hào)】

微信公眾號(hào)的導(dǎo)航菜單同樣也是采用折疊模式，四個(gè)大分類，每個(gè)分類下包含多個(gè)小分類，這樣只需要定義好大分類后，將對(duì)應(yīng)的小分類放在大分類下即可，能讓導(dǎo)航菜單容納更多，同時(shí)頁(yè)面也更簡(jiǎn)潔，查找也更方便。

3. 懸浮折疊模式

懸浮折疊模式：將導(dǎo)航菜單通過(guò)浮窗/抽屜的形式展示。

這是一種新型的導(dǎo)航菜單設(shè)計(jì)模式，雖然沒(méi)有被廣泛運(yùn)用，但是在使用時(shí)你會(huì)發(fā)現(xiàn)是真的香。我也是在體驗(yàn)產(chǎn)品時(shí)發(fā)現(xiàn)這個(gè)具有人性且無(wú)比便捷好用的設(shè)計(jì)。

【飛書云文檔】

不得不說(shuō)飛書真的是我用過(guò)的最好的產(chǎn)品之一，他把用戶體驗(yàn)、交互編輯做到了極致，無(wú)論是功能的豐富性還是體驗(yàn)都做的很不錯(cuò)，并且涉及到多個(gè)行業(yè)，大家可以體驗(yàn)一下。

當(dāng)進(jìn)入某一個(gè)文檔編輯時(shí)，左側(cè)的導(dǎo)航菜單會(huì)消失，一般的軟件系統(tǒng)都是直接做一個(gè)返回??的箭頭，點(diǎn)擊則返回到上一個(gè)界面，這樣的交互讓用戶的操作路徑和頁(yè)面視覺(jué)變化比較大。

但是飛書云文檔并沒(méi)有按照常規(guī)的返回交互做，而是在返回箭頭圖標(biāo)上修改了交互，當(dāng)返回??hover時(shí)，則出現(xiàn)下拉菜單浮窗，用戶可以直接在當(dāng)前頁(yè)面切換。減少操作路徑，使用非常便捷高效。同時(shí)依舊滿足點(diǎn)擊返回??到上一個(gè)頁(yè)面。

【celonis】

celonis的導(dǎo)航菜單也是去年改版的，默認(rèn)和常規(guī)的軟件一樣，只展示圖標(biāo)，不過(guò)對(duì)于新用戶而言，只展示圖標(biāo)的識(shí)別性比較低，學(xué)習(xí)成本也比較高。

默認(rèn)只展示圖標(biāo)導(dǎo)航作為新用戶而言，并不知道這個(gè)圖標(biāo)表示什么意思，比較在設(shè)計(jì)中，同一個(gè)圖標(biāo)代表了多種含義，比如時(shí)間圖標(biāo)，可以表示時(shí)間、時(shí)長(zhǎng)。

為了更好的用戶體驗(yàn)，celonis是怎么做的呢？

常規(guī)的做法就是hover時(shí)增加導(dǎo)航名稱，但是celonis并沒(méi)有采用常規(guī)的做法，我們一起看看，一起學(xué)習(xí)一下吧！

celonis是hover在導(dǎo)航整個(gè)組件上時(shí)，抽屜展示導(dǎo)航菜單完整名稱，這樣可以完整的看到每一個(gè)圖標(biāo)所對(duì)應(yīng)的導(dǎo)航菜單名稱，快速切換導(dǎo)航菜單，同時(shí)因?yàn)槊Q部分平時(shí)是不顯示的，所以也為頁(yè)面節(jié)省了大量的空間。

對(duì)于多層級(jí)導(dǎo)航菜單，是通過(guò)點(diǎn)擊上級(jí)導(dǎo)航菜單，出現(xiàn)下級(jí)菜單，這樣就避免了一級(jí)和二級(jí)hover的沖突。

結(jié)語(yǔ)

作為一枚UI設(shè)計(jì)師，我們不僅僅需要關(guān)注界面的視覺(jué)效果，軟件的交互體驗(yàn)也是至關(guān)重要的，對(duì)于B端產(chǎn)品而言，我們的目標(biāo)及是提高用戶的工作效率，達(dá)到降本增效的作用，如果軟件產(chǎn)品需要浪費(fèi)用戶大量的時(shí)間學(xué)習(xí)，并且使用體驗(yàn)不友好，那設(shè)計(jì)的產(chǎn)品只是一個(gè)空殼。