1. “PM”培训游戏图形用户界面设计报告
For the virtual world of Project Management Training
姚力宁 二零零柒秋
prepared by Yao Lining, 10.24.2007
Extreme Blue Intern, IBM
materials provided by IBM CRL 2007

2. 目录
contents
The process of GUI development– GUI开发设计流程
The process of GUI development – GUI设计原则的应用
Direction of development (vision of future) – 未来GUI设计建议

3. GUI开发设计流程
The process of GUI development

4. GUI开发设计总体流程
The process of GUI design
综合测试与
可行性分析 需求分析 抽象设计 详细设计 界面实现 反馈与改进
评价
定义阶段 构造阶段

5. 可行性分析 feasibility analysis
用户类型： 硬件环境：
中、高级项目经理人，初期测试用户均 PC版本游戏，要求适应一般培训的
为IBM培训部学员。 硬件条件，学员也多使用自带笔记本。
测试环节，考虑界面加入后整个软件
用户特征： 的测试要在多台不同型号机器上进行。
一般有熟练的电脑操作能力，但游戏界 考虑触摸屏的操作方式。
面并不熟悉，要有了解游戏界面方式的 用户特征 软、硬件
过程。 分析 环境预测
软件环境：
操作过程的规范性、逻辑的严密性是此
类用户关注的重点。 游戏基于Torque引擎开发，界面设
计要与目前可实现的交互方式、场景
用户注重获取与游戏相关信息的环节。 构建等相匹配。
喜欢易识别、易操作的界面。
一般不喜欢过于鲜艳或花哨的界面风格。

6. 可行性分析 feasibility analysis
软件环境
游戏基于Torque引擎开发，界面设计要与目前可实现的交互方式、场景构建等相匹配。
“PM”里相对应的是鼠标点击操作的交互方式
游戏中的交互物体 点击 弹出式菜单 自动弹出
点击
条形菜单 点击
二级条形菜单

7. 需求分析 requirement analysis
依据游戏情节策划、逻辑和引擎交互方式进行的GUI的任务分析。
Phase 1 Phase 2 Phase 3
time time
Treasure box Treasure box
contract contract
reference
Training teacher
location
parameter
Task explain Task explain
information
GUI explain Problem remind
object clicking dialogue dialogue
interaction
dialogue telephone

8. 抽象设计 abstract design
开机阶段的界面顺序

9. 抽象设计 abstract design
操作阶段的界面顺序
菜单引发交互界面
自动弹出交互界面
物体交互弹出界面

10. 详细设计 detailed design
“PM”LOGO DESIGN

11. 详细设计 detailed design
“PM”ICON DESIGN 菜单图标

12. 详细设计 detailed design
“PM”ICON DESIGN 控制图标一

13. 详细设计 detailed design
“PM”ICON DESIGN 控制图标二

14. 详细设计 detailed design
“PM”ICON DESIGN 控制图标二

15. 详细设计 detailed design
“PM”ICON DESIGN 表征图标
状态显示
对话 电话 信息

16. 详细设计 detailed design
“PM”MENUE DESIGN 条形菜单

17. 详细设计 detailed design
“PM”MENUE DESIGN 弹出式菜单
提示菜单

18. 详细设计 detailed design
“PM”MENUE DESIGN 弹出式菜单
提示菜单

19. 详细设计 detailed design
“PM”MENUE DESIGN 弹出式菜单
提示菜单

20. 详细设计 detailed design
“PM”MENUE DESIGN 弹出式菜单
标准对话框 单向对话框
系统信息菜单
系统信息菜单
提示菜单

21. 详细设计 detailed design
“PM”USER INTERFACE 用户交互界面
开机画面

22. 详细设计 detailed design
“PM”USER INTERFACE 用户交互界面

23. 详细设计 detailed design
“PM”USER INTERFACE 用户交互界面
结束画面

24. 综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自IBM中国大学合作部。考察主要
侧重以下几点：
1 图形用户界面的识别性。查看图形化的图标是否表意清晰，玩家是否可以很快领悟整个界面系统的含义。如主菜单的表
意。
主菜单图形化图标的改进：
宝物选择菜单图标的改进：

25. 综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自IBM中国大学合作部。考察主要
侧重以下几点：
2 信息传达的显著性。查看要表达的信息是否清晰、显著。如时间变化的标识、变量参数界面的显著与否。
时间变化的标识： 系统查询信息与提示的变化：
参数表达界面的改进：

26. 综合测试与评价 test and evaluation
界面设计集成入游戏系统之后，要经历测试和反馈的过程。本项目中的主要试验玩家来自IBM中国大学合作部。考察主要
侧重以下几点：
3 观察玩家操作的整个过程，从游戏的可玩性和易用性角度出发，从界面的角度试图添加有助于丰富游戏交互的信息。
宝物交互提示：
游戏闯关提醒信息：
游戏表现及时提示：

27. GUI设计原则的应用
The process of GUI development

28. 一致性原则 consistency
1 一致的操作序列/相似的人机交互方式
点击菜单
点击物体 弹出菜单 交互信息提示
自动弹出
2 相似的信息显示格式
比喻
信息标题 图标
信息内容
控制图标
3 在提示、帮助、菜单中产生一致的术语
4 相似的界面外观、布局

29. 提供信息反馈 action feedback
拿到宝物时 与物体交互 与人交互 最终胜利、失败
•声音 •文本 •文本 •文本
•图形 •声音 •声音
•图形

30. 合理利用颜色、显示效果来实现内容与形式的统一 design style
颜色
科技蓝为主色调，中性、严谨、为大众所爱的保守选择
显示效果
交互界面整体采用微软桌面风格，有阴影、高光、边框和弱过渡渐变，交互感更强
部分交互弹出式菜单采用半透明设计，处于游戏场景显露的考虑。
鼠标相应：对于控制图标，有鼠标滑过、按下、响应的不同状态。给用户动作以即时反馈。

31. 使用图形和比喻 icon and imagery
1 底部条形菜单选用了可相应功能图标的方式，即用图标代表某项功能。
2 在每个弹出式菜单的一角，均设计了不可相应的功能图标，提示用户该弹出式菜单的功能或交互内容。
状态显示
对话 电话 信息

32. 未来GUI设计建议
Vision of future

33. GUI设计师应该参与策划与设计决策
类似与PM一类的教育培训类游戏，交互的有效性、流畅性和易用性是非常重要的，而GUI是软件与用户交互的界面，对于
整个游戏设计的成败起着至关重要的作用。
这要求GUI设计师不仅要把握游戏界面的整体设计风格（也可以称为可视化表达工作），还要站在游戏策划意图、思想的
全局高度考虑整体的人机界面设计。界面设计前期的重点，不将是美化，而变为界面系统逻辑的设计，要考虑所有与情节、
操作相关的交互细节，挖掘需要加入界面和系统反馈的位臵。而这些设计工作，均需要设计师站在全局策划的高度考虑。
同时，设计师要了解同组程序员和其它技术人员的工作，界面设计要基于现有技术支持的交互方式。对于更加人性化的交
互方式，设计师也可以向组内提出建议，最终的决策将有团队做出。

34. 用专业的事实说服团队
对于整个游戏交互方式，包括菜单布局、操作方式，团队里每个成员都有自己的话语权和见解。GUI设计师应该基于详细
而全面的网上调研得出结论。比如设计游戏界面前，应该对现有游戏风格、界面特点、布局和操作特点都有详细的罗列和
分析，展示给团队，并提出自己关于界面设计的方案。
要在“用专业的思维独立思考”和“团队讨论、团队意见”之间寻找平衡。

35. 视觉效果很重要
在PM第一版游戏界面上，采用了微软桌面风格，有阴影、高光、边框和弱过渡渐变。除了美观上的考虑，更是整个游戏产
品功能定位、人群定位的分析上得出的风格设计。
现代的软件产品，用户对视觉效果的要求越来越高。良好的视觉效果可以增强玩家的情感体验，也是设计的基本。不管多
么好的策划，都要用图形化的语言来表达。高明的设计师可以用很巧妙、漂亮的图形传达丰富的内涵。

36. 完
the end