106 lines
4.1 KiB
Markdown
106 lines
4.1 KiB
Markdown
# 天书 TianShu — UI 设计原则
|
||
|
||
> "画面为王，UI 为仆。让玩家忘记这是软件，记住这是故事。"
|
||
|
||
---
|
||
|
||
## 1. 内容优先（Content First）
|
||
|
||
画面是主角，UI 是配角。
|
||
|
||
| 规则 | 实践 | 反例 |
|
||
|------|------|------|
|
||
| **画面满铺** | 视频/流程图占屏幕 100%，UI 叠加不遮挡 | 在画面四周加边框或 logo |
|
||
| **信息分区** | 核心内容 → 满铺；操作按钮 → 边角；统计数据 → 底栏 | 面板居中、内容四周留大片空白 |
|
||
| **面积比** | 画面 : 底栏 : 边角按钮 ≈ 8 : 1.5 : 0.5 | 一个面板占 60% 屏幕面积 |
|
||
|
||
---
|
||
|
||
## 2. 最少 UI（Minimal UI）
|
||
|
||
能删的按钮一定要删。
|
||
|
||
| 规则 | 实践 | 反例 |
|
||
|------|------|------|
|
||
| **一个操作一个入口** | 关闭弹窗只用 `← 返回` 或 Esc，不加 ✕ | 同时有返回按钮 + ✕ 按钮 + 点击遮罩关闭 |
|
||
| **不对称优于对称** | `[← 返回] 标题______________` | `[返回]___标题居中___[✕]` |
|
||
| **物理优先** | 用 Esc / 点击遮罩 / 滚轮操作，减少可见按钮 | 面板底部放一排操作按钮 |
|
||
| **选项 ≤ 3 个** | 任何时刻最多 3 个选择（参考 Netflix Bandersnatch） | 满屏 6-8 个选项 |
|
||
|
||
---
|
||
|
||
## 3. 一致性（Consistency）
|
||
|
||
同一件事，同一个地方，同一种颜色。
|
||
|
||
| 规则 | 实践 |
|
||
|------|------|
|
||
| **同功能同位置** | 所有弹窗关闭方式统一为左上角 `← 返回` |
|
||
| **同操作同交互** | 卡片 hover 缩放/发光效果全项目统一 |
|
||
| **颜色语义统一** | `#c9a84c` 金色 = 已完成/已解锁/可交互；灰色 = 不可用/未解锁 |
|
||
|
||
---
|
||
|
||
## 4. 渐进展示（Progressive Disclosure）
|
||
|
||
信息不是一次性堆满，而是层层展开。
|
||
|
||
| 规则 | 实践 | 反例 |
|
||
|------|------|------|
|
||
| **先见森林后见树木** | 进入页面先看到核心（流程图），滚到底才现进度条，点击才展开详情 | StoryGallery 一屏展示全部信息 |
|
||
| **折叠优先** | 次要数据收进折叠区域，点击展开 | 平铺所有统计数据 |
|
||
| **面板宽度 ≤ 60%** | 除流程图满铺外，其他面板不超过屏幕 60% | 全宽半透明面板 |
|
||
|
||
---
|
||
|
||
## 5. 氛围不打断（Immersive）
|
||
|
||
过渡要柔，打断要轻。
|
||
|
||
| 规则 | 实践 | 反例 |
|
||
|------|------|------|
|
||
| **背景不空** | 弹窗背景用半透明模糊，让上一层内容微微可见 | 纯 `#000` 或 `rgba(0,0,0,0.9)` 遮罩 |
|
||
| **过渡不硬切** | 面板显隐用 `opacity 0.2-0.3s` 淡出淡入 | `v-if` 瞬间闪现/消失 |
|
||
| **光标不突兀** | 无操作 3s 后 `cursor: none`，动则恢复 | 播放全程显示鼠标指针 |
|
||
|
||
---
|
||
|
||
## 6. 反馈灵敏（Responsive）
|
||
|
||
每个操作都要有响应，每个状态都要有表达。
|
||
|
||
| 规则 | 实践 | 反例 |
|
||
|------|------|------|
|
||
| **点击三态** | hover（色变/缩放）→ active（按下）→ focus-visible（键盘焦点） | 只有 flat 按钮无 hover |
|
||
| **加载有状态** | 异步操作（加载/存档）有转圈或进度条 | 静默等待无反馈 |
|
||
| **错误有提示** | toast 短暂浮现提示，不阻断操作 | `alert()` 弹窗 |
|
||
|
||
---
|
||
|
||
## 设计检查清单
|
||
|
||
每次新增 UI 或修改布局时，逐条自查：
|
||
|
||
- [ ] 主要信息是否占据最大面积？（内容优先 #1）
|
||
- [ ] 每个按钮都是必需的吗？有没有可以删的？（最少 UI #2）
|
||
- [ ] 操作入口是否唯一？关闭方式是否与项目其他位置一致？（一致性 #3）
|
||
- [ ] 信息是否分层展示而非一屏堆满？（渐进展示 #4）
|
||
- [ ] 背景有没有透出底层内容？过渡是否柔和？（氛围 #5）
|
||
- [ ] hover / active / focus-visible 三态是否齐全？加载失败有没有提示？（反馈 #6）
|
||
|
||
---
|
||
|
||
## 业界参考
|
||
|
||
| 来源 | 精髓 |
|
||
|------|------|
|
||
| **Netflix Bandersnatch** | 选项 ≤3 个、10 秒自动选择、播放时零 HUD |
|
||
| **Apple tvOS HIG** | Focus Engine、声音反馈、间接操控 |
|
||
| **PlayStation UX** | Safe Area（95% 区域）、字体 ≥ 24px |
|
||
| **Quantic Dream (Detroit)** | 叙境式 UI（毛玻璃 + 电影感）、Diegetic UI |
|
||
| **Supergiant (Hades)** | 极简 HUD、对话面板 ≤ 40% 屏幕 |
|
||
|
||
---
|
||
|
||
> "在游戏里，每一个像素都是借来的。从画面借的，迟早要还。" —— 佚名
|