第一篇：网页UI界面设计展望论文（共）
旗帜栏是宣传式的栏目，作为网页中传递整站信息的重要途径，最易于浏览者查看。旗帜栏文字具有统一性、标识性等性质，设计趋于图形化。导航栏是地图式的栏目，在导航条的布局中，文字是最好的用户向导，导航栏文字的设计效果决定了浏览者能否迅速找到目标页面。网站种类复杂属性各异，在做网页文字设计时，要充分考虑到使用者的年龄、性别、职业、文化背景、经济水平等因素。网页“布局”是对页面的内容尺寸、间距及位置的设计，好的布局可以有效地帮助用户快速找到目标内容，并在视觉效果上给用户享受。合理的布局必须要有清晰的视觉层次，必须直观体现网页UI界面各元素之间的重要梯度，用户首先关注的区域是标志、LOGO和导航栏等重要元素。体现视觉层次，还需要在设计视觉流时还应考虑交互人物的逻辑性和浏览习惯。
多媒体设计
多媒体技术是指将多种单媒体复合而成的技术。多媒体技术融合了各种视觉和听觉媒体，包括动画、文字、图形、图像、语言、音乐和立体声响等，多媒体网页UI界面可以让用户同时接受多样的媒体信息来源。网页UI界面设计中使用多媒体技术可以体现以下几个特点：1）集成性，对远程多媒体的影音信息统一取得与发布。2）交互性，人性化的实现信息传播，能够主动选择和控制信息流方向。3）非线性，创建了超文本链接方法，把灵活展示浏览内容。4）实时性，实时控制多媒体信息，及时配合用户指令。5）动态性，用户可以按照自己的需求选择信息使用方式，甚至重组信息的各种表现形式。
网页交互设计
交互设计需要解决的是人与机器之间互动的问题，是表现层的东西，好的交互设计方案能够让用户感觉网页非常好用。怎样的网页交互设计才算是好的方案呢？1.让人有耐心等待。根据网络调查，大多数用户对网页打开的等待时间最多坚持5秒钟，如果5秒内页面都不能打开，那这个页面上的内容将没有任何意义都就将。所以在交互设计时，需要考虑网页等待时给用户提供的信息。最好的方式是反馈，当用户等待时，告诉用户他的操作是否成功并且将剩余的等待时间实时呈现，这样就能有效解决用户不能耐心等待的问题。2.让人不用动脑筋想。好的网站能够帮助用户快速完成任务，要达到快速完成任务的目的，交互设计必须使页面简单，尽量让用户浏览时不收不必要的干扰，最好能够符合用户心智模型。因为，大部分的用户在浏览网站时希望的是能快速找到勉强应付的方案，而不愿意主动寻找方案，百分之八十的用户只会用百分之二十的功能。
网页UI界面设计展望
目前，网页UI界面设计主要是三维的视觉界面和二维的图形界面，同时辅以动画、声音等多媒体插件布局设计。随着计算机技术的不断发展，三维立体的操作界面系统会在网页设计中逐步普及，三维立体界面的直接操作是虚拟现实（VirtualReality）交互性的一个重要表现方式。三维虚拟空间中的直接操作包括平移、拾取和旋转等操作，例如如今比较前沿的3D影装和多点触控技术。三维直接操作使得网页UI界面设计不再仅仅局限于视觉效果的三维变换，可以实现类似于四维空间的人机直接交互，从而更好的完成用户操作。
结论
几十年来，网页UI界面设计经历了不同的发展阶段，流行了各种不同的风格，当前网页UI界面处于图形用户界面时代，作为网页设计师并不能仅仅满足这种现状，需要和计算机科学家们一起合作，积极探索新型界面风格的人机交互技术。现代网页UI界面设计的主要任务就是要把用户实际工作过程、任务模型、行为方式、心理模型有效化的结合，并合理的转换成界面产品内容的实现模型，从而向用户呈现一个尽可能接近其真实角色，符合高度审美标准的界面产品系统模型。
第二篇：UI界面设计服务委托合同范本
手机UI界面设计服务委托
合同
书
手机UI界面设计服务委托合同范本
本合同由以下当事人订立，并于
______年____月
____日签订：
甲方：_______________
乙方：_______________
依据《中华人民共和国合同法》的规定，合同双方就甲方系统客户端的部分UI设计，经协商一致，签订本合同。，以资双方遵照执行：
第一条：定义
1、UI设计服务是指_______________公司因受客户委托向该客户提供的系统UI设计一种收费服务（以下称“服务”），服务说明参见合同及其附件。
2、服务合同：甲乙双方本着“合作、平等、诚信”的原则，就服务内容和服务过程中双方的权利义务在本合同中进行的有关约定。
第二条
UI界面设计步骤
1、甲方应将UI设计涉及的相关资料（包括文字、图片等）收集完整，并列出自己对网站总体要求与建设效果等书面要求交予乙方，乙方签收后按此执行。
2、乙方根据甲方UI界面设计设想核算UI界面设计具体涉及的服务项目及金额，并书面告知甲方，由甲方对此审核，如甲方对此无疑义则予以书面确认，否则由双方再行协商。
3、自收到甲方交纳70%网站制作首款费用之日起，乙方开始制作网站，并于日内制作完毕。（其中不包含甲方修改意见以及确认所需日期和国家工信部备案所需日期。）
4、在UI界面设计过程中乙方应及时与甲方进行UI界面设计进程的沟通。
5、UI界面设计基本完成后，乙方应上传到乙方公司的服务器上请甲方确认，并根据甲方意见进行修改。
6、甲方根据验收标准在书面确认制作的网站已经达到甲方的要求后，验收完毕后在五个工
作日内将剩余30%
款项汇至乙方银行帐户，并将汇款凭证传真至乙方公司，但甲方将剩余款项汇入乙方银行帐户的，自该汇入之日起视为甲方向乙方支付全部服务费之义务履行完毕。
7、技术情报和资料的保密：研究开发人员在此期间之内严格保守该研发项目的技术情况和资料，未经委托人许可不可擅自传递、转载所有相关资料给第三方；一经发现委托人有权向司法机关提起诉讼，研发人员将承担相应的法律责任；
8、在本合同有效期结束，项目资料全部提交，委托人签收后，研发人员必须销毁留存的所有与该项目有关的资料与文件；在本合同有效期结束，研发人员必须严格遵守保密条款，对于该研发项目内容未经委托人许可，不可透漏给第三方；一经发现委托人有权向司法机关提起诉讼，研发人员将承担相应的。
第三条：服务内容及费用
第四条：甲方权利与义务
4.1、合同如果甲方提交的信息中包含任何违反法律法规、违反公共道德准则或侵犯第三方合法权益的内容，乙方有权拒绝收录，但乙方应将拒绝收录的内容书面通知甲方。
验收标准为：
1、页面是否按甲方需求进行设计。
2、各链接是否准确有效。
3、文字内容是否正确（以客户提供的电子文档为准）。
4、是否完成功能模块设计，各功能模块运行是否正常。
4.2、如有其他未能解决的问题，可与乙方服务投诉部联系协调解决。
4.3、甲方须在合同签订后2
日按照本合同中约定的比例向乙方支付服务费用。如甲方未能按时支付前述费用，乙方有权利拒绝向甲方提供合同中规定服务。
4.4、为确保甲方利益，甲方有权要求乙方提供UI界面设计服务确认函（需要明确确认函的目的）
4.5、甲方在服务期间若需要变动网站网页设计风格或者针对数据库表结构进行增加或变动等新的UI界面设计服务内容，需签订新的合约，并对有关事项另行约定。
第五条：乙方权利与义务
5.1、乙方应照UI界面设计服务合同及服务条款向甲方提供有关服务，出现问题，应及时向甲方进行解释说明并及时解决。
5.2、乙方应按照经甲方书面确认的UI界面设计服务报价向甲方收取服务费用。
5.3、若甲方要求乙方提供UI界面设计服务确认函，乙方应按照甲方要求向甲方提供UI界面设计服务确认函。
5.4、乙方不得将甲方为UI界面设计需要所提供给乙方的任何文字、图片等资料及有关信息作为其他用途使用，或因任何目的提供给任何第三方使用，但该等使用或提供使用经由甲方书面授权同意的除外。若有违反，乙方须承担一切相应的法律责任并赔偿甲方因此遭受的损失。
5.5、在网站使用过程中，甲方可就任何非因甲方原因或者不可抗力所产生的网络技术问题向乙方提出投诉或咨询，乙方必须及时给予反馈并于接到投诉电话之时起24小时内解决问题。
第六条：保密义务
任何乙方必须对另一方所获取的任何商业秘密严格保密，在未事先取得另一方书面同意的情况下，不得以任何形式向第三方进行披露，否则承担相应违约责任并赔偿由此造成的所有损失。
第七条：修改条款
本合同所订一切条款，甲、乙任何一方不得擅自变更或修改。如一方单独变更、修改本合同，对方有权拒绝履行，并要求单独变更、修改合同的另一方赔偿一切损失。
第八条：不可抗力条款
甲乙任何一方如确因不可抗力的原因，不能履行本合同时，应及时向对方通知不能履行、延期履行或部分履行的理由。在取得有关机构证明后，本合同可以不履行或者延期履行或部分履行，并全部或者部分免予承担违约责任。
第九条：适用法律与争议之解决
本合同之签署、效力、解释和执行均应适用中华人民共和国法律。对于因本合同的解释及执行而产生之争议，双方通过友好协商解决；协商不成时，任何一方均可将有关争议提交合同签订地的人民法院起诉，提起诉讼。
第十条：其他
1、本合同构成双方之间完整意思表示，取代先前所有讨论、协商及合同
2、本合同一式两份，甲乙双方各执一份
3、本合同附件为本合同的有效组成部分，与本合同具有同等法律效力。本合同自甲乙双方签约代表签署并加盖公章后生效
4、其他未尽事宜，依据有关法律规定办理
5、因履行本合同或者与本合同相关的争议，双方应协商解决；协商解决不成的，任何一方均有权将争议提交相关仲裁机构。
6、本合同由双方之正式授权代表于__________月__________日__________在_________签订。
甲方：_______________
乙方：_______________
授权代表：_______________
授权代表：_______________
地址：
地址：
电话：
电话：
盖章：
盖章：
开户行：
帐号：
开户行：
帐号：
第三篇：UI用户界面设计课程设计报告
UI用户界面设计 大作业课程设计报告
题 目：依依旅行系统前台应用及后台管理院 别：专 业：学生姓名：指导教师：成 绩：
信息与控制学院
计算机科学与技术 120210137宋依依
孙丽云
2015年 6 月 12 日
一、系统概述 1.1课程设计题目：
依依旅行系统前台及后台管理
1.2 课程设计运行环境：
1.2.1前台开发工具：
Java，MyEclipse6.5，Tomcat5.x 1.2.2后台开发工具：
Microsoft SQL Server 2008 1.2.2系统运行结果工具：
360安全浏览器7.1 1.3 课程设计实现技术：
基于HTML，CSS，JSP等技术的应用
二、依依旅行系统需求分析
2.1 系统功能需求：
系统的功能需求包括一下几个方面
（1）游客在不登录的情况下只可以进行相关旅行，车票，酒店信息的查询。（2）游客通过注册登录或者登录后，可以通过网络查询景点的信息概况和预定景点票，酒店，车票（飞机票，火车票，或者租车）。
（3）游客登录后还可以进行各种订单的退订，个人信息的修改。（4）系统管理员可以查看游客的预定请求和取消预定的请求。（5）系统管理员可以对系统的数据库进行维护，例如增加、删除和修改景点信息，增加、删除工作人员帐户，增加和删除旅行用户。
三、依依旅行系统概要分析
3.1旅游系统模块介绍
满足以上需求的管理系统主要包括以下几个模块。（1）旅游数据维护模块
基本数据维护模块提供了使用者录入、修改并维护基本数据的途径。例如对游客及导游及工作人员各项信息的更新和修改。（2）旅游业务模块
基本业务模块主要用于实现游客查询景点信息和预定的管理，可以登陆系统预定景点游票和导游预定，工作人员可以处理预定信息和取消预定信息等操作。
（3）数据库管理模块
在系统中，所有景点信息以及工作人员和导游的帐户信息都要进行统一管理，景点的使用情况和预定情况也要进行详细的记录，要用统一的数据库平台进行管理。（4）旅游信息查询模块
信息查询模块主要用于查询景点的信息和游客的预定信息。下图所示表示了旅游开发管理系统的功能需求：
3.2旅游数据维护模块
数据维护模块包括如下图所示的几个方面：
（1）修改更新景点信息：系统管理员可以更新和修改景点信息。（2）更新和修改信息：系统管理员可以更新和修改旅游景点和酒店出行，删除游客的信息。
（3）添加景点信息：系统管理员可以添加景点及景点信息。（4）删除景点信息：系统管理员可以删除景点及景点信息。
3.3旅游业务模块
旅游业务模块包括一下几个方面：
（1）注册登陆后，更改个人信息
（2）查询信息：游客查询景点使用信息及景点概括信息。（3）预定取消景点：游客预定景点票。
（4）酒店预订：游客可一根据情况预定酒店。
（5）出行方式：游客可以根据自己的情况选择出行方式。
3.4数据库管理模块
数据库模块包括一下一个方面：
（1）游客信息管理：信息包括游客的姓名，电话号码，及联系方式等。（2）景点信息管理：景点信息包括景点的名称，代号，概况等。（3）酒店信息管理：包括酒店名称，地址，规格等。
（4）出行信息管理：出行方式，火车票，租车信息等。（5）预定信息管理：景点票，酒店，车票信息。
四、依依旅行系统数据分析
4.1管理员信息表
4.2用户信息表
4.3景点信息表
4.4酒店信息表
4.5火车票信息表
4.6飞机票信息表
4.7租车信息表
4.8用户支付信息表
4.9常用游客信息表
4.10游客常用地址信息表
4.11景点订单信息表
4.12火车票订单信息表
4.13飞机票订单信息表
4.14租车订单信息表
4.15酒店订单信息表
4.16用户评论信息表
五、依依旅行系统的前台实现过程
5.1依依旅行系统首页
注：此时因系统未登录，所以只可以查看详情，若进入景点点击预定和留言或者点击出行方式和酒店预订则跳转到5.2登录界面
5.2依依旅行系统登录界面
当输入用户不存在时跳转到
当输入用户存在，密码输入有误时跳转到
当输入用户存在，密码正确时跳转到5.3
5.3依依旅行系统登录界面
若及点击退出则回到5.1首页界面。
5.4依依旅行系统注册界面 第一步：输入用户名，当用户名已存在时
当用户名不存在时
当密码两遍输入不相同时
当密码两遍输入相同时
5.5依依旅行系统修改个人信息界面
点击修改
修改后点击保存
5.6依依旅行系统修改个人密码界面
当前密码输入有误时：
新密码两遍输入不同时：
新密码两遍输入都正确时时：
5.7依依旅行系统常用游客信息界面
添加游客
5.8依依旅行系统支付信息界面
5.9依依旅行系统订单信息界面 景点订单信息
火车票订单信息
飞机票订单信息
租车订单信息
酒店订单信息
分别可以进行取消订单操作
5.10依依旅行系统预订信息界面 可以选择出行日期，出行人数
点击预订后对信息进行确认，并计算总价格
若积分大于总价格：预订成功
若积分小于于总价格：
5.11依依旅行系统出行方式界面 火车票
飞机票
租车
分别可进行预订
积分充足，与积分不足的情况同景点预订 剩余票数不足时：
5.12依依旅行系统酒店预订界面
5.13依依旅行系统退出界面
若及点击退出则回到5.1首页界面。
六、依依旅行系统的后台实现过程
6.1依依旅行系统管理员登录界面
注：管理员没有注册功能
管理员名称不存在或密码输入有误时情况与用户登录相同 6.2依依旅行系统管理员所有管理员界面
6.2依依旅行系统所有用户界面
可进行删除操作，提示操作人为当前用户指明操作人的操作成功
6.3依依旅行系统管理员所有景点信息界面
可对其进行添加，修改和删除操作
6.4依依旅行系统出行界面 飞机票信息
火车票信息
租车信息
6.5依依旅行系统用户订单信息界面 景点订单信息
飞机票订单信息
火车票订单信息
租车订单信息
酒店订单信息
6.6依依旅行系统管理员信息修改界面
七、依依旅行系统的总结
通过本次课程设计，对JAVA编程，WEB网页制作以及数据库设计有了更深刻的认识和学习到了更多细小的知识点，遇到难题，通过小组讨论以及在网上对相关资料的查询得到了有效的解决办法、本来这门课的知识学的就不够扎实，本次课程设计，在设计过程中碰到了很多问题，刚开始要设计的时候，还真不知道从哪里下手但最终在图书、同学和老师的帮助下都得到了解决，让我学会了好多书本上没有的东西，最重要的是知道了自己动手的不易，也知道了只要动手做就一定会得到收获！
一分耕耘一分收获！
第四篇：网页游戏中界面设计的研究和应用(论文)
上海交通大学 硕士学位论文
网页游戏中界面设计的研究和应用
姓名：李晓蕙 申请学位级别：硕士 专业：数字媒体艺术与技术
指导教师：杨旭波
20080901
网页游戏中界面设计的研究和应用
摘 要
论文介绍了主流的网页游戏界面设计的特点，根据人机界面设计 的原理，综合网页界面设计和游戏界面设计的各自特点给出网页游戏 界面设计的原则、方法，流程，并应用于实际开发中来指导网页游戏 的界面设计。
论文主要阐述了人机界面设计的基本原理，包括界面设计原理，认知心理学和视觉习惯基础理论，具体分析以上要素在网页游戏界面 设计中的作用。根据网页游戏的目标用户的心理特征模型和网页游戏 的网络特征模型对游戏界面设计原则进行了深入研究。根据人机界面 设计基本原理，即符合用户需要的“简单、自然、友好、一致” 界 面设计基本原则的基础上，结合网页界面设计的原则和游戏界面设计 原则三方面综合分析得出网页游戏界面设计的原则。分析了每一种游 戏的特殊性，阐述了现在主要的6种游戏类型的特点,提出了基于游 戏不同类型的界面设计原则。
根据所要达到的可用性目标和用户体验目标，得出了用户参与的
迭代式的界面设计方法。该方法的主要特征为：用户参与性设计与迭 代设计。即在整个界面设计过程中，用户要全程参与设计过程；通过 迭代，进行重复的“设计——评估——再设计——再评估”的过程，就能利用反馈来改进设计。迭代是不可避免的，因为设计人员不可能
V
一次就找出正确地解决方案。在用户数据的收集、分析、最初的概念 设计、正式模型设计、评估等各个阶段都需要不停和用户进行交流反 馈。迭代设计是一个有目的的设计过程，通过几次设计迭代克服完全 需求所规范的固有问题，每一次迭代都可以改进最终的游戏界面。
该方法的流程为：确定软硬件环境、设计调研、游戏任务分析设
计，以设计原则为基础的建立模型、游戏界面的图形设计、用户参与 的迭代式设计测试和评估，详细分析了在每个环节的具体实施方法以 及该环节中应该注意的问题。
根据先前得出的设计原则来作为对网页游戏具体评价的依据来
进行设计功能和设计效果评价。评价一款网页游戏的方法主要有实验 方法、检测方法、调查方法。选取一定的样本用户，让用户使用游戏，观察其反应，在所有用户完成游戏界面测试过后，分别考察使用新版 和旧版本的用户，对用户进行满意度调查。用论文所得出的原则和方 法来对网页游戏界面进行指导和规范设计后，较原版本游戏用户更加 认可，有更好的满意度。认为基本上符合用户之前在需求调查中所提 出的要求，取得用户较好的评价。验证了论文提出的设计原则以及设 计方法的科学性。是的确符合以用户为中心的界面设计理论，是可以 用来指导未来的网页游戏的界面设计。
关键词
网页游戏，人机交互设计，游戏界面设计，可用性，用户体 验，迭代设计
VI
RESEARCH AND APPLICATION ON UI DESIGN
OF WEBGAME
ABSTRACT
User 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, 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 PC.Contrast to WebGame, the traditional online games need to download more than 300 M(some even more than 1 G)of the client software.All people who can connect to Internet can play game no cost, no waiting with input URL in web browser and need download nothing.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
VIII
system, which makes the prospect of web game even better.Although the domestic game is in full swing page and carried out，but the lack of systems theory as a guide, leading to many cases of failure of the game.At present, it is only a short introduction on Webgame UI design abroad, and lack of systematic, comprehensive, specific description and analysis of the domain of Webgame interface design.Interface is the external performance of the game;it has a direct impact each other between Game and user and has a very important position in the entire game design.In the interface design, from determining cultural background to realizing design idea, from feasibility analysis to project presenting, filter, amendment and evaluation, it must be a rational, orderly, systematic process and should be a corresponding system theory to guide.This article focused on the WebGame graphic interface design.We
analyze the current UI design in WebGame and deep research availability and user experience, and then bring forward principles, methods and Process to guide the future of the WebGame UI design.According to availability object and user experience goals, we draw
an iterative method with user participating in interface design.Our main contents are as follows:
First of all, respectively elaborate on the basic theory of
human-computer interface design and the concept of WebGame.Then we
IX
analyze characteristics of existing games and web browser platform then conclude the principles, methods and processes in WebGame UI design.Based on objectives of user experience and availability, we have come to the UI design method which is user participant and iterative.Users should be involved in the whole design process, and improve last UI by repeating the process “designre-evaluation”
again and again.Finally, we apply this principles and methods to designing a game
and evaluate it using observation and user survey.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 scientific using User monitoring and user survey method.Keywords: WebGame, Interaction Design, Game Interface Design, Usability, User Experience, Iterative Design
X
上海交通大学
学位论文原创性声明
本人郑重声明：所呈交的学位论文，是本人在导师的指导下，独
立进行研究工作所取得的成果。除文中已经注明引用的内容外，本论 文不包含任何其他个人或集体已经发表或撰写过的作品成果。对本文 的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本 人完全意识到本声明的法律结果由本人承担。
学位论文作者签名：李晓蕙
日期：
****年**月**日
III
上海交通大学
学位论文版权使用授权书
本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权上海交通大学可以将本学位论文的 全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫 描等复制手段保存和汇编本学位论文。
保密□，在 年解密后适用本授权书。
本学位论文属于
不保密□。
（请在以上方框内打“√”）
学位论文作者签名：李晓蕙
指导教师签名：杨旭波
日期：
****年**月**日
日期：
年
月
IV 绪 论
1.1 论文的选题背景及意义
1.1.1 背景知识
1.无端网游
休闲娱乐已经成为我们这个时代生活很重要的一部分，游戏(Game)是一种参与、交互式的娱乐形式。这一概念是相对于被动式的娱乐形式而言的，看电视、读书、看电影都是被动式的娱乐方式，在这些方式中，娱乐是展现式的，受众只 能被动参与。游戏则要复杂很多，当人们玩游戏时，因积极参与而获得快乐。
随着计算机以及图形图像技术的发展，出现了电子游戏。电子游戏指以电子 元器件组装成的设备为运行平台的游戏。这与传统的游戏方式是不同的，传统的 游戏需要现实中的游戏道具，如：象棋、扑克牌等。而电子游戏则是通过控制电 子游戏设备与电子游戏进行交互的游戏方式。
在互联网时代，电子游戏已经发展成为网络游戏。玩网络游戏也已经成为当 今人们休闲娱乐最为流行的一种方式。网络游戏拥有强大的人与人之间的交流平台，用户在游戏中得到充足的虚拟现实体验，这是过去传统游戏不能比拟的。同 时，人的思想和行为等方面在玩游戏的过程中已经受到了游戏的影响[1]。
网络游戏是利用TCP/IP协议，以Internet为依托，可以多人同时参与的游 戏项目。网络游戏按照联网方式分为：脱网单机游戏和网络游戏；而网络游戏按 照客户端模式则分为：需要安装相关内容客户端软件的传统网游和不需要客户端 的无端网游。无端网游的主要形式为WebGame，即网页游戏。
社会在进步，技术在发展，而互联网和Flash技术的深层次发展让“传统客 户端网游”运行在浏览器中的美好愿望已经成为现实。无论从游戏的功能性、系 统的完善性和画面的视觉冲击力等方面，全新的无端网游都已达传统2D网游精 品的水准，甚至在某些方面有所超越，比如在游戏的便捷性和优秀的环境适应能 力等方面。
未来的计算机软硬件技术的发展，不仅个人电脑，使得手机，电视，PDA等 都可以作为客户终端，由于互联网无处不在，拥有海量信息存储空间的服务器端 超级强大，本地客户端甚至不需要硬盘来存储信息。微软认为未来的时代，连软
件使用都希望完全通过网络来实现，而不需要在去买什么光盘回家安装什么软 件。无端网游终将取代传统游戏，成为未来游戏的主流和发展方向。
2.游戏界面设计
在人和机器的互动过程(Human-Machine Interaction)中有一个层面，即我 们所说的用户界面(User Interface)。它是计算机科学与认知心理学、设计艺术、人机工程学、人因学(Human Factors)、社会学、语言学等交叉研究领域。人机 界面是人与机器之间传递和交换信息的媒介。从心理学意义来分，界面可分为感 觉(视觉、触觉、听觉等)和情感两个层次。界面的功能可分为实用功能和审美功 能。实用功能完成界面沟通人和机器的使命；审美功能在满足用户审美要求的同 时并辅助实用功能。
用户界面设计(User Interface Design)是屏幕产品的重要组成部分。界面 设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、符号学等都扮 演着重要的角色[2]。
游戏界面指游戏软件的用户界面，包括游戏画面中的按钮、动画、文字、声 音、窗口等与游戏用户直接或间接接触的游戏设计元素。游戏界面设计(Game Interface Design简称GID)，是指对电子游戏中与游戏用户具有交互功能的视 觉元素进行规划、设计的活动。
1.1.2 论题研究目的与现实意义
历史总在不断重演并且惊人的相似，正如网络游戏取代传统单机游戏一样，眼下，动态无端网游取代客户端网游的趋势开始愈发明显。
网页游戏正是属于网络游戏范畴，它是指无需下载和安装客户端程序、基于 ASP、PHP、Java和ActiveX等WEB编程技术和Flash技术，运行于WEB浏览器 的网络在线游戏。是伴随着互联网技术的成熟高速发展起来的新种类游戏。
1.目的
今年网页游戏突然之间变得很热门，盛大、腾讯、17173、新浪等大公司都 很积极的关注，甚至连百度也掺和了进来。
WebGame究竟针对什么用户？它究竟要发展向何方？有对这个问题的研讨。大家的意见主要还是说WebGame主要针对上班一族，也就是当作小菜来吃。很多人都认为WebGame是不可能成为主流。
但是我认为，WebGame最终将取代现存的网络游戏，而不是一种配菜。
从受众群体容量来说，网页游戏有天然优势。能通过浏览器上网的人都是网 页游戏的潜在受众。根据最新的调查显示：预计到今年年底全球互联网用户数量 将会超过10亿，而中国网民数量已经达到2。2亿，超过美国成为世界第一，网
民上网最主要目的是为了娱乐。网页游戏，使用浏览器把游戏体验的途径简化到 了极致：能上网的人，都可以“无需下载任何东西，无成本、无等待”地玩网页 游戏，只要输入URL就可。这种简化是革命性的，与PC网游成鲜明对比。PC网 游需要下载300M以上（有的甚至超过1G）的客户端，无法与网页游戏的便利性 相比。
从科技发展角度来说，未来的计算机软硬件技术的发展，不仅个人电脑，使 得手机，电视，PDA等都可以作为客户终端，由于互联网无处不在，拥有海量信 息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。连微 软都认为未来的时代，连软件使用都希望完全通过网络来实现，而不需要在去买 什么光盘回家安装什么软件。WebGame最终取代现存的网络游戏，也是大势所趋。而且现在已经有一些开发者在从事这个方面的研究。我们也看到大型网络游 戏的网页化，网页游戏随着科学技术的提升，IE7等浏览器技术的成熟和普及，WebGame2.0的时代即将到来，也将会为网络游戏产业带入了一个新的时代。刚 刚推出的《Sherwood Dungeon》（舍伍德地牢）3D高品质网页游戏代表目前世界 最顶级水平。从图1-1可以看出，它的画面已经完全可以媲美当今的网络游戏。
图1-1 舍伍德地牢的界面截图
Fig.1-1 Interface screenshot of Sherwood Dungeon
国内最新的“闪游”《乐土》，还在测试阶段，但是从图1-2中可以看出它 的界面已经完全可以媲美传统网络游戏。而在游戏系统方面也做到了玩家之所 需，战斗，宠物，聊天，装备打造，非常全面系统。
图1-2《乐土》的界面截图
Fig.1-2 Interface screenshot of Paradise
看到了以上这些游戏，大多数人都会认为客户端游戏最终可能被网页游戏淘 汰。
2.研究的意义
从网页游戏整个行业发展来说，虽然目前网页游戏产业带来的利润越来越丰 厚，但仍然有很多新的网页游戏在抄袭已有经典游戏模式的现象存在，很多国产 游戏只注重商业效应，对于游戏性和游戏的人机设计的探索却还是原地踏步，甚 至可以说是毫无创新!游戏质量的良莠不齐，有的甚至违背了最基本的人机交互 设计原则，只想凭借华丽的游戏画面和简单的游戏博弈以及低廉的费用来吸引玩 家一时的好奇心。国内网页游戏虽然是如火如荼地进行着，但整个行业缺乏系统 的理论作为指导，导致很多失败的游戏案例。业界最近把浏览器作为一个虚拟的 操作系统来看，这使得网页游戏的前景更加美好。
从用户角度来说，用户愈为迫切地需要符合“简单、自然、友好、一致”原 则的人机界面。游戏的使用者也从计算机专家迅速扩大到了广大未受过专门训练 的普通用户。计算机用户发生了改变，非计算机专业的普通用户成了用户的主体，这一重大转变使游戏的可用性问题变得日益突出起来。游戏人机界面的重要性在 于它极大的影响了最终用户的使用，影响了游戏的推广应用。
著名的游戏开发者Bill Volk曾经对游戏设计写下了一个等式“界面+产品 要素=游戏。很明显，Bill Volk的意图并不是说设计一款游戏就是简单的加法，而是强调在游戏设计中界面的重要性。他认为“你的游戏就是你的界面”。游戏 界面是人和游戏机之间沟通的桥梁，它起到连接玩家和游戏内核的作用。玩家在 玩游戏时，所见、所感、所接触的是游戏界面，而不是游戏内核，只有通过游戏
界面，玩家才能够体会到游戏的内核带来的游戏乐趣，因此对游戏本身来说，界 面在很大程度上影响着游戏的可玩性(Playable)。游戏Age of Empires的设计 者们曾提出“前十五分钟法则”，即对一款游戏来说，如果入门玩家不能在前十 五分钟顺利地弄明白基本操作规则和策略，或者铁杆玩家不能在前十五分钟感受 到兴趣和挑战的话，他们将永远离开这个游戏，不再做进一步尝试。因为人们玩 游戏的目的是娱乐，在工作之后能够放松、娱乐一下，所以我们不能要求用户像 学习其它应用软件那样花一天甚至一个星期时间去弄清到底怎么玩这个游戏[3]。
虽然目前有少数国外的资深游戏设计师在其著作中谈到网页游戏界面设计，但也只是简单的概略性的介绍，对整个网页游戏界面设计方法缺乏系统、全面、具体的介绍和分析。游戏界面是游戏的外在表现，是游戏中与游戏用户直接相互 影响的部分，在整个游戏设计中占据很重要的地位。游戏界面设计从游戏文化背 景确定到界面构想产生、可行性分析到提出方案、方案分析、筛选、修正和评估 必须是有理、有序、系统化的一个完整过程系统，应该有相应的系统理论来指导。1.2 本文的主要工作
本论文是在致力于以用户为中心的人机交互界面的设计与评估技术的研究 工作的基础上撰写而成，论文主要根据网页游戏的特点，提出一些用以规范游戏 界面设计的原则，并遵循该原则提出了游戏用户参与的迭代式界面设计方法和流 程，并对该方法和流程进行了应用验证。论文的主要工作如下：
分别对人机界面设计的原理和用户的认知心理和视觉习惯三个方面来研究 网页游戏界面设计；
分析当前网页游戏的概念、特点、分类、目标用户从而来分析网页游戏界面 并进行相关研究；
得出网页游戏界面设计的原则、实现方法、流程和评价4个方面的基本理论 并进行相关应用验证。
本文旨在通过根据得出的理论来优化和改善网页游戏中的界面设计，使网页 游戏能够更加受到用户的喜爱，为未来的网页游戏界面设计提供有理、有序、系 统化的理论指导，促进网页游戏的进一步发展。
1.3 研究方法
本文采用的是从抽象到具体再到抽象的叙述方法，首先是对人机交互的界面 设计进行普遍的理论综述，然后对比网页游戏与网页和游戏得主要界面因素，结 合具体的现有游戏界面设计实例，总结网页游戏中主要界面因素，最后归纳总结
出网页游戏的界面设计的原则、方法、流程和评价体系。
本论文采用的研究方法主要有文献研究法、问卷调查法、比较研究法。
1.文献研究法
这是本文采用的最主要的研究方法，即通过对大量国内外对网页游戏、网页 和游戏的界面设计相关的文献进行分析和研究，总结归纳出网页游戏中的界面因 素，并对这些界面因素进行分析，在此基础上总结出网页游戏的界面设计所要遵 循的原则、设计方法和设计流程。
2.问卷调查法
本文采用问卷调查方法，选取各个层次玩家为调查对象，用以了解他们对网 络游戏和网页游戏中各种界面设计的直观感觉和喜好，为网页游戏界面的优化和 改进提供了依据，使之更受玩家的喜爱。
3.比较研究法
对网页游戏中界面因素和设计与网页和游戏的界面因素和设计进行分析比 较，网页游戏和他们二者之间有许多共性，但文中突出论述了网页游戏中的主要 界面因素及其设计的特殊性。
本文采用的是从抽象到具体再到抽象的叙述方法，首先是对人机交互的界面 设计进行普遍的理论综述，然后对比网页游戏与网页和游戏得主要界面因素，结 合具体的现有游戏界面设计实例，总结网页游戏中主要界面因素，最后归纳总结 出网页游戏的界面设计的原则、方法、流程和评价体系。
1.4 论文结构
本论文是在致力于以用户为中心的人机交互界面的设计与评估技术的研究 工作的基础上撰写而成，论文主要根据网页游戏的特点，提出一些用以规范游戏 界面设计的原则，并遵循该原则提出了游戏用户参与的迭代式界面设计方法和流 程，并对该方法和流程进行了应用验证。论文的主要工作如下：
分别对人机界面设计的原理和用户的认知心理和视觉习惯三个方面来研究 网页游戏界面设计；
分析当前网页游戏的概念、特点、现状。从而对网页游戏界面并进行相关分 析研究，得出网页游戏界面设计的原则、实现方法和流程以及评价4个方面的基 本理论。并对这些理论应用到一款网页游戏界面设计上。通过用户调查验证理论 的正确性。
本文旨在通过根据得出的理论来优化和改善网页游戏中的界面设计，使网页 游戏能够更加受到用户的喜爱，为未来的网页游戏界面设计提供有理、有序、系
统化的理论指导，促进网页游戏的进一步发展。
1.5 本章小结
本章主要介绍了网页游戏和用户界面设计的基本概念和发展，阐述了论文研 究的背景、意义，论文的目的和研究方法及论文结构。界面设计理论基础
2.1 人机界面设计理论
在人和机器的互动过程（Human-Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界 面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在 此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性[4]。
界面的说法以往常见的是在人机工程学中。“人机界面”是指人机间相互施 加影响的区域，凡参与人机信息交流的一切领域都属于人机界面。而设计艺术是 研究人一物关系的学科，对象物所代表的不是简单的机器与设备，而是有广度与 深度的物；这里的人也不是“生物人”，不能单纯地以人的生理特征进行分析。人的尺度，既应有作为自然人的尺度，还应有作为社会人的尺度；既研究生理、心理、环境等对人的影响和效能，也研究人的文化、审美、价值观念等方面的要 求和变化。
设计的界面存在于人一物信息交流，甚至可以说，存在人物信息交流的一切 领域都属于设计界面，它的内涵要素是极为广泛的。可将设计界面定义为设计中 所面对、所分析的一切信息交互的总和，它反映着人一物之间的关系。
交互设计目前已经成为一个重要的商业领域，网站咨询、新生公司和游戏公 司都已经意识到交互设计在成功的交互式产品中起着关键作用。WEB产品要吸引 人们的注意，就必须能够从众多的竞争对手中脱颖而出，其核心问题也就是：产 品应易用且非常有效。
2.1.1 人机界面的概念
介于人与计算机之间，人与机器的通信，人机界面(HCI)：软件+硬件
所谓界面，即人机界面(Human-Machine Interface)，是人与机器进行交互 的操作方式，即用户与机器互相传递信息的媒介，其中包括信息的输入和输出。好的人机界面美观易懂、操作简单且具有引导功能，使用户感觉愉快、兴趣增强，从而提高使用效率。界面可以分为硬界面和软界面，也可以分为广义的和狭义的 人机界面。[5]
广义界面广义的人机界面，指人与机之间存在一个相互作用的媒介，人通过 视觉和听觉等感官接受来自机器的信息，经过脑的加工、决策，然后做出反应，8实现人机的信息传递。我们可以把人机界面看作一个有着交互的系统，在分析人 机界面系统模型时，建立并分析人的行为模型，从而建立并设计人机界面系统。可见研究人机界面就是研究机器怎样适应人的有效工作的问题。在人机界面系统 中，机器适应人就必须是机器怎样把信息传达给人和人怎样有效操作的交流过程 的问题。
狭义界面狭义的人机界面指计算机系统中的人机界面，即所谓的软界面。人 机界面(Human-Computer Interface)，又称人机接口、用户界面(User Interface)、人机交互(Human-Computer Interaction)，软界面是人和计算机之 间的信息交流界面，人机界面的设计直接关系到人机关系的和谐和人在工作中的 主体地位，以及整个计算机系统的可使用性和效率[6]。它是计算机科学中最年轻 的分支科学之一。它是计算机科学和认知心理学两大科学相结合的产物，涉及当 前许多热门的计算机技术，如人工智能、自然语言处理、多媒体系统等，同时也 是吸收了语言学、工业设计、人机工程学和社会学的研究成果，是一门交叉性、边缘性、综合性的学科。本文主要研究的是人机软件界面。
2.1.2 交互设计的目标
交互设计应能满足用户的需要，在理解用户需要的过程中，我们也应明确我 们的主要目标：可用性目标和用户体验目标。二者在实现上有所不同，可用性目 标是关于满足特定的可用性标准(如有效性)，而用户体验目标是对用户体验质量 所作的明确说明(如富有美感、令人舒畅等)。
1.可用性目标
可用性通常是要保证交互式产品易学、使用有效果，可细分为以下目标：
使用有效果(能行性)对熟练用户来说能够稳定运行。
工作效率高(有效性)处理同一项任务使用时间最少。
能安全使用(安全性)出错率低，即完成任务中出错次数少，包括小错误
及灾难性错误。
具备良好的通用性(通用性)对具有不同文化背景的用户通用，系统具备
国际化风格。
易于学习(易学性)对新用户来说易于学习。
使用方法易记(易记性)易于随机使用系统完成任务。
把可用性目标表达成特定问题的形式，他们就转变成了可用性标准。我们可
2.用户体验目标 以通过检查系统能否改进用户的工作效率及其程度如何，来评估产品的可用性。
新技术己经从各个方面渗透到人们的日常生活中，人们对产品有了更多的要 求，交互设计已不仅仅是提高工作效率和生产力，人们越来越关心系统是否具备 其它的一些品质，这就使的研究人员和业界人士开始思考进一步的目标。如：
令人满意
令人愉快
有趣
引人入胜
有用
富有启发性
富有美感
可激发创造性
让人有成就感
让人得到情感上的满足
在设计交互产品时；之所以要让产品具有以上特点，其目的主要与用户体验 相关。所谓的“用户体验”指得是用户与系统交互时的感觉如何，这里需要使用 主观性的术语来描述用户体验的本质。
可用性目标和用户体验目标相比，可用性目标是交互设计的核心，它采用的 是明确地衡量标准，而用户体验目标其定义不是那么的明确。在评估时，可用性 是至关重要的。
2.1.3 界面设计的分类
美国学者赫伯特.A.西蒙提出：设计是人工物的内部环境(人工物自身的物 质和组织)和外部环境(人工物的工作或使用环境)的接合，所以设计是把握人工 物内部环境与外部环境接合的学科，这种接合是围绕人来进行的[7]。
“人”是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对 象的“物”则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综 合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用的功能、材料 的质地，也包含着对传统思考、文化理喻、科学观念等的认知。“任何一件作品 的内容，都必须超出作品，超出所包含的那些个别物体的表象。”分析“物”也 就分析了设计界面存在的多样性。为了便于认识和分析设计界面，可将设计界面 分类为：功能性设计界面、情感性设计界面和环境性设计界面。
1.功能性设计界面
即接受物的功能信息、操纵与控制物。这一界面反映着设计“人”造物的协
调作用。
2.情感性设计界面
即物要传递感受给人，取得与人的感情共鸣。这种感受的信息传达存在着确 定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情，而不是个 人的情感抒发。设计师“投入热情，不投入感情”，避免个人的任何主观臆断与 个性的自由发挥。这一界面反映着设计与人的关系。
3.环境性设计界面
界面设计要考虑外部环境因素对人的信息传递[0],任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在，环境的物理条件与 精神氛围是不可忽缺的界面因素。尼葛洛庞帝指出：“一般个人电脑的界面，也 被当成是物理设计的问题。但是界面不仅和电脑的外表或给人的感觉有关，它还 关系到个性的创造、智能化的设计，以及如何使机器能够识别人类的表达方式”
[8]。挑战将远远不止是为人们提供更大的屏幕，更好的音质和更易使用的图形输
入装置；这一挑战将是，让电脑认识你、你的需求、了解你的言词、表情和肢体 语言。但这并不是因为它能找出声音信号上的微小差别，而是因为它懂得你的意 思。这才是好的界面设计。
图2-1 ：人机界面关系模型
Fig.2-1 Model of HMI
应该说，设计界面是以功能性界面为基础，以环境性界面为前提，以情感性 界面为重心而构成的，它们之间形成有机和系统的联系，如图2-1所示。
2.1.4 界面设计的发展
这里所指的人机界面设计，是指计算机系统的用户界面上控制输入的设计方 法，大致经过了五代的演变：
1.命令语言
在图形显示、鼠标、高速工作站等技术出现之前，现实可行的界面方式只能 是命令和询问方式，通信完全以正文形式并通过用户命令和用户对系统询问的响 应来完成。这种方式使用灵活，便于用户发挥其创造性，对熟练的用户有很高的 工作效率，但对一般用户来说要求高，易出错，不友善并难于学习，它的错误处 理能力也较弱。
根据其语言的特点，及人机交互的形式的分为：
形式语言
自然语言。
类自然语言。
2.菜单和图形用户界面的广泛应用
图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有 强烈的直接操作特点。这种方式与命令行方式相比不易出错，可以大大缩短用户 的培训时间，减少用户的击键次数，可以使用对话管理工具，错误处理能力有了 显著提高。但使用起来仍然乏味，可能出现菜单层次过多及菜单选项复杂的情形，必须逐级进行选择，不能一步到位，导致交互速度缓慢。
3.面向窗口的点选界面
此类界面亦称WIMP界面，即窗口(Windows)、图标(Icons)、菜单(Menus)、指示器(Pointing Device)四位一体，形成桌面(Desktop)。这种方式能同时显示 不同种类的信息，使用户可在几个工作环境中切换而不丢失几个工作之间的联 系，用户可通过下拉式菜单方便执行控制型和对话型任务，引入图标、按钮和滚 动杆技术，大大减少键盘输入，对不精于打字的用户无疑提高了交互效率。
4.多媒体用户界面及多通道用户界面的发展，大大丰富了计算机信息的表
现形式。
自然语言与应用软件进行通信，把第三代界面技术与超文本、多任务概念结 合起来，使用户可同时执行多个任务(以用户的观点)。随着文字、图形、语音的 识别与输术技术的进一步发展，多媒体技术在人机界面开发领域内的进一步发 展，自然语言风格的人机界面将得以迅速的发展，最终走向实用化。
5.虚拟现实技术的应用
虚拟现实系统向用户提供身临其境(immerse)和多感觉通道(multi-sensory)体验，作为一种新型人机交互形式，虚拟现实技术比以前任何人机交互形式都有 希望彻底实现和谐的、以人为中心的人机界面。
2.2 用户的认知心理研究
认知心理学，从广义上来说，就是关于认识的心理学。人类认识客观事物，主要就是通过感觉、知觉、注意、记忆、思维想象等来进行，因此，凡是研究人 的认识心理过程规律的，都属于认知心理学的研究范畴[9]。实际上，我们这里所 指的认知心理学是指纯粹采用信息加工观点来研究认知心理学过程的心理学，也 就是运用信息论以及计算机的类比、模拟、验证等方法来研究知识是如何获得、如何存贮、如何交换、如何使用的。所以，我们这里所指的现代认知心理学实质 是信息加工心理学。
了解用户的认知如何影响游戏界面设计，主要是消除游戏界面和用户模型之 间的鸿沟，尽量消除用户的挫败感和失落感，对游戏界面产生的混淆、迷茫或抗 拒的感觉。这是认知心理学在游戏界面设计中发挥的主要作用[10]。
2.2.1 信息加工
认知心理学家关心的是作为人类行为基础的心理机制，其核心是输入和输出 之间发生的内部心理过程。但是人们不能直接观察内部心理过程，只能通过观察 输入和输出的东西来加以推测，如图2-2所示。所以，认知心理学家所用的方法 就是从可观察到的现象来推测观察不到的心理过程。有人把这种方法称为会聚性 证明法，即把不同性质的数据会聚到一起，而得出结论。
图2-2 信息加工系统结构图
Fig.2-2 Chart of Information Processing System
这种观点把人看作是一个信息加工的系统，认为认知就是信息加工，它包括 感觉输入的变换、加工、存储和使用的全过程。按照这一观点，认知可以分解为 一系列阶段，每个阶段是一个对输入的信息进行某些特定操作的单元，而反应则 是这一系列阶段和操作的产物。信息加工系统的各个组成部分之间都以某种方式 相互联系着。
认知心理学企图把全部认知过程统一起来。它认为注意、知觉、记忆、思维 等认知现象是交织在一起的。对于一组现象的了解有助于说明另一组现象。由于
它们之间的相互依赖关系，很可能会发现人类认知过程的统一加工模式。认知心 理学不仅要把认识过程统一起来，而且要把普通心理学各个领域统一起来，也就 是要用认知观点研究和说明情绪、动机、个性等方面。认知心理学的观点还进一 步扩展到了社会心理学、发展心理学、生理心理学、工程心理学等领域。认识过 程的核心：思维及其特征认识过程是人接受、储存、加工和理解各种信息的过程，即人脑对客观事物的现象和本质的反映过程。它包括感觉、记忆、想象、思维等。其中思维是认识过程的核心。在日常生活中，当我们遇到问题时，总会说让我想 一想、考虑一下，这里的想一想、考虑一下，就是心理学中的思维活动。思维是 人的心理过程中最复杂的心理现象之一，是人脑对客观事物的本质属性及其内在 规律的反映。事物的本质属性，指的是能决定事物的主要特征的、某一类事物共 同的不可缺少的根本特性。事物的内在规律，主要是指事物之间的因果关系和必 然联系。
认知心理学家往往把信息加工过程分解为一些阶段，这就使他们注意到信息 在人脑内流动有个过程，如图2-3所示。他们常用计时研究法。首先要测量出一 个过程所需要的时间，并以此来确定这个过程的性质。假定一个人看屏幕上投射 的字母E，如果投射时间很短，比如一毫秒，那么这个人就不会看到什么，这说 明知觉不是瞬时的；投射时间长一点，比如五毫秒，那么这个人就会看到某种东 西，但不知是什么，这说明知觉产生了，但辨别尚未产生；如果投射时间长度足 以使人看出这个字母不是。或Q，但看不出是E还是F或K，那么这个人就产生 了部分的辨别。由此人们就可以确定完全辨别、部分辨别或刚刚看出有东西所需 的时间。这一切表明，知觉是累积的。外部认知计算机与认知心理学。
输入或刺激 编
码 比
较
响应执行输出或执行响应选择
图2-3 大脑信息处理模型
Fig.2-3 Model plan of the brain information processing
2.2.2 外部认知
人们需要同各种外部表示相交互，并且使用它们来创建信息。这些外部表示
包括书本、报纸、网页、地图、图表、便条、绘图等，同时人们也开发众多的工 具来帮助认知，例如笔、计算器、计算机技术等。外部表示与物理工具相结合大 大增强了人们的认知能力，事实上，它们己经是不可或缺的组成部分，没有了它 们，很难想象我们如何进行日常生活。
外部认知是要解释我们在与不同外部表示相交互时涉及的认知过程，其主要 目的是要详细说明在不同的认知活动、认知过程中使用不同表示的好处，主要有：
1．外表化以减轻记忆负担
为了减轻记忆负担，人们把各种知识转变为外部表示的策略，把难以记住的 东西具体化，例如日记，笔记本、便条等来提醒人们。因此，“外表化”之所以 能够减轻人们的记忆负担，是因为：能够提醒某件事情；提醒人们需要做些什么；提醒人们什么时候需要做某事。
“外表化”认知的另一个方法是修改表示已反映已发生的事。例如人们经常 在处理事物清单上划去一些项，以表明它们己经完成，或是工作性质改变时，创 建不同的文件堆。
2．减轻计算负担
在进行计算时，使用工具或设备并结合外部表示，即可减轻计算负担，例如 笔、纸、计算器等。
3．标注和认知追踪
“标注”就是修改的外部表示，如划去某项或在某项加下划线，而“认知追 踪”则是重新安排某些事物的次序或结构。
使用基于外部认知的方法进行交互设计时，总体原则是在界面提供可视化信 息，减轻用户的记忆和计算负担。这样就能够扩充和增强用户的认知能力，设计 良好的图形用户界面能够大大减轻用户的记忆负担，用户能够依赖外部表示所提 供的线索，对界面进行操作。
2.2.3 计算机与认知心理学
控制论、信息论、计算机科学对认知心理学的发展具有深远的影响。计算机 科学与心理学相结合，产生了一门边缘学科人工智能。人工智能与认知心理学关 系极为密切，计算机的出现使人们找到了分析人的内部心理过程和状态的新途 径。早期实验心理学的心理主义方向被行为主义切断了将近半个世纪之久，今天，认知心理学延续了这一方向，同时又保持了新行为主义的严格的假设演绎法，增 加了机器模拟法。这就在认识过程的分析方面扩大了研究课题。
计算机模拟和类比是认知心理学家采用的一种特殊方法。要使计算机像人那 样进行思维，计算机的程序就应当符合人类认知活动的机制，即符合某种认知理
论或模型。把某种认知理论表现为计算机程序就叫计算机模拟。因此，计算机模 拟首先可以用来检验某种理论，发现其缺陷，从而加以改进。
有些认知心理学家常用信息系列的流程图来描述计算机程序的主要特点。但 这种流程图并不具备计算机实际运算的细节，只为编制计算机程序提供了轮廓，它可以进一步化为计算机程序，而这部分工作往往是由计算机软件专家实现的。认知心理学的一个基本观点是可以用计算机来类比人的内部心理过程。计算机接 受符号输入，进行编码，对编码输入加以决策、存储、并给出符号输出。这可以 类比于人如何接受信息，如何编码和记忆，如何决策，如何变换内部认知状态，如何把这种状态编译成行为输出。计算机与认知过程的这种类比，只是一种水平上的类比，即在计算机程序水平上描述内部心理过程，它主要涉及的是人和计算 机的逻辑能力，而不是计算机硬件和人脑的类比。
2.2.4 用户心理认知与界面设计的相互影响
用户心理认知对界面设计的影响
在设计中，人们提到最多的是用户心理对设计的影响。这种影响的直接表现 形式就是用户心理对设计的影响。用户心理就是人们在特定社会历史条件下，以 长期的用户实践中形成的具有理性化特征的美感判断标准，在具体的用户活动 中，它经常表现为用户独特的审美趣味和审美理想[11]。用户心理是人类精神活动 特有的产物，正如马克思在《资本论》中所说的：“最整脚的建筑师从一开始就 比最灵巧的蜜蜂高明的地方是他在用蜂蜡建筑蜂房以前，己经在自己头脑中把它 建成了。劳动过程结束时得到的结果，在这个过程开始时就己经在劳动者的表象 中存在着，即己经观念地存在着。”因此，无论是艺术家的作品，还是设计师的 作品，它们都是在一定心理的指导下完成的，只是这种心理，有的是以无意识的 形式表现出来的。
用户心理对设计的影响，不仅是由于用户心理是历史积淀物，自发作用于任 何精神活动，还由于设计需要心理的指导。因为设计师从事设计活动的最终目的 是为人服务。因此他必须考虑到人的全面需求，所以，设计不可避免地要满足人 的精神需求，迎合用户的审美需求，这也就是决定了设计师需要从艺术中汲取审 美要素，将审美要素应用于界面设计。
设计这种与人密切相关的特性使其对美产生重要的影响。其中最重要的一点 就是对传统“美”的意识的扩展和再认识。设计对“美”意识的扩展，体现在人 类对于更加完善的生存境界的永恒追求[12]。人类不仅要在纯精神领域如纯艺术、宗教、哲学等领域获得享受，而且要在生活领域的其他方面也获得使精神愉悦的 美感，这一事实体现着人类对生活全部艺术化的趋向。设计融合了人类物质文明 和精神文明，它要求设计师有较高的审美敏感度和扎实的形象表达技能，还要求
设计师能将技术和艺术紧密结合，通晓与设计有关的自然科学和社会科学的知 识，不断地激发创造力，提高设计的文化品格。设计师在长期的设计实践中逐渐 认识了设计与对象及客观环境之间的各种关系，对当代的审美和技术的发展具有 一定的促进作用。
界面对用户心理的影响
富有表现力的界面就是使用富有表情的图标或其它图形元素来表达情感状 态。例如，很多软件在表示它的运行状态时都会有一个很明显的情感图形特征，即如果是正常运行的话会出现一个笑脸，如果是运行错误的话则会出现一个哭 脸。笑脸传递了友好善意的信息，在与用户的第一次见面的时候就把这种友好的 情感传递给了用户，能够让用户感觉自在并回报以微笑，另外，笑脸形式的图标 也能让用户感到放心，传达了一个一切正常的良好的信息。而哭脸则表达了相反 的信息，表示失败、消极的含义。
2.3 视觉习惯
视觉是人类获取信息的主要通道，视觉传达的信息占所处理信息总量的80% 以上，但对信息的加工人类视觉有其自然的习惯，先看什么，后看什么，体现了 视觉流动的规律，形成了画面阅读的视觉流程。一般人们的视觉流程为：从上到 下、从左到右、从动态到静态、由明到暗、由粗线条到细线条，突然运动或者改 变运动状态的物体比静止的物体更能引起人们的关注，箭头、下划线等也能引导 观察者的视线，这些习惯的形成与人类的视觉生理特性、思维发展的逻辑顺序和 思维习惯有关。
心理学研究表明，人类对视觉范围内的物体井不是予以同等重视的，而是从 中筛选一些对象。影响选择的因素有色彩、位置、经验等，不同的波长的色彩对 人的视觉刺激强度不同，波长越长刺激越大，暖色大于冷色，原色大于补色，红 色最强。通常，上半部让人感到轻松和自在，下半部则让人感到稳定和压抑，左 半部给人的感觉是轻松和自在，右半部则会给人稳定和压抑的感觉。视觉影响力 上方强于下方，左侧强于右侧，所以上部和中上部被称为“最佳视域”，也就是 最优选的区域。[13]
人们观察事物遵循近大远小、近清楚远模糊的规律，在观察者看来离观察者 而去的平行线条当向远方伸展时常常越来越靠近，如铁路轨道，这就是我们所说 的线条透视，另外，光线穿过大气层时将被分散(特别是当空气中充满尘埃时)，所以远处物体显得模糊，日标对比度减小会显得更远一些
2.4 网页游戏概述
2.4.1 网页游戏的概念
所谓WebGame翻译成中文就是“网页游戏”，是指无需下载和安装客户端程 序、基于ASP、PHP、Java和ActiveX等WEB编程技术和Flash技术，运行于WEB 浏览器的网络在线游戏。是伴随着互联网技术的成熟高速发展起来的新种类游 戏。随着internet的深入发展和WEB编程技术的跟新换代发展，网页游戏获得 了长足的发展。WEBGAME异军突起，大有取代传统游之势。
网页游戏作为一种特殊的游戏类型，WEBGAME由来已久，对广大早期的网游 玩家而言并不陌生。早在网络游戏盛行之前的Mud时代就已经存在，并凭借其方 便性和简易性吸引了一大批早期的网页用户。以《第九城市》《笑傲江湖》等为 代表的早期作品多是基于BBS社区和聊天室为基础扩展而来，其可玩性虽然不 高，内容也不够丰富，但是交流性和交互性极强，已经初步具备了网游的基本特 征。而随后的《king wars》和《战神》等策略型WEBGAME则已经完全脱离了交 流社区的范畴，而正式发展成为独立的游戏类型，并开始逐步提高其游戏性和可 玩性，在内容设计和系统数值上也有了进一步地深入和完善。
2.4.2 网页游戏的特性
网页游戏顾名思义，即有网页的特性又属于游戏的范畴。他的目的是为了娱 乐，所用的手段和运行平台确是网页浏览器。网页游戏的发展离不开互联网技术 和浏览器技术的发展。技术的发展为网页游戏提供了丰富的表现手段。
1．网页游戏的技术特性
网页游戏依赖于网络技术的发展，最早的网页游戏其实就是一些用HTML写 的简单网页，界面简陋，交互手段贫乏，玩家与游戏的每次交互都会引起浏览器 刷屏一次。用户体验与PC单机游戏相比，判若云泥，天差地远。界面与交互手 段的限制，使网页游戏在游戏玩法设计上也无法施展，因此网页游戏一直难以登 堂入室，不被玩家认可。
近两年来，技术的发展为网页游戏提供了丰富的表现手段。最近几年兴起的 丰富互联网应用(Rich Internet Application，简称RIA)技术，能在浏览器这 个应用最广的平台上做出美不胜收的显示和交互效果来。尤其值得一提的是 AJAX技术，在浏览器上不刷屏就能与服务器通信，更新网页的局部信息，极大 地提高了用户体验。使用这种技术，做出的应用与传统桌面程序即使暂时无法平分秋色，但分庭抗礼的发展趋势已然初现。拿目前最流行的网页游戏《猫游记》 作为例子：它的界面和动态交互过程，已经让人难以区分这是一个独立的游戏程
序，还是浏览器上的网页应用。
网页游戏天然就是网络游戏。在这里，网络通信细节被浏览器实现了，使得 游戏开发者和游戏玩家都无需购买昂贵的网游引擎和计算机设备，就可廉价地实 现网络游戏。网页游戏，使用浏览器把游戏体验的途径简化到了极致：能上网的 人，都可以“无需下载任何东西，无成本、无等待”地玩网页游戏，只要输入
URL就可。这种简化是革命性的，与传统网游成鲜明对比。传统网游需要下载300M 以上（有的甚至超过1G）的客户端，无法与网页游戏的便利性相比。因此，网 页游戏有巨大的潜在受众，又把体验游戏的过程简化到了极致，其发展潜力不容 忽视。
对网络带宽的要求相对较低，玩家几乎可以在任何时间任何地点任何一台能 上网的电脑上快乐地游戏，不会受到其他客观条件的制约。等种种特点，也非常 适合长时间呆在办公室和校园的OFFICE一族和大学生一族，他们可以轻松地 “在老板眼皮底下”享受游戏的乐趣，这些都是传统网游所不能比拟的。而这部 分用户大多具备消费游戏的经济能力和消费需求，因此市场潜力相当巨大。
网页游戏的未来潜力还体现在其跨平台的拓展能力上。随着浏览器技术的不 断发展，网页游戏已不再局限于网页表现形式。而是实现了WEB+WAP的兼容。目 前在手机上已经能够玩到多款网页游戏。未来网页游戏还将向手机客户端图形网 游(J2ME)的方向发展。多平台无疑将为网页游戏带来更高的受众覆盖率与赢利空 间。这正是相较于包括传统网游在内的任何游戏均不具备的巨大优势。
2．网页游戏的游戏特性
不同于以前的单机休闲小游戏，网页游戏虽然“轻巧”却绝不简单。网页游 戏种类繁多，其游戏形态包含了角色扮演、战争策略、模拟经营、社区养成、休 闲竞技等多种类型，题材则覆盖了科幻、历史、武侠、魔幻、体育等众多热门领 域。在游戏深度与耐玩性上，与传统网游相比并不逊色。
不同于传统网游中存在大量NPC(电脑人物)供玩家练功、升级，网页游戏的 世界中一般只有人类玩家，“与人斗争”成为贯穿网页游戏的“主旋律”、PK、复 仇、互助、交易、联盟等发生在人与人之间的交往与斗争在网页游戏中被表现得 淋漓尽致，“互动性”这一网游最成功也是最吸引人的要素在中体现的更为突出。
游戏模式新颖，不花时间、无需在线是很多用户的梦想。网页游戏一个很大 的特色就是不需要用户实时在线，安排好工作之后，随着自然时间的增加游戏自 然在发展，这个特性是客户端网游无可比拟的。
网页游戏进入门槛低，打开IE就可以玩。这种方式可以使很多不适合玩游 戏的场所也可以进行游戏。比如说：上班时、看电影时。通过手机甚至可以在汽 车上。
网页游戏的另一大特点是“轻松”。相对于紧张刺激，追求画面音效享受的 传统网游，网页游戏以文字及简单图形作为主要表现形式，游戏节奏也要慢很多。不需要随时在游戏中控制，所以网页游戏玩起来轻松惬意，这让玩家不必花费太 多时间就能照看好自己的“生意”。而正因为游戏过程无需投入太多精力，网页 游戏不会如传统网游那样成为令玩家欲罢不能的“鸡肋”。“沉迷”这一在传统网 游踪无法回避的问题在网页游戏中基本不可能出现。
网页游戏轻便、有趣、轻松的特色使其在短时间内迅速兴起并风靡一时，并 被人们形象的称为“绿色网游”。目前网页游戏已经在国内拥有一批庞大的玩家 群体。与传统网游的玩家呈现相对低龄化不同，网页游戏的玩家群体主要以年轻 的上班族为主，特别是所谓的“白领”一族。究其原因，这与很好的迎合了“白 领”们渴望休闲但不愿过多花费精力，期望打发时间但以不影响工作为前提的生 活理念有着直接关系。
3．网页游戏的用户和市场特征
网页游戏的受众群体极其广泛。客户端网页因为其需要用户长时间在线的特 性，以及题材方式的限制，导致很多用户无法进入。而网页游戏因为覆盖面广，不需在线等特性，只要能够打开网页就可以运行游戏，其潜在受众群体是一个让 大家惊讶的数字。据市场统计，中国2006一年的网络游戏收入是59亿，人群达 到率70%，其中，QQ游戏到达率37%（5000万人），联众：20%（2700万），盛大： 19%[14]。就受众人群的知识层次与消费能力而言，以“白领”玩家为主的网页游 戏无疑已成为网络游戏中的“高端产品”。考虑到“白领”群体巨大的消费欲望 与经济实力，这一新兴市场迅速为多方所看好，并被普遍认为具有巨大的挖掘潜 力。
网页游戏的独特魅力与巨大潜力使之迅速成为互联网行业中的“新贵”，仅 国内就有众多企业投入这一领域并开发制作出了大量网页游戏。
4．网页游戏的不足
网页游戏相对于客户端网游优点有很多，但是和传统网游相比，网页游戏还 是有很多不成熟完善的地方。而劣势其实集中在画面表现力上（传统RPG也可做 到网页上，节奏感上将不是劣势，而画面上去难以比拟）。而随着互联网技术的 发展，网页上的画面表现力也得到了长足的发展。相对传统网页游戏的纯文字表 现，现在的网页游戏已经逐步向多媒体方向发展。
1)部分游戏模式互动性不强
因为网页游戏中，除了角色扮演题材，其他题材都需要用户时刻在线，所以 很难直接让游戏用户以一种直观的方式和别的用户沟通。
2)游戏节奏缓慢
因为网页游戏不需要实时在线的特性，使其大部分题材的游戏节奏是缓慢 的。
3)游戏画面表现力不够
浏览器的局限导致网页游戏的画面很难达到客户端网游的程度。
4)网页游戏刚刚诞生、游戏内容不够丰富
作为一个新兴的娱乐模式，大家给予的重视还不够，发展时间也比较短，短 时间内，游戏内容还大大的不够丰富。
虽然目前网页游戏尚无法与传统网游在市场规模上相提并论，但可以肯定的 是，随着WEB技术的不断发展和网页游戏认知度与影响力的不断提升，网页游戏 市场将迎来一波快速发展的高潮。
2.4.3 网页游戏的发展
近两年来，尤其是近一年来，国内外网页游戏生猛出现，日新月异，目不暇 接。那么，网页游戏的兴起原因是什么？网页游戏作为一个新生事物，它的过去、现在和将来会是怎样的？而网页游戏的悄然崛起，在某种程度上表明游戏已经进 入了一个全新的分众时代。
网页游戏出现得很早，最早的网页游戏其实就是一些用HTML写的简单网页，界面简陋，交互手段贫乏，玩家与游戏的每次交互都会引起浏览器刷屏一次。这 时的网页游戏，用户体验与PC单机游戏相比，判若云泥，天差地远。界面与交 互手段的限制，使网页游戏在游戏玩法设计上也无法施展，因此网页游戏一直难 以登堂入室，不被玩家认可。
当年在网络泡沫经济的推动下，国内涌现了不少规模较大的WebGame。例如 《第九城市》、《逸飞岭》等，以及活跃在各信息港的不同版本的《笑傲江湖》。它们是国内第一批基于WEB浏览器而产生的WebGame。当时它们所冠的头衔不是Game，而是虚拟社区。
除了基本的BBS功能之外，网民还可以在虚拟社区里练级、打工、赛马、喂 养宠物、建立家庭等等。基本上我们能在网络游戏中所做的事，在当时的虚拟社 区一样可以做。不同的是，网络游戏更直观一些，而虚拟社区则是以大量文字和 少许图片的形式来表现。
虚拟社区最红火的时候，成千上万的网民为了那些虚拟数据，通宵达旦地守 候在电脑面前不断刷新页面。网站访问量自然疯了似地往上飙升！在网络泡沫经 济最红火的时期，能增加网站访问量就等于大把地捞进钞票。自然大大小小的网 站都不遗余力地抽出人力物力去开发和维护虚拟社区。
不可思议的巨额网站访问量盖过了虚拟社区先天和后天的不足。但比网站访
21问量增加得更快的是服务器不堪重负的压力。随着网络泡沫经济的破灭，网站访 问量逐渐化为“浮云”，虚拟社区受到灾难性的重创。不少虚拟社区由免费变为 收费，习惯吃免费大餐的网民自然难以接受，更何况大部分虚拟社区的质量和管 理都让人不敢恭维。时至今日，存活下来的虚拟社区已经寥寥无几，而且鲜为人 知。
但是谁也不曾料想到，一款国外引进过来的星战题材《OGAME》和猫扑网以 图形化社区演变而来的《猫游记》能使早已在国内衰败的WEBGAME死灰复燃，并 掀起了其在国内火热的第二股高潮。近两年来，网页游戏的兴旺发展、逐渐为人 所知乃至被一些受众接受和喜爱，是浏览器技术发展的必然产物。技术的发展为 网页游戏提供了丰富的表现手段。
虽然网页游戏在目前还不是主流游戏，但是他的发展前景是诱人的。
从科技发展角度来说，未来的计算机软硬件技术的发展，不仅个人电脑，使 得手机，电视，PDA等都可以作为客户终端，由于互联网无处不在，拥有海量信 息存储空间的服务器端超级强大，本地客户端甚至不需要硬盘来存储信息。连微 软都认为未来的时代，连软件使用都希望完全通过网络来实现，而不需要在去买 什么光盘回家安装什么软件。RIA的各种技术目前还在发展，网页游戏乘其势，总的发展势头是乐观的。目前，网页游戏这个市场正在迅猛发育中。
网页游戏将会向手机WAP和手机客户端图形网游（J2ME）方式联合发展，是 跨平台的，而不会单单停留在网页表现形式上。多平台的受众覆盖率和赢利空间 更大。现在已经有些公司在这方面已经迈出了第一步，同时在WEB上和手机上推 出产品，既是网页游戏，又是J2ME图形手机网游，两个平台访问的是同一服务 器。
网页游戏进入门槛低，竞争非常激烈。产品多，淘汰率高，精品少。国内的 网页游戏在设计理念、玩法设计、细节处理等方面都无法与国外相比，因此会出 现一到两年的模仿抄袭阶段。但是国内的网页游戏竞争，最终比的是如何深入挖 掘玩家需求，如何根据本土玩家的趣味和网页游戏本身的特征，设计出最佳游戏 来。
2.5 本章小结
本章主要阐述了界面设计原理，认知心理学，视觉习惯的基础理论，分析以 上要素在游戏界面设计中的地位。另外对网页游戏的概念，分类、特点以及发展 进行相关介绍。网页游戏中界面设计的原则研究
3.1 网页游戏的界面
3.1.1 网页游戏的界面现状
WebGame虽然现在发展情境很好，但是WebGame的劣势也很明显，通常游戏 方式简单，游戏流程较短，文字与图片搭配的画面与大型网游也无法相提并论。在界面设计方面出现一些如下问题：
1．过度追求画面效果，竞争力完全是靠拼画面
现在的游戏开发者努力设计界面去和客户端的游戏相比较界面的美观和豪 华程度。过多的使用Flash，使得页面下载变慢，连接服务器超时，最终流失用 户群。
也许正是因为目前获得巨大成功的OGAME类型游戏的固有模式不可变更，要 想在同质化严重的诸多同类游戏中突出重围，大家不约而同地就想到了用提升画 面效果来提高自身的竞争力。于是乎一时间FLASH技术成了诸多网页游戏制作团 队最为关注的焦点，所有页面都要求图形化，画面做到尽可能多的炫目，能用 3D的绝不用2D。从《图腾三国》到《梦境家园》到《纵横天下》，大家走得都 是这条路子，似乎只要画面好看了，自己就感觉有击败其他对手的竞争力，好像 只有全部页面FLASH化才算得上是商业作品。
可是事实上呢？我们除了看到强制要求安装最新FLASH播放插件的提示窗 口，每次打开个页面需要载入几十秒钟的动画，动不动就因为和服务器失去联系 而中途打不开页面，同场景内显示超过20个玩家就卡得要命之外，我们实在看 不到那绚丽的FLASH画面给我们带来了多少可玩性的惊喜。如果真的单纯是为了 追求画面效果的话，我相信绝大多数玩家 会毫不犹豫地选择大型网游而不是用 FALSH包装过的WebGame。
2．在人机界面设计上不如其他类型客户端游戏
大多数的设计者都没有意识到网页游戏的重要意义，它既属于游戏类型但是 又受限于浏览器平台中。当前很多开发者不是把网页游戏当作客户端大型网游的 迷你版替换版，在画面特效方面不遗余力，要不就是完全照搬普通网站风格，结 构层次凌乱，内容不清。导致结果是，既丢失了传统游戏所拥有的先进的HCI 技术又缺少了浏览器平台所拥有的不需要用户下载程序和不限平台的特点。
传统游戏中的简洁高效的饼图菜单，深入地用户自定义化，流畅的人机交互 性以及快捷和即看即会的入门模式都没有很好的被网页游戏所借鉴。网页游戏仅
仅是借用了游戏绚丽的外皮和曲折的剧情。这些都使网页游戏走入歧途。
3．过度追求新技术，用提高技术门槛来限制竞争者
如果在画面上不能超越竞争者，为了达到防止被竞争者抄袭仿制的目的，很 多WebGame制作团队就选择了采用新技术提高技术门槛的方式。他们投入了大量 人力物力去研究最新的WEB技术，再用更漫长的开发周期去不断尝试和检测这些 新技术，结果做到的却只是用别人没有的技术来实现人人都有的功能。
这些技术并不能使用户获得任何好处，一些最新的技术并不一定适合，如果 用简单的成熟的技术就能够实现的功能，只能说是背离HCI精神。
4．玩家操作受到限制
分级逐层设计是游戏界面设计的思想，即按照主界面、一级界面、二级价额 面逐层划分，分别设计，并提供良好的导航帮助菜单和按钮，使得用户可以随时 跳转。当前的网页游戏设计为用户提供良好的导航功能不足。
如果入门玩家不能在前十五分钟顺利地弄明白基本操作规则和策略，或者铁 杆玩家不能在前十五分钟感受到兴趣和挑战的话，他们将永远离开这个游戏，不 再做进一步尝试。因为人们玩游戏的目的是娱乐，在工作之后能够放松、娱乐一 下，所以我们不能要求用户像学习其它应用软件那样花一天甚至一个星期时间去 弄清到底怎么玩这个游戏。
虽然目前有少数国外的资深游戏设计师在其著作中谈到网页游戏界面设计，但也只是简单的概略性的介绍，对整个网页游戏界面设计方法缺乏系统、全面、具体的介绍和分析。游戏界面是游戏的外在表现，是游戏中与游戏用户直接相互 影响的部分，在整个游戏设计中占据很重要的地位。游戏界面设计从游戏文化背 景确定到界面构想产生、可行性分析到提出方案、方案分析、筛选、修正和评估 必须是有理、有序、系统化的一个完整过程系统，应该有相应的系统理论来指导。3.1.2 网页游戏的网页界面特征
现有网页游戏界面的设计大都类似于人机界面设计中的WEB应用界面风格。在你开始设计一个网页游戏之前首先要考虑的是游戏是以网页的技术形式表现 出来。网页游戏要受到浏览器平台和网页技术语言的限制，这与传统游戏制作方 式不同，相应的界面设计当然也就会有所差别。
网页游戏不同于传统的C／S程序那样。传统的程序一般运行在局域网上，并且程序安装在客户机器上，对带宽没有特别的考虑，一个应用程序文件几乎包 含所有的界面。一个典型的C／S应用包括菜单、快捷图标、用户信息显示窗口、状态条等[15]。
而网页游戏属于WEB应用，一般是运行在广域网中，用户量相对大一些。由
于网络带宽的限制，界面应更简洁，网页游戏通常由大量的页面文件组成，每个 页面文件只显示用户当前选择的信息，其它信息需按相应按钮或链接进入新的界 面获取。
网页游戏界面设计存在以下几个问题：WEB应用的中界面实现的工作量比传 统应用所占比重加大；界面语言为浏览器解释执行的HTML语言，界面的实现受 到HTML语法的限制；由于带宽的限制，要尽量少从服务器下载大量的元素；为 了使用户感到较好的操作相应性能，客户端界面元素的相应尽可能在客户端实 现。
网页游戏的界面一般来说就是能够看到的该游戏的画面。网页界面基本由浏 览软件，即网页浏览器窗口（工具栏、地址栏、菜单栏）和导航要素（主菜单、子菜单、搜索栏、历史记录等）及各种视觉内容（标志、图像、文本、著作权标 志等）构成。
浏览器中的网站标志能使这个网站与其他网站区分开，起到直接表明网站身 份的面目作用。网站的索引要素有主菜单和子菜单、搜索、跳跃菜单等许多项内 容，其中网站的主菜单最为重要，所以应从视觉的角度设计得既美观大方又方便 使用。窗口内视觉内容主要由版面布局、导航要素、字体、色彩、图标和多媒体 等是重要成份组成。
1．浏览器窗口
窗口式屏幕中的一些区域。看起来就像独立终端。浏览器窗口顾名思义就是 浏览器软件的窗口。它一般的窗口相同，通常可以包含文字和图形，并且可以移 动或改变大小。在屏幕上可以同时显示即可窗口，可以看见不同的任务，在工作 线程之间切换的时候，用户可以查看不同的窗口内容。
网页游戏都是运行在浏览器窗口中的。常见的浏览器类型有：Internet Explorer、Firefox、Maxthon、Faster browser、Greenbrowser、Opera等。不 同的浏览器在代码语言解释上会有所不同。一款好的网页游戏要能够在不同的浏 览器尚都能很好的显示，要有更好兼容性。浏览器窗口包括工具栏、菜单栏、地 址栏，以及滚动条和内容页面区域，会根据用户的屏幕尺寸自适应显示。
地址栏
工具栏
标签栏
内容区域
状态栏
图3-1 一个标准的网页游戏的浏览器窗口
Fig.3-1 A standard window of Web browser
内容页面尺寸
页面尺寸是指WEB页面在屏幕的可视大小，表3-1是屏幕分辨率和页面显示 尺寸的对应关系表。
表3-1 屏幕分辨率和显示尺寸的对应关系表
Table3-1 Relationship between Screen resolution and the Display area
分辨率 页面尺寸
600*480 620*311 800*600 780*428 1024*768 1007*600
宽度一般不超过1屏，不推荐使用横向滚动条，当前屏幕显示不下所有内容 时可以向下拖动网页，但尽量不要超过3屏。如果确实需要超过3屏，最好在上 面做页面内部链接。
2．版面布局
我们常说，第一印象是非常重要的。因此，你的网页游戏的主页必须包含你 的公司或站点所提供的所有服务内容。可以使用一个短的描述性的标题指明站点 的主题是什么。你也可以加入你的公司的徽标，但是千万不要让信息和图片填满
了你的主页(站点的其它网页也必须如此)；主页看起来必须是干净而有组织条理 的。使用很容易阅读的字体。当然，根据你的站点的大小，你可能还必须解释如 何浏览。在主页的下面，提供你的公司的联系信息，例如，你的email地址或电 话号码，这样就使浏览者能很容易地跟你联系。主页通常是放置更换信息或新闻 的绝好的场所。
在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色 的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同 颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背景图，而 不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊 背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏 览器是如何显示这些网页的。
当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背 景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个 充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，使背景色与背 景图的颜色相类似。
使你的网页短一些，努力使信息/动画通过几个网页来表现。如果把很多东 西堆放一个网页上，就会使你的网页看起来非常凌乱，这样也就会使浏览者不太 愿意阅读所有的内容。所以，要设计几个网页，每个网页上放一段或两段文字。在段落的下面放置一个按钮，链接到下一页，在最后一页则放置一个按钮，链接 到上一页、主页，或者浏览者刚刚所到来的地方。尽可能使用模板，降低设计的 工作量和复杂性。
如果你准备为你的网站主页插入一个Flash网页游戏movie，那么最好把它 与主页分离开。一定要加一个“跳过介绍”按钮，这样就使那些不愿意等待下载，或已经看过该介绍的人，能很容易地直接进入你的主页。运用cookies，你可以 使曾经浏览过你们网站的人自动跳转到主页。
文本、图片和多媒体：文本和图片是构成网页的两大元素，目前的技术已可 让文本和图片摆放在页面的任何位置。多媒体如声音、动画、视频等可使页面增 辉不少，WEB应用较容易处理多媒体信息，这也是WEB应用的优势之一。努力使每一个页面小于50-75Kbytes。尽量把你的GIF网页游戏和JPEG图片压缩后再 加入到你的网页中。如果你准备在你的站点中放置高质量的图片、音乐或动画，那么你最好设计两个版本，一个为高质量，另一个为低质量，这样就能使不同的 浏览者有一个最佳选择。
对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编 排来实现的。网页的构成要素包括文字、图形、图像、标志、色彩等造型要素及 标题、信息菜单、信息正文、标语等内容要素。网页设计的视觉流程是一种“空 间的运动”，是视线随网页中的各构成元素在空间沿一定轨迹运动的过程。通过 视觉流程，运用视觉移动规律，将各种视觉信息进行有序组织，可以诱导浏览者 的视线依设计的意图进行流动，从而使浏览者清晰、流畅、快捷地接受最佳信息。
3．导航要素
菜单
网页界面程序的菜单一般处于最顶端，为横向，用于提供该应用所有的功能 选择入口。应用菜单可有多个，一般处于界面的上部和左部，处于上部的为横向 菜单，左部的竖向菜单，用于该系统大的功能模块的导航，可以一般用脚本实现。
功能列表
功能和风格类似于竖向菜单，界面风格类似于Windows资源管理器的左边目 录列表TreeView，用于提供系统中某个功能模块内部子功能选择入口。功能列 表位置要根据用户视觉习惯来定，一般处于界面的左部。
浏览导航
站点的浏览导航必须被设计成非常容易。如果需要，把站点分割为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单条。当然，除 此以外，还有许多可选的方法。对于具有大量信息的站点，使用一个可扩展的菜 单条会是一个不错的选择。
无论你使用何种导航模式，在每一页都放置一个主页链接，那会是一种不错 的设计思想；浏览者必须知道，无论何时，当他们迷失在你的站点浏览中时，都 可以通过简单的一次点击就能准确地知道目前所处的位置。
导航要素的构成和形态是否成体系、位置是否合适将是决定该网站能否成功 的重要因素[16]。一般来说，在网页上端或左侧设置主要导航要素的情况是比较普 遍的方式。同时利用菜单按钮或移动的图像区别于一般的内容和其他的文本，很 容易让人们知道这些就是导航用的要素。也就是说，从构成和视觉的角度来把其 他的内容和导航要素区别开来。也有不少创意性的导航方式，总之，我们应把导 航要素的构成设计得符合整个网站的总体要求和目的，并使之更趋于合理化。
移动类别标志的导航设计加上每个类别层次都设计成不同的颜色，这样不仅 能刺激用户的好奇心，使之感兴趣，也能更大的发挥导航栏的帮助作用。在网页 中的导航要素不应设计得太过复杂，我们应该把其设计得更直观一些，让用户一 下子就能看明白，这样才能收到好的效果。但这并不是说要给人以生硬、死板的
感觉，为了能让用户感兴趣，我们应在导航栏的设计方面多动动脑精。
4．内容基本元素
字体
网页中显示的字体要使用标准字体，因为一切都要根据用户端浏览器的设置 来显示你的页面，使用费标注的字体会导致用户无法看到你想要的效果。除标题 外，字体一般采用规则宋体。Windows自带宋、仿、楷、黑4种字体，标题字体 最好用这4种之一网页游戏如使用其它的字体，少量文字可用图片，但用图片代 替文字是极不推荐的做法，大量文字可用字体下载的方法。目前用CSS可实现很 漂亮和很好效果的文字。
字大小
字大小可用相对大小和绝对大小方式定义，相对大小为字号定义方式，如2 号字，绝对大小为尺寸和点阵定义方式，如9pt、12px等，其中px代表点阵，用到CSS定义绝对大小。相对大小会因浏览器的不同和同一浏览器的字体设置不 同而不同，绝对大小则不会因此而改变，最好采用点阵px定义字的大小。目前 网站流行页面文字的大小为9 pt或12px(9pt和l2px大小基本上相同)，略微显 得稍小一些，主要是为了□页中能显示更多的内容给用户。实际WEB应用中可采 用l6px、l4px和12px，并根据页面内容实际情况选择。功能列表可用l2px，输 入表格用l6px，显示表格用l4px，标题可用24~36px
颜色
色彩的搭配对于网页的美观非常重要，一般用同一色系的色彩，色彩层次分 明但不会导致反差强烈。色彩会使用户产生心理感觉，不同的颜色会给浏览者不 同的心理感受。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以 绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。表 3-2列出了用户对于不同的色彩系列所产生的不同的心理感觉。
表3-2：不同的色彩系列带给用户的心理感觉
Table3-2 Users have different psychological feeling for the different color
色彩系列 效果
红色 是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉
绿色 介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感
觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛
橙色 也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的
效果
表3-2：不同的色彩系列带给用户的心理感觉(续表)
Table3-2 Users have different psychological feeling for the different color(continued)
黄色 具有快乐，希望，智慧和轻快的个性，它的明度最高
蓝色 是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛，令人想到天空的色彩
白色 具有洁白，明快，纯真，清洁的感受
黑色 具有深沉，神秘，寂静，悲哀，压抑的感受
灰色 具有中庸，平凡，温和，谦让，中立和高雅的感觉
图像
图像用在页面使用可增强美观效果，或用来平衡页面，当时由于网络带宽的限制，应该尽可能少用图像，尽量避免使用更大的多媒体文件。目前有两种图像 格式比较适合WEB应用，GIF和JPG格式，GIF又分为静态图像和动画两种，GIF 还可提供透明图形效果。GIF最多为256色，而JPG为24位真彩色，并且JPG 的压缩效率要优于GIF，故除非需要动画和透明图，最好用JPG格式的图像。由 于GIF最多为256色。
图标
图标是具有明确的指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。
网页游戏中图标是用来表示游戏中的项目，例如超链接、游戏中道具、角色的状态、按钮等。图标有多种形式，可以是图标所代表的对象逼真显示，也可以 是高度程式化的，不过在设计图标是应该考虑用户对于图标本身所代表意思的认 知。
图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一 套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还 有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在 结构上图标其实和麦当劳的巨无霸汉堡差不多[17]。
背景
背景可用几种单色或背景图实现，为不影响文字的观看效果，背景图不可太花，且颜色要与字色搭配协调。为使背景图不大幅度增加网页尺寸一般用纯色和 图像平铺的方法实现，目前流行采用色彩渐变的通道背景图能增加视觉效果和色 彩，同时又不至于对文本喧宾夺主。为了保证各种显示模式的一致性，横向平铺 背景图最小宽度为1024px，纵向平铺背景图最小高度为页面尺寸高度。
对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编 排来实现的。网页的构成要素包括文字、图形、图像、标志、色彩等造型要素及 标题、信息菜单、信息正文、标语、单位名称等内容要素。网页设计的视觉流程 是一种“空间的运动”，是视线随网页中的各构成元素在空间沿一定轨迹运动的 过程[18]。通过视觉流程，运用视觉移动规律，将各种视觉信息进行有序组织，可 以诱导浏览者的视线依照设计的意图进行流动，从而使浏览者清晰、流畅、快捷 地接受最佳信息。
指针
网页游戏所要求的交互形式有赖于指点和选择内容这类活动。鼠标是能够进 行这种任务的输入设备。在屏幕上显示给用户的是由输入设备控制的光标。
在网页游戏中，光标的不同显示模式能够很好的给用户提供游戏信息。当指 向某个资源图片时，鼠标指针会及时显示帮助内容，提示玩家。鼠标移开后会立 刻消失，不会干扰游戏进程。
图3-2 《北欧神化》中鼠标悬停效果
Fig.3-2 Effect of mouse over in game Norron
多媒体
图片，电影和声音效果永远都是很好的，但是不能过分。要记住，大多数人 现在还是通过最高连结速度为56Kbps的“猫”上网的。好多次，为了浏览一个
页面，我耐心地等待了很可观的几分钟，而这种耐心不是每个人每时每刻都有的。Flash是一个目前非常流行的程序，许多WEB设计者都乐意往自己的网站中 加入。Flash的好处就是可以使你的动画和音乐文件非常小。
在游戏“纵横天下”中，新手入门使用FLASH技术，使用交互的动画来帮助
新玩家来了解游戏。图文并茂，玩家可以很容易地开始游戏。
图3-3 《纵横天下》中FLASH新手向导功能
Fig.3-3 Flash guide of Zong Heng Tian Xia
5．其他元素
使公司的徽标在整个站点保持一致，避免在你的站点或浏览窗口中使用滚动文本，因为滚动文本会降低你的网页的可访问性。
图3-4 百度的网站logo图标
Fig.3-4 the logo of Website Baidu
经常检查网页中的链接，确信它们没有被打断，尤其是在你对网站内容作了更新后。网页游戏检查你的网站是否和所有流行的浏览器兼容。
把你的站点信息提交给搜索引擎，检查你的站点在分类中的排名，如果很后，那么最好考虑更换你的META标记。
许多人还在使用14英寸或15英寸的显示器，因此尽量使你的网页也是可以 “自由滚动”的(最起码可以水平滚动)。
不要在显著的位置堆积很多广告条，两个广告条基本上应该是上限了。
3.2 基于网页游戏的用户特征模型的界面设计原则
3.2.1 目标用户特征
互联网技术的快速发和应用。使得网页游戏的受众群体极其广泛。客户端网页因为其需要用户长时间在线的特性，以及题材方式的限制，导致很多用户无法 进入。而网页游戏因为覆盖面广，不需在线等特性，只要能够打开网页就可以运 行游戏，其潜在受众群体是一个让大家惊讶的数字。根据最新的调查显示：预计 到今年年底全球互联网用户数量将会超过10亿，而中国网民数量已经达到2。2 亿，超过美国成为世界第一，网民上网最主要目的是为了娱乐。网页游戏，使用 浏览器把游戏体验的途径简化到了极致：能上网的人，都可以“无需下载任何东 西，无成本、无等待”地玩网页游戏，只要输入URL就可。这种简化是革命性的。网页游戏轻便、有趣、轻松的特色使其在短时间内迅速兴起并风靡一时，并被人们形象的称为“绿色网游”。目前网页游戏已经在国内拥有一批庞大的玩家 群体。与传统网游玩家呈现相对低龄化不同，网页游戏的玩家群体主要以年轻的 上班族为主，特别是所谓的“白领”一族。究其原因，这与很好的迎合了“白领” 们渴望休闲但不愿过多花费精力，期望打发时间但以不影响工作为前提的生活理 念有着直接关系。
网页游戏的主要的用户是家庭用户、办公室上班族、大学生等。这部分用户要么由于计算机硬件的限制，要么从未或者很少接触其他类型网游，要么由于工 作或学习时间不方便玩其他类型游戏。他们玩游戏的目的不是疯狂的打怪升级，没日没夜的沉迷于游戏中。他们更喜欢在忙碌的工作间歇放松心情，清闲自在地 玩一下游戏，在瞬间得到了放松和乐趣。不需要在资源紧张的电脑上安装庞大的 客户端软件，不需要高深的技术知识，不用疯狂点击鼠标键盘，只需要简单的按 钮操作就能完成指令；不需要长时间泡在游戏中也能取得较大的成长。只要能够 连上互联网，不用下载客户端，直接浏览网页就能游戏。这个用户群都是具备消 费能力和长期上网条件的。
3.2.2 游戏用户心理特征模型
人的心理活动一般可以分为三大类型：一是人的认知活动，如感觉、知觉、3
3注意、记忆、联想、思维等心理活动；二是人的情绪活动，如喜、怒、哀、乐、美感、道德感等心理活动；三是人的意志活动，这是在认识活动和情绪活动基础 上进行的行为、动作、反映的活动。而影响人的行为的首要心理因素是认知心理。
游戏界面设计中和人类心理因素相关最密切的是记忆、学习、思维几个方面，另外用户对于在游戏所创造的虚拟世界中的胜利的渴求，对游戏剧情的期待等的 心理活动在界面设计中也是需要考虑在内的。
游戏用户心理特征模型的建立主要考虑用户本身的记忆、思维、学习以及在 游戏过程中其它的心理活动等方面与游戏界面的交互过程。游戏用户的记忆能力 直接决定了在设计游戏界面时在界面中显示的信息量，对于一些短时记忆可以记 住的信息可以在游戏界面上不直接显示，而需要长时间才能记住的信息则要在另 外的子界面显示，可以用形象的按钮作为子界面入口。游戏用户的思维是用户本 身对游戏界面中的交互元素的感觉认识的基础，这取决于用户本身的知识积累和 经验。因此，在考虑用户思维的情况下，游戏界面设计中的元素尽可能地要让最 大用户群体认知其代表得意义。当用户第一次进入游戏时，界面的易学习性是用 户是否继续进行游戏的决定性因素，没有任何人愿意花很多时间去学习如何玩一 款游戏。另外，游戏用户在游戏过程中对于游戏剧情的期待、对于获得胜利的渴 望以及对于游戏中自己所扮演角色的感情等因素也在一定程度上影响着游戏界 面的设计，如图3-5所示。
图3-5 游戏用户心理特征模型图
Fig.3-5 Chart of Game users’ psychological characteristics
游戏用户作为一个独立完整的个体，其心理活动的各个方面是相互关联并相 互影响的。用户的记忆力直接影响着其对所见事物的思维认知，也影响了用户本
身的学习能力，记忆力好的用户学习起来要快一些，而记忆力较差的用户则学习能力相对也差，对于游戏本身的提示就更加依赖。游戏用户真正沉浸在游戏中的 时候，其本身的感情及心理变化和游戏中的剧情变化是同步的。因此，用户沉浸 在游戏中的感情变化也是影响游戏界面设计的心理因素之一。
3.2.3 基于游戏用户特征模型的界面设计原则
好的游戏界面能让游戏用户很容易地认知、学会如何玩这个游戏，同样。由 于游戏本身情节的推进，界面的变化应该符合游戏用户需求。基于游戏用户的特 征模型，本节得出了网页游戏界面设计的一般原则。
1.风格保持一致性原则
即从任务、信息的表达、界面控制作等方面与用户理解熟悉的模式尽量保持 一致。同一款游戏中，所有的菜单选项、对话框、用户输入框、数据显示和其他 功能界面均应保持风格的一致性。一致的风格设计能加快用户根据以往的经验积 累进行对界面本身的认知，进而影响着游戏界面的易学习性和易用性。一致性主 要包括以下几个方面的内容：
用语与用词的一致性：界面中的项目名称、标签名、功能名、提示语句、错 误信息等要统一，控制与命令的名称要与流行软件和游戏运行平台软件尽量保持 一致，与游戏行业中的业务术语尽量一致。
操作方法的一致性：界面中的响应游戏外接控制设备的设计，如对键盘中回 车键、ESC键、鼠标等的操作方法的定义应尽量与操作系统上的定义一致，或与 常用的流行软件的做法尽量一致，如回车键对应“确认”操作选项，ESC键对应 “取消”操作。
界面的格局的一致性：游戏中从进入游戏的主画面到详细对话框设计的设计 风格，控件的排列、背景、色彩、文字的字形、字体等等，在真个游戏中尽量保 持一致。
2.便于记忆的设计原则
根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7
个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7±2 比特[19]。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之 间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦 躁，压抑，会让人感觉到信息太密集，看不过来，很累。界面的易学性原则
由于游戏用户凭借短时记忆进行信息处理存在的局限性，所以在游戏界面设 计中用同一窗口、多页面来显示大量信息。对于控制较复杂的游戏来说，有一个 页面来显示详细的控制选项，对于这种情况，应在游戏主画面提供链接按钮，用
来调出游戏中大量的情节信息和游戏控制设置信息。
世界上最优秀的电脑游戏开发商——暴雪(Blizzard Entertainment)网页 游戏的副总裁比尔·鲍珀（Bill Popper）曾说过游戏的基本原则：“易于上手，难于精通”。易上手，即是在考虑游戏的科学习性。当用户拿到一个新的游戏时，由于是第一次接触这个游戏，必须有一个学的过程。这就是游戏的可学习性的概 念[20]。这是一个非常枯燥的过程，我们都深有体会。由于网络游戏的用户特使得 用户不可能花很多精力在学习游戏操作上，因此游戏的界面就既要做到入手容 易，在操作和浏览上要符合用户一般习惯。
游戏界面的易学性的主要内容是使界面具有直观性，功能直观，操作简单，状态明了的界面才能让游戏用户更加容易学习。易学性原则通常包括以下几个方 面。界面中尽量采用形象化的图标和图像，如弹出游戏中人物属性对话框的按钮 采用一个卡通的人物主角的形象；建造建筑的按钮采用形象的榔头和扳手的图标 等。
尽量与同类型的游戏保持一致或相近的操作设计，如对于RPG游戏，左键点 击行进，右键点击目标攻击的模式已经深入游戏用户心中。要设计一款RPG游戏，同样的控制设计是非常有必要的。
尽量提供充分的提示信息和帮助信息。显示错误信息的同时要显示其错误的 解决方法，必要时要用图标和声音共同提示正确的操作方法。
3.容错性的设计原则
容错性指游戏界面防止用户在玩游戏时错误操作的能力和承受用户操作失 误的能力。防止出现诸如退出游戏没有存档、创建游戏失败之类的错误。在游戏 界面设计中提高其容错性的方法有以下几种。
重要的操作提醒，用户在启动不易恢复或有重大影响的操作时，提醒用户可 能引起的后果。比如在删除和掩盖游戏存档时应该有一个弹出对话框请求用户确 认是否删除或覆盖当前存档。
操作完整性检查，检查用户操作的完整性，防止用户疏忽，遗漏必要的操作 步骤。如在游戏开始的时候如果没有选择存档就开始游戏，界面就应该提醒用户 将开始一个新的存档，并锁定操作状态。
自动纠正用户错误，对于游戏用户的错误操作进行系统自动的更正。比如在 策略类游戏中，一方玩家给予友方玩家资源的输入数量大于目前自己本身有的数 量时，系统则自动调整到最大可给予对方的资源数量。
命令执行的默认选项，此选项是系统推荐的设置，用来给操作错误的用户恢 复错误。如在调整游戏本身的控制选项或画面以及声音选项的时候应该有一个默
认选项，如果用户对其中参数调整错误而又不知道正确值的时候就可以采用默认 选项按钮。
拒绝执行操作，当用户的操作错误会造成不能挽回的错误时，系统应该拒绝 执行操作，并显示原因。
4.有效性原则
游戏界面的有效性是指游戏用户能用简单快捷的操作实现对游戏本身中角 色的控制或实现相应的功能，游戏用户界面的有效性原则主要是指针对有经验的 玩家(Hardcore)，他们已经是游戏的忠实玩家，玩游戏的频率很高。另外，随着 电子竞技行业的兴起，游戏界面的有效性原则对于竞技类游戏的设计更加重要。电子竞技中的游戏用户都是参加各种相关游戏比赛的专业选手，他们对于游 戏的界面设计都要求有快捷方式完成操作。此时，相应命令的快捷键操作是比较 实用的方式，在竞技类游戏魔兽争霸中，每一项操作都有其快捷键对应，鼠标在 专业级游戏用户的控制下只起到定位作用而已。这样做会使游戏用户的操作更具 效率。
5.信息反馈原则
信息反馈指游戏用户对游戏界面进行操作后从游戏本身得到的信息，表示游 戏系统本身对用户操作的反应。如果游戏本身没有反馈，用户就无法判断他的操 作是不是为游戏本身所接受，操作是否正确，是否应该进行下一步操作。在设计 游戏界面时应该对用户的操作做出反应，给出反馈信息。反馈信息分为三个等级，他们与语言的三级(词法级、语法级、语义级)相对应[21]。游戏界面设计可以在这 三个层次上放置必要的反馈信息。例如，用户按到相应的操作键的时候出现相应 的变化，这是词法级的反馈。用户输入不正确的命令或参数时，游戏系统发出错 误警告的声音，这是语法级的反馈。语义级的反馈是最有用的反馈信息，它告诉 用户所请求的操作已经被处理，并把结果显示出来(屏幕显示)。如果在执行某个 操作需要较长的时间(超过3秒)，就要告诉用户请求正在被处理，旋转沙漏的鼠 标形状和进度条是比较好的方式。
6.增强游戏用户沉浸感的设计原则
我们大多数人有过完全被电影吸引的愉快经验。技术高超的电影摄制者会结 合灯光和声音因素创建并维持逼真的虚幻世界，使我们流恋忘返其中。好的游戏 也能如此具有吸引力。游戏用户界面的各个元素有助于维持玩家直接参与游戏世 界的幻想。图形元素可以让玩家在视觉上体验游戏世界的环境、活动和地方特色。音乐和声音效果创建了一种特殊情调，并使游戏的事件显得更栩栩如生。第 一人称射击游戏“雷神M”就是此类极其逼真的游戏。如果没有令人毛骨悚然的 声音效果和刺激的画面，它还会如此吸引人吗?
增强游戏用户沉浸感的一种方法是将界面的元素伪装成游戏世界的一部分。
7.方便的自定义
游戏既要给新手提供直观简单的操作，又要满足专家们对效率和性能更高的 要求。虽然这两点显得非常对立，但是现在的游戏能够很好的做到这一点。游戏 广泛使用自定义配置来为专家级别用户提供更好的服务。对全部功能进行重新设 置有时可能会导致混乱的局面网页游戏(例如更改键盘上那些众所周知的按钮或 字母组合键)，但是使用取消和重设命令可以让系统恢复原样，这样就能够鼓励 用户去多尝试新的设置来比较判断哪一种会更有益。
8.流畅的工作流
游戏递送数据时需要尽可能小的干扰到用户的正常流程，尤其在一些不需要 给予太多注意力的信息方面。这样有助于用户全情投入并提高使用效率。游戏通 过使用单方面控制的信息传送方法向用户递送一些非重要的信息，这种信息并不 需要用户采取任何行动。相反，在其他应用程序中所采用的交流方法则常常会干 扰到正常的工作流程，如：在弹出对话框中公告提醒用户注意并且需要用户有明 确答复的操作。通过使用声响，语音，短小的文本和动画，为用户提供一个较为 流畅的，不受打扰的操作流程，从而提高效率。
3.3 基于网络设备和浏览器特征的界面设计原则
网页游戏依赖于浏览器，这使得他不可避免的拥有网页界面的特点。网站设 计和传统的软件用户界面设计是有区别的。大体上说，设计师必须放弃对界面的 完全控制，让用户和他们的客户端软/硬件来决定一部分。
从设备上来说，用户可能通过一台传统的计算机访问网站，也可能在用一个 WEBTV，可用笔点击的手持式设备，或者是Nokia移动电话，甚至他们的汽车就 是一个Internet设备。在传统设计里，笔记本电脑和高端工作站屏幕的区别可 能只有六种。在网上，我们必须应付手持的设备和工作站的屏幕区别可能有上百 种，Modem和T-3专线之间的区别可能有上千种。
3.3.1 网页游戏就平台特征模型
网页浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让 用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器 交互并获取网页，这些网页由URL指定，文件格式通常为HTML，并由MIME在HTTP 协议中指明。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。大部分的浏览器本身支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF 等图像格式，并且能够扩展支持众多的插件（plug-ins）。另外，许多浏览器还
支持其他的URL类型及其相应的协议，如FTP、Gopher、HTTPS（HTTP协议的加 密版本）。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动 画、视频、声音、流媒体等。
常见的网页浏览器包括微软的Internet Explorer、Opera、Mozilla的
Firefox、Maxthon、MagicMaster(M2)等。浏览器是最经常使用到的客户端程序。万维网是全球最大的连结文件网络文库。
全球网（WEB、WWW）是一种把所有Internet的信息（包括你愿意加进去的本地信息）组织成超文本文件形式文件的企图。尽管这个梦也许有点不太现实，但是全球网确实让你能访问Internet的所有资源，只需用浏览器“读”适当的文 件就行。
服务器端 客户端
服务器
个人电脑
服务器
用 户
手
机
浏览器
网页
服务器
其他设备
… 服务器
图3-6 浏览器和万维网关系模型图
Fig.3-6 relationship model of World Wide Web and Web browser
3.3.2 基于网络设备和浏览器特征的界面设计原则
1.兼容原则网页游戏——设备的多样性特点
在传统GUI设计里，你能够控制每一个像素：你制作一个对话框的时候，你 可以确定它在用户屏幕上的真实尺寸。你知道你在为什么系统设计，你知道那里 安装了什么字体。你知道典型的显示器尺寸有多大，操作系统的作者告诉你给窗 口做装饰的规则。
在网站方面，所有的上述设想都土崩瓦解。用户可能通过一台传统的计算机
访问网站，也可能在用一个WEBTV，可用笔点击的手持式设备，或者是Nokia移 动电话，甚至他们的汽车就是一个Internet设备。在传统设计里，笔记本电脑 和高端工作站屏幕的区别可能只有六种。在网上，我们必须应付手持的设备和工 作站的屏幕区别可能有上百种，Modem和T-3专线之间的区别可能有上千种。
任何一个网页游戏在不同的设备上看起来都大不一样：显然，所见即所得已 经不灵了，看上去不同是一个特点，而不是个毛病，因为最佳的用户经验是需要 根据设备的不同特征予以适当得调节。很特别的或者很低端的设备，都严格的要 求网页内容适应特定的平台。达到这一目标的唯一道路就是放弃对界面的完全控 制，让他们的网页展现取决于页面描述、特殊设置和客户端设备特性的相互影响。为每个不同的平台设计一个抽象的UI描述比听起来困难的多。基本的HTML 法则可以给设计师提供一个实现他们创意的好方法，但是不能提供给他们所有的 方法。一般都提倡把内容和描述分离，使用Style网页游戏Sheets定义描述，但是这样做更利于信息内容本身而非交互操作。
2.网页游戏便利的导航原则
在传统的GUI设计中，设计师可以控制用户什么时候可以去哪儿。你不想让 某个菜单项工作，你可以让他变灰。你可以扔出一个对话框中止计算机的运行，直到用户回答了你的问题。
在网上，则是用户控制导航，用户从根本上控制了他或她自己的使用网页的 行为。用户可以抄小路而不受设计师的任何影响：比如，用户可以从搜索引擎直 接进入网站内部，而不必经过首页。用户还可以控制他们自己的书签菜单，并利 用它建立起一个网站的个人化接口。
网页游戏需要配合并支持这种用户可控制的使用方式。有时你可以强制用户 使用特定的路径，阻止他们链接某些页面，可这么做的游戏就显得过分的专制、独裁。最好设计的可自由移动一些，比如，在每一页放一个链接到首页的图标，给那些直接进入该页的人提供一个返回首页的导航。要使得网页游戏减少浏览层 次，能够让用户随时快速回到起点。
3.布局合理化原则
由于浏览器形式的限制，网页游戏的界面设计要比传统网游局限的多。在有 限的浏览器显示框中更加要合理布局。
应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面 美观。在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先 从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应 当靠前，位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。
4.降低网络的影响
在设计网页游戏特别是设计界面时，应该尽量让游戏者忘记网络影响，尽量 使你的游戏速度不受到用户网络带宽的影响。要考虑到不同用户的网络限制因 素，不能为了一个无关紧要的仅仅为了美观的图片或多媒体从而使得用户打开游 戏速度变慢，可以考虑位不同网速的用户设计不同的界面，如使用猫上网的用户 默认打开很少图片的文字格式游戏；对于使用高速上网的用户默认打开美观的 3D界面。
5.设计整体原则——整体的一部分网页游戏
传统的应用程序是一种封闭式的用户经验：尽管Windows系统允许应用程序 相互切换并且可以同时运行多个程序，但是在任一时刻，用户其实是处于一个单 一的应用程序之中，而且只有针对这个程序的命令和一些动作起作用。在每一个 程序上用户都花过很长时间，并且在逐渐熟悉他们的特征和设计。
在网上，用户在不同的网站之间，不同的设计（也就是网站）之间跑来跑去，具有相当的流动性。很少有人见一个网站就花上几分钟去看。他们经常通过超链 接从这个站跳到那个站。这种情况下，对于用户的感觉，所有的网站是一个整体，而不是某个特定的网站：也就是说，用户需要每一个网站的使用习惯都是一样的，都是他们对整个网络的使用习惯的一部分，而不是每个网站都有它不同的习惯。在可用性研究中，用户经常抱怨那些用法离谱的网站不好使。换句话说，网络已 经变成了一个整体的概念，每一个网站都是这个概念的一部分。
当然，传统GUI也是某个整体的一部分，遵循（操作系统）厂商的设计规则 是比较明智的。关键一点就是在网页游戏界面设计各方面，个性化设计与整体设 计之间的天平倾向了整体。毕竟你的网站不是别人世界的中心：用户还要在网站 跳来跳去，我们应该让他们用任何一个新网站的时候都感到方便。
3.4 基于网页游戏的类型的界面设计原则
另外要考虑不同的游戏种类对界面的不同要求。近两年来，尤其是近一年来，国内外网页游戏生猛出现，日新月异，目不暇接。网页游戏突然之间变得很热门，盛大、腾讯、17173、新浪等大公司都很积极的关注，甚至连百度也掺和了进来。新游戏层出不穷，但是回头来看一下这些种类繁多的网页游戏，其实大多都是用 同一套游戏换个题材改改画面和文字内容的马甲而已，经过去伪存真的一番分 析，总结出目前主流的WEB游戏分类，分别按照游戏技术和游戏内容来划分，具 体见表3-3。
表3-3 网页游戏分类
Table3-3 Web Games Category
游戏分类 特 点
策略类游戏
倾向于回合制而不是实时制，玩家一般喜欢深思熟虑，然后再 决定下一步的行动。
该类型游戏更注重玩家之间的交流与互动，更接近于一个社区
宠物养成类
网游。游戏中，玩家可以培养自己的宠物，通过打怪练级来提 高宠物的各项属性，还可以和其他玩家的宠物进行PK竞技。
角色扮演类
玩家任务可以随着检验的增长进行属性配置，具有浓重的故事 情节
需要玩家对游戏规则进行思考，判断。系统表现相当多样化，主要依游戏规则制定，对游戏操作不需要太高要求。益智类
动作类 考验玩家手、眼的配合能力，可分为射击类和非射击类。
音乐类
以下，论文就针对因游戏类型的差异所引起的特殊的界面设计问题进行分 析，并提出针对这些特殊问题的界面设计原则。
3.4.1 策略类游戏界面设计原则
策略类游戏起源于棋盘游戏，他的游戏策略倾向于回合制而不是实时制，玩 家一般喜欢深思熟虑，然后再决定下一步的行动。可以说这是目前最主流的一类 网页游戏，玩家在游戏中扮演的是一块领域（星球/国家/城市等）的统治者，可 以招募英雄（将军），通过发展自己的领域去占领周边的领域，或者侵占其他玩 家的领域。战争以系统自动计算的方式进行，胜负取决于双方的军事实力，所以 不在线的玩家只要建设好防御设施拥有足够的防御兵力就不用担心被别人侵略。
网页游戏从沉寂多年到今天的二次繁荣，一般都认为该归功于一款名为
《OGAME》的游戏，很多玩家都是由于《OGAME》才重新关注网页游戏的，该作也 是战争策略类游戏的代表作，他首次提出了“永久在线””的概念：不需要玩家 长时间泡在线上，玩家每次上线只要设定好一系列操作指令，系统会自动按该操 作的时间长度执行指令。
“借鉴”了《OGAME》的作品可谓举不胜举，目前较为流行的就有：《战神世
界》、《北欧神话》《地球帝国网络》、《乱舞春秋》、《图腾三国》、《世界领袖》与 《三国风云》等。
这类游戏的主要卖点在于各种音乐的流行程度。当玩家就算是 不想玩也可以挂住听听歌，是时下交流和休闲最受欢迎的主体。
第五篇：网页UI设计师
网页UI设计师
岗位职责：
1、负责网站的界面视觉设计工作；
2、构思并设计网站的整体视觉风格、用户体验设计和VI；
3、能够解读网站产品需求并提出创新想法，能够完成网页或应用的交互设计，并完成界面的流程设计、原型设计，不断优化用户体验；
4、平衡网站的易用性和美观性，实时把握web设计的流行趋势，结合用户研究和产品分析的成果，不断提出新的设计思路及创意策略。
岗位要求：
1、本科（含）以上学历，美术、设计、电子商务、计算机等相关专业；
2、三年以上相关工作经验，有电子商务、社交平台、通信运营商的网站界面设计经验优先；
3、具备网站设计创意，根据需求分析并给出最优的界面设计解决方案；
4、熟悉用户体验与交互设计,热爱UI行业、对专业有很强的兴趣和执行力，具有优秀的学习能力，能够把业界的新鲜设计理念和手法借鉴到工作中；
5、对互联网产品有着良好的感觉，有用户体验研究经验，对用户浏览及操作行为有深度的见解及知识；
6、精通Adobe Photoshop、Adobe Illustrator、Flash、Dreamrever等设计软件，熟悉HTML，DIV及CSS，了解Web标准；
7、具有良好的沟通能力、执行力，具有团队协作精神，对工作压力能够很好地调节；
8、请附上相关作品（rar压缩包）或相关作品的网址。
点击咨询 