起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端導航菜單的三大模式
導航是每一個網站的靈魂所在，用戶依賴導航進行不同頁面的切換，找到自己所需的。那么該如何將龐大的B端系統中的導航菜單做好呢？作者整理了3種B端導航菜單的布局模式，希望對你有所啟發。
導航菜單是一個網站的靈魂，用戶依賴導航在各個頁面中進行跳轉。
導航菜單一般分為頂部導航和側邊導航，頂部導航提供全局性的類目和功能（常用于官網網頁的設計布局），側邊導航提供多級結構來收納和排列網站架構（常用于B端系統網頁的設計布局）。
導航菜單在B端系統任意一個產品中都是不可或缺的，在B端系統中導航菜單的層級也是至關重要的，并且每一個導航菜單的位置基本都是固定的，不會因為需求變化而做整體位置的調整，除非是系統整體的改版升級。導航菜單在B端系統中的目的性很強，能夠對系統中復雜的業務進行劃分整理，引導用戶操作，便于用戶快速找到目標（真正想要的功能）。
導航菜單最好服從7±2 原則，最多不超過9個，最少不低于5個，導航只是作為一個分類、引導的作用，如果導航菜單數量太多，用戶在使用時就會比較困惑，無法在眾多的導航菜單中快速找到自己想要的功能，導致用戶體驗感較差。但是，如果一個龐大的B端系統中導航菜單數量卻只有三四個，那就說明系統中的導航菜單分發不夠高效，不夠精準細致。
怎樣才能將龐大的B端系統中的導航菜單做好呢？不能多也不能少，應該怎么劃分呢？下面我整理了多種B端導航菜單的布局模式，不同模式所對應的業務場景和導航菜單劃分數量不同，我們需要根據實際場景選中合適的導航菜單模式。
一、導航菜單的三大模式
導航菜單模式細分有多種類型，這里我總的歸納為三種模式：平鋪模式、折疊模式、懸浮折疊模式。
下面分別介紹不同模式在頁面中具體的展示形式，以及使用場景，通過列舉產品案例幫助大家理解和運用。
1. 平鋪模式
在B端系統中我們最常見的導航菜單就是平鋪模式，平鋪模式不言而喻，就是將菜單直接排版展示，能夠讓用戶直觀的看到系統的導航菜單，快速找到目標功能。
平鋪模式一般是針對導航菜單比較少的情況，系統功能模塊劃分不是很復雜的場景，直接通過導航一級菜單就能夠劃分整個系統的業務和功能。
下面列舉幾個平鋪模式的B端系統的案例：
【藍湖】
藍湖的導航菜單就直接平鋪在左側，一目了然的可以看到所有的導航菜單目錄，用戶在使用時能夠快速找到對應的菜單進行相應的操作。（不同的是，藍湖這里還單獨做了一個分類導航菜單【團隊文件】，將該團隊下的文件歸類在一個目錄下，形成二級目錄。
【coding】
coding也是采用平鋪模式展示所有導航菜單，并且遵循7±2 原則，頂部展示9個主導航菜單，底部導航菜單分組展示（例如：生態能力-CoDesign，設置-項目設置），導航菜單支持編輯，可對主導航菜單進行排序和是否顯示操作。
coding的導航菜單設計和藍湖比較類似，都是通過平鋪模式，外加分組菜單，這樣能夠在有限的空間展示更多的分類目錄，讓信息層級展示更醒目，便于用戶查找和使用。
隨著B端系統業務的不斷發展，系統中的業務也逐漸復雜，系統中繁多的業務功能模塊也越來越多，導致系統中導航菜單數量也越來越多。
對于整個系統而言，這些導航菜單又是必不可少的，但是整個系統的用戶角色的多樣性的，不同的角色所關注的業務和功能不同，如果系統中都展示所有的分類，會導致某一些用戶無法快速找到自己想要的導航菜單。
例如：角色1是項目負責人，他更關注整個項目的進展，不怎么關注代碼倉庫、測試管理等與自己工作關系不大的模塊，如果系統中展示所有的導航菜單，角色1就會比較困惑，為了針對不同角色，我們可以為導航菜單開發一個自定義的功能。
用戶通過自定義展示和排序導航菜單，設置自己所關注的導航菜單，這樣人性化的設計也是目前和未來B端系統的主要趨勢。
當右側頁面內容比較多時，導航菜單占據的位置太多，為了更好的利用頁面寬度空間，導航欄一般也會有展開和收起的功能，如下圖coding案例，導航菜單收起時，右側畫布內容自適應，導航菜單只展示圖標，hover顯示完整導航菜單的名稱。
帶有二級導航菜單的，hover狀態時直接展示二級菜單分類，便于直接點擊跳轉，同時可以更清晰的知道該導航菜單下的分類。
【飛書】
飛書的導航菜單同理，只是圖標和文本的是上下排版，也可以設置導航菜單的顯示/隱藏。
2. 折疊模式
折疊模式：將導航菜單分為多級菜單，通過展開收起的形式查看導航目錄，可以接受大量的導航菜單目錄。
不過為了更好的體現導航的功能，一般層級最好不要超過三級，如果層級太深，導航的意義就不大，因為用戶還是需要一級一級查找，并且不容易找到自己的目標（如果業務確實復雜，采用折疊模式，也可以增加一個搜索功能，讓用戶可以根據關鍵詞快速查找，這樣的模式一般是針對功能模塊中的導航，非系統主導航菜單。）
【飛書云文檔】
我們做項目常用的項目管理和文檔管理軟件飛書中有一個單獨的模塊，飛書云文檔，模塊中的導航菜單就是采用折疊模式，通過對一級導航菜單點擊上下展開/收起下級導航菜單，這樣可容納更多的菜單目錄。
小屏幕小，導航菜單只展示圖標，hover展示導航菜單完整名稱（主流設計）。
【apifox】
開發采用的代碼管理軟件apifox的導航菜單也是采用折疊模式，在導航菜單中還支持新建導航團隊，這種靈活自定義的功能，滿足了不同開發團隊的不同需求。
【公眾號】
微信公眾號的導航菜單同樣也是采用折疊模式，四個大分類，每個分類下包含多個小分類，這樣只需要定義好大分類后，將對應的小分類放在大分類下即可，能讓導航菜單容納更多，同時頁面也更簡潔，查找也更方便。
3. 懸浮折疊模式
懸浮折疊模式：將導航菜單通過浮窗/抽屜的形式展示。
這是一種新型的導航菜單設計模式，雖然沒有被廣泛運用，但是在使用時你會發現是真的香。我也是在體驗產品時發現這個具有人性且無比便捷好用的設計。
【飛書云文檔】
不得不說飛書真的是我用過的最好的產品之一，他把用戶體驗、交互編輯做到了極致，無論是功能的豐富性還是體驗都做的很不錯，并且涉及到多個行業，大家可以體驗一下。
當進入某一個文檔編輯時，左側的導航菜單會消失，一般的軟件系統都是直接做一個返回??的箭頭，點擊則返回到上一個界面，這樣的交互讓用戶的操作路徑和頁面視覺變化比較大。
但是飛書云文檔并沒有按照常規的返回交互做，而是在返回箭頭圖標上修改了交互，當返回??hover時，則出現下拉菜單浮窗，用戶可以直接在當前頁面切換。減少操作路徑，使用非常便捷高效。同時依舊滿足點擊返回??到上一個頁面。
【celonis】
celonis的導航菜單也是去年改版的，默認和常規的軟件一樣，只展示圖標，不過對于新用戶而言，只展示圖標的識別性比較低，學習成本也比較高。
默認只展示圖標導航作為新用戶而言，并不知道這個圖標表示什么意思，比較在設計中，同一個圖標代表了多種含義，比如時間圖標，可以表示時間、時長。
為了更好的用戶體驗，celonis是怎么做的呢？
常規的做法就是hover時增加導航名稱，但是celonis并沒有采用常規的做法，我們一起看看，一起學習一下吧！
celonis是hover在導航整個組件上時，抽屜展示導航菜單完整名稱，這樣可以完整的看到每一個圖標所對應的導航菜單名稱，快速切換導航菜單，同時因為名稱部分平時是不顯示的，所以也為頁面節省了大量的空間。
對于多層級導航菜單，是通過點擊上級導航菜單，出現下級菜單，這樣就避免了一級和二級hover的沖突。
結語
作為一枚UI設計師，我們不僅僅需要關注界面的視覺效果，軟件的交互體驗也是至關重要的，對于B端產品而言，我們的目標及是提高用戶的工作效率，達到降本增效的作用，如果軟件產品需要浪費用戶大量的時間學習，并且使用體驗不友好，那設計的產品只是一個空殼。
本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
寫的不錯，學習了。