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

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

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

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

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

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

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

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

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

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

查看詳情 >

優(yōu)勢(shì)是簡(jiǎn)潔高效，但要求用戶對(duì)圖標(biāo)含義有較高認(rèn)知。

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

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

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

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

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

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

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

按交互模式分類

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

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

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

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

視覺對(duì)比與層級(jí)劃分

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

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

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

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

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

拓展性與一致性

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

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

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

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

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

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

三、典型案例解析

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

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

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

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

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

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

千牛商家后臺(tái)：多層級(jí)側(cè)邊欄

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

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

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

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

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

老版設(shè)計(jì)

新版設(shè)計(jì)

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

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

適用場(chǎng)景：中臺(tái)型系統(tǒng)，需快速?gòu)?fù)用組件庫(kù)

四、總結(jié)

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

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

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