UI 设计规范
元数据
| 属性 |
值 |
| 领域 |
设计 |
| 责任人 |
苏绘锦 (designer) |
| 版本 |
v1.0 |
| 创建日期 |
2026-06-22 |
| 标签 |
UI, 设计规范, 组件, 视觉 |
概述
定义统一的 UI 设计标准，涵盖色彩、字体、间距、组件等基础规范，确保产品视觉一致性，降低设计-开发沟通成本。
正文
一、色彩系统
| 用途 |
色值 |
说明 |
| 主色 Primary |
#1677FF |
按钮、链接、选中态 |
| 成功 Success |
#52C41A |
成功提示、通过状态 |
| 警告 Warning |
#FAAD14 |
警告提示 |
| 错误 Error |
#FF4D4F |
错误提示、删除操作 |
| 文字主色 |
#1F1F1F |
标题、正文 |
| 文字次色 |
#666666 |
辅助说明 |
| 文字禁用 |
#BFBFBF |
禁用/占位符 |
| 边框 |
#D9D9D9 |
分割线、输入框边框 |
| 背景 |
#F5F5F5 |
页面底色 |
二、字体规范
| 层级 |
字号 |
行高 |
字重 |
用途 |
| H1 |
24px |
32px |
600 |
页面主标题 |
| H2 |
20px |
28px |
600 |
区块标题 |
| H3 |
16px |
24px |
500 |
小标题 |
| Body |
14px |
22px |
400 |
正文 |
| Caption |
12px |
18px |
400 |
辅助/说明文字 |
默认字体：-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif
三、间距体系
采用 4px 为基础单位的 8 点栅格：
| Token |
值 |
用途 |
| xs |
4px |
紧凑间距 |
| sm |
8px |
元素内间距 |
| md |
16px |
组件间距 |
| lg |
24px |
区块间距 |
| xl |
32px |
大区块分隔 |
| xxl |
48px |
页面级分隔 |
四、圆角与阴影
| 组件 |
圆角 |
阴影 |
| 卡片 |
8px |
0 2px 8px rgba(0,0,0,0.08) |
| 弹窗 |
12px |
0 6px 16px rgba(0,0,0,0.12) |
| 按钮 |
6px |
无（默认）/ hover 时微阴影 |
| 输入框 |
6px |
无（默认）/ focus 时外发光 |
五、响应式断点
| 断点 |
最小宽度 |
适用设备 |
| xs |
< 576px |
手机竖屏 |
| sm |
≥ 576px |
手机横屏 |
| md |
≥ 768px |
平板 |
| lg |
≥ 992px |
小桌面 |
| xl |
≥ 1200px |
大桌面 |
| xxl |
≥ 1600px |
超大屏 |
相关条目
变更记录
| 日期 |
版本 |
变更说明 |
变更人 |
| 2026-06-22 |
v1.0 |
初始创建 |
陆怀瑾 |
陆怀瑾 (COO)