毕业设计（论文）pc游戏中图形用户界面(gui)设计浅析网页游戏中的图形用户界面设计

1、北京师范大学论文题目：PC游戏中的图形用户界面（GUI）设计姓 名 院 系 专 业 计算机科学与技术 年 级 学 号 指导老师 2010年11月28日PC游戏中的图形用户界面（GUI）设计浅析网页游戏中的图形用户界面设计摘要论文介绍了主流的网页游戏界面设计的特点，根据人机界面设计的原理，综合网页界面设计和游戏界面设计的各自特点浅谈网页游戏界面设计的原则、方法、流程，并应用于实际开发中来指导网页游戏的界面设计。论文主要阐述了人机界面设计的基本原理，包括界面设计原理，认知心理学和视觉习惯基础理论，具体分析以上要素在网页游戏界面设计中的作用。根据人机界面设计基本原理，即符合用户需要的“简单、自然、友

2、好、一致”界面设计基本原则的基础上，结合网页界面设计的原则和游戏界面设计原则三方面综合分析得出网页游戏界面设计的原则。根据先前得出的设计原则来 作为对网页游戏具体评价的依据来进行设计功能和设计效果评价。用论文所得出的原则和方法来对网页游戏界面进行指导和规范设计后，较原版本游戏用户更加认可，有更好的满意度。是的确符合以用户为中心的界面设计理论，是可以用来指导未来的网页游戏的界面设计。关键词:网页游戏，人机界面设计，游戏界面设计GRAPHICAL USER INTERFACE DESIGN OF THE PC GAMEANALYSIS ON GRAPHICAL USER INTERFACE DES

3、IGN OF THE WEBGAMEABSTRACTUser Interface which as a bridge between WebGame and user has great difference with other games in interface design. This paper first introduced and anatomized the doctrine of WebGame and Human-Computer Interaction technology. Then presents our research work: the principal,

4、 method and workflow which can serve as a guide for future Graphic UI design.WebGame is one of Online Gaming which made with web page programming language such as JAVA, ASP and ActiveX. Game player can play it in web browser directly and do not need download and install any client software in their

5、PC. Along with the internet technology unceasing development, WebGame get a rapid development over the past few years and will be likely to replace traditional online games in the future. Recently, the industry of Game regards browser as a virtual operating system, which makes the prospect of web ga

6、me even better.We hope that principles and method which we concluded is effective and valid and we also hope it can guide the future of interface design in WebGame. Finally, we have applied principles and method which we concluded to WebGame interface development and validate it is correct and scien

7、tific using User monitoring and user survey method.Keywords: WebGame, Interface Design, Game Interface Design目录1 绪论 11.1 论文的选题背景及意义 11.1.1 背景知识 11. 无端网游 12. 游戏界面设计 21.1.2 论题研究目的与现实意义 21. 目的 32. 研究的意义 81.2 本文的主要工作及结构 92 界面设计理论基础 102.1 人机界面设计理论 102.1.1 人机界面的概念 102.1.2 界面设计的分类 111. 功能性设计界面 112. 情感性设计界面

8、 113. 环境性设计界面 112.1.3 界面设计的发展 121. 命令语言 122. 菜单和图形用户界面的广泛应用 133. 面向窗口的点选界面 134. 多媒体用户界面及多通道用户界面的发展 135. 虚拟现实技术的应用 132.2界面对用户心理的影响 132.3 视觉习惯 142.4 网页游戏概述 142.4.1 网页游戏的概念 142.4.2 网页游戏的特性 151网页游戏的技术特性 152网页游戏的游戏特性 163网页游戏的用户和市场特征 174网页游戏的不足 172.4.3 网页游戏的发展 183网页游戏中界面设计的方法和流程研究 203.1 网页游戏界面设计方法的研究 203.

9、1.1 可用性目标 203.1.2 用户体验目标 211. 切实关注用户需要的设计 212. 适合不同“级别”用户的设计 213. 关注用户“有限注意力”的设计 213.2 以用户为中心的网页游戏设计方法 221. 以用户为中心的设计 222. 用户参与设计 223.3 网页游戏界面设计的主要流程 221. 调查用户要求或环境 232. 用户调查分析 233. 游戏任务分析设计 234. 建立交互界面模型 245. 界面的图形设计 246. 交互的测试和评估 254总结 26参考文献 27致谢 281绪 论1.1 论文的选题背景及意义1.1.1 背景知识1. 无端网游休闲娱乐已经成为我们这个时

10、代生活很重要的一部分，游戏(Game)是一种参与、交互式的娱乐形式。这一概念是相对于被动式的娱乐形式而言的，看电视、读书、看电影都是被动式的娱乐方式，在这些方式中，娱乐是展现式的，大众只能被动参与。游戏则要复杂很多，当人们玩游戏时，因积极参与而获得快乐。随着计算机以及图形图像技术的发展，出现了电子游戏。电子游戏指以电子 元器件组装成的设备为运行平台的游戏。这与传统的游戏方式是不同的，传统的 游戏需要现实中的游戏道具，如：象棋、扑克牌等。而电子游戏则是通过控制电 子游戏设备与电子游戏进行交互的游戏方式。在互联网时代，电子游戏已经发展成为网络游戏。玩网络游戏也已经成为当 今人们休闲娱乐最为流行的一

11、种方式。网络游戏拥有强大的人与人之间的交流平 台，用户在游戏中得到充足的虚拟现实体验，这是过去传统游戏不能比拟的。同 时，人的思想和行为等方面在玩游戏的过程中已经受到了游戏的影响1。网络游戏是利用 TCP/IP 协议，以 Internet 为依托，可以多人同时参与的游 戏项目。网络游戏按照联网方式分为：脱网单机游戏和网络游戏；而网络游戏按 照客户端模式则分为：需要安装相关内容客户端软件的传统网游和不需要客户端 的无端网游。无端网游的主要形式为 WebGame，即网页游戏。社会在进步，技术在发展，而互联网和 Flash 技术的深层次发展让“传统客 户端网游”运行在浏览器中的美好愿望已经成为现实。

12、无论从游戏的功能性、系 统的完善性和画面的视觉冲击力等方面，全新的无端网游都已达到传统2D网游精品的水准，甚至在某些方面有所超越，比如在游戏的便捷性和优秀的环境适应能力等方面。未来的计算机软硬件技术的发展，不仅个人电脑，使得手机，电视，PDA 等都可以作为客户终端，由于互联网无处不在，拥有海量信息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。微软认为未来的时代，连软件使用都希望完全通过网络来实现，而不需要在去买什么光盘回家安装什么软件。无端网游终将取代传统游戏，成为未来游戏的主流和发展方向。2. 游戏界面设计在人和机器的互动过程(Human-Machine Interacti

13、on)中有一个层面，即我们所说的用户界面(User Interface)。它是计算机科学与认知心理学、设计艺术、人机工程学、人因学(Human Factors)、社会学、语言学等交叉研究领域。人机界面是人与机器之间传递和交换信息的媒介。从心理学意义来分，界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。界面的功能可分为实用功能和审美功能。实用功能完成界面沟通人和机器的使命；审美功能在满足用户审美要求的同时并辅助实用功能。用户界面设计(User Interface Design)是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、符号学等都扮演着重要的角色。

14、游戏界面指游戏软件的用户界面，包括游戏画面中的按钮、动画、文字、声 音、窗口等与游戏用户直接或间接接触的游戏设计元素。游戏界面设计(Game Interface Design 简称 GID)，是指对电子游戏中与游戏用户具有交互功能的视觉元素进行规划、设计的活动。1.1.2 论题研究目的与现实意义历史总在不断重演并且惊人的相似，正如网络游戏取代传统单机游戏一样，眼下，动态无端网游取代客户端网游的趋势开始愈发明显。网页游戏正是属于网络游戏范畴，它是指无需下载和安装客户端程序、基于 ASP、PHP、Java 和 ActiveX 等 WEB 编程技术和 Flash 技术，运行于 WEB 浏览器 的网络

15、在线游戏。是伴随着互联网技术的成熟高速发展起来的新种类游戏。1. 目的 今年网页游戏突然之间变得很热门，盛大、腾讯、17173、新浪等大公司都很积极的关注，甚至连百度也掺和了进来。WebGame 究竟针对什么用户？它究竟要发展向何方？有对这个问题的研讨。大家的意见主要还是说WebGame主要针对上班一族，也就是当作小菜来吃。很多人都认为WebGame是不可能成为主流。但是我认为，WebGame最终将取代现存的网络游戏，而不是一种配菜。从受众群体容量来说，网页游戏有天然优势。能通过浏览器上网的人都是网页游戏的潜在受众。根据最新的调查显示：预计到今年年底全球互联网用户数量将会超过 10亿，而中国网

16、民数量已经达到2.2亿，超过美国成为世界第一，网民上网最主要目的是为了娱乐。网页游戏，使用浏览器把游戏体验的途径简化到了极致：能上网的人，都可以“无需下载任何东西，无成本、无等待”地玩网页游戏，只要输入URL 就可。这种简化是革命性的，与PC网游成鲜明对比。PC网游需要下载300M以上（有的甚至超过 1G）的客户端，无法与网页游戏的便利性相比。从科技发展角度来说，未来的计算机软硬件技术的发展，不仅个人电脑，使得手机、电视、PDA等都可以作为客户终端，由于互联网无处不在，拥有海量信息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。微软都认为未来的时代，连软件使用都希望完全通过网络

17、来实现，而不需要在去买什么光盘回家安装什么软件。WebGame最终取代现存的网络游戏，也是大势所趋。而且现在已经有一些开发者在从事这个方面的研究。我们也看到大型网络游戏的网页化，网页游戏随着科学技术的提升，IE7等浏览器技术的成熟和普及，WebGame2.0 的时代即将到来，也将会为网络游戏产业带入了一个新的时代。2008年10月欧洲Maid Marian Entertainment Inc.推出的Sherwood Dungeon（舍伍德地牢）3D高品质网页游戏已经相当的出色，从很多方面可以和一些3D网络游戏相媲美。从图1-1、1-2可以看出，它的画面已经完全可以媲美当今的网络游戏。图 1-1

18、 舍伍德地牢的界面截图Fig.1-1 Interface screenshot of Sherwood Dungeon图 1-2 舍伍德地牢的界面截图Fig.1-2 Interface screenshot of Sherwood Dungeon2009年6月万众瞩目的3D动作新游Robo Rescue在充满创新元素的在线游戏平台Kalydo火爆上线。耗时一年开发，全新曝光的Robo Rescue Episode 1为3D网页游戏设立了新标准，这款游戏充满了惊险刺激的快速动作，又不乏幽默。其完全的适配和兼容性保证将一切视觉冲击原汁原味的移植到老款PC机和笔记本电脑中。从图1-3、1-4可以看出

19、，曲折的道路和流畅的动作已经做得非常完美。图1-3 Robo Rescue的界面截图Fig.1-3 Interface screenshot of Robo Rescue图1-4 Robo Rescue的界面截图Fig.1-4 Interface screenshot of Robo Rescue国内最新的“闪游”小小忍者，还在测试阶段，但是从图 1-5、1-6、1-7中可以看出它的界面已经完全可以媲美传统网络游戏。而在游戏系统方面也做到了玩家之所需，任务，战斗，宠物，聊天，装备打造，非常全面系统。小小忍者是一款国内首创“一角色，多职业”的以动漫为主题的网页游戏，颠覆了传统网页游戏“一个角色只

20、能玩一个职业”的单一玩法。在游戏的过程中，玩家能获得上百种不同的动漫人物形象以及他专属的职业与隐藏技能，并且能随时变换你的角色，感受这些动漫角色带来的不同职业与技能的乐趣。在游戏画面上，小小忍者突破了以往网页游戏简单图片加文字描述的游戏方式，以更直观的画面表现来丰富游戏过程。图1-5 小小忍者的界面截图Fig.1-5 Interface screenshot of 小小忍者图1-6 小小忍者的界面截图Fig.1-6 Interface screenshot of 小小忍者图1-7 小小忍者的界面截图Fig.1-7 Interface screenshot of 小小忍者2. 研究的意义从网页游

21、戏整个行业发展来说，虽然目前网页游戏产业带来的利润越来越丰厚，但仍然有很多新的网页游戏在抄袭已有经典游戏模式的现象存在，很多国产游戏只注重商业效应，对于游戏性和游戏的人机设计的探索却还是原地踏步，甚至可以说是毫无创新!游戏质量的良莠不齐，有的甚至违背了最基本的人机交互设计原则，只想凭借华丽的游戏画面和简单的游戏博弈以及低廉的费用来吸引玩家一时的好奇心。国内网页游戏虽然是如火如荼地进行着，但整个行业缺乏系统的理论作为指导，导致很多失败的游戏案例。业界最近把浏览器作为一个虚拟的操作系统来看，这使得网页游戏的前景更加美好。从用户角度来说，用户愈为迫切地需要符合“简单、自然、友好、一致”原则的人机界面

22、。游戏的使用者也从计算机专家迅速扩大到了广大未受过专门训练的普通用户。计算机用户发生了改变，非计算机专业的普通用户成了用户的主体，这一重大转变使游戏的可用性问题变得日益突出起来。游戏人机界面的重要性在于它极大的影响了最终用户的使用，影响了游戏的推广应用。著名的游戏开发者Bill Volk 曾经对游戏设计写下了一个等式“界面+产品要素=游戏。很明显，Bill Volk 的意图并不是说设计一款游戏就是简单的加法，而是强调在游戏设计中界面的重要性。他认为“你的游戏就是你的界面”。游戏界面是人和游戏机之间沟通的桥梁，它起到连接玩家和游戏内核的作用。玩家在玩游戏时，所见、所感、所接触的是游戏界面，而不是

23、游戏内核，只有通过游戏界面，玩家才能够体会到游戏的内核带来的游戏乐趣，因此对游戏本身来说，界面在很大程度上影响着游戏的可玩性(Playable)。游戏Age of Empires 的设计者们曾提出“前十五分钟法则”，即对一款游戏来说，如果入门玩家不能在前十五分钟顺利地弄明白基本操作规则和策略，或者铁杆玩家不能在前十五分钟感受到兴趣和挑战的话，他们将永远离开这个游戏，不再做进一步尝试。因为人们玩游戏的目的是娱乐，在工作之后能够放松、娱乐一下，所以我们不能要求用户像学习其它应用软件那样花一天甚至一个星期时间去弄清到底怎么玩这个游戏。虽然目前有少数国外的资深游戏设计师在其著作中谈到网页游戏界面设计，

24、但也只是简单的概略性的介绍，对整个网页游戏界面设计方法缺乏系统、全面、具体的介绍和分析。游戏界面是游戏的外在表现，是游戏中与游戏用户直接相互影响的部分，在整个游戏设计中占据很重要的地位。游戏界面设计从游戏文化背景确定到界面构想产生、可行性分析到提出方案、方案分析、筛选、修正和评估必须是有理、有序、系统化的一个完整过程系统，应该有相应的系统理论来指导。1.2 本文的主要工作及结构本论文是在致力于以用户为中心的人机交互界面的设计与评估技术的研究工作的基础上撰写而成，论文主要根据网页游戏的特点，提出一些用以规范游戏界面设计的原则，并遵循该原则提出了游戏用户参与的迭代式界面设计方法和流程，并对该方法和

25、流程进行了应用验证。论文的主要工作如下： eq oac(,1):分别对人机界面设计的原理和用户的认知心理和视觉习惯三个方面来研究网页游戏界面设计； eq oac(,2):分析当前网页游戏的概念、特点、分类、目标用户从而来分析网页游戏界面并进行相关研究； eq oac(,3):得出网页游戏界面设计的原则、实现方法、流程和评价4个方面的基本理论并进行相关应用验证。本文旨在通过根据得出的理论来优化和改善网页游戏中的界面设计，使网页游戏能够更加受到用户的喜爱，为未来的网页游戏界面设计提供有理、有序、系统化的理论指导，促进网页游戏的进一步发展。本章主要介绍了网页游戏和用户界面设计的基本概念和发展，阐述了

26、论文研究的背景、意义，论文的目的及论文结构。2 界面设计理论基础2.1 人机界面设计理论在人和机器的互动过程（Human-Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性2。界面的说法以往常见的是在人机工程学中。“人机界面”是指人机间相互施加影响的区域，凡参与人机

27、信息交流的一切领域都属于人机界面。而设计艺术是研究人一物关系的学科，对象物所代表的不是简单的机器与设备，而是有广度与深度的物；这里的人也不是“生物人”，不能单纯地以人的生理特征进行分析。人的尺度，既应有作为自然人的尺度，还应有作为社会人的尺度；既研究生理、心理、环境等对人的影响和效能，也研究人的文化、审美、价值观念等方面的要求和变化。2.1.1 人机界面的概念介于人与计算机之间，人与机器的通信，人机界面(HCI)：软件+硬件所谓界面，即人机界面(Human-Machine Interface)，是人与机器进行交互的操作方式，即用户与机器互相传递信息的媒介，其中包括信息的输入和输出。好的人机界面

28、美观易懂、操作简单且具有引导功能，使用户感觉愉快、兴趣增强，从而提高使用效率。界面可以分为硬界面和软界面，也可以分为广义的和狭义的人机界面3广义界面广义的人机界面，指人与机之间存在一个相互作用的媒介，人通过视觉和听觉等感官接受来自机器的信息，经过脑的加工、决策，然后做出反应，实现人机的信息传递。我们可以把人机界面看作一个有着交互的系统，在分析人机界面系统模型时，建立并分析人的行为模型，从而建立并设计人机界面系统。可见研究人机界面就是研究机器怎样适应人的有效工作的问题。狭义界面狭义的人机界面指计算机系统中的人机界面，即所谓的软界面。人机界面(Human-Computer Interface) ，

29、 又称人机接口、用户界面(User Interface)、人机交互(Human-Computer Interaction)，软界面是人和计算机之间的信息交流界面，人机界面的设计直接关系到人机关系的和谐和人在工作中的主体地位，以及整个计算机系统的可使用性和效率4。本文主要研究的是人机软件界面。2.1.2 界面设计的分类美国学者赫伯特.A .西蒙提出：设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合，所以设计是把握人工物内部环境与外部环境接合的学科，这种接合是围绕人来进行的。“人”是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对象的“物”则是设

30、计界面的另一个方面。它是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用的功能、材料的质地，也包含着对传统思考、文化理喻、科学观念等的认知。为了便于认识和分析设计界面，可将设计界面分类为：功能性设计界面、情感性设计界面和环境性设计界面。1. 功能性设计界面即接受物的功能信息、操纵与控制物。这一界面反映着设计“人”造物的协调作用。2. 情感性设计界面即物要传递感受给人，取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情，而不是个人的情感抒发。设计师“投入热情，不投入感情”，避免个人的任何主观臆断与个性

31、的自由发挥。这一界面反映着设计与人的关系。3. 环境性设计界面界面设计要考虑外部环境因素对人的信息传递,任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在，环境的物理条件与精神氛围是不可忽缺的界面因素。尼葛洛庞帝指出：“一般个人电脑的界面，也被当成是物理设计的问题。但是界面不仅和电脑的外表或给人的感觉有关，它还关系到个性的创造、智能化的设计，以及如何使机器能够识别人类的表达方式”5。挑战将远远不止是为人们提供更大的屏幕，更好的音质和更易使用的图形输入装置；这一挑战将是，让电脑认识你、你的需求、了解你的言词、表情和肢体语言。但这并不是因为它能找出声音信号上的微小差别，而是因

32、为它懂得你的意思。这才是好的界面设计。图2-1 ：人机界面关系模型Fig.2-1 Model of HMI应该说，设计界面是以功能性界面为基础，以环境性界面为前提，以情感性界面为重心而构成的，它们之间形成有机和系统的联系，如图2-1 所示。2.1.3 界面设计的发展这里所指的人机界面设计，是指计算机系统的用户界面上控制输入的设计方法，大致经过了五代的演变：1. 命令语言在图形显示、鼠标、高速工作站等技术出现之前，现实可行的界面方式只能是命令和询问方式，通信完全以正文形式并通过用户命令和用户对系统询问的响应来完成。这种方式使用灵活，便于用户发挥其创造性，对熟练的用户有很高的工作效率，但对一般用户

33、来说要求高，易出错，不友善并难于学习，它的错误处理能力也较弱。2. 菜单和图形用户界面的广泛应用图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。这种方式与命令行方式相比不易出错，可以大大缩短用户的培训时间，减少用户的击键次数，可以使用对话管理工具，错误处理能力有了显著提高。但使用起来仍然乏味，可能出现菜单层次过多及菜单选项复杂的情形，必须逐级进行选择，不能一步到位，导致交互速度缓慢。3. 面向窗口的点选界面此类界面亦称WIMP 界面，即窗口(Windows)、图标(Icons)、菜单(Menus)、指示器(Pointing Device)四位一体，形成桌面

34、(Desktop)。这种方式能同时显示不同种类的信息，使用户可在几个工作环境中切换而不丢失几个工作之间的联系，用户可通过下拉式菜单方便执行控制型和对话型任务，引入图标、按钮和滚动杆技术，大大减少键盘输入，对不精于打字的用户无疑提高了交互效率。4. 多媒体用户界面及多通道用户界面的发展自然语言与应用软件进行通信，把第三代界面技术与超文本、多任务概念结合起来，使用户可同时执行多个任务(以用户的观点)。随着文字、图形、语音的识别与输术技术的进一步发展，多媒体技术在人机界面开发领域内的进一步发展，自然语言风格的人机界面将得以迅速的发展，最终走向实用化。5. 虚拟现实技术的应用虚拟现实系统向用户提供身临

35、其境(immerse)和多感觉通道(multi-sensory)体验，作为一种新型人机交互形式，虚拟现实技术比以前任何人机交互形式都有希望彻底实现和谐的、以人为中心的人机界面。2.2界面对用户心理的影响富有表现力的界面就是使用富有表情的图标或其它图形元素来表达情感状态。例如，很多软件在表示它的运行状态时都会有一个很明显的情感图形特征，即如果是正常运行的话会出现一个笑脸，如果是运行错误的话则会出现一个哭脸。笑脸传递了友好善意的信息，在与用户的第一次见面的时候就把这种友好的情感传递给了用户，能够让用户感觉自在并回报以微笑，另外，笑脸形式的图标也能让用户感到放心，传达了一个一切正常的良好的信息。而哭

36、脸则表达了相反的信息，表示失败、消极的含义。2.3 视觉习惯视觉是人类获取信息的主要通道，视觉传达的信息占所处理信息总量的80%以上，但对信息的加工人类视觉有其自然的习惯，先看什么，后看什么，体现了视觉流动的规律，形成了画面阅读的视觉流程。一般人们的视觉流程为：从上到下、从左到右、从动态到静态、由明到暗、由粗线条到细线条，突然运动或者改变运动状态的物体比静止的物体更能引起人们的关注，箭头、下划线等也能引导观察者的视线，这些习惯的形成与人类的视觉生理特性、思维发展的逻辑顺序和思维习惯有关。心理学研究表明，人类对视觉范围内的物体井不是予以同等重视的，而是从中筛选一些对象。影响选择的因素有色彩、位置

37、、经验等，不同的波长的色彩对人的视觉刺激强度不同，波长越长刺激越大，暖色大于冷色，原色大于补色，红色最强。通常，上半部让人感到轻松和自在，下半部则让人感到稳定和压抑，左半部给人的感觉是轻松和自在，右半部则会给人稳定和压抑的感觉。视觉影响力上方强于下方，左侧强于右侧，所以上部和中上部被称为“最佳视域”，也就是最优选的区域。62.4 网页游戏概述2.4.1 网页游戏的概念所谓WebGame 翻译成中文就是“网页游戏”，是指无需下载和安装客户端程序、基于ASP、PHP、Java 和ActiveX 等WEB 编程技术和Flash 技术，运行于WEB浏览器的网络在线游戏。是伴随着互联网技术的成熟高速发展

38、起来的新种类游戏。随着internet 的深入发展和WEB 编程技术的跟新换代发展，网页游戏获得了长足的发展。WEBGAME 异军突起，大有取代传统游之势。网页游戏作为一种特殊的游戏类型，WEBGAME 由来已久，对广大早期的网游玩家而言并不陌生。早在网络游戏盛行之前的Mud 时代就已经存在，并凭借其方便性和简易性吸引了一大批早期的网页用户。以第九城市笑傲江湖等为代表的早期作品多是基于BBS 社区和聊天室为基础扩展而来，其可玩性虽然不高，内容也不够丰富，但是交流性和交互性极强，已经初步具备了网游的基本特征。而随后的king wars和战神等策略型WEBGAME 则已经完全脱离了交流社区的范畴，

39、而正式发展成为独立的游戏类型，并开始逐步提高其游戏性和可玩性，在内容设计和系统数值上也有了进一步地深入和完善。2.4.2 网页游戏的特性网页游戏顾名思义，即有网页的特性又属于游戏的范畴。他的目的是为了娱乐，所用的手段和运行平台确是网页浏览器。网页游戏的发展离不开互联网技术和浏览器技术的发展。技术的发展为网页游戏提供了丰富的表现手段。1网页游戏的技术特性网页游戏依赖于网络技术的发展，最早的网页游戏其实就是一些用HTML 写的简单网页，界面简陋，交互手段贫乏，玩家与游戏的每次交互都会引起浏览器刷屏一次。用户体验与PC 单机游戏相比，判若云泥，天差地远。界面与交互手段的限制，使网页游戏在游戏玩法设计

40、上也无法施展，因此网页游戏一直难以登堂入室，不被玩家认可。近两年来，技术的发展为网页游戏提供了丰富的表现手段。最近几年兴起的丰富互联网应用(Rich Internet Application，简称RIA)技术，能在浏览器这个应用最广的平台上做出美不胜收的显示和交互效果来。拿目前最流行的网页游戏猫游记作为例子：它的界面和动态交互过程，已经让人难以区分这是一个独立的游戏程序，还是浏览器上的网页应用。网页游戏天然就是网络游戏。在这里，网络通信细节被浏览器实现了，使得游戏开发者和游戏玩家都无需购买昂贵的网游引擎和计算机设备，就可廉价地实现网络游戏。网页游戏，使用浏览器把游戏体验的途径简化到了极致：能上

41、网的人，都可以“无需下载任何东西，无成本、无等待”地玩网页游戏，只要输入URL 就可。这种简化是革命性的，与传统网游成鲜明对比。传统网游需要下300M以上（有的甚至超过1G）的客户端，无法与网页游戏的便利性相比。因此，网页游戏有巨大的潜在受众，又把体验游戏的过程简化到了极致，其发展潜力不容忽视。对网络带宽的要求相对较低，玩家几乎可以在任何时间任何地点任何一台能上网的电脑上快乐地游戏，不会受到其他客观条件的制约。等种种特点，也非常适合长时间呆在办公室和校园的OFFICE一族和大学生一族，他们可以轻松地“在老板眼皮底下”享受游戏的乐趣，这些都是传统网游所不能比拟的。而这部分用户大多具备消费游戏的经

42、济能力和消费需求，因此市场潜力相当巨大。网页游戏的未来潜力还体现在其跨平台的拓展能力上。随着浏览器技术的不断发展，网页游戏已不再局限于网页表现形式。而是实现了WEB+WAP 的兼容。目前在手机上已经能够玩到多款网页游戏。未来网页游戏还将向手机客户端图形网游(J2ME)的方向发展。多平台无疑将为网页游戏带来更高的受众覆盖率与赢利空间。这正是相较于包括传统网游在内的任何游戏均不具备的巨大优势。2网页游戏的游戏特性不同于以前的单机休闲小游戏，网页游戏虽然“轻巧”却绝不简单。网页游戏种类繁多，其游戏形态包含了角色扮演、战争策略、模拟经营、社区养成、休闲竞技等多种类型，题材则覆盖了科幻、历史、武侠、魔幻

43、、体育等众多热门领域。在游戏深度与耐玩性上，与传统网游相比并不逊色。不同于传统网游中存在大量NPC(电脑人物)供玩家练功、升级，网页游戏的世界中一般只有人类玩家，“与人斗争”成为贯穿网页游戏的“主旋律”、PK、复仇、互助、交易、联盟等发生在人与人之间的交往与斗争在网页游戏中被表现得淋漓尽致，“互动性”这一网游最成功也是最吸引人的要素在中体现的更为突出。游戏模式新颖，不花时间、无需在线是很多用户的梦想。网页游戏一个很大的特色就是不需要用户实时在线，安排好工作之后，随着自然时间的增加游戏自然在发展，这个特性是客户端网游无可比拟的。网页游戏进入门槛低，打开IE 就可以玩。这种方式可以使很多不适合玩游

44、戏的场所也可以进行游戏。比如说：上班时、看电影时。通过手机甚至可以在汽车上。网页游戏的另一大特点是“轻松”。相对于紧张刺激，追求画面音效享受的传统网游，网页游戏以文字及简单图形作为主要表现形式，游戏节奏也要慢很多。不需要随时在游戏中控制，所以网页游戏玩起来轻松惬意，这让玩家不必花费太多时间就能照看好自己的“生意”。而正因为游戏过程无需投入太多精力，网页游戏不会如传统网游那样成为令玩家欲罢不能的“鸡肋”。“沉迷”这一在传统网游踪无法回避的问题在网页游戏中基本不可能出现。网页游戏轻便、有趣、轻松的特色使其在短时间内迅速兴起并风靡一时，并被人们形象的称为“绿色网游”。目前网页游戏已经在国内拥有一批庞

45、大的玩家群体。与传统网游的玩家呈现相对低龄化不同，网页游戏的玩家群体主要以年轻的上班族为主，特别是所谓的“白领”一族。究其原因，这与很好的迎合了“白领”们渴望休闲但不愿过多花费精力，期望打发时间但以不影响工作为前提的生活理念有着直接关系。3网页游戏的用户和市场特征网页游戏的受众群体极其广泛。客户端网页因为其需要用户长时间在线的特性，以及题材方式的限制，导致很多用户无法进入。而网页游戏因为覆盖面广，不需在线等特性，只要能够打开网页就可以运行游戏，其潜在受众群体是一个让大家惊讶的数字。据市场统计，中国2006一年的网络游戏收入是59亿，人群达到率70%，其中，QQ 游戏到达率37%（5000 万人

46、），联众：20%（2700 万），盛大：19%7。就受众人群的知识层次与消费能力而言，以“白领”玩家为主的网页游戏无疑已成为网络游戏中的“高端产品”。考虑到“白领”群体巨大的消费欲望与经济实力，这一新兴市场迅速为多方所看好，并被普遍认为具有巨大的挖掘潜力。网页游戏的独特魅力与巨大潜力使之迅速成为互联网行业中的“新贵”，仅国内就有众多企业投入这一领域并开发制作出了大量网页游戏。4网页游戏的不足网页游戏相对于客户端网游优点有很多，但是和传统网游相比，网页游戏还是有很多不成熟完善的地方。而劣势其实集中在画面表现力上（传统RPG 也可做到网页上，节奏感上将不是劣势，而画面上去难以比拟）。而随着互联网技

47、术的发展，网页上的画面表现力也得到了长足的发展。相对传统网页游戏的纯文字表现，现在的网页游戏已经逐步向多媒体方向发展。1) 部分游戏模式互动性不强因为网页游戏中，除了角色扮演题材，其他题材都需要用户时刻在线，所以很难直接让游戏用户以一种直观的方式和别的用户沟通。2) 游戏节奏缓慢因为网页游戏不需要实时在线的特性，使其大部分题材的游戏节奏是缓慢的。3) 游戏画面表现力不够浏览器的局限导致网页游戏的画面很难达到客户端网游的程度。4) 网页游戏刚刚诞生、游戏内容不够丰富新兴的娱乐模式，重视还不够，发展时间较短，游戏内容还大大的不够丰富。虽然目前网页游戏尚无法与传统网游在市场规模上相提并论，但可以肯定

48、的是，随着WEB 技术的不断发展和网页游戏认知度与影响力的不断提升，网页游戏市场将迎来一波快速发展的高潮。2.4.3 网页游戏的发展近两年来，尤其是近一年来，国内外网页游戏生猛出现，日新月异，目不暇接。那么，网页游戏的兴起原因是什么？网页游戏作为一个新生事物，它的过去、现在和将来会是怎样的？而网页游戏的悄然崛起，在某种程度上表明游戏已经进入了一个全新的分众时代。网页游戏出现得很早，最早的网页游戏其实就是一些用HTML 写的简单网页，界面简陋，交互手段贫乏，玩家与游戏的每次交互都会引起浏览器刷屏一次。这时的网页游戏，用户体验与PC 单机游戏相比，判若云泥，天差地远。界面与交互手段的限制，使网页游

49、戏在游戏玩法设计上也无法施展，因此网页游戏一直难以登堂入室，不被玩家认可。当年在网络泡沫经济的推动下，国内涌现了不少规模较大的WebGame。例如第九城市、逸飞岭等，以及活跃在各信息港的不同版本的笑傲江湖。它们是国内第一批基于WEB 浏览器而产生的WebGame。当时它们所冠的头衔不是Game，而是虚拟社区。除了基本的BBS 功能之外，网民还可以在虚拟社区里练级、打工、赛马、喂养宠物、建立家庭等等。基本上我们能在网络游戏中所做的事，在当时的虚拟社区一样可以做。不同的是，网络游戏更直观一些，而虚拟社区则是以大量文字和少许图片的形式来表现。虚拟社区最红火的时候，成千上万的网民为了那些虚拟数据，通宵

50、达旦地守候在电脑面前不断刷新页面。网站访问量自然疯了似地往上飙升！在网络泡沫经济最红火的时期，能增加网站访问量就等于大把地捞进钞票。自然大大小小的网站都不遗余力地抽出人力物力去开发和维护虚拟社区。不可思议的巨额网站访问量盖过了虚拟社区先天和后天的不足。但比网站访问量增加得更快的是服务器不堪重负的压力。随着网络泡沫经济的破灭，网站访问量逐渐化为“浮云”，虚拟社区受到灾难性的重创。不少虚拟社区由免费变为收费，习惯吃免费大餐的网民自然难以接受，更何况大部分虚拟社区的质量和管理都让人不敢恭维。时至今日，存活下来的虚拟社区已经寥寥无几，而且鲜为人知。但是谁也不曾料想到，一款国外引进过来的星战题材OGAM

51、E和猫扑网以图形化社区演变而来的猫游记能使早已在国内衰败的WEBGAME 死灰复燃，并掀起了其在国内火热的第二股高潮。近两年来，网页游戏的兴旺发展、逐渐为人所知乃至被一些受众接受和喜爱，是浏览器技术发展的必然产物。技术的发展为网页游戏提供了丰富的表现手段。虽然网页游戏在目前还不是主流游戏，但是他的发展前景是诱人的。从科技发展角度来说，未来的计算机软硬件技术的发展，不仅个人电脑，使得手机，电视，PDA 等都可以作为客户终端，由于互联网无处不在，拥有海量信息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。连微软都认为未来的时代，连软件使用都希望完全通过网络来实现，而不需要在去买什么

52、光盘回家安装什么软件。RIA 的各种技术目前还在发展，网页游戏乘其势，总的发展势头是乐观的。目前，网页游戏这个市场正在迅猛发育中。网页游戏将会向手机WAP 和手机客户端图形网游（J2ME）方式联合发展，是跨平台的，而不会单单停留在网页表现形式上。多平台的受众覆盖率和赢利空间更大。现在已经有些公司在这方面已经迈出了第一步，同时在WEB 上和手机上推出产品，既是网页游戏，又是J2ME 图形手机网游，两个平台访问的是同一服务器。网页游戏进入门槛低，竞争非常激烈。产品多，淘汰率高，精品少。国内的网页游戏在设计理念、玩法设计、细节处理等方面都无法与国外相比，因此会出现一到两年的模仿抄袭阶段。但是国内的网

53、页游戏竞争，最终比的是如何深入挖掘玩家需求，如何根据本土玩家的趣味和网页游戏本身的特征，设计出最佳游戏来。本章主要阐述了界面设计原理，认知心理学，视觉习惯的基础理论，分析以上要素在游戏界面设计中的地位。另外对网页游戏的概念，分类、特点以及发展进行相关介绍。3网页游戏中界面设计的方法和流程研究网页游戏界面同普通的软件开发过程一样，必须有一个大体流程作控制，运用流程操作可以更方便的发现和解决问题，掌握游戏的开发进度并监督执行。通过界面设计理论的建立和界面设计一般方法的研究，我们可以用界面设计的方法来研究网页游戏的界面设计。3.1 网页游戏界面设计方法的研究以用户为中心原则是网页游戏界面设计的重要原

54、则，中心问题是要设计出一个既便于游戏用户使用又能提供愉悦游戏体验的游戏界面。一个好的游戏界面设计应该是既有实用功能又能满足使用者的审美需求。游戏界面设计的目标包括可用性目标和用户体验目标。可用性目标是关于游戏界面本身所要承担的人机交互功能的目标，而用户体验目标则是用户对于整个游戏界面设计的使用体验。可用性目标与用户体验目标所关注的目的是不同的，究竟哪一个目标的实现更为重要取决于对特定的用户需求和用户任务。3.1.1 可用性目标对于可用性的定义，一般可以被概括为有用性和易用性两个方面：有用性是指用户界面能否实现特定的功能，而易用性是指用户与界面的交互效率、易学性以及用户的满意度。可用性目标体现在

55、要求网页游戏界面具有一定的使用功能且是有效的游戏和用户的交互功能，人机交互效率要高，易于游戏用户学习和使用，具备一定的通用性。把可用性目标表达成一种特定的问题形式的时候，可用性目标就转变为可用性标准，就可以用这些可用性标准来衡量系统是否具有一定的可靠性、有效性、易学性等可用性。常用的可用性标准包括：用户对于游戏界面的学习时间，执行任务的效率，执行任务的步骤、用户的执行出错率和用户的使用满意度等8。目前，在很多网页游戏界面的设计中，过分使用新的技术而忽略了游戏用户因素的现象，从而导致了游戏界面本身很多的有用性问题。其表现为：1. 许多游戏本应该有的操作不能通过游戏界面去完成；2. 游戏界面本身就

56、不具备完整的人机交互功能；3. 过多的功能造成界面混乱；4. 很多不需要的界面功能的闲置等等。以上这些问题都说明了网页游戏界面可用性指标的重要性。具有好的可用性的用户界面可以大大减少用户的误操作，提高工作效率，减少学习时间和技术支持，提高游戏的市场竞争力。3.1.2 用户体验目标用户体验指的是游戏用户在玩游戏、与整个游戏系统进行交互时的体验感觉，是基于游戏用户本身主观体验的主观要求，是个涉及面很宽泛的问题24。例如：可以把一款游戏的界面设计成十分“绚丽多彩的”、“吸引人的”、“有趣的”“新奇好玩的”等等。用户体验目标注重的不是游戏界面的有效、可靠性，而是否能让游戏用户满意、是否能增强游戏的沉浸

57、感、是否能激发游戏用户的创造力和满足感等等。1. 切实关注用户需要的设计用户在网页游戏站点上的一组操作，所有的操作，都是在完成特定的“任务”，操作流程，也就是“任务流”。分析用户使用游戏提供的一个功能时，会出现的各种可能情况以及其后续可能的发展，可以把“任务流”组织成一个树状的结构。对任务流的结束点的处理方式（尤其是操作失败的情况），可以间接体现游戏的用户友好程度。2. 适合不同“级别”用户的设计用户分类是个不小的话题。一个在线游戏中有各种级别的玩家，不同级别的玩家，有着及其不同的特点。对这些玩家按照各自不同的特点和需求进行分类并研究，有针对的进行不同的设计。3. 关注用户“有限注意力”的设计

58、用户在屏幕上的注意力是有限的，过多的不相关信息，会很大的影响用户的阅读。良好的操作界面必然是要有助于用户把注意力放在当前任务上的。用户的正常关注焦点，有相关研究表明是在屏幕中点到向上1/4 的范围，这是界面布局的核心区域，游戏主要内容就应该尽量涵盖这个区域，而将其他辅助块，有秩序地围绕放置。对于网页游戏，现在的功能复杂度还无法企及大型客户端游戏的水平，但是其复杂度也是不能忽略的。而且，一个简洁、顺畅的操作界面，对一个良好设计的贡献度是相当大的。用户体验目标实现无疑是一个富有创意的、却也比较麻烦的设计领域。一方面，不容易有直观的标准指明设计的好坏，一方面，用户对具体功能的使用具有偏好性，以及习惯

59、性，另外还有当前浏览器技术上和硬件的一些限制。所以决定了这样的设计注定是一种“迭代”式的开发工作：基于一个原形，不断获得反馈，不断完善和修正。网页游戏的架构上的分层思想，无外乎也是在顺应这样一种开发模式。3.2 以用户为中心的网页游戏设计方法网页游戏用户界面设计的关键特征包括：以用户为中心，特定的可用性标准和迭代设计。以用户为中心是网页游戏界面设计的一个核心原则，虽然在整个的开发过程中不能保证用户的每一个环节的参与，但这一原则能够提醒设计人员注重用户的重要性，始终把用户的需求放在第一位来考虑。在开发初始阶段就应该确定出特定的可用性目标和用户体验目标，在进行具体设计的时候应该通过迭代运用不断的反

60、馈信息来改进界面设计的不足并完善它，通过不断的设计，评估到再设计这样一个反复循环趋于最优化的迭代过程使界面设计不断的得到改进和优化。用户参与性设计主要强调用户作为最终的界面使用者参与整个游戏界面设计过程，从对于游戏用户本身的调查到最终游戏界面的评估；迭代式设计指对于整个游戏界面设计的过程进行不断的改进设计。每一次迭代以游戏界面设计的评估结果和用户意见为参考进行，最终目的是设计出最令用户满意的游戏界面。1. 以用户为中心的设计系统设计必须根据用户的需要来确定，而不能由功能过程需求，或硬件限制等来推动。以用户为中心这是关于交互设计的一个核心观点，让用户参与整个设计和评估，有助于及时得到反馈。2.