4.1 KiB
4.1 KiB
天书 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% 屏幕 |
"在游戏里，每一个像素都是借来的。从画面借的，迟早要还。" —— 佚名