跳到主要内容

大厅、选关与游戏界面

这一章把需求落到屏幕。先保证每屏有明确任务,再安排视觉层级和复用。

大厅:让玩家开始​

大厅包含游戏名称、简短引导、主题插画、主操作和选关。开始探索使用强调色;选关降低视觉权重。设置保留可触达入口,但不与主任务争夺第一注意力。

真实 Figma 大厅界面

结构上,屏幕用纵向 Auto Layout,Header 横向分配标题与设置;主题插画由可编辑的椭圆和轨道组成。背景直接用 Frame 填充。

选关:表达可进入与锁定​

关卡入口按行组织。当前教学第 01 关可以进入;其他关卡展示解锁状态的设计意图。锁定原因通过文字表达,不能只依靠灰色。

真实 Figma 选关界面

关卡数量变化时,需要确定滚动、分页或分区规则。本案例先固定九个入口,不宣称已经实现远程关卡数据或存档。

游戏:给棋盘最多的有效注意力​

Header 提供关卡和暂停;Status 显示时间与进度;Board 采用三列四行;底部保留玩法提示和教学范围说明。

真实 Figma 游戏界面

卡牌容器宽 98、高 112。棋盘通过四行水平容器组织;行间距绑定设计变量。暂停文字放在 44×44 的交互容器中,区分文字的视觉面积与点击区域。这个尺寸是案例选择,仍需真机判断触达体验。

暂停、设置与结算​

暂停优先展示继续与返回大厅;设置页按音乐、音效、震动分组,当前只是界面样例。成功与失败分别给出下一步,示例成绩和奖励不是后台事实。

真实 Figma 成功结算界面

让 AI 分屏推进​

本轮只完成 Game,不修改大厅和组件定义。
读取 Header/Status/Board 的结构与引用。
按 R03 检查棋盘完整、数字可读、暂停可触达。
保留教学范围提示。输出结构差异和截图,再检查窄屏。

练习与检查​

把用时改为 99:59,把关卡名改为较长文字。检查是否遮挡暂停或改变棋盘位置。随后恢复基准数据,并保留检查结论。