UI 设计文档
文档版本: 1.0.0
最后更新: 2026-04-19
设计系统: Apple 风格（详见 ./设计-Apple风格.md）
模块索引
本文档为 UI 设计主索引，各模块详细设计已拆分为独立文件。
| 模块 |
文件 |
界面 |
行数 |
|
[设计-UI-.md](./设计-UI-.md) |
|
|
|
[设计-UI-.md](./设计-UI-.md) |
|
|
界面索引
| 界面 |
名称 |
所属模块 |
路径 |
|
|
[](./设计-UI-.md) |
<!-- 路径 --> |
开发加载指引
| 开发场景 |
加载文件 |
|
05-设计-UI.md（设计系统摘要）+ 设计-UI-<!-- 子文件名 -->.md |
|
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): 初始化模板
