36
“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

Gui Conclusion

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Gui Conclusion

“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

Page 2: Gui Conclusion

目录contents

The process of GUI development– GUI开发设计流程

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

Direction of development (vision of future) – 未来 GUI设计建议

Page 3: Gui Conclusion

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

Page 4: Gui Conclusion

GUI开发设计总体流程The process of GUI design

定义阶段 构造阶段

Page 5: Gui Conclusion

用户类型:

中、高级项目经理人,初期测试用户均为 IBM培训部学员。

用户特征:

一般有熟练的电脑操作能力,但游戏界面并不熟悉,要有了解游戏界面方式的过程。

操作过程的规范性、逻辑的严密性是此类用户关注的重点。

用户注重获取与游戏相关信息的环节。

喜欢易识别、易操作的界面。

一般不喜欢过于鲜艳或花哨的界面风格。

硬件环境:

PC版本游戏,要求适应一般培训的硬件条件,学员也多使用自带笔记本。

测试环节,考虑界面加入后整个软件的测试要在多台不同型号机器上进行。

考虑触摸屏的操作方式。

软件环境:

游戏基于 Torque引擎开发,界面设计要与目前可实现的交互方式、场景构建等相匹配。

可行性分析 feasibility analysis

Page 6: Gui Conclusion

可行性分析 feasibility analysis

游戏基于 Torque引擎开发,界面设计要与目前可实现的交互方式、场景构建等相匹配。

“ PM”里相对应的是鼠标点击操作的交互方式

游戏中的交互物体 点击 弹出式菜单

条形菜单 点击 二级条形菜单

点击点击

自动弹出

软件环境

Page 7: Gui Conclusion

需求分析 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

Page 8: Gui Conclusion

抽象设计 abstract design

开机阶段的界面顺序

Page 9: Gui Conclusion

抽象设计 abstract design

操作阶段的界面顺序

菜单引发交互界面

自动弹出交互界面

物体交互弹出界面

Page 10: Gui Conclusion

详细设计 detailed design

“PM”LOGO DESIGN

Page 11: Gui Conclusion

详细设计 detailed design

“PM”ICON DESIGN 菜单图标

Page 12: Gui Conclusion

详细设计 detailed design

“PM”ICON DESIGN 控制图标一

Page 13: Gui Conclusion

详细设计 detailed design

“PM”ICON DESIGN 控制图标二

Page 14: Gui Conclusion

详细设计 detailed design

“PM”ICON DESIGN 控制图标二

Page 15: Gui Conclusion

详细设计 detailed design

“PM”ICON DESIGN 表征图标

对话 电话 信息

状态显示

Page 16: Gui Conclusion

详细设计 detailed design

“PM”MENUE DESIGN 条形菜单

Page 17: Gui Conclusion

详细设计 detailed design

提示菜单

“PM”MENUE DESIGN 弹出式菜单

Page 18: Gui Conclusion

详细设计 detailed design

提示菜单

“PM”MENUE DESIGN 弹出式菜单

Page 19: Gui Conclusion

详细设计 detailed design

提示菜单

“PM”MENUE DESIGN 弹出式菜单

Page 20: Gui Conclusion

详细设计 detailed design

标准对话框

系统信息菜单

提示菜单

单向对话框

系统信息菜单

“PM”MENUE DESIGN 弹出式菜单

Page 21: Gui Conclusion

详细设计 detailed design

“PM”USER INTERFACE 用户交互界面

开机画面

Page 22: Gui Conclusion

详细设计 detailed design

“PM”USER INTERFACE 用户交互界面

Page 23: Gui Conclusion

详细设计 detailed design

“PM”USER INTERFACE 用户交互界面

结束画面

Page 24: Gui Conclusion

综合测试与评价 test and evaluation

界面设计集成入游戏系统之后,要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点:

1 图形用户界面的识别性。查看图形化的图标是否表意清晰,玩家是否可以很快领悟整个界面系统的含义。如主菜单的表意。

主菜单图形化图标的改进:

宝物选择菜单图标的改进:

Page 25: Gui Conclusion

综合测试与评价 test and evaluation

界面设计集成入游戏系统之后,要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点:

2 信息传达的显著性。查看要表达的信息是否清晰、显著。如时间变化的标识、变量参数界面的显著与否。

时间变化的标识:

参数表达界面的改进:

系统查询信息与提示的变化:

Page 26: Gui Conclusion

综合测试与评价 test and evaluation

界面设计集成入游戏系统之后,要经历测试和反馈的过程。本项目中的主要试验玩家来自 IBM中国大学合作部。考察主要侧重以下几点:

3 观察玩家操作的整个过程,从游戏的可玩性和易用性角度出发,从界面的角度试图添加有助于丰富游戏交互的信息。

宝物交互提示:

游戏闯关提醒信息:

游戏表现及时提示:

Page 27: Gui Conclusion

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

Page 28: Gui Conclusion

一致性原则 consistency

1 一致的操作序列 /相似的人机交互方式

2 相似的信息显示格式

3 在提示、帮助、菜单中产生一致的术语4 相似的界面外观、布局

点击菜单

点击物体

自动弹出

弹出菜单 交互信息提示

比喻图标信息标题

信息内容

控制图标

Page 29: Gui Conclusion

提供信息反馈 action feedback

Page 30: Gui Conclusion

合理利用颜色、显示效果来实现内容与形式的统一 design style

颜色科技蓝为主色调,中性、严谨、为大众所爱的保守选择

显示效果交互界面整体采用微软桌面风格,有阴影、高光、边框和弱过渡渐变,交互感更强部分交互弹出式菜单采用半透明设计,处于游戏场景显露的考虑。鼠标相应:对于控制图标,有鼠标滑过、按下、响应的不同状态。给用户动作以即时反馈。

Page 31: Gui Conclusion

使用图形和比喻 icon and imagery

1 底部条形菜单选用了可相应功能图标的方式,即用图标代表某项功能。

2 在每个弹出式菜单的一角,均设计了不可相应的功能图标,提示用户该弹出式菜单的功能或交互内容。

对话 电话 信息

状态显示

Page 32: Gui Conclusion

未来 GUI设计建议Vision of future

Page 33: Gui Conclusion

GUI设计师应该参与策划与设计决策

类似与 PM一类的教育培训类游戏,交互的有效性、流畅性和易用性是非常重要的,而 GUI是软件与用户交互的界面,对于整个游戏设计的成败起着至关重要的作用。

这要求 GUI设计师不仅要把握游戏界面的整体设计风格(也可以称为可视化表达工作),还要站在游戏策划意图、思想的全局高度考虑整体的人机界面设计。界面设计前期的重点,不将是美化,而变为界面系统逻辑的设计,要考虑所有与情节、操作相关的交互细节,挖掘需要加入界面和系统反馈的位置。而这些设计工作,均需要设计师站在全局策划的高度考虑。

同时,设计师要了解同组程序员和其它技术人员的工作,界面设计要基于现有技术支持的交互方式。对于更加人性化的交互方式,设计师也可以向组内提出建议,最终的决策将有团队做出。

Page 34: Gui Conclusion

用专业的事实说服团队

对于整个游戏交互方式,包括菜单布局、操作方式,团队里每个成员都有自己的话语权和见解。 GUI设计师应该基于详细而全面的网上调研得出结论。比如设计游戏界面前,应该对现有游戏风格、界面特点、布局和操作特点都有详细的罗列和分析,展示给团队,并提出自己关于界面设计的方案。

要在“用专业的思维独立思考”和“团队讨论、团队意见”之间寻找平衡。

Page 35: Gui Conclusion

视觉效果很重要

在 PM第一版游戏界面上,采用了微软桌面风格,有阴影、高光、边框和弱过渡渐变。除了美观上的考虑,更是整个游戏产品功能定位、人群定位的分析上得出的风格设计。

现代的软件产品,用户对视觉效果的要求越来越高。良好的视觉效果可以增强玩家的情感体验,也是设计的基本。不管多么好的策划,都要用图形化的语言来表达。高明的设计师可以用很巧妙、漂亮的图形传达丰富的内涵。

Page 36: Gui Conclusion

完the end