# UI 设计文档

**文档版本**: 1.0.0
**最后更新**: 2026-04-19
**设计系统**: Apple 风格（详见 `./设计-Apple风格.md`）

---

## 模块索引

> 本文档为 UI 设计主索引，各模块详细设计已拆分为独立文件。

| 模块 | 文件 | 界面 | 行数 |
|------|------|------|------|
| <!-- 模块1 --> | [设计-UI-<!-- 子文件名 -->.md](./设计-UI-<!-- 子文件名 -->.md) | <!-- 界面范围 --> | <!-- 行数 --> |
| <!-- 模块2 --> | [设计-UI-<!-- 子文件名 -->.md](./设计-UI-<!-- 子文件名 -->.md) | <!-- 界面范围 --> | <!-- 行数 --> |

### 界面索引

| 界面 | 名称 | 所属模块 | 路径 |
|------|------|----------|------|
| <!-- N --> | <!-- 名称 --> | [<!-- 模块 -->](./设计-UI-<!-- 子文件名 -->.md) | `<!-- 路径 -->` |

### 开发加载指引

| 开发场景 | 加载文件 |
|----------|----------|
| <!-- 场景1 --> | `05-设计-UI.md`（设计系统摘要）+ `设计-UI-<!-- 子文件名 -->.md` |
| <!-- 场景2 --> | `05-设计-UI.md`（设计系统摘要）+ `设计-UI-<!-- 子文件名 -->.md` |

---

## 设计系统摘要

> 以下为各模块共用的设计令牌摘要，完整设计系统见 `./设计-Apple风格.md`。

### 色彩规范

| 用途 | 色值 | 参考 |
|------|------|------|
| 纯黑背景 | `#000000` | 设计-Apple风格.md §2 |
| 浅灰背景 | `#f5f5f7` | 设计-Apple风格.md §2 |
| 主要文字（浅色背景） | `#1d1d1f` | 设计-Apple风格.md §2 |
| 次要文字 | `rgba(0,0,0,0.8)` | 设计-Apple风格.md §2 |
| 交互色（Apple 蓝） | `#0071e3` | 设计-Apple风格.md §2 |
| 链接色（浅色背景） | `#0066cc` | 设计-Apple风格.md §2 |
| 链接色（深色背景） | `#2997ff` | 设计-Apple风格.md §2 |
| 错误色 | `#ff3b30` | Apple 系统色 |
| 警告色 | `#ff9500` | Apple 系统色 |
| 成功色 | `#34c759` | Apple 系统色 |

### 排版规范

| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 |
|------|------|------|------|------|--------|
| 展示级标题 | Inter Display | 56px | 600 | 1.07 | -0.28px |
| 区块标题 | Inter Display | 40px | 600 | 1.10 | normal |
| 卡片标题 | Inter Display | 28px | 400 | 1.14 | 0.196px |
| 正文 | Inter | 17px | 400 | 1.47 | -0.374px |
| 按钮 | Inter | 17px | 400 | 2.41 | normal |
| 说明文字 | Inter | 14px | 400 | 1.29 | -0.224px |

### 组件规范

| 组件 | 规范 |
|------|------|
| 主 CTA 按钮 | 8px 圆角，`#0071e3` 背景，内边距 8px 15px |
| 胶囊链接 | 980px 圆角，透明背景，描边 |
| 输入框 | 11px 圆角，`#fafafc` 背景 |
| 卡片阴影 | `rgba(0,0,0,0.22) 3px 5px 30px` |
| 导航栏 | `rgba(0,0,0,0.8)` + `backdrop-filter: saturate(180%) blur(20px)` |

### 间距体系

- 基准单位：8px
- 页面边距：24px
- 卡片间距：16px
- 元素间距：8px

---

## 附录

### 尺寸规范汇总

| 组件/元素 | 尺寸 |
|-----------|------|
| 最小窗口宽度 | 800px |
| 侧边栏宽度 | 240px |
| 状态栏高度 | 32px |
| 导航栏高度 | 48px |
| 对话框宽度 | 400px |
| 按钮高度 | 36px |
| 输入框高度 | 36px |
| 基准间距 | 8px |

### 图标规范

| 位置 | 尺寸 |
|------|------|
| Logo | 64px |
| 卡片图标 | 24px |
| 按钮图标 | 16px |
| 状态图标 | 12px |
| 导航图标 | 20px |

### 动画规范

| 动画 | 时长 | 缓动 |
|------|------|------|
| 页面切换 | 300ms | ease-in-out |
| 对话框 | 250ms | ease-out |
| Toast | 300ms | ease-in-out |
| 加载旋转 | 1s | linear |
| 进度条 | 实时 | linear |

---

**版本历史**:
- v1.0.0 (2026-04-19): 初始化模板