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)

Citation preview

“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

目录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