页面流转与浮层
原型把“点击后去哪里”保存在设计中。先区分触发、动作和动画,再连接流程。
三个层次
| 层次 | 例子 | 回答的问题 |
|---|---|---|
| Trigger | On click、After delay | 何时发生 |
| Action | Navigate to、Open overlay、Change to | 发生什么 |
| Transition | Instant、Dissolve、Smart Animate | 如何过渡 |
Smart Animate 不是第四种页面动作。先确定行为,再挑过渡;过渡再漂亮也不能修正错误的目标。
本案例的基本路线
大厅 → 选关 → 游戏 → 成功结算 → 下一关 / 重置
├→ 暂停浮层 → 关闭浮层,返回原游戏
└→ 失败结算 → 重试 / 大厅
大厅 → 设置 → 大厅
开始游戏和进入选关使用 Navigate to;暂停用 Overlay,关闭时回到原屏;卡牌局部变化用 Change to。暂停的教学画面采用全屏浮层表现,浮层是行为模型,不要求视觉上一定是小弹窗。
连接前先写退出路径
每个浮层都应说明如何关闭、点击外部是否关闭、是否有背景遮罩、底层是否仍接受输入。关闭暂停用 Close overlay;Back 可能涉及原型历史,不能无条件当成关闭浮层。
给每条主路线设置明确 Flow 起点,方便进入正确场景。本文件有大厅、翻牌反馈、成功重置和失败重试四个起点。它们是教学入口,不代表四个独立游戏。
请读取当前 reactions 和 flows。
将大厅“开始探索”连接到初始游戏,重置交互组件状态。
暂停使用 Overlay,继续按钮使用 Close;保留底层卡牌状态。
每次设置 reactions 前列出将被替换的旧交互。
重置是需要验收的行为
“再玩一次”连接回初始屏幕时,交互组件可能仍保留之前的状态。检查 Reset component state 或工具对应的 resetInteractiveComponents。关闭暂停则不应错误地重置棋盘。
练习与检查
翻开一张牌,暂停,再继续,观察状态是否保留;从结算重新开始,观察是否恢复全部卡背。对这两条路径写出相反的重置要求。