UI design, scene design
Designing Documents
https://www.xiaopiu.com/web/byId?type=project&id=5e8864cb8ff1cb769ba181e8
design style
Scene details can still be optimized partial animation style , font with (functional specifications of the sample using WordArt heart painted artistic tour )
Note: In the absence of the original artist, all the software assets from the network.
Scene Analysis user (User Analysis)
Our game theme of leisure and entertainment + programming of the Enlightenment, the audience can be summarized as:
- Regular contact with hand tour groups of pupils
- Interest programming, hoping to learn programming preliminary group games through the easy way
- Do not understand programming, programming would like to know what groups
Here we introduce these typical user scenarios:
User scenarios:
1. regular contact with hand tour groups of pupils
| first name | Xiao Xu |
|---|---|
| gender | male |
| Occupation | Grade 6 students |
| User background | Have access to the Internet phone device only, usually done homework spare time often play some mobile games to pass the time |
| User preferences | Game mechanism is simple, easy to use, but new enough interesting |
| The proportion of users | Expected gamers major groups |
| Typical scene | Went to the Saturday, I no longer have to worry about my mother urged me to the homework! Mom and Dad pick up the phone quietly, Huh discovered a seemingly cattle B game - "Code calls" this "cool" special effects, this "delicate," the UI, worse, is the feeling of heart |
2. are interested in programming, hoping to learn programming through the preliminary group game
| first name | Liu |
|---|---|
| gender | male |
| User background | In the IT industry, more and more fire, the initiation of the idea of learning to program, but want to ease a little way (such as games) introductory programming, learn about programming ideas |
| User preferences | It would be to enjoy the game programming ideas, enhance understanding and help follow-up study |
| The proportion of users | Expected gamers minor groups, too few |
| Typical scene | "Well, C language to see my head explode, this is what the hell," "I'm not shining these statements line by line tutorial knock it? Why error? What? Less a semicolon (bald head)." After suffering from a variety of combat when started, Liu decided to look for an easy way to learn, so a section unknown games into his line of sight - |
3. do not understand the program, we hope to ease the way games are programmed to know what groups
| first name | Thao |
|---|---|
| gender | Female |
| User background | In the word "programming" more fire in the moment, did not attend class programming language Thao students to "programming" is full of much curiosity, we want to pass on the easy way to understand what programming is |
| User preferences | It would be to the game understand how a programming process |
| The proportion of users | Expected gamers minor groups, too few |
| Typical scene | Since the rise in junior high school, Thao find several classmates at recess love with a full swing to discuss a topic she did not know what c language, python, java balaba, this time, her tiny eyes always filled with big doubts. So Thao decided to know almost Question: How do junior high school students easily understand programming? Then someone recommended this game to her, since then, Thao opened up a new world ~ ~ |
Welcome Screen
Map interface
game interface
Pause Interface
The Composition Guide interface
UI component table
Welcome Screen
| Welcome interface components | Features | By testing conditions |
|---|---|---|
| New Game Button | In the new game | The establishment of a new local game archive, jump to map page |
| Continue game button | Open the old archives progress | Go to the map page, load the local game schedule, including expired and score points |
| Settings button | No alhpa stage | No alhpa stage |
| Help button | No alhpa stage | No alhpa stage |
| Exit button | exit the game | Click the button to exit the game |
Map interface
| Map interface components | Features | By testing conditions |
|---|---|---|
| Select the word level | "Select level" words | Normal display font |
| Each dot represents the level of | Gray represents the locked levels, unclickable; white represents has passed the checkpoint, you can click replay selected points; orange represents the current level, click to enter the current level | The current show normal progress of the game: The latest level is orange; gray levels can not click; click on the white and orange dots can enter a certain level of |
| Stars representative of each level score | Record number of stars in each level, and shows the number of dots next to the level of stars; unclickable | Score and the appropriate number of normal recording each level positioned next stars |
| Game total percentage progress | Shows the percentage of the current progress of the game: (3 / OFF) is calculated according to the proportion of the total number of all of the stars of the current levels over stars, numbers to an integer such as to retain 12%, 57% | Normal digital display, the correct calculation of game progress, and retain integer |
The Composition Guide interface
| The Composition Guide interface components | Features | By testing conditions |
|---|---|---|
| Synthesis guide words | Display the words "synthetic Guide" | Normal display font |
| Back button | Click to return to the checkpoint, and continues to progress the game | You can return to a level, and keep open the game progress before the guidance page |
| Composite Formula display box | Each screen shows 5-8 synthetic formulas, drop-down support | Able to show the synthesis formula, and can pull down the right side of the moving bar |
| Synthetic formula | Show synthetic formulas, click on an item to jump to a synthetic way the article (except raw materials) | 正常显示合成公式，并且支持鼠标点击链接跳转 |
暂停组件
注：暂停组件置于游戏界面之上，唤出该组件时游戏界面设置成深色
| 暂停组件 | 功能 | 测试通过条件 |
|---|---|---|
| 暂停字样 | 显示暂停字样 | 正常显示 |
| 目标物品 | 显示目标物品，点击可以打开合成指南，并跳转到的相应位置 | 正常显示和跳转 |
| 从左往右三个星星 | 根据当前的成本，显示星星：如果成本高于某个星星下的数字，则该星星及其右侧的所有星星都无填充；如果成本低于某个星星下的数字，则该星星带上黄色填充 | 根据成本填充星星，正常显示 4 档得分对应的星星 |
| 重新开始按钮 | 关闭任务目标框，同时背景颜色恢复，清除该关卡内所有数据，重新开始关卡 | 关闭任务目标框，完全清空所有数据并重新开始关卡 |
| 菜单按钮 | 清除本关所有数据，返回到欢迎页面 | 清除本关所有数据，返回到欢迎页面 |
| 返回按钮 | 关闭任务目标框，同时背景颜色恢复，返回游戏 | 关闭任务目标框，并能够正常继续游戏 |
场景组件表
游戏界面
默认是编辑状态，可以修改语句；进入执行状态后，不再允许修改语句，直到执行完毕或点击“停止”按钮进入编辑状态。
| 游戏界面组件 | 功能 | 测试通过条件 |
|---|---|---|
| 材料区 | 放置各种材料按钮的区域 | 正常显示，固定最左端 |
| 原材料按钮 | 每种原材料带有一种特定的颜色，表示某种原材料，拖动到工作区中并生成对应的工作区语句 | 支持拖动到工作区中生成对应的工作区语句 |
| 循环按钮 | 拖动到工作区中并生成循环语句，alpha 版不支持嵌套 | 支持拖动到工作区中并生成循环语句 |
| 分支按钮 | 拖动到工作区中并生成分支语句，alpha 版不支持嵌套 | 拖动到工作区中并生成分支语句 |
| 合成按钮 | 拖动到工作区中并生成合成语句，打开合成指南并强制要求选择一种物品作为合成目标 或 拖动到工作区中并生成某种物品的合成语句 | 拖动到工作区中并打开合成指南，必须选择一种合成目标，生成合成语句 或 拖动到工作区中并生成某种物品的合成语句 |
| 工作区 | 放置各种语句的区域；有隐藏的网格（或者槽），语句能够自动吸附到最近的槽中，实现自动整理排列位置的功能 | 正常显示，紧贴材料区右端；能够吸附语句 |
| 语句 | 带有颜色，表示“添加”某种材料到盒子中，支持上下移动调换语句顺序，自动吸附位置；并在后端生成相应的运行逻辑 | 支持上下移动以排版，后端能将工作区所有的语句进行编译，得到材料加入的流程 |
| 循环语句 | 是一个C形的块，支持在其中加入至多三条语句；头部可以设置循环次数为一个[0, 10]的整数 | 能够拖动至多三条语句加入块中；可设置循环次数 |
| 分支语句 | 是一个E形的块，支持在每一层中加入至多三条语句；头部可以以当前盒子颜色设置分支条件，不支持 else if | 能够拖动至多三条语句加入 E 型块的每一层中 |
| 合成语句 | 表示执行该语句时，检查当前盒子内物品：满足合成条件，展示转动齿轮 UI，显示合成成功，删去原料，新物品落入盒子中；不满足合成条件，停止合成，提示“原料不足，合成失败”，按钮变成绿色带箭头的环状（参考“开始按钮”） | 转动齿轮 UI 正常，能够检测合成条件满足与否，合成成功时生成新物品落入盒中，失败时停止执行 |
| 开始按钮 | 点击按钮，进入执行状态，按钮变成红色方形“停止”按钮，再次按下即可停止执行状态，按钮变成绿色带箭头的环状；再次点击返回编辑状态；根据工作区语句顺序依次将原料加入盒子中 | 能够切换状态，并且在执行状态不允许修改语句 |
| 盒子 | 带颜色静态容器或带指示灯容器 | 正常显示，并根据投入的原料更换其颜色或颜色指示灯 |
| 机械抓手 | 从上往下把原料加入盒子中 | 正常显示动画，将原料按照工作区语句顺序加入盒子中 |
| 原料 | 被机械抓手从上往下放入盒子中 | 从最顶端出现，被抓到盒子中然后从视野中消失 |
| 合成进度条 | 展示当前盒子内物品和成功状态盒子内物品的相似度（待定） | 随着合成的不断进行不断推进直到 100%，合成成功 |
| 合成成本 | 在执行时，不断对已用材料加和得到当前合成成本，用于计算最后得分 | 自动更新 |
| 合成指南 | 点击合成指南，打开合成指南界面 | 正常打开合成指南页面 |
| 任务目标 | 点击任务目标，打开任务目标窗口，同时背景颜色加深 | 正常打开任务目标窗口，同时背景颜色加深 |
| 盒子物品框 | 显示当前盒子内拥有的物品（或材料）及其数量 | 能够随着合成动态更新 |
| 盒子物品 | 盒子内某一物品（或材料）及其数量 | 能够随着合成动态更新 |
| 箭头 | 执行状态下显示当前执行语句，并且有一定带动画的强调效果 | 能够随着执行状态而移动；有强调动画 |
| 暂停框 | 暂停框，显示该关的目标，具体组件参考上文“暂停”部分 | 具体验收参考上文“暂停”部分 |
合成公式表
基本组件（可作为原料给出）
电路板
水晶
外壳
电动机
电池
屏幕
高级组件及其合成公式（可作为原料给出）
高级电路板=电路板+水晶
大屏幕=屏幕*4
机械模块=电动机+电池+电路板
大件物品及其合成公式
水壶=外壳+电路板+水晶
风扇=外壳*3+电动机
手机=高级电路板*2+电池+屏幕
电脑=高级电路板4+电池2+大屏幕
冰箱=水晶4+外壳3+高级电路板+机械模块+屏幕
微波炉=水晶*8+外壳+高级电路板
吸尘器=外壳+电路板+机械模块*2