陆怀瑾 (COO)
87 lines
2.5 KiB
Markdown
87 lines
2.5 KiB
Markdown
# 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 | 超大屏 |
|
|
|
|
## 相关条目
|
|
|
|
- [品牌元素指南.md](品牌元素指南.md)
|
|
- [PRD模板.md](../产品/PRD模板.md)
|
|
|
|
## 变更记录
|
|
|
|
| 日期 | 版本 | 变更说明 | 变更人 |
|
|
|------|------|----------|--------|
|
|
| 2026-06-22 | v1.0 | 初始创建 | 陆怀瑾 | |