很长一段时间我都觉得做B端的中台时间没什么技术含量，不就是第三方的组件，拼积木一样，拼接就好，甚至很多团队也是这么想的，早期很多的中台都没有设计师；

但是随着这几年越来越深度的B端中台的设计，做了太多各式各样的后台的设计系统，深入的进入业务，才发现设计过程中必须考虑很多细节和维度，甚至很小的点，也是有考究的。

最近我们在做侧边栏的升级，我做了市场上50+中台的侧边栏目调研，看了上万张图，越看越越是能发现针对不同的行业，不同的业务场景、信息层级和用户习惯进行灵活设计选择，需要具体问题具体分析及处理

下面我就来总结一下我调研的这些侧边的设计分类及设计规则。

一、B端侧边栏的设计分类

按布局形态分类

细栏（垂直导航）：以图标为主，文字辅助，适用于模块较少、内容区域需最大化展示的场景。

优势是简洁高效，但要求用户对图标含义有较高认知。

宽栏（混合导航）：图标与文字并存，支持多级菜单，兼容性强，适合复杂业务层级。这也是常见的侧边栏样式。

通过分组和标题提升信息密度，但可能压缩内容区域。

按结构层级分类

单级导航：直接展示所有一级菜单，适合功能模块较少的中小型系统（如蓝湖、Coding）。

遵循“7±2”原则，菜单数量控制在5-9个，避免用户选择疲劳;

多级导航：通过折叠面板或树形结构收纳子菜单，适用于大型企业级系统（如ERP、CRM）。

需明确可点击项与纯分类项的区分，避免交互混淆 ；

按交互模式分类

平铺模式：菜单完全展开，用户可快速定位功能（如新红小红书后台、抖音抖店等等模块）。适用于高频操作场景；

折叠/悬浮模式：侧边栏可收缩为图标或隐藏，适应窄屏设备或需专注内容的情境（如飞书的icon展开收起）。需提供显性触发按钮（如汉堡菜单）

二、B端侧边栏的设计规则

侧边栏设计需平衡功能性与视觉体验，核心规则如下：

1、视觉对比与层级划分

背景色差异化：通过深色或浅色背景区分侧边栏与内容区域，避免视觉干扰。例如，深色背景可突出白色内容区，但需确保品牌色符合无障碍标准（对比度≥4.5:1）

信息分组与留白：使用分割线、标题或间距对功能模块分组，减少信息密度。

2、图标与交互细节

图标设计原则：B端图标需简约且具辨识度，避免过度装饰。选中状态可通过填充色、微动效或标识线强化（如Ant Design的选中高亮）

交互反馈优化：鼠标悬停时图标变色、文字浮现；选中状态结合背景色与文字加粗，提升操作感知

3、拓展性与一致性

响应式适配：窄屏下自动切换为图标模式，确保移动端可用性（如飞书后台的侧边栏收缩功能）

规范复用：建立统一的字号、间距、颜色规范（如主文字14px、辅助文字12px），降低用户认知成本

4、业务导向的优先级

高频功能前置：将常用模块置于顶部（如“更多功能、功能设置等等”），低频功能收纳至底部折叠区

teambition：不仅做了更多功能，有意思的他还做了自定义导航栏的功能，支持排序，做到低成本的定制化。

权限分级展示：根据角色动态显示菜单（如管理员可见“系统设置”，普通员工仅显示“任务列表”），减少信息冗余

三、典型案例解析

1、飞书：平铺式动态导航

• 设计亮点：顶部导航进行功能入口切换，左侧平铺核心功能，图标与文字比例均衡；通过级分类提升信息层级

• 适用场景：设计协作工具，功能模块清晰且用户操作高频

2、小鹅通：混合式宽栏导航

• 设计亮点：顶部导航切换业务大类，侧边栏展开子模块；有一级也有多级菜单通过折叠面板收纳，层级深度可控。

• 适用场景：复杂业务，需支持多业务线交叉跳转

3、千牛商家后台：多层级侧边栏

• 设计亮点：分两栏导航，窄屏下收缩为图标或者图标+简短文字；第二栏按照层级排列，客一级或者多级。

• 适用场景：企业级后台系统，业务场景复杂，需要多种场景切换，导航多层级切功能极多的情况
  

4、微赞直播：可自定义导航

• 设计亮点：可自定义导航，包含排版、颜色。相对来说体验感更加，不过对应屏幕自适应要求更高。

• 适用场景：针对C端，功能复杂的情况

老版设计

新版设计

5、Ant Design Pro：规范驱动的侧边栏

• 设计亮点：遵循原子设计方法论，定义图标尺寸（24px）、间距（8px倍数）、选中态（主色填充），确保开发与设计一致性 ，便于快速搭建新平台

• 适用场景：中台型系统，需快速复用组件库

四、总结

侧边栏设计需以业务逻辑为核心，考虑信息层级与用户角色，同时兼顾视觉清晰度与交互效率。

未来趋势上，侧边栏的“C端化”设计（如情感化微交互、个性化皮肤）可能成为提升B端产品吸引力的新方向。

总的来说，做设计这些年，当遇到问题的时候，我觉得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多问题就有了解法。

Powered by Froala Editor