121 lines
3.5 KiB
Markdown
121 lines
3.5 KiB
Markdown
# 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): 初始化模板
|