第33课：游戏屏幕流程
Learning Objectives
- 理解Screen Flow（屏幕流） 在GDD中的重要性及其对开发团队的价值
- 掌握Sticky Notes Screen Flow Method（便签屏幕流方法） 的具体操作步骤
- 学会在Figma中创建屏幕流图表并将其集成到文档中
- 理解屏幕流与Notion动态集成的优势
Core Idea
屏幕流是GDD中最容易被忽视但却最能为团队节省时间的部分之一。简单的屏幕流（仅列出屏幕名称并用箭头连接）对团队成员毫无用处。正确的屏幕流需要列出每个屏幕上的所有元素和交互可能性，让UI/UX、代码和艺术团队能够立即获得可操作的信息。
便签屏幕流方法的核心思路是将每个屏幕视为一张便签卡片，列出上面出现的所有元素，使用不同颜色区分不同类型的界面：
- 主菜单屏幕（一种颜色）
- 游戏内屏幕（另一种颜色）
- 模态框或弹出窗口（另一种颜色）
Key Insight
每个屏幕都应列出按钮、功能、HUD等所有内容，以及在屏幕之间移动的方式。例如，切换屏幕时在哪里需要确认模态框？屏幕流是GDD中最无趣的部分，但它可以节省大量时间和精力。
Worked Example
Figma中创建屏幕流的步骤：
- 准备素材：收集游戏的屏幕截图或设计稿
- 定义卡片类型：为不同屏幕类型分配颜色——主菜单使用一种颜色，游戏界面使用另一种，模态框和弹出窗口使用第三种
- 创建便签卡片：使用类似索引卡的样式（顶部彩色部分，其余白色部分），在卡片上列出该屏幕的所有元素和交互点
- 连接屏幕：使用箭头表示屏幕之间的流转关系，可为箭头设置条件（如”如果找到匹配”）
- 使用标签代替箭头：在屏幕流复杂时，使用标签和编号代替大量箭头，保持图表清晰
避免重复信息：屏幕流中不需要列出每个选项的详细机制——这些应该在GDD的其他部分描述。屏幕流的重点是展示屏幕间的流转和每个屏幕上的交互点。
IMPORTANT
将屏幕流集成到文档中有两种方式：
- 截图方式：在Figma中将所有屏幕放入一个框架，复制为PNG并粘贴到文档中。缺点是每次更新都需要重新截图
- 链接方式：直接添加Figma链接。对于Google Docs体验一般，但Notion与Figma有更好的集成——粘贴Figma框架链接后选择”粘贴为预览”，每次在Figma中更新后只需在Notion中重新加载预览即可实时更新
Practice
Self-check
你正在设计一款手机休闲游戏的GDD。游戏流程为：启动画面 → 主菜单 → 关卡选择 → 游戏关卡 → 结算画面（胜利/失败）→ 返回主菜单。请使用本课学习的便签屏幕流方法，描述你会在Figma中如何创建这个屏幕流，并说明每个屏幕的卡片上至少需要列出哪些元素。
Reveal answer
Figma中的屏幕流设计方案：
颜色分类：
- 紫色：系统屏幕（启动画面、主菜单、关卡选择、结算画面）
- 绿色：游戏内屏幕（游戏关卡）
- 黄色：模态框/弹出窗口（如设置、暂停、确认退出）
各个屏幕卡片的元素列表：
-
启动画面：游戏Logo、加载进度条、版本号、“按任意键开始”提示文字
-
主菜单：开始游戏按钮、设置按钮、成就入口、商店入口、玩家等级/头像显示
-
关卡选择：关卡列表（1-1, 1-2…）、每关星级显示、锁定/解锁状态、返回主菜单按钮
-
游戏关卡：计时器、分数显示、操作控件（如点击/滑动区域）、暂停按钮、道具栏、生命值
-
结算画面（胜利）：过关提示、获得的星星数、下一关按钮、重玩按钮、返回关卡选择按钮
-
结算画面（失败）：失败提示、重试按钮、使用道具继续按钮、返回关卡选择按钮
连接关系：
- 启动画面 →（自动过渡）→ 主菜单
- 主菜单 → 关卡选择 → 游戏关卡
- 游戏关卡 →（胜利条件）→ 结算胜利
- 游戏关卡 →（失败条件）→ 结算失败
- 结算画面（胜利/失败）→ 返回主菜单或关卡选择
条件标注：在游戏关卡的箭头上标注触发条件，如”通关分数 >= 目标分数 → 胜利”和”生命值 == 0 → 失败”
Next Step
Continue with the next lesson or complete the review task above before moving on.