一、开篇：被低估的侧边导航，正在拖垮团队协作效率
兰亭妙微ui设计公司分享：在从零搭建 B 端后台管理系统的项目中，我最初选择将侧边导航封装为组件，希望解决菜单后期频繁增删改查、全局样式同步的痛点。
但落地后却发现：仅仅简单封装组件，并不能实现预期效果 —— 无法做到全局一键同步更新，展开收起状态、菜单数量、图标、文字内容也很难灵活调整。
大厂设计系统的导航组件完全可以实现这类能力，于是我翻阅大量资料排查问题，最终找到症结：组件修改没有在母组件源文件操作，副本无法同步变更。
这里有一个关键认知：全局同步不等于机械复制粘贴。很多设计师的笨办法就是每一页设计稿重复复制、手动修改导航，一旦后期迭代，维护成本会成倍上涨。除组件同步之外，多端响应式适配也是 B 端导航的高频难题，背后隐藏着大量看不见的维护成本。
本文以 MasterGo 工具为例，围绕 B 端后台侧边导航，完整讲解设计系统组件搭建思路。
二、需求溯源：为什么导航必须做系统化设计
1. 日趋复杂的多端业务场景
如今设备形态越来越丰富，除传统 Web 桌面端，折叠屏手机、平板设备越来越普及。设计师不能只输出单尺寸设计稿，必须重视响应式导航的自动化适配。统一的导航结构、流畅的适配逻辑，直接决定产品整体体验。
Web 端同样对响应式能力有强需求。例如 Arco Design 将侧边菜单宽度限制在 160‑400px，支持拖拽调整导航栏宽度；小红书网页版会根据浏览器视口自动切换布局，宽屏状态侧边导航搭配五列内容，窄屏时切换为底部固定导航。
✨基础概念区分 响应式布局：依靠流式布局 + 媒体查询，一套布局适配全部设备，随屏幕实时调整元素位置、尺寸。常见实现方案：流式布局、Flex 弹性布局、Grid 网格布局、媒体查询。
- 流式布局：使用百分比定义宽度，高度由内容自适应，元素随屏幕按比例缩放。
- Flex 弹性布局：一维布局模型，擅长元素对齐与空间分配；Figma 依靠 Auto Layout、
MasterGo 依靠自动布局换行实现。
- Grid 网格布局：二维布局，划分行列，精准摆放元素，适合复杂页面排版。
- 媒体查询：CSS 能力，根据设备特征加载不同样式规则。
自适应布局：为手机、平板、桌面等不同设备预先设计多套固定布局，检测设备后加载对应版本。实现方案包含固定布局、流体布局、弹性布局、混合布局、栅格系统。
- 固定布局：像素定义固定宽度，特定分辨率下效果最优，常搭配媒体查询适配多设备。
- 流体布局：百分比定义宽度，保持页面相对比例。
- 弹性布局：依靠相对单位，跟随字号缩放元素大小。
- 混合布局：组合多种布局方案，不同区域选用最合适的模式。
- 栅格系统：将页面切分为均等行列网格，约束元素摆放位置。
核心差异总结
- 响应式：一套方案，实时变化，一个布局适配所有屏幕。
- 自适应：多套预设方案，检测切换，不同设备加载独立版本。
2. 动态导航：B 端后台的协同刚需
动态导航，即支持交互反馈与自适应变化的导航组件。针对 B 端侧边导航，普遍面临 4 大痛点：
- 权限管理：B 端角色体系复杂，不同用户可查看菜单不同；角色变更时，侧边栏需要实时渲染对应菜单，保证更新及时、渲染流畅。
- 多级菜单：后台功能繁多，导航经常出现多层级菜单。要做好展开、收起、定位能力，建议前期就采用模块化设计，方便后续新增菜单。
- 交互体验：菜单展开收起的过渡动画需要兼顾流畅度，保证操作响应迅速，不能出现卡顿。
- 主题定制：企业客户常有定制化需求，除颜色、字体，部分场景还需要改动布局、图标，要保证多套主题下导航可用性不受破坏。
2.2 设计走查：避开侧边栏高频坑点
即便使用组件库，交付后依旧需要做设计走查，从四大维度校验样式一致性，修改源组件就可以实现全局同步。B 端侧边导航常见问题：
- 界面布局：空间利用率差，间距失调，多屏幕适配异常。
- 色彩视觉：色彩繁杂杂乱，对比度不足，识别困难，配色违和。
- 交互操作：同类场景交互不统一，操作热区过小，提升用户学习成本。
- 信息呈现：菜单层级太深、分类混乱；重点功能不突出；不同分辨率下内容错位。
三、设计系统核心底层要点
1. 原子化组件设计
原子设计理论将界面拆解为最小不可拆分单元，通过拼装原子得到复杂界面，实现高复用、易维护的组件体系，分为 5 个层级：
- 原子 Atoms：最小基础元素，不可拆分，例如图标、文字、色值。
- 分子 Molecules：原子组合而成，具备独立功能，例如单个导航条目。
- 组织 Organisms：分子 / 原子组合成复杂模块，例如完整登录模块。
- 模板 Templates：搭建页面骨架，只定义结构，不填充业务数据。
- 页面 Pages：模板填入真实业务数据，最终交付给用户的交互页面。
概念辨析 组件化设计：将界面切分为多个独立可复用模块，范围更广。 原子化组件设计：是组件化设计进一步精细化，遵循：单一职责、高内聚低耦合、高复用、可自由组合、易维护、语义化、遵从设计规范。
拓展：原子设计由 Brad Frost 提出，相关参考资源
2. 自动化布局 Auto Layout
自动化布局依靠约束规则自动管控元素尺寸与位置，是实现响应式设计的基础。Figma、MasterGo、即时设计原生支持自动布局；新版 Sketch 也已上线该能力。
嵌套逻辑：先给最小元素设置自动布局，再把多个子组件放进父级自动布局容器，形成层级约束。
实操小技巧：设置约束前，先预判增删内容之后页面期望呈现的效果；也可以先建立固定容器，再开启自动布局。 举个例子：按钮高度固定，宽度跟随文字变化，则设置高度固定，左右内边距定值，水平属性设置为适应内容。页面级自动布局可以套用相同思路。
3. 变体 Variants
变体是同一个基础组件，修改尺寸、状态、颜色等属性生成不同形态，兼顾统一性和场景多样性，是设计系统灵活复用的关键。
通俗理解：基础组件是篮子，变体就是篮子中不同品类的蛋，按需直接取用，无需重复制作。
变体核心作用
- 兼顾统一与灵活：统一底层规范，同时适配多样化业务场景；
- 提升效率：直接调用预设变体，避免重复造轮子。
变体设计原则
- 一致性：全部变体遵守系统间距、圆角、字体等基础规范；
- 可维护性：变体集中在源组件管理，一处修改全局生效；
- 场景导向：只做业务真实需要的变体，拒绝无意义冗余，避免组件库臃肿。
四、标杆拆解：大厂设计系统的导航实现逻辑
1. Arco Design System 2.5.2
官网地址：https://www.arco.design/react/components/menu 组件分类：导航‑Menu 覆盖形态：顶部导航、深色导航、折叠内嵌菜单、悬浮菜单等；侧边菜单宽度区间 160‑400px，支持拖拽调整宽度。
基础原子图标组件 菜单折叠、展开图标，子菜单向下 / 向上 / 向右箭头图标。
变体组件划分 垂直一级菜单项、垂直收起菜单项、垂直分组、垂直二级菜单项；弹出一级 / 分组 / 二级菜单项；总菜单组件，支持切换垂直侧边、悬浮、水平顶部三种类型；每一类变体都可配置选中、悬停、禁用、子菜单展开、文本替换等属性。
设计逻辑 侧边导航由菜单条目、子菜单、图标、文本构成；整体分为展开、折叠两大模式；单条菜单包含默认、悬停、选中、禁用状态；同时支持亮色 / 暗夜主题。
B 端侧边栏大多承载 2‑3 级导航，功能模块多时建议做逻辑分组；一级导航普遍图标 + 文字，二级缩进展示文字，三级导航业务场景较少。菜单条目过多，可借助分割线、留白区分模块，高频重要菜单置顶展示。
2. Ant Design 5.0
导航规范文档：https://ant-design.antgroup.com/docs/spec/navigation-cn 布局组件文档：https://ant-design.antgroup.com/components/layout-cn
设计规范要点 侧边垂直导航扩展性更强，适合层级复杂、高频切换的后台系统；菜单数量大于 6 项优先选用侧栏导航，建议层级控制在 1‑3 级。
- 顶部导航高度公式：48+8n；侧边导航宽度公式：200+8n；
- 导航常用字号 12px、14px；
- 组件 Sider 为侧边栏容器，嵌套在 Layout 布局内，浏览器宽度不足时支持收起。
侧边栏采用左右分栏布局，主导航固定左侧，辅助操作放在顶部。优点是层级展示连贯，方便定位当前页面；缺点是会占用横向内容区域。同时定义完整响应式断点：xs:480px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1600px。
3. 组件命名规范深度解析
合理命名方便团队检索、维护组件库，大型项目建议使用前缀区分组件属性。
3.1 前缀法则
- Base：基础原子组件，无业务逻辑，跨项目通用；
- Web：Web 端专属，适配浏览器交互；
- App：移动端通用；iOS / Android 区分平台特有组件。
3.2 语义化命名模板
命名结构：组件类型_位置层级_特性修饰词
常用关键词
- 组件类型：Nav 导航、Header 头部、Footer 底部、Sidebar 侧边栏、Card 卡片、Modal 弹窗、List 列表、Form 表单、Button 按钮
- 位置层级：Top 顶部、Bottom 底部、Left 左侧、Sub 子级
- 特性修饰：WithSearch 带搜索、Collapsible 可折叠、Responsive 响应式、Fixed 固定
示例： Nav_Side_Collapsible → 可折叠侧边导航 Nav_Top_WithSearch → 带搜索顶部导航
3.3 主流命名格式对比
- 大驼峰 PascalCase：每个单词首字母大写
UserProfile
- 小驼峰 camelCase：首单词小写，后续大写
userName
- 蛇形命名 Snake_case：下划线分隔，全部小写
user_name；全大写蛇形MAX_LENGTH多用于常量。大厂设计规范文档高频使用。
- 烤串命名 Kebab‑case：连字符分隔、全小写
user‑profile，CSS 广泛使用。
- 匈牙利命名法：前缀标记数据类型，现代 UI 组件库已较少使用。
命名四大原则
- 一致性：全局统一分隔符与前缀，同类组件前缀保持一致；
- 最小必要：拒绝冗余词汇，善用行业通用缩写；
- 可搜索性：命名表意清晰，规避 Widget、Util 这类模糊词汇；
- 对齐架构：命名与文件目录结构一一对应。
五、实战落地：从零搭建一套侧边导航设计系统
1. 前期需求分析
- 和业务方沟通，梳理全部业务场景，梳理业务流程，明确导航需要承载的全部模块；
- 梳理不同用户角色权限，明确不同身份可见的菜单范围；
- 基于业务输出的信息，确定导航视觉风格，开始搭建组件库。
2. 组件库分层搭建
2.1 搭建原子属性库
先定义整套系统底层基础 Token：
- 颜色：主色、辅助色、状态色、文本色，完善色阶体系，做好语义化 Token 命名；
- 字体：字体族、字重、字号、行高；
- 阴影：弹窗、浮层所需阴影参数；
- 圆角：按钮、卡片统一圆角，嵌套组件遵循同心圆原则；
- 图标库：统一线条粗细、视觉重量，保证识别性；
- 交互状态：定义默认、悬停、点击、选中、禁用反馈样式；
- 布局间距：全局间距规范，统一页面留白逻辑。
2.2 拼装分子组件
基于原子，组合出导航完整模块：
① 基础导航组件
- 导航条目 Navigation Item：核心单元，图标 + 文字；状态覆盖默认、hover、点击、激活、禁用。
- 分组标题 Group Title：对菜单分类，仅做视觉划分，菜单数量少时可以省略。
- 折叠展开按钮：控制子菜单分组的收起展开。
② 辅助功能组件
- 导航搜索框：菜单数量庞大时，快速检索菜单；
- 用户信息区：放置头像、用户名，下拉承载个人中心、退出登录；
- 快捷操作按钮：高频功能直达入口。
③ 交互状态组件
- 分隔线 Divider：模块分割；
- 徽章 Badge：未读数量、消息红点；
- Loading 骨架：菜单异步加载时占位。
④ 响应式适配组件
- 侧边栏切换按钮（汉堡按钮）：窄屏、移动端唤起抽屉导航；
- 响应式折叠菜单：视口变小时自动转为抽屉、下拉。
2.3 构建多套响应式模板
按设备尺寸划分模板
- 桌面端 ≥1024px｜完整展示模式 固定 / 可折叠侧边栏，完整展示图标文字分组；支持手动折叠为纯图标模式；hover 唤出子菜单。
- 平板端 768‑1023px｜精简模式 缩小侧边栏，隐藏次要分组标题；子菜单默认收起，点击父级展开；支持手势呼出收起侧边栏。
- 移动端 ≤767px｜抽屉 / 底部导航 默认隐藏侧边栏，点击汉堡按钮唤起抽屉弹窗；也可直接替换为底部 Tab 导航；抽屉宽度建议占屏幕 80%，增加关闭按钮，优化触控热区。
按交互逻辑划分模板
- 固定‑折叠切换模板：适合后台管理系统；大屏完整侧边栏，中屏折叠为图标，小屏切换抽屉。
- 自适应宽度模板：适合文档、博客类产品；导航栏随视口连续缩放，空间不足隐藏文字保留图标。
- 混合导航模板：复杂 CRM、电商后台；桌面：左侧侧边栏 + 顶部导航；平板：可收起侧边栏 + 底部高频 Tab；移动端抽屉 + 底部 Tab 联动。
响应式模板关键要点
- 功能优先级：移动端优先保留高频核心功能，次要入口收拢至「更多」；
- 交互一致性：跨设备激活态、点击反馈逻辑保持统一，降低用户学习成本；
- 过渡动画：展开收起增加平滑过渡，避免生硬跳转。
六、结语
这篇笔记前后历时两个月完成，整理资料过程中了解到 Brad Frost 提出的亚原子设计（亚原子语义 Token），后续还会继续深入学习研究。 导航组件体系庞大，仍有不少知识点有待实践沉淀。
转载：站酷
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
