网页游戏中界面设计的研究和应用论文.docx
《网页游戏中界面设计的研究和应用论文.docx》由会员分享，可在线阅读，更多相关《网页游戏中界面设计的研究和应用论文.docx（147页珍藏版）》请在冰点文库上搜索。
网页游戏中界面设计的研究和应用论文
上海交通大学
硕士学位论文
网页游戏中界面设计的研究和应用
姓名：
***
申请学位级别：
硕士
专业：
数字媒体艺术与技术
指导教师：
***
20080901
V
网页游戏中界面设计的研究和应用
摘要
论文介绍了主流的网页游戏界面设计的特点，根据人机界面设计
的原理，综合网页界面设计和游戏界面设计的各自特点给出网页游戏
界面设计的原则、方法，流程，并应用于实际开发中来指导网页游戏
的界面设计。
论文主要阐述了人机界面设计的基本原理，包括界面设计原理，
认知心理学和视觉习惯基础理论，具体分析以上要素在网页游戏界面
设计中的作用。
根据网页游戏的目标用户的心理特征模型和网页游戏
的网络特征模型对游戏界面设计原则进行了深入研究。
根据人机界面
设计基本原理，即符合用户需要的“简单、自然、友好、一致”界
面设计基本原则的基础上，结合网页界面设计的原则和游戏界面设计
原则三方面综合分析得出网页游戏界面设计的原则。
分析了每一种游
戏的特殊性，阐述了现在主要的6种游戏类型的特点,提出了基于游
戏不同类型的界面设计原则。
根据所要达到的可用性目标和用户体验目标，得出了用户参与的
迭代式的界面设计方法。
该方法的主要特征为：
用户参与性设计与迭
代设计。
即在整个界面设计过程中，用户要全程参与设计过程；通过
迭代，进行重复的“设计——评估——再设计——再评估”的过程，
就能利用反馈来改进设计。
迭代是不可避免的，因为设计人员不可能
VI
一次就找出正确地解决方案。
在用户数据的收集、分析、最初的概念
设计、正式模型设计、评估等各个阶段都需要不停和用户进行交流反
馈。
迭代设计是一个有目的的设计过程，通过几次设计迭代克服完全
需求所规范的固有问题，每一次迭代都可以改进最终的游戏界面。
该方法的流程为：
确定软硬件环境、设计调研、游戏任务分析设
计，以设计原则为基础的建立模型、游戏界面的图形设计、用户参与
的迭代式设计测试和评估，详细分析了在每个环节的具体实施方法以
及该环节中应该注意的问题。
根据先前得出的设计原则来作为对网页游戏具体评价的依据来
进行设计功能和设计效果评价。
评价一款网页游戏的方法主要有实验
方法、检测方法、调查方法。
选取一定的样本用户，让用户使用游戏，
观察其反应，在所有用户完成游戏界面测试过后，分别考察使用新版
和旧版本的用户，对用户进行满意度调查。
用论文所得出的原则和方
法来对网页游戏界面进行指导和规范设计后，较原版本游戏用户更加
认可，有更好的满意度。
认为基本上符合用户之前在需求调查中所提
出的要求，取得用户较好的评价。
验证了论文提出的设计原则以及设
计方法的科学性。
是的确符合以用户为中心的界面设计理论，是可以
用来指导未来的网页游戏的界面设计。
关键词网页游戏，人机交互设计，游戏界面设计，可用性，用户体
验，迭代设计
VIII
RESEARCHANDAPPLICATIONONUIDESIGN
OFWEBGAME
ABSTRACT
UserInterfacewhichasabridgebetweenWebGameanduserhas
greatdifferencewithothergamesininterfacedesign.Thispaperfirst
introducedandanatomizedthedoctrineofWebGameand
Human-ComputerInteractiontechnology.Thenpresentsourresearch
work:
theprincipal,methodandworkflowwhichcanserveasaguidefor
futureGraphicUIdesign.
WebGameisoneofOnlineGamingwhichmadewithwebpage
programminglanguagesuchasJAVA,ASPandActiveX.Gameplayer
canplayitinwebbrowserdirectlyanddonotneeddownloadandinstall
anyclientsoftwareintheirPC.ContrasttoWebGame,thetraditional
onlinegamesneedtodownloadmorethan300M（someevenmorethan
1G）oftheclientsoftware.AllpeoplewhocanconnecttoInternetcan
playgamenocost,nowaitingwithinputURLinwebbrowserandneed
downloadnothing.Alongwiththeinternettechnologyunceasing
development,WebGamegetarapiddevelopmentoverthepastfewyears
andwillbelikelytoreplacetraditionalonlinegamesinthefuture.
Recently,theindustryofGameregardsbrowserasavirtualoperating
IX
system,whichmakestheprospectofwebgameevenbetter.
Althoughthedomesticgameisinfullswingpageandcarriedout,
butthelackofsystemstheoryasaguide,leadingtomanycasesoffailure
ofthegame.Atpresent,itisonlyashortintroductiononWebgameUI
designabroad,andlackofsystematic,comprehensive,specific
descriptionandanalysisofthedomainofWebgameinterfacedesign.
Interfaceistheexternalperformanceofthegame;ithasadirectimpact
eachotherbetweenGameanduserandhasaveryimportantpositionin
theentiregamedesign.Intheinterfacedesign,fromdeterminingcultural
backgroundtorealizingdesignidea,fromfeasibilityanalysistoproject
presenting,filter,amendmentandevaluation,itmustbearational,orderly,
systematicprocessandshouldbeacorrespondingsystemtheorytoguide.
ThisarticlefocusedontheWebGamegraphicinterfacedesign.We
analyzethecurrentUIdesigninWebGameanddeepresearchavailability
anduserexperience,andthenbringforwardprinciples,methodsand
ProcesstoguidethefutureoftheWebGameUIdesign.
Accordingtoavailabilityobjectanduserexperiencegoals,wedraw
aniterativemethodwithuserparticipatingininterfacedesign.
Ourmaincontentsareasfollows:
Firstofall,respectivelyelaborateonthebasictheoryof
human-computerinterfacedesignandtheconceptofWebGame.Thenwe
X
analyzecharacteristicsofexistinggamesandwebbrowserplatformthen
concludetheprinciples,methodsandprocessesinWebGameUIdesign.
Basedonobjectivesofuserexperienceandavailability,wehavecometo
theUIdesignmethodwhichisuserparticipantanditerative.Usersshould
beinvolvedinthewholedesignprocess,andimprovelastUIby
repeatingtheprocess“design-evaluation-re-design-re-evaluation”
againandagain.
Finally,weapplythisprinciplesandmethodstodesigningagame
andevaluateitusingobservationandusersurvey.
Wehopethatprinciplesandmethodwhichweconcludediseffective
andvalidandwealsohopeitcanguidethefutureofinterfacedesignin
WebGame.Finally,wehaveappliedprinciplesandmethodwhichwe
concludedtoWebGameinterfacedevelopmentandvalidateitiscorrect
andscientificusingUsermonitoringandusersurveymethod.
Keywords:
WebGame,InteractionDesign,GameInterfaceDesign,
Usability,UserExperience,IterativeDesign
III
上海交通大学
学位论文原创性声明
本人郑重声明：
所呈交的学位论文，是本人在导师的指导下，独
立进行研究工作所取得的成果。
除文中已经注明引用的内容外，本论
文不包含任何其他个人或集体已经发表或撰写过的作品成果。
对本文
的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。
本
人完全意识到本声明的法律结果由本人承担。
学位论文作者签名：
李晓蕙
日期：
年月日
IV
上海交通大学
学位论文版权使用授权书
本学位论文作者完全了解学校有关保留、使用学位论文的规定，
同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，
允许论文被查阅和借阅。
本人授权上海交通大学可以将本学位论文的
全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫
描等复制手段保存和汇编本学位论文。
保密□，在年解密后适用本授权书。
本学位论文属于
不保密□。
（请在以上方框内打“√”）
学位论文作者签名：
李晓蕙指导教师签名：
杨旭波
日期：
年月日日期：
年月
1
1绪论
1.1论文的选题背景及意义
1.1.1背景知识
1.无端网游
休闲娱乐已经成为我们这个时代生活很重要的一部分，游戏（Game）是一种参
与、交互式的娱乐形式。
这一概念是相对于被动式的娱乐形式而言的，看电视、
读书、看电影都是被动式的娱乐方式，在这些方式中，娱乐是展现式的，受众只
能被动参与。
游戏则要复杂很多，当人们玩游戏时，因积极参与而获得快乐。
随着计算机以及图形图像技术的发展，出现了电子游戏。
电子游戏指以电子
元器件组装成的设备为运行平台的游戏。
这与传统的游戏方式是不同的，传统的
游戏需要现实中的游戏道具，如：
象棋、扑克牌等。
而电子游戏则是通过控制电
子游戏设备与电子游戏进行交互的游戏方式。
在互联网时代，电子游戏已经发展成为网络游戏。
玩网络游戏也已经成为当
今人们休闲娱乐最为流行的一种方式。
网络游戏拥有强大的人与人之间的交流平
台，用户在游戏中得到充足的虚拟现实体验，这是过去传统游戏不能比拟的。
同
时，人的思想和行为等方面在玩游戏的过程中已经受到了游戏的影响[1]。
网络游戏是利用TCP/IP协议，以Internet为依托，可以多人同时参与的游
戏项目。
网络游戏按照联网方式分为：
脱网单机游戏和网络游戏；而网络游戏按
照客户端模式则分为：
需要安装相关内容客户端软件的传统网游和不需要客户端
的无端网游。
无端网游的主要形式为WebGame，即网页游戏。
社会在进步，技术在发展，而互联网和Flash技术的深层次发展让“传统客
户端网游”运行在浏览器中的美好愿望已经成为现实。
无论从游戏的功能性、系
统的完善性和画面的视觉冲击力等方面，全新的无端网游都已达传统2D网游精
品的水准，甚至在某些方面有所超越，比如在游戏的便捷性和优秀的环境适应能
力等方面。
未来的计算机软硬件技术的发展，不仅个人电脑，使得手机，电视，PDA等
都可以作为客户终端，由于互联网无处不在，拥有海量信息存储空间的服务器端
超级强大，本地客户端甚至不需要硬盘来存储信息。
微软认为未来的时代，连软
2
件使用都希望完全通过网络来实现，而不需要在去买什么光盘回家安装什么软
件。
无端网游终将取代传统游戏，成为未来游戏的主流和发展方向。
2.游戏界面设计
在人和机器的互动过程（Human-MachineInteraction）中有一个层面，即我
们所说的用户界面（UserInterface）。
它是计算机科学与认知心理学、设计艺术、
人机工程学、人因学（HumanFactors）、社会学、语言学等交叉研究领域。
人机
界面是人与机器之间传递和交换信息的媒介。
从心理学意义来分，界面可分为感
觉（视觉、触觉、听觉等）和情感两个层次。
界面的功能可分为实用功能和审美功
能。
实用功能完成界面沟通人和机器的使命；审美功能在满足用户审美要求的同
时并辅助实用功能。
用户界面设计（UserInterfaceDesign）是屏幕产品的重要组成部分。
界面
设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、符号学等都扮
演着重要的角色[2]。
游戏界面指游戏软件的用户界面，包括游戏画面中的按钮、动画、文字、声
音、窗口等与游戏用户直接或间接接触的游戏设计元素。
游戏界面设计（Game
InterfaceDesign简称GID），是指对电子游戏中与游戏用户具有交互功能的视
觉元素进行规划、设计的活动。
1.1.2论题研究目的与现实意义
历史总在不断重演并且惊人的相似，正如网络游戏取代传统单机游戏一样，
眼下，动态无端网游取代客户端网游的趋势开始愈发明显。
网页游戏正是属于网络游戏范畴，它是指无需下载和安装客户端程序、基于
ASP、PHP、Java和ActiveX等WEB编程技术和Flash技术，运行于WEB浏览器
的网络在线游戏。
是伴随着互联网技术的成熟高速发展起来的新种类游戏。
1.目的
今年网页游戏突然之间变得很热门，盛大、腾讯、17173、新浪等大公司都
很积极的关注，甚至连XX也掺和了进来。
WebGame究竟针对什么用户？
它究竟要发展向何方？
有对这个问题的研讨。
大家的意见主要还是说WebGame主要针对上班一族，也就是当作小菜来吃。
很多
人都认为WebGame是不可能成为主流。
但是我认为，WebGame最终将取代现存的网络游戏，而不是一种配菜。
从受众群体容量来说，网页游戏有天然优势。
能通过浏览器上网的人都是网
页游戏的潜在受众。
根据最新的调查显示：
预计到今年年底全球互联网用户数量
将会超过10亿，而中国网民数量已经达到2。
2亿，超过美国成为世界第一，网
3
民上网最主要目的是为了娱乐。
网页游戏，使用浏览器把游戏体验的途径简化到
了极致：
能上网的人，都可以“无需下载任何东西，无成本、无等待”地玩网页
游戏，只要输入URL就可。
这种简化是革命性的，与PC网游成鲜明对比。
PC网
游需要下载300M以上（有的甚至超过1G）的客户端，无法与网页游戏的便利性
相比。
从科技发展角度来说，未来的计算机软硬件技术的发展，不仅个人电脑，使
得手机，电视，PDA等都可以作为客户终端，由于互联网无处不在，拥有海量信
息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。
连微
软都认为未来的时代，连软件使用都希望完全通过网络来实现，而不需要在去买
什么光盘回家安装什么软件。
WebGame最终取代现存的网络游戏，也是大势所趋。
而且现在已经有一些开发者在从事这个方面的研究。
我们也看到大型网络游
戏的网页化，网页游戏随着科学技术的提升，IE7等浏览器技术的成熟和普及，
WebGame2.0的时代即将到来，也将会为网络游戏产业带入了一个新的时代。
刚
刚推出的《SherwoodDungeon》（舍伍德地牢）3D高品质网页游戏代表目前世界
最顶级水平。
从图1-1可以看出，它的画面已经完全可以媲美当今的网络游戏。
图1-1舍伍德地牢的界面截图
Fig.1-1Interfacescreenshotof
SherwoodDungeon
国内最新的“闪游”《乐土》，还在测试阶段，但是从图1-2中可以看出它
的界面已经完全可以媲美传统网络游戏。
而在游戏系统方面也做到了玩家之所
需，战斗，宠物，聊天，装备打造，非常全面系统。
4
图1-2《乐土》的界面截图
Fig.1-2InterfacescreenshotofParadise
看到了以上这些游戏，大多数人都会认为客户端游戏最终可能被网页游戏淘
汰。
2.研究的意义
从网页游戏整个行业发展来说，虽然目前网页游戏产业带来的利润越来越丰
厚，但仍然有很多新的网页游戏在抄袭已有经典游戏模式的现象存在，很多国产
游戏只注重商业效应，对于游戏性和游戏的人机设计的探索却还是原地踏步，甚
至可以说是毫无创新!
游戏质量的良莠不齐，有的甚至违背了最基本的人机交互
设计原则，只想凭借华丽的游戏画面和简单的游戏博弈以及低廉的费用来吸引玩
家一时的好奇心。
国内网页游戏虽然是如火如荼地进行着，但整个行业缺乏系统
的理论作为指导，导致很多失败的游戏案例。
业界最近把浏览器作为一个虚拟的
操作系统来看，这使得网页游戏的前景更加美好。
从用户角度来说，用户愈为迫切地需要符合“简单、自然、友好、一致”原
则的人机界面。
游戏的使用者也从计算机专家迅速扩大到了广大未受过专门训练
的普通用户。
计算机用户发生了改变，非计算机专业的普通用户成了用户的主体，
这一重大转变使游戏的可用性问题变得日益突出起来。
游戏人机界面的重要性在
于它极大的影响了最终用户的使用，影响了游戏的推广应用。
著名的游戏开发者BillVolk曾经对游戏设计写下了一个等式“界面+产品
要素=游戏。
很明显，BillVolk的意图并不是说设计一款游戏就是简单的加法，
而是强调在游戏设计中界面的重要性。
他认为“你的游戏就是你的界面”。
游戏
界面是人和游戏机之间沟通的桥梁，它起到连接玩家和游戏内核的作用。
玩家在
玩游戏时，所见、所感、所接触的是游戏界面，而不是游戏内核，只有通过游戏
5
界面，玩家才能够体会到游戏的内核带来的游戏乐趣，因此对游戏本身来说，界
面在很大程度上影响着游戏的可玩性（Playable）。
游戏AgeofEmpires的设计
者们曾提出“前十五分钟法则”，即对一款游戏来说，如果入门玩家不能在前十
五分钟顺利地弄明白基本操作规则和策略，或者铁杆玩家不能在前十五分钟感受
到兴趣和挑战的话，他们将永远离开这个游戏，不再做进一步尝试。
因为人们玩
游戏的目的是娱乐，在工作之后能够放松、娱乐一下，所以我们不能要求用户像
学习其它应用软件那样花一天甚至一个星期时间去弄清到底怎么玩这个游戏[3]。
虽然目前有少数国外的资深游戏设计师在其著作中谈到网页游戏界面设计，
但也只是简单的概略性的介绍，对整个网页游戏界面设计方法缺乏系统、全面、
具体的介绍和分析。
游戏界面是游戏的外在表现，是游戏中与游戏用户直接相互
影响的部分，在整个游戏设计中占据很重要的地位。
游戏界面设计从游戏文化背
景确定到界面构想产生、可行性分析到提出方案、方案分析、筛选、修正和评估
必须是有理、有序、系统化的一个完整过程系统，应该有相应的系统理论来指导。
1.2本文的主要工作
本论文是在致力于以用户为中心的人机交互界面的设计与评估技术的研究
工作的基础上撰写而成，论文主要根据网页游戏的特点，提出一些用以规范游戏
界面设计的原则，并遵循该原则提出了游戏用户参与的迭代式界面设计方法和流
程，并对该方法和流程进行了应用验证。
论文的主要工作如下：
分别对人机界面设计的原理和用户的认知心理和视觉习惯三个方面来研究
网页游戏界面设计；
分析当前网页游戏的概念、特点、分类、目标用户从而来分析网页游戏界面
并进行相关研究；
得出网页游戏界面设计的原则、实现方法、流程和评价4个方面的基本理论
并进行相关应用验证。
本文旨在通过根据得出的理论来优化和改善网页游戏中的界面设计，使网页
游戏能够更加受到用户的喜爱，为未来的网页游戏界面设计提供有理、有序、系
统化的理论指导，促进网页游戏的进一步发展。
1.3研究方法
本文采用的是从抽象到具体再到抽象的叙述方法，首先是对人机交互的界面
升级会员 