# 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 | 初始创建 | 陆怀瑾 |