2021-9-17 資深UI設計者
B 端導航欄，是 B 端項目最重要的模塊（沒有之一）。一個優秀的 B 端導航欄，可以清晰地連接項目的所有功能、模塊，讓訪問者高效的在模塊間穿梭。
通常，在進行具體頁面設計的時候，我們第一個設計的模塊也是導航。在主流的頁面框架中，導航分為兩種，頂部導航和側邊導航。
有很多 B 端產品官網使用的頂部導航，并不能作為管理系統導航，僅僅是一般網站導航。比如阿里云或騰訊云官網上方的導航。
這類導航主要應用在企業官網中，通過比較密集的信息密度，將提供的產品或服務全部羅列出來。
而側邊欄雖然可以做不少花哨的樣式，但信息密度顯然無法和頂部導航欄相提并論。
頂部導航的特征需要鼠標懸浮展開分類面板，通過收納大量下級菜單，來提升用戶的 “檢索” 效率。而用戶在這些菜單間跳轉切換的頻率不會太高。
側邊欄導航的特征則是更直接，包含的菜單數量不會太多，用來提升用戶的 “跳轉” 效率。滿足用戶高頻的模塊跳轉切換需求。
側邊欄的設計也包含兩種形式，細欄和寬欄。
細欄主要突出圖標，應用在模塊數量不多的情況，也為內容區域騰更多控件出來。比如 Teambition、百度云等產品。
寬欄則是比較安全的設計形式，兼容性較好，不管是模塊數量多還少都能用。但相應的，它會一定程度上占用控件減少內容區域面積。
在一般項目中，只要用好側邊欄的設計即可。頂部導航在管理界面中的應用多為混合場景，用來切換比側邊欄更高級的分類頁面。比如騰訊云內部頁面中，切換業務模塊使用頂部導航的展開面板，業務下級模塊則在側邊欄。
導航欄設計，必然要滿足 “導航” 這個核心目標。組件的樣式、交互必須為功能服務，但很多新手只考慮樣式。
通常情況下，導航是反映項目功能模塊的入口，產品中包含多少模塊、子模塊，就會有序的布置到導航里面。那么問題來了，項目到底包含了多少模塊和子模塊？哪些是要放進導航里的？
在之前思維導圖應用的分享中，有一個非常重要的產品輸出類型，叫 —— 功能結構地圖。解釋了不同功能層級的結構和從屬關系，以及項目中總共包含了哪些頁面。
它是制定導航內容的主要依據，但并不代表里面出現的每一個節點頁面都要放進導航中。
設計師展開導航設計前，也需要使用思維導圖工具，再把需要展示出來的內容和結構梳理一遍。否則，面對模塊數量較多，層級超過兩級的導航就必然手忙腳亂。
比如騰訊云直播和短書的側邊欄層級結構：
這么看起來很清晰對吧？但留給設計的坑是，并不是每個層級，它們都可以點擊，都具備跳轉功能。我們來看看實際的實現的效果。
也就是說，在導航欄的導航選項中，并不是所有的選項都是用來跳轉的，它們是用來輔助區分內容和用來展開的。
所以，我們要在思維導圖階段，根據實際場景的需要，對每一個導航信息點進行標注，明確它們在后續設計中包含的作用。
同時，還有一個需要注意的事情，就是是否為導航欄增加響應式適配。即窄屏的情況下，通常是將導航欄縮短，只保留圖標的方案。
把這些內容定好，就可以進入我們具體的設計環節了。
整理好上方的內容層級，到具體設計步驟里，首先要做的，就是制定出一個能滿足層級顯示和操作的交互結構出來。
再整理一遍，側邊欄的內容包含：
而可交互的元素，顯然是有對應交互狀態的，那么對應的交互狀態就包括：
那么，先用原型做個示意，它的狀態包含了默認、選中一級、選中二級三種情況：
在實際設計環節里，最難受的事情就是一級菜單有的用來展開，有的可以選中，怎么區分？而一二級菜單懸浮、選中是否要統一樣式？怎么保證一致性？
如果要統一一二級菜單的選中樣式，那么設計過程中，就要保證一二級菜單實際占用空間區域是一致的，間距也進行統一，才能合理添加懸浮和選中效果。
如果不對一二級菜單統一懸浮和顯示樣式，區分展示，可以不統一菜單的實際區域和高度。但是，這樣的導航要設計好更困難一點。如果不統一交互效果，那么就盡量保證其中一級懸浮和選中采取背景填充，另一級僅僅是文字樣式變更。
把要使用哪種方案確定下來，然后再去優化細節，添加對應的圖標內容和優化字體、分割線等等。
我們在上面用的案例，邏輯層級是 3 級，但是有的項目中，包含的可能有 4 級、5 級，那么必然會呈現出更復雜的交互體系。
常見的做法，就是將側邊欄做成兩列，一列是頂級菜單，一列是其它次級菜單，類似有贊的這種做法。層級越多帶來的挑戰也就越大。
導航的設計，對細節調節并不僅僅是為了好看，而是提供更直觀的交互和一致性。僅僅完成樣式依舊是不夠的，具體使用上還可能會碰到什么問題我們要盡可能多進行思考。
比如：
這樣的問題，就留給大家自己思考了。
導航的設計細節是很次要的因素（雖然對整體樣式很重要），重點是給出合理的信息展示和交互方法。如果導航不能幫助用戶快速、簡潔的進行頁面的選擇和跳轉，即使做的再好看也是一個失敗的導航。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務