跳到主要内容

页面流转与浮层

原型把“点击后去哪里”保存在设计中。先区分触发、动作和动画,再连接流程。

三个层次​

层次例子回答的问题
TriggerOn click、After delay何时发生
ActionNavigate to、Open overlay、Change to发生什么
TransitionInstant、Dissolve、Smart Animate如何过渡

Smart Animate 不是第四种页面动作。先确定行为,再挑过渡;过渡再漂亮也不能修正错误的目标。

本案例的基本路线​

大厅 → 选关 → 游戏 → 成功结算 → 下一关 / 重置
├→ 暂停浮层 → 关闭浮层,返回原游戏
└→ 失败结算 → 重试 / 大厅
大厅 → 设置 → 大厅

开始游戏和进入选关使用 Navigate to;暂停用 Overlay,关闭时回到原屏;卡牌局部变化用 Change to。暂停的教学画面采用全屏浮层表现,浮层是行为模型,不要求视觉上一定是小弹窗。

连接前先写退出路径​

每个浮层都应说明如何关闭、点击外部是否关闭、是否有背景遮罩、底层是否仍接受输入。关闭暂停用 Close overlay;Back 可能涉及原型历史,不能无条件当成关闭浮层。

给每条主路线设置明确 Flow 起点,方便进入正确场景。本文件有大厅、翻牌反馈、成功重置和失败重试四个起点。它们是教学入口,不代表四个独立游戏。

请读取当前 reactions 和 flows。
将大厅“开始探索”连接到初始游戏,重置交互组件状态。
暂停使用 Overlay,继续按钮使用 Close;保留底层卡牌状态。
每次设置 reactions 前列出将被替换的旧交互。

重置是需要验收的行为​

“再玩一次”连接回初始屏幕时,交互组件可能仍保留之前的状态。检查 Reset component state 或工具对应的 resetInteractiveComponents。关闭暂停则不应错误地重置棋盘。

练习与检查​

翻开一张牌,暂停,再继续,观察状态是否保留;从结算重新开始,观察是否恢复全部卡背。对这两条路径写出相反的重置要求。

依据:原型动作、Overlay、原型状态管理。核查:2026-10-31。