在企业级后台系统中，设计规范更注重功能完整性、操作效率与视觉一致性。相比 C 端强调交互体验和动效表现，B 端更关注数据呈现的清晰度、控件的一致性以及长时间使用的舒适性。
以下是整理的偏B端应用设计的一些设计规范。
一、组件库设计原则
-
统一性优先
所有 UI 组件保持一致的样式风格和交互方式，降低学习成本。
-
可维护性强
组件逻辑清晰，对外暴露的 props 明确，便于后期迭代和维护。
-
业务导向
围绕常见的企业场景封装组件，如表格、表单、筛选器、弹窗等。
-
平台适配
支持主流浏览器及分辨率适配，重点关注桌面端体验。
二、常用控件风格定义
| 控件类型 | 规范说明 |
|---|---|
| 按钮 | 主操作按钮使用蓝色系，辅助按钮使用灰白色或边框形式；禁用状态统一为浅灰底色 |
| 表格 | 默认展示固定列头，支持排序、分页、多选、展开行等功能；斑马纹提升可读性 |
| 输入控件 | Input、Select、DatePicker 等统一高度、边距、错误提示方式 |
| 弹窗 | Modal 使用统一标题区、操作区布局，遮罩层点击默认不关闭 |
| 图标 | 使用图标字体或 SVG 集合，命名统一，如 icon-add, icon-edit |
三、颜色体系与字体系统
主色调
- 以蓝灰为主，突出操作项；
- 辅助色用于区分状态（绿表示成功、红表示失败、黄表示警告）
背景色
- 整体采用偏白或浅灰底色，减少视觉疲劳
文字颜色
- 标题：#333
- 正文：#666
- 辅助信息：#999
字体大小
- 标题：16px - 20px
- 内容：14px
- 小字：12px
字体家族
- 推荐使用系统默认字体（Windows/OSX），也可使用思源黑体、Roboto 等无衬线字体
四、间距与排版规则
- 使用统一的垂直间距单位，如 8px、16px、24px；
- 所有组件内部留白统一，避免出现错位感；
- 表单元素之间保持相同间距，对齐方式统一为左对齐；
- 列表项与卡片之间保留适当空白，增强呼吸感；
五、图标与状态标识
- 所有图标应来自同一套图库，如 Ant Design Icons 或 Element Plus Icons；
- 状态图标统一语义，例如：
- ✅ 成功：绿色 ✔
- ⚠️ 警告：黄色 ⚠️
- ❌ 错误：红色 ✘
- 🕒 加载：旋转动画或 loading 文案
六、视觉一致性标准
控件样式统一
- 所有按钮、输入框、下拉菜单保持一致圆角、边框、阴影；
- 不同状态下（hover/focus/disabled）提供明确反馈。
表单设计规范
- label 对齐方式统一（推荐左对齐）；
- 必填项使用红色星号标注；
- 错误提示统一位置（下方或右侧）；
- 表单项宽度建议为 100% 宽度，适应响应式布局。
空状态与加载反馈
- 空数据时显示简洁提示 + 可操作按钮；
- 加载过程中使用骨架屏或 loading 动画；
- 出错时提示语句简洁明了，如"网络异常，请刷新重试"。
权限相关标识
- 权限受限的按钮或区域加灰处理，并给出提示文案；
- 某些操作需二次确认，防止误操作。
七、文档与工具支持
- 提供组件使用文档，包含 props、示例代码、注意事项；
- 开发人员可基于组件库快速构建页面，减少重复开发；
- 支持主题定制，通过 SCSS 变量或 CSS Variables 修改全局样式；
- 推荐使用 Storybook 或 VitePress 构建组件演示站点，方便查看效果；
- 所有组件都应附带测试用例，确保稳定性。