1.1 设计规范

在企业级后台系统中，设计规范更注重功能完整性、操作效率与视觉一致性。相比 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 构建组件演示站点，方便查看效果；
• 所有组件都应附带测试用例，确保稳定性。