許多設(shè)計團隊在面對復(fù)雜的業(yè)務(wù)需求時，往往忽視了側(cè)邊欄設(shè)計的細節(jié)和靈活性。本文將深入探討B(tài)端側(cè)邊欄的設(shè)計要點，并結(jié)合實際案例，分享如何根據(jù)不同行業(yè)、業(yè)務(wù)場景和用戶習(xí)慣進行靈活設(shè)計，供大家參考。

很長一段時間我都覺得做B端的中臺時間沒什么技術(shù)含量，不就是第三方的組件，拼積木一樣，拼接就好，甚至很多團隊也是這么想的，早期很多的中臺都沒有設(shè)計師；

但是隨著這幾年越來越深度的B端中臺的設(shè)計，做了太多各式各樣的后臺的設(shè)計系統(tǒng)，深入的進入業(yè)務(wù)，才發(fā)現(xiàn)設(shè)計過程中必須考慮很多細節(jié)和維度，甚至很小的點，也是有考究的。

最近我們在做側(cè)邊欄的升級，我做了市場上50+中臺的側(cè)邊欄目調(diào)研，看了上萬張圖，越看越越是能發(fā)現(xiàn)針對不同的行業(yè)，不同的業(yè)務(wù)場景、信息層級和用戶習(xí)慣進行靈活設(shè)計選擇，需要具體問題具體分析及處理。

下面我就來總結(jié)一下我調(diào)研的這些側(cè)邊的設(shè)計分類及設(shè)計規(guī)則。

一、B端側(cè)邊欄的設(shè)計分類

按布局形態(tài)分類

細欄（垂直導(dǎo)航）：以圖標(biāo)為主，文字輔助，適用于模塊較少、內(nèi)容區(qū)域需最大化展示的場景。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計知識對這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實 ...

查看詳情 >

優(yōu)勢是簡潔高效，但要求用戶對圖標(biāo)含義有較高認知。

寬欄（混合導(dǎo)航）：圖標(biāo)與文字并存，支持多級菜單，兼容性強，適合復(fù)雜業(yè)務(wù)層級。這也是常見的側(cè)邊欄樣式。

通過分組和標(biāo)題提升信息密度，但可能壓縮內(nèi)容區(qū)域。

按結(jié)構(gòu)層級分類

單級導(dǎo)航：直接展示所有一級菜單，適合功能模塊較少的中小型系統(tǒng)（如藍湖、Coding）。

遵循“7±2”原則，菜單數(shù)量控制在5-9個，避免用戶選擇疲勞;

多級導(dǎo)航：通過折疊面板或樹形結(jié)構(gòu)收納子菜單，適用于大型企業(yè)級系統(tǒng)（如ERP、CRM）。

需明確可點擊項與純分類項的區(qū)分，避免交互混淆 ；

按交互模式分類

平鋪模式：菜單完全展開，用戶可快速定位功能（如新紅小紅書后臺、抖音抖店等等模塊）。適用于高頻操作場景；

折疊/懸浮模式：側(cè)邊欄可收縮為圖標(biāo)或隱藏，適應(yīng)窄屏設(shè)備或需專注內(nèi)容的情境（如飛書的icon展開收起）。需提供顯性觸發(fā)按鈕（如漢堡菜單）

二、B端側(cè)邊欄的設(shè)計規(guī)則

側(cè)邊欄設(shè)計需平衡功能性與視覺體驗，核心規(guī)則如下：

視覺對比與層級劃分

背景色差異化：通過深色或淺色背景區(qū)分側(cè)邊欄與內(nèi)容區(qū)域，避免視覺干擾。例如，深色背景可突出白色內(nèi)容區(qū)，但需確保品牌色符合無障礙標(biāo)準(zhǔn)（對比度≥4.5:1）

信息分組與留白：使用分割線、標(biāo)題或間距對功能模塊分組，減少信息密度。

圖標(biāo)與交互細節(jié)

圖標(biāo)設(shè)計原則：B端圖標(biāo)需簡約且具辨識度，避免過度裝飾。選中狀態(tài)可通過填充色、微動效或標(biāo)識線強化（如Ant Design的選中高亮）

交互反饋優(yōu)化：鼠標(biāo)懸停時圖標(biāo)變色、文字浮現(xiàn)；選中狀態(tài)結(jié)合背景色與文字加粗，提升操作感知

拓展性與一致性

響應(yīng)式適配：窄屏下自動切換為圖標(biāo)模式，確保移動端可用性（如飛書后臺的側(cè)邊欄收縮功能）

規(guī)范復(fù)用：建立統(tǒng)一的字號、間距、顏色規(guī)范（如主文字14px、輔助文字12px），降低用戶認知成本

業(yè)務(wù)導(dǎo)向的優(yōu)先級

高頻功能前置：將常用模塊置于頂部（如“更多功能、功能設(shè)置等等”），低頻功能收納至底部折疊區(qū)

teambition：不僅做了更多功能，有意思的他還做了自定義導(dǎo)航欄的功能，支持排序，做到低成本的定制化。

權(quán)限分級展示：根據(jù)角色動態(tài)顯示菜單（如管理員可見“系統(tǒng)設(shè)置”，普通員工僅顯示“任務(wù)列表”），減少信息冗余

三、典型案例解析

飛書：平鋪式動態(tài)導(dǎo)航

設(shè)計亮點：頂部導(dǎo)航進行功能入口切換，左側(cè)平鋪核心功能，圖標(biāo)與文字比例均衡；通過級分類提升信息層級

適用場景：設(shè)計協(xié)作工具，功能模塊清晰且用戶操作高頻

小鵝通：混合式寬欄導(dǎo)航

設(shè)計亮點：頂部導(dǎo)航切換業(yè)務(wù)大類，側(cè)邊欄展開子模塊；有一級也有多級菜單通過折疊面板收納，層級深度可控。

適用場景：復(fù)雜業(yè)務(wù)，需支持多業(yè)務(wù)線交叉跳轉(zhuǎn)

千牛商家后臺：多層級側(cè)邊欄

設(shè)計亮點：分兩欄導(dǎo)航，窄屏下收縮為圖標(biāo)或者圖標(biāo)+簡短文字；第二欄按照層級排列，客一級或者多級。

適用場景：企業(yè)級后臺系統(tǒng)，業(yè)務(wù)場景復(fù)雜，需要多種場景切換，導(dǎo)航多層級切功能極多的情況

微贊直播：可自定義導(dǎo)航

設(shè)計亮點：可自定義導(dǎo)航，包含排版、顏色。相對來說體驗感更加，不過對應(yīng)屏幕自適應(yīng)要求更高。

適用場景：針對C端，功能復(fù)雜的情況

老版設(shè)計

新版設(shè)計

Ant Design Pro：規(guī)范驅(qū)動的側(cè)邊欄

設(shè)計亮點：遵循原子設(shè)計方法論，定義圖標(biāo)尺寸（24px）、間距（8px倍數(shù)）、選中態(tài)（主色填充），確保開發(fā)與設(shè)計一致性 ，便于快速搭建新平臺

適用場景：中臺型系統(tǒng)，需快速復(fù)用組件庫

四、總結(jié)

側(cè)邊欄設(shè)計需以業(yè)務(wù)邏輯為核心，考慮信息層級與用戶角色，同時兼顧視覺清晰度與交互效率。

未來趨勢上，側(cè)邊欄的“C端化”設(shè)計（如情感化微交互、個性化皮膚）可能成為提升B端產(chǎn)品吸引力的新方向。

總的來說，做設(shè)計這些年，當(dāng)遇到問題的時候，我覺得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多問題就有了解法。