UI 设计、场景设计
设计文件
https://www.xiaopiu.com/web/byId?type=project&id=5e8864cb8ff1cb769ba181e8
设计风格
场景细节仍然可以优化， 偏动画风格 、字体搭配艺术字（功能规格书的样例采用了 心游手绘艺术体 ）
注：由于没有原画师，本软件所有素材资源来源于网络。
用户场景分析(User Analysis)
我们的游戏主题休闲娱乐+编程启蒙，受众可以概括为：
- 经常接触手游的小学生群体
- 对编程有兴趣，希望通过游戏等轻松的方式初步学习编程的群体
- 不懂编程，希望了解编程是什么的群体
下面我们介绍这些典型用户场景：
用户场景：
1.经常接触手游的小学生群体
| 名字 | 小徐 |
|---|---|
| 性别 | 男 |
| 职业 | 小学 6 年级学生 |
| 用户背景 | 能接触到的上网设备只有手机，平时做完功课的闲暇之余常常会玩一些手游打发时间 |
| 用户偏好 | 游戏机制简单，容易上手，但又足够新颖有趣 |
| 用户比例 | 预期游戏玩家的主要群体 |
| 典型场景 | 又到了星期六，我再也不用担心妈妈催我写作业了！悄悄拿起爸妈的手机，咦发现了一个似乎很牛 B 的游戏—“代码召唤”,这"炫酷"的特效，这"精致"的UI，糟了，是心动的感觉 |
2.对编程有兴趣，希望通过游戏初步学习编程的群体
| 名字 | 小刘 |
|---|---|
| 性别 | 男 |
| 用户背景 | 在 IT 行业越来越火的情况下，萌生了学习编程的想法，但又想以轻松一点的方式（比如游戏）入门编程，了解一下编程思想 |
| 用户偏好 | 希望能从游戏中领略编程思想，增进了解，帮助后续的学习 |
| 用户比例 | 预期游戏玩家的次要群体，偏少 |
| 典型场景 | “唉，C 语言看的我头都炸了，这都什么玩意”、“我这些语句不是照着教程一行行敲的吗？为什么报错？什么？少了个分号(头秃)”。饱受入门时各种打击后，小刘决定寻找一种轻松的学习方式，于是某款不知名游戏进入了他的视线~ |
3.不了解编程，希望通过游戏等轻松的方式了解编程是什么的群体
| 名字 | 小陶 |
|---|---|
| 性别 | 女 |
| 用户背景 | 在“编程”一词越来越火的当下，没有上过编程语言课的小陶同学对“编程”充满了大大的好奇，想要通过对轻松的方式了解编程是什么 |
| 用户偏好 | 希望能从游戏中了解编程是怎样一个过程 |
| 用户比例 | 预期游戏玩家的次要群体，偏少 |
| 典型场景 | 自从升上初中以后，小陶发现好几个同学们总爱在课间热火朝天地讨论着一个个她不懂的话题，什么 c 语言、python、java balaba，这个时候，她小小的眼睛里总是充满了大大的疑惑。于是小陶决定到知乎提问：初中生如何轻松地了解编程？于是有人向她推荐了这款游戏，从此，小陶打开了一个新的世界~~ |
欢迎界面
地图界面
游戏界面
暂停界面
合成指南界面
UI 组件表
欢迎界面
| 欢迎界面组件 | 功能 | 测试通过条件 |
|---|---|---|
| 新游戏按钮 | 进入新游戏 | 本地建立一个新游戏存档，跳转到 map 页面 |
| 继续游戏按钮 | 打开旧存档进度 | 跳转到 map 页面，加载本地的游戏进度，包括已过关卡及其得分 |
| 设置按钮 | alhpa 阶段暂无 | alhpa 阶段暂无 |
| 帮助按钮 | alhpa 阶段暂无 | alhpa 阶段暂无 |
| 退出按钮 | 退出游戏 | 点击按钮，退出游戏 |
地图界面
| 地图界面组件 | 功能 | 测试通过条件 |
|---|---|---|
| 选择关卡字样 | 显示“选择关卡”字样 | 正常显示字体 |
| 代表每个关卡的圆点 | 灰色代表锁定的关卡，不可点击；白色代表已经通过的关卡，可以点击重玩所选关卡；橙色代表当前关卡，点击可进入当前关卡 | 正常展现当前游戏的进度：最新的关卡为橙色；灰色关卡不可点击；点击白色和橙色圆点可以进入某一个关卡中 |
| 代表每个关卡得分的星星 | 记录每一关的星星数，并根据星星的数量展示关卡圆点旁边；不可点击 | 正常记录每一关的得分并将合适数量的星星置于旁边 |
| 游戏总进度百分比 | 展示当前游戏进度百分比：按照所有关卡满星星（3 颗/关）计算当前星星总数的占比，数字保留到整数如 12%、57% | 正常展示数字，正确计算游戏进度，并保留整数 |
合成指南界面
| 合成指南界面组件 | 功能 | 测试通过条件 |
|---|---|---|
| 合成指南字样 | 显示“合成指南”字样 | 正常显示字体 |
| 返回按钮 | 点击返回到关卡，并继续游戏进度 | 能够返回关卡，并保留打开 guidance 页面前的游戏进度 |
| 合成公式展示框 | 每个屏幕展示 5-8 个合成公式，支持下拉 | 能够展示合成公式，并可以用右侧活动条下拉 |
| 合成公式 | 展示合成公式，点击某个物品可以跳转到该物品的合成方式（原材料除外） | 正常显示合成公式，并且支持鼠标点击链接跳转 |
暂停组件
注：暂停组件置于游戏界面之上，唤出该组件时游戏界面设置成深色
| 暂停组件 | 功能 | 测试通过条件 |
|---|---|---|
| 暂停字样 | 显示暂停字样 | 正常显示 |
| 目标物品 | 显示目标物品，点击可以打开合成指南，并跳转到的相应位置 | 正常显示和跳转 |
| 从左往右三个星星 | 根据当前的成本，显示星星：如果成本高于某个星星下的数字，则该星星及其右侧的所有星星都无填充；如果成本低于某个星星下的数字，则该星星带上黄色填充 | 根据成本填充星星，正常显示 4 档得分对应的星星 |
| 重新开始按钮 | 关闭任务目标框，同时背景颜色恢复，清除该关卡内所有数据，重新开始关卡 | 关闭任务目标框，完全清空所有数据并重新开始关卡 |
| 菜单按钮 | 清除本关所有数据，返回到欢迎页面 | 清除本关所有数据，返回到欢迎页面 |
| 返回按钮 | 关闭任务目标框，同时背景颜色恢复，返回游戏 | 关闭任务目标框，并能够正常继续游戏 |
场景组件表
游戏界面
默认是编辑状态，可以修改语句；进入执行状态后，不再允许修改语句，直到执行完毕或点击“停止”按钮进入编辑状态。
| 游戏界面组件 | 功能 | 测试通过条件 |
|---|---|---|
| 材料区 | 放置各种材料按钮的区域 | 正常显示，固定最左端 |
| 原材料按钮 | 每种原材料带有一种特定的颜色，表示某种原材料，拖动到工作区中并生成对应的工作区语句 | 支持拖动到工作区中生成对应的工作区语句 |
| 循环按钮 | 拖动到工作区中并生成循环语句，alpha 版不支持嵌套 | 支持拖动到工作区中并生成循环语句 |
| 分支按钮 | 拖动到工作区中并生成分支语句，alpha 版不支持嵌套 | 拖动到工作区中并生成分支语句 |
| 合成按钮 | 拖动到工作区中并生成合成语句，打开合成指南并强制要求选择一种物品作为合成目标 或 拖动到工作区中并生成某种物品的合成语句 | 拖动到工作区中并打开合成指南，必须选择一种合成目标，生成合成语句 或 拖动到工作区中并生成某种物品的合成语句 |
| 工作区 | 放置各种语句的区域；有隐藏的网格（或者槽），语句能够自动吸附到最近的槽中，实现自动整理排列位置的功能 | 正常显示，紧贴材料区右端；能够吸附语句 |
| 语句 | 带有颜色，表示“添加”某种材料到盒子中，支持上下移动调换语句顺序，自动吸附位置；并在后端生成相应的运行逻辑 | 支持上下移动以排版，后端能将工作区所有的语句进行编译，得到材料加入的流程 |
| 循环语句 | 是一个C形的块，支持在其中加入至多三条语句；头部可以设置循环次数为一个[0, 10]的整数 | 能够拖动至多三条语句加入块中；可设置循环次数 |
| 分支语句 | 是一个E形的块，支持在每一层中加入至多三条语句；头部可以以当前盒子颜色设置分支条件，不支持 else if | 能够拖动至多三条语句加入 E 型块的每一层中 |
| 合成语句 | 表示执行该语句时，检查当前盒子内物品：满足合成条件，展示转动齿轮 UI，显示合成成功，删去原料，新物品落入盒子中；不满足合成条件，停止合成，提示“原料不足，合成失败”，按钮变成绿色带箭头的环状（参考“开始按钮”） | 转动齿轮 UI 正常，能够检测合成条件满足与否，合成成功时生成新物品落入盒中，失败时停止执行 |
| 开始按钮 | 点击按钮，进入执行状态，按钮变成红色方形“停止”按钮，再次按下即可停止执行状态，按钮变成绿色带箭头的环状；再次点击返回编辑状态；根据工作区语句顺序依次将原料加入盒子中 | 能够切换状态，并且在执行状态不允许修改语句 |
| 盒子 | 带颜色静态容器或带指示灯容器 | 正常显示，并根据投入的原料更换其颜色或颜色指示灯 |
| 机械抓手 | 从上往下把原料加入盒子中 | 正常显示动画，将原料按照工作区语句顺序加入盒子中 |
| 原料 | 被机械抓手从上往下放入盒子中 | 从最顶端出现，被抓到盒子中然后从视野中消失 |
| 合成进度条 | 展示当前盒子内物品和成功状态盒子内物品的相似度（待定） | 随着合成的不断进行不断推进直到 100%，合成成功 |
| 合成成本 | 在执行时，不断对已用材料加和得到当前合成成本，用于计算最后得分 | 自动更新 |
| 合成指南 | 点击合成指南，打开合成指南界面 | 正常打开合成指南页面 |
| 任务目标 | 点击任务目标，打开任务目标窗口，同时背景颜色加深 | 正常打开任务目标窗口，同时背景颜色加深 |
| 盒子物品框 | 显示当前盒子内拥有的物品（或材料）及其数量 | 能够随着合成动态更新 |
| 盒子物品 | 盒子内某一物品（或材料）及其数量 | 能够随着合成动态更新 |
| 箭头 | 执行状态下显示当前执行语句，并且有一定带动画的强调效果 | 能够随着执行状态而移动；有强调动画 |
| 暂停框 | 暂停框，显示该关的目标，具体组件参考上文“暂停”部分 | 具体验收参考上文“暂停”部分 |
合成公式表
基本组件（可作为原料给出）
电路板
水晶
外壳
电动机
电池
屏幕
高级组件及其合成公式（可作为原料给出）
高级电路板=电路板+水晶
大屏幕=屏幕*4
机械模块=电动机+电池+电路板
大件物品及其合成公式
水壶=外壳+电路板+水晶
风扇=外壳*3+电动机
手机=高级电路板*2+电池+屏幕
电脑=高级电路板4+电池2+大屏幕
冰箱=水晶4+外壳3+高级电路板+机械模块+屏幕
微波炉=水晶*8+外壳+高级电路板
吸尘器=外壳+电路板+机械模块*2