许多设计团队在面对复杂的业务需求时，往往忽视了侧边栏设计的细节和灵活性。本文将深入探讨B端侧边栏的设计要点，并结合实际案例，分享如何根据不同行业、业务场景和用户习惯进行灵活设计，供大家参考。
很长一段时间我都觉得做B端的中台时间没什么技术含量，不就是第三方的组件，拼积木一样，拼接就好，甚至很多团队也是这么想的，早期很多的中台都没有设计师；
但是随着这几年越来越深度的B端中台的设计，做了太多各式各样的后台的设计系统，深入的进入业务，才发现设计过程中必须考虑很多细节和维度，甚至很小的点，也是有考究的。
最近我们在做侧边栏的升级，我做了市场上50+中台的侧边栏目调研，看了上万张图，越看越越是能发现针对不同的行业，不同的业务场景、信息层级和用户习惯进行灵活设计选择，需要具体问题具体分析及处理。
下面我就来总结一下我调研的这些侧边的设计分类及设计规则。
细栏（垂直导航）：以图标为主，文字辅助，适用于模块较少、内容区域需最大化展示的场景。
优势是简洁高效，但要求用户对图标含义有较高认知。
宽栏（混合导航）：图标与文字并存，支持多级菜单，兼容性强，适合复杂业务层级。这也是常见的侧边栏样式。
通过分组和标题提升信息密度，但可能压缩内容区域。
单级导航：直接展示所有一级菜单，适合功能模块较少的中小型系统（如蓝湖、Coding）。
遵循“7±2”原则，菜单数量控制在5-9个，避免用户选择疲劳;
多级导航：通过折叠面板或树形结构收纳子菜单，适用于大型企业级系统（如ERP、CRM）。
需明确可点击项与纯分类项的区分，避免交互混淆 ；
平铺模式：菜单完全展开，用户可快速定位功能（如新红小红书后台、抖音抖店等等模块）。适用于高频操作场景；
折叠/悬浮模式：侧边栏可收缩为图标或隐藏，适应窄屏设备或需专注内容的情境（如飞书的icon展开收起）。需提供显性触发按钮（如汉堡菜单）
侧边栏设计需平衡功能性与视觉体验，核心规则如下：
背景色差异化：通过深色或浅色背景区分侧边栏与内容区域，避免视觉干扰。例如，深色背景可突出白色内容区，但需确保品牌色符合无障碍标准（对比度≥4.5:1）
信息分组与留白：使用分割线、标题或间距对功能模块分组，减少信息密度。
图标设计原则：B端图标需简约且具辨识度，避免过度装饰。选中状态可通过填充色、微动效或标识线强化（如Ant Design的选中高亮）
交互反馈优化：鼠标悬停时图标变色、文字浮现；选中状态结合背景色与文字加粗，提升操作感知
响应式适配：窄屏下自动切换为图标模式，确保移动端可用性（如飞书后台的侧边栏收缩功能）
规范复用：建立统一的字号、间距、颜色规范（如主文字14px、辅助文字12px），降低用户认知成本
高频功能前置：将常用模块置于顶部（如“更多功能、功能设置等等”），低频功能收纳至底部折叠区
teambition：不仅做了更多功能，有意思的他还做了自定义导航栏的功能，支持排序，做到低成本的定制化。
权限分级展示：根据角色动态显示菜单（如管理员可见“系统设置”，普通员工仅显示“任务列表”），减少信息冗余
设计亮点：顶部导航进行功能入口切换，左侧平铺核心功能，图标与文字比例均衡；通过级分类提升信息层级
适用场景：设计协作工具，功能模块清晰且用户操作高频
设计亮点：顶部导航切换业务大类，侧边栏展开子模块；有一级也有多级菜单通过折叠面板收纳，层级深度可控。
适用场景：复杂业务，需支持多业务线交叉跳转
设计亮点：分两栏导航，窄屏下收缩为图标或者图标+简短文字；第二栏按照层级排列，客一级或者多级。
适用场景：企业级后台系统，业务场景复杂，需要多种场景切换，导航多层级切功能极多的情况
设计亮点：可自定义导航，包含排版、颜色。相对来说体验感更加，不过对应屏幕自适应要求更高。
适用场景：针对C端，功能复杂的情况
老版设计
新版设计
设计亮点：遵循原子设计方法论，定义图标尺寸（24px）、间距（8px倍数）、选中态（主色填充），确保开发与设计一致性 ，便于快速搭建新平台
适用场景：中台型系统，需快速复用组件库
侧边栏设计需以业务逻辑为核心，考虑信息层级与用户角色，同时兼顾视觉清晰度与交互效率。
未来趋势上，侧边栏的“C端化”设计（如情感化微交互、个性化皮肤）可能成为提升B端产品吸引力的新方向。
总的来说，做设计这些年，当遇到问题的时候，我觉得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多问题就有了解法。
专栏作家
三原设计，人人都是产品经理专栏作家。分享B端设计、品牌设计，原创设计文章、教程。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。