“PM”培训游戏图形用户界面设计报告
For the virtual world of Project Management Training
姚力宁 二零零柒秋prepared by Yao Lining, 10.24.2007
Extreme Blue Intern, IBMmaterials provided by IBM CRL 2007
目录contents
The process of GUI development– GUI开发设计流程
The process of GUI development – GUI设计原则的应用
Direction of development (vision of future) – 未来 GUI设计建议
GUI开发设计流程The process of GUI development
GUI开发设计总体流程The process of GUI design
定义阶段 构造阶段
用户类型：
中、高级项目经理人，初期测试用户均为 IBM培训部学员。
用户特征：
一般有熟练的电脑操作能力，但游戏界面并不熟悉，要有了解游戏界面方式的过程。
操作过程的规范性、逻辑的严密性是此类用户关注的重点。
用户注重获取与游戏相关信息的环节。
喜欢易识别、易操作的界面。
一般不喜欢过于鲜艳或花哨的界面风格。
硬件环境：
PC版本游戏，要求适应一般培训的硬件条件，学员也多使用自带笔记本。
测试环节，考虑界面加入后整个软件的测试要在多台不同型号机器上进行。
考虑触摸屏的操作方式。
软件环境：
游戏基于 Torque引擎开发，界面设计要与目前可实现的交互方式、场景构建等相匹配。
可行性分析 feasibility analysis
可行性分析 feasibility analysis
游戏基于 Torque引擎开发，界面设计要与目前可实现的交互方式、场景构建等相匹配。
“ PM”里相对应的是鼠标点击操作的交互方式
游戏中的交互物体 点击 弹出式菜单
条形菜单 点击 二级条形菜单
点击点击
自动弹出
软件环境
需求分析 requirement analysis
依据游戏情节策划、逻辑和引擎交互方式进行的 GUI的任务分析。
Phase 1 Phase 2 Phase 3
time
Treasure box
contract
time
Treasure box
contract
Training teacher
location
parameter
Task explain
GUI explain
Task explain
Problem remind
object clicking
dialogue
dialogue dialogue
telephone
reference
interaction
information
抽象设计 abstract design
开机阶段的界面顺序
抽象设计 abstract design
操作阶段的界面顺序
菜单引发交互界面
自动弹出交互界面
物体交互弹出界面
详细设计 detailed design
“PM”LOGO DESIGN
详细设计 detailed design
“PM”ICON DESIGN 菜单图标
详细设计 detailed design
“PM”ICON DESIGN 控制图标一
详细设计 detailed design
“PM”ICON DESIGN 控制图标二
详细设计 detailed design
“PM”ICON DESIGN 控制图标二
详细设计 detailed design
“PM”ICON DESIGN 表征图标
对话 电话 信息
状态显示
详细设计 detailed design
“PM”MENUE DESIGN 条形菜单
详细设计 detailed design
提示菜单
“PM”MENUE DESIGN 弹出式菜单
详细设计 detailed design
提示菜单
“PM”MENUE DESIGN 弹出式菜单
详细设计 detailed design
提示菜单
“PM”MENUE DESIGN 弹出式菜单
详细设计 detailed design
标准对话框
系统信息菜单
提示菜单
单向对话框
系统信息菜单
“PM”MENUE DESIGN 弹出式菜单
详细设计 detailed design
“PM”USER INTERFACE 用户交互界面
开机画面
详细设计 detailed design
“PM”USER INTERFACE 用户交互界面
详细设计 detailed design
“PM”USER INTERFACE 用户交互界面
结束画面
综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点：
1 图形用户界面的识别性。查看图形化的图标是否表意清晰，玩家是否可以很快领悟整个界面系统的含义。如主菜单的表意。
主菜单图形化图标的改进：
宝物选择菜单图标的改进：
综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点：
2 信息传达的显著性。查看要表达的信息是否清晰、显著。如时间变化的标识、变量参数界面的显著与否。
时间变化的标识：
参数表达界面的改进：
系统查询信息与提示的变化：
综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点：
3 观察玩家操作的整个过程，从游戏的可玩性和易用性角度出发，从界面的角度试图添加有助于丰富游戏交互的信息。
宝物交互提示：
游戏闯关提醒信息：
游戏表现及时提示：
GUI设计原则的应用The process of GUI development
一致性原则 consistency
1 一致的操作序列 /相似的人机交互方式
2 相似的信息显示格式
3 在提示、帮助、菜单中产生一致的术语4 相似的界面外观、布局
点击菜单
点击物体
自动弹出
弹出菜单 交互信息提示
比喻图标信息标题
信息内容
控制图标
提供信息反馈 action feedback
合理利用颜色、显示效果来实现内容与形式的统一 design style
颜色科技蓝为主色调，中性、严谨、为大众所爱的保守选择
显示效果交互界面整体采用微软桌面风格，有阴影、高光、边框和弱过渡渐变，交互感更强部分交互弹出式菜单采用半透明设计，处于游戏场景显露的考虑。鼠标相应：对于控制图标，有鼠标滑过、按下、响应的不同状态。给用户动作以即时反馈。
使用图形和比喻 icon and imagery
1 底部条形菜单选用了可相应功能图标的方式，即用图标代表某项功能。
2 在每个弹出式菜单的一角，均设计了不可相应的功能图标，提示用户该弹出式菜单的功能或交互内容。
对话 电话 信息
状态显示
未来 GUI设计建议Vision of future
GUI设计师应该参与策划与设计决策
类似与 PM一类的教育培训类游戏，交互的有效性、流畅性和易用性是非常重要的，而 GUI是软件与用户交互的界面，对于整个游戏设计的成败起着至关重要的作用。
这要求 GUI设计师不仅要把握游戏界面的整体设计风格（也可以称为可视化表达工作），还要站在游戏策划意图、思想的全局高度考虑整体的人机界面设计。界面设计前期的重点，不将是美化，而变为界面系统逻辑的设计，要考虑所有与情节、操作相关的交互细节，挖掘需要加入界面和系统反馈的位置。而这些设计工作，均需要设计师站在全局策划的高度考虑。
同时，设计师要了解同组程序员和其它技术人员的工作，界面设计要基于现有技术支持的交互方式。对于更加人性化的交互方式，设计师也可以向组内提出建议，最终的决策将有团队做出。
用专业的事实说服团队
对于整个游戏交互方式，包括菜单布局、操作方式，团队里每个成员都有自己的话语权和见解。 GUI设计师应该基于详细而全面的网上调研得出结论。比如设计游戏界面前，应该对现有游戏风格、界面特点、布局和操作特点都有详细的罗列和分析，展示给团队，并提出自己关于界面设计的方案。
要在“用专业的思维独立思考”和“团队讨论、团队意见”之间寻找平衡。
视觉效果很重要
在 PM第一版游戏界面上，采用了微软桌面风格，有阴影、高光、边框和弱过渡渐变。除了美观上的考虑，更是整个游戏产品功能定位、人群定位的分析上得出的风格设计。
现代的软件产品，用户对视觉效果的要求越来越高。良好的视觉效果可以增强玩家的情感体验，也是设计的基本。不管多么好的策划，都要用图形化的语言来表达。高明的设计师可以用很巧妙、漂亮的图形传达丰富的内涵。
完the end
Recommended
