网页游戏中界面设计的研究和应用(论文)

网页游戏中界面设计的研究和应用(论文)（精选6篇）

篇1：网页游戏中界面设计的研究和应用(论文)

上海交通大学 硕士学位论文

网页游戏中界面设计的研究和应用

姓名：李晓蕙 申请学位级别：硕士 专业：数字媒体艺术与技术

指导教师：杨旭波

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》的作品可谓举不胜举，目前较为流行的就有：《战神世

界》、《北欧神话》《地球帝国网络》、《乱舞春秋》、《图腾三国》、《世界领袖》与 《三国风云》等。

这类游戏的主要卖点在于各种音乐的流行程度。当玩家就算是 不想玩也可以挂住听听歌，是时下交流和休闲最受欢迎的主体。

篇2：网页游戏中界面设计的研究和应用(论文)

摘要：随着互联网上各类网站越来越多，人们在浏览网页时除了基本的对信息量的需求外，对网站的界面设计也产生了新的要求，一个信息齐全、设计精美的网站更能吸引观众的目光。本文主要描述了强大的图形图像处理软件Photoshop在网页美工设计中的应用。

关键词：Photoshop；网页美工；应用

目前，全世界的网站总数已经超过了10亿个，中国的网站总数接近400万个，如何使自己的网站能够在众多的网站中脱颖而出，令人刮目相看，除了提升网站的知名度和访问率外，对网站内容进行详细的规划和设计也是提高网站访问率的重要因素。现在众多的网站已经由原来单一的功能性向现在的功能和美观兼顾的方向发展。相同情况下，一个设计美观的网站更能受到人们的青睐。以往设计网页常用的软件Dreamweaver在网页的美工设计方面有一定的局限性，而Photoshop是网页设计师常用的一个非常重要而强大的工具，可以让网页设计师的工作高效便捷的进行，也为设计师们的天马行空提供了实际技术实现。

网页设计的根本目的是通过网页美工设计出作品为人们传播直观的信息，使人们获得美感享受的同时获得大量直观的信息，充分表达用户要求的内容，Photoshop为这种直观的展现提供了很好的平台。Photoshop在网页美工设计中的应用主要表现在以下几个方面：

一、更好的布局

作为一个网页设计师开始一个项目时经常会考虑到网页的布局，是用两栏布局还是三栏布局？是采用普通框架结构还是采用自由式结构？是以文字为主还是以图片为主？Photoshop软件可以在网页布局阶段把设计师的构思更好的展现出来，这种展现比手绘草稿更形象生动贴近实际，比用Dreamweaver实际制作出来的网页更节约时间便于修改。Photoshop的图层功能每层可以放置不同的元素，图层之间相互独立又可相互链接，图层属性可以随意修改。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束，设计的同时可根据各方的意见随时进行修改和调整，最终达到大家同时认同的标准。

二、更细致的元素

一个标准的网页里面涉及到很多的元素，比如说页眉、页脚、标志、图标、导航条等等，这些元素的处理直接关系到整个页面的效果，而且元素的风格与页面的主题有着很强的相关性。Photoshop强大的功能为制作这些元素提供了方便，可以制作各种效果和各种质感的元素，为网页的最终效果提供了丰富的选择，能完美的实现设计师各种想法创意。

三、更丰富的色彩

色彩的搭配也是网页设计的一个重要因素，Photoshop的图层功能也为网页色彩的搭配提供了方便。在基本元素确定的情况下，可以单独对各个图层、各个区域的颜色进行单独的调整，简单的操作就可以搭配出需要的颜色，并可以实时对颜色进行比较分析，非常方便。而且Photoshop带有的网页安全色的功能，可以在色板中选择web安全颜色、web色谱和web色相命令，载入该调板中的任何色彩在不同硬件环境、不同操作系统，不同浏览器中都能够正常实现的色彩，这些颜色在任何终端浏览用户的显示设备上所呈现出的效果都是相同的。

四、更精巧的动画

在网页设计中，动画可以增添网页的趣味性，吸引观众的目光，Photoshop也可以制作简单的“帧动画”，存储为GIF格式。GIF格式其实将多幅图像保存为一个图像文件，从而形成动画，具有文件体积小、浏览器支持稳定的优点，是一种在网络上非常流行的图形文件格式。

五、更快的速率

一个不美观的网页是不能吸引观众的，但是一个打开速度慢的网站尽管做得再精美也会使观众流失。在互联网高度发展的今天，同类型的网站层出不穷，人们一般在一个网站等待超过10秒就会失去耐心，虽然决定网页打开速度的因素很多，但是在条件相同时，网页大小及网页元素的优化和配置就是唯一的因素。用Photoshop可以有多种方式缩小图片体积，比如对图像进行减色处理，在对图片质量影响不大的基础下减去图片上的一些颜色，使图像更为小巧，或是对大块图像进行分块，大的图像切分成均匀的小图，这样可以多幅图像同时传送，提高网页下载速度。使用Photoshop的切片工具切片后，存储时用“存储为web所用格式”命令，Dreamweaver就能对效果图进行有效的整合。切片存储格式要求一般存为Gif格式，Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。这样进行合理的存储后，大大的缩小的网页的大小，从而提高了传输的速率。

表达是所有设计的第一目的，一个专业的网站界面可以很好的表达网站本身的主题与内容，通过网站可以将你本身最想表达的东西体现出来。一个精美的网站设计界面，可以给访问者以很好的体验感受，往往第一印象的好坏就能获得对方的信任，有可能这个访问者就将成为你的客户或潜在客户。一个专业设计的网站就需要一个专业的软件，Photoshop作为专业且应用最广的图形图像处理软件，能够帮助网页设计师更好更高效的完成设计。（作者单位：重庆城市管理职业学院）

参考文献：

篇3：关于网页游戏界面设计风格的研究

关键词：游戏,风格,界面

一、网页游戏的风靡

随着人们物质生活水平的提高,城市的发展越来越快,与此同时网络的发展也十分迅速。很多的聊天软件也不止是提供人们和亲友联系的平台,他们也看到了网页游戏所带来的巨大商机。所以越来越多的交互软件利用本身所拥有的庞大用户群体的优势和网页开发人员合作,推出了自己的游戏。

最初时谁也没有想到一款简单的偷菜游戏会在短时间内风靡全国,在开心网和人人网推出了这款游戏之后,腾讯紧随其后因为有QQ打下的良好基础,腾讯的偷菜游戏用户群体在极短时间内赶超前者,之后各类网页游戏相继进入人们的视线。而现在的网页游戏又以简单易上手的小游戏为主,不仅年轻人喜欢,许多中年人也逐渐接受并加入了网页游戏的玩家群体。

二、网页游戏的种类

网页游戏的种类有很多,最初风靡开来的农场偷菜游戏是典型的经营类游戏。这类游戏成功地抓住了消费者的心理,从而获得了巨大的成功,于是越来越多的网页游戏种类开始浮现。休闲类网页游戏也很受到广大玩家的喜爱,它没有复杂的游戏策略,只是设有多重关卡由易到难,游戏简单易上手且通过各路关卡能获得各种奖励,所以玩到后来使得许多玩家欲罢不能。

另外一类比较普及的网页游戏是角色扮演类的。有很多角色扮演类游戏本身也拥有庞大的用户资源,以为此类游戏有很多是建立在客户端游戏的基础上的。网络游戏最初风靡开来的就是客户端游戏,此类游戏大多画面精美且配有相应剧情,不管是单机还是联网玩家,不仅仅是在完成任务而是顺延着故事的剧情发展走。但客户端游戏有着它的固定性,必须是在安装了游戏的电脑上运行才可以操作,这就限制了玩家操作游戏的地点。那么当客户端游戏发展成为网络游戏,就会吸引大批客户端游戏的用户,打开网页就可以玩,熟悉的剧情和任务也让他们更加得心应手。

三、网页游戏界面的风格

网页游戏的种类繁多,其风格也是多种多样。网页游戏的设计和制作相对而言不是很难,而一旦出现了一个热度很高的游戏,同类型的游戏也会大批涌现且界面风格和操作与其高度相似。那么如何在众多的同类游戏中立于不败之地也成了目前的一个难题。游戏开发者在注重自身开发的游戏版权保护的同时,还应当多突出一些自身作品的特色。

目前国内的网页游戏界面设计大多受到日韩游戏界面设计的影响,大多偏向卡通可爱的风格。不管是休闲类还是模拟经营类的小游戏,都更受女性玩家的喜爱,所以卡通可爱的风格更适合此类游戏的定位。但是射击类和体育类的游戏风格就更趋向于欧美风格,欧美的游戏界面更注重透视性和写实性,能让玩家有更深的代入感,此类游戏往往更能吸引男性玩家。游戏界面的设计风格其实大多数是指其界面的美术画风。

画面是直接影响游戏的销售的,操作系统固然重要,但玩家要先进入游戏尝试了才知道操作系统是否优秀。而能够吧玩家吸引进游戏的最直观的就是游戏的界面图片是否符合他们的审美要求。游戏的宣传网页和操作网页画面往往不会相同,在游戏中,画面很难做到精致,因为考虑到游戏的操作性,画面不能太清晰描述细节这样会造成网页缓冲很慢。但是宣传页面可以做到相对精致些,因为不考虑操作问题可以先把玩家吸引过来。但是不管是界面还是官方网站,首先要保证画面风格的一致性。如果二者之间的差异太大玩家进入游戏是会因为期待过高产生被欺骗的感觉,从而对游戏宣传推广产生不好的影响。

因为网页游戏的特殊性,游戏公司会考虑出简洁风格的网页游戏。即使是同一款游戏的PC客户端版本和网页版本画风也会存在明显的差异。首先网页游戏中不会太刻意描绘游戏场景的细节性,其次游戏中的人物形象,服饰或者是表情等等不会有PC客户端游戏那么丰富,技能也不会有PC客户端游戏中的那么华丽,主要是因为要考虑到网页游戏,如果画面太精良会影响到其操作的流畅性。除了卡通动漫风格,游戏制作者可以尝试一些新的风格。其实跟动画风格类似,现在国漫多数是模仿日韩画风,其实早在水墨动画时代,中国的水墨动画是在国际上获得过很多奖项的。中国的游戏设计者们可以多考虑往中国本土特色的画风上发展。所以设计者要在本身具有过硬的技术的同时敢于创新,多途径去探索游戏的风格。对新的想法,要勇于表达,以锻炼自己的创造性思维能力。具备了深厚的专业功底,同时敢于创造,并勇于尝试不同的艺术风格,必能设计出具有中国本土特色的网页游戏。

参考文献

[1][韩]崔美善.设计师谈网页设计效果[M].北京:电子工业出版社,2006.

篇4：视差滚动在网页设计中的应用研究

关键词：视差滚动 网页设计 文本

视差滚动作为一项应用于网页设计中的新型视觉技术，它所带来的视觉观感虽不及3D视角下呈现给观者的既虚幻又真实的视觉触感，但在虚拟空间的技术呈现上带给观者的深度感知特性与3D技术带给观者的视觉观感无异，而且在观看沉浸程度上，叙事性的介入也使其丝毫不亚于柏拉图的“洞穴隐喻说”和现代影院的观看情境。

一、视差滚动的构成及技术原理

视差滚动的运用使多重图层随着鼠标对页面的滚动而在横向或纵向上产生各自不同速度和位置的移动，其文本层通常设置背景层和前景层，背景层的运动最慢，前景层的运动和页面的滚动基本一致，贴图层介于背景层和前景层之间，可以跟据页面的需要适当添加，运动速度比背景层略慢。在视觉呈现上，除了设置文本层的滚动速率各异外，还可限定相应文本的显示范围。比如页面滚动时快要超出视域范围的文本会被褪色隐藏，只突出视域范围的中心内容，形成被遮挡的视觉上的分层效果。

眼睛在观看物体时形成立体感的因素有：“双目视差、运动视差、适应性调节、视差图像融合等”，视差滚动形成的视觉景深感主要是由运动视差的干涉效应造成的。当观者和视觉对象发生相对运动时，视觉对象的大小和位置在视网膜上的投射也会发生改变，近处物体的投影移动较快，变化稍大，远处物体的投影移动略慢，变化较小，这种由于相对运动造成的视觉对象的变化叫运动视差。例如我们乘座交通工具向窗外观望时，近处的物体运动较快，而远处的物体运动较慢，从而给观者以视觉纵深感和空间感。

二、视差滚动类网页的特点及原因

1.图像文本为主要内容

此类网页一般是由分辨率较高的多幅图像彼此并列、交织或暗含所构成的，这里的图像不仅包含图片元素，还应包含动画和视频等文本形式。以图像文本为主要内容并不是对其它文本的摒弃，而是其它文本都融合进入图像中，成为依附于图像文本的一个次文本形式。

以图像文本为主要内容，一是因为高清图像的选择能迅速吸引受众的注意，带给观者极强的视觉冲击和美感享受；二是图像的信息量要远远大于文字等文本形式，图像中不仅包含用户看到的信息，也包含其潜移默化接受了但没有意识到的信息，这种信息更多是基于图像学和阐释学的；三是图像在拟态环境的空间塑造性上要远远强于文字等符号形式，因为“根据能指与所指之间的不同关系，符号体系可分为两类：由‘任意性关系’所形成的语言文字符号体系和由‘拟似性关系’所形成的影像符号体系。由于影像符号中能指和所指之间的拟似性和天然联系，使得图像文本在信息传播中具有方便陕捷、直观易懂和形象确切等天然优势。

除了上述内部因素外，外部因素的诉求也是以图像文本为主要内容的重要原因。从结构形式来说，图像的分层设立是形成视觉空间感的必要因素之一，图像更容易跟随鼠标滚动而出现聚合、分离、隐藏、显现等视觉表现，这既不影响观者进行阐释和解读，也是奇观呈现的一部分；就技术应用而言，视差滚动更多是基于图像的，图像文本是其效果实现的必要条件，这从视差滚动最初在游戏场景中的运用就可见一斑，在没有文字文本参与的情况下依然可以呈现出视差滚动的效果；从信息传播的角度来说，受众面对海量的信息需要花费大量时间和精力选择性观看，而视差滚动同时呈现的多层视图使占据版面大量繁琐、枯燥和抽象的文字信息得以图形化、形象化和视觉化，缩短了观者的阅读、思考和解释时间，易使观者产生视觉说服和认同；从时代发展来讲，我们已经进入了图像时代，“作为文本的世界已经被作为图像的世界所取代。自有文字记载以来，文字作为一种交流与传播的媒介在其历史发展的漫长进程中一直占据着霸主地位，而借助现代性的传播手段使一系列静态和动态图像文本的地位大大提升。

2.单页面排版为主要形式

此类网页大多采用单一页面的排版形式，这种排版通常舍弃了子网页，以一个超出屏幕视框数倍尺寸的页面排满整版，通过鼠标的滚动使页面产生横向或纵向的运动，页面的各级元素也随之呈现出视差滚动的效果。

此种排版异于长短不一和子网页繁杂的其它页面。究其原因，首先，是视域扩大的需要。在一个较大版面中，屏幕相当于观看视图的窗口，页面滚动是为了给观者呈现更大的场景和视域范围变化，受众也能获取到更多的信息资源；其次，是交互性开发的需要。视差滚动需要用户使用鼠标滚动网页来实现，这一交互进程需要输入（用户）、媒介（鼠标滚动）、输出（网页效果）。较长的页面能调动用户频繁使用鼠标滚动，进而呈现出奇观动画的效果，激发用户深入往下探索；再次，是沉浸性延伸的需要。较长的页面可以让用户延长浏览时间，其中无限制向下滚动的页面设计既保证了用户体验的连贯性和渐进性，也使这种沉浸性不易中断和抽离。但是，较长的页面对网页的导航设计也提出了更高要求，用户必须对自己所处的位置非常清晰，也能通过导航快速定位，否则会产生适得其反的效果。最后，此种排版形式也是为了符合图像文本内容的需要，把所有内容都排在一个版面上，图像场景的叙事性进程就像一个纵贯始末的分段轴线，有开始、转折、高潮和结果，单一性的页面可使这种叙事性的表现更加流畅和完整，如图1就是用视差滚动表现电影《少年派的奇幻漂流》的故事情节变化。

三、视差滚动类网页所面临的问题

视差滚动类网页不仅给观者呈现了一种深度错觉，还使网页富有动态的层次感，促使受众产生一种探究感和视觉欲，乐于探索各文本模块的内容。但技术的应用从来都是一把双刀剑，此类网页亦面临着许多亟待解决的时代局限：

1.文本加载的流畅性

以图像文本为主要内容的页面同时加载过多高分辨率的的图像时，会造成加载时间过长，而网页的加载速度对用户体验有重要影响。此外，当各图层随视差滚动而实时更新时，可能由于网速限制造成视觉上的断层和迟滞，这样不仅不能完美呈现出视差滚动的效果，反而还会造成信息传播的不畅、损耗和缺失等情况。

2.文本之间的融合性

单一图层不仅包含图像文本，还包含文字等次文本形式，次文本是对图像文本的补充，它们之间的融合性更多是版式设计的内容，此乃部分与部分的关系。但视差滚动类网页包含多种图层，不同图层文本要素之间运动或静止时的位置、距离和形态要根据用户滚动鼠标的速度进行精密测算，这要求设计师不仅要处理好部分与部分的关系，还要注意部分文本与整体文本之间的融合性。

3.视差滚动与网络设备的适用性

虽然响应式布局设计可以在手机、平板电脑和台式电脑等不同网络设备上实现统一的页面效果，但由于手机、平板电脑等移动设备的屏幕视框、分辨率和交互模式与台式电脑不尽相同，又受到其适时使用环境和网络信号的影响，所以会造成视差滚动类网页在移动设备的网络页面上效果不明显等问题。

4.视差滚动与页面内容的适用性

并不是所有网页都适合采用视差滚动，设计师判断其适用与否的标准在于：首先，其文本内容是否以图像为主，或者能否将其文本形式转化为图像文本；其次，能否采用单页面为主的排版方式，将所有内容编排在一个较长甚至无限长的版面上；再次，能否将现有文本整理为一个叙事性线索，将其故事化或场景化。目前采用视差滚动的网页大都以图像展示类网站为主（如图2），其它类型的网站是否适用还有待考证。

四、视差滚动在网页设计中的应用原则

尽管视差滚动的应用还存在很多弊端，但这丝毫不减观者对此类网页的浏览热情。因为相对于被动接受型的观看方式来说，观者更倾向于互动探索型的观看方式，这不仅关系到视觉当中的触觉性问题，而且还涉及到视觉权利的转移问题。为了发挥视差滚动在网页设计中的最大优势，务必把握好以下主要原则：

1.平面与立体相结合

平面与立体的结合，首先是二维与三维空间特性的结合。视差滚动本质上呈现了一个虚拟的立体空间，这个虚拟的立体空间是建立在“实体”的平面空间的基础上的。单页面的布局提供了一个二维的展示空间，而独立滚动的背景层、贴图层和前景层则提供了一个三维的展示空间。不同图层的划分在鼠标静止时是融合在一起的整体，在鼠标滚动时又是相互独立的个体，静止时形成的二维空间与运动时形成的三维空间是一个有机联系的整体。其次是二维与三维文本特性的结合，二维层面的文本即单一图层上的文本，三维层面的文本即呈现三维空间的所有图层文本。不同文本层的作用及相互关系各不相同，背景层上的文本往往起到烘托故事化或场景化空间气氛的作用，贴图层是为了达到更好的视觉效果，主要起到衬托背景层的作用，但要避免对背景层和前景层造成视觉干扰，前景层作为表现主体，是最重要的文本层，对用户的展示也是最优先和集中的。平面与立体的结合不仅要注意空间特性的结合，更要注意文本图层上的结合，这样才能以空间展示文本，以文本构成空间。

2.叙事与展示相结合

叙事与展示的结合，即图像化叙事与奇观性展示的结合。视差滚动类网页以图像文本为主要内容，这与以文字文本为主的网页有明显区别。由文字文本为主到以图像文本为主的转换，把原本枯燥的文字信息转化为一个视觉化的图像场景空间，如果说文字信息给人一种天马行空的想象美，那么图像信息给人的就是一种直观可见的意境美。图像化的叙事并不是素朴性的呈现，而是一种奇观性展示，“奇观”本是电影影像艺术的表现形式，引申于此是因为视差滚动制造的“动画奇观”无论从视觉表现还是技术手段上都较为符合周宪对于“奇观”的解释：“是非同一般的具有强烈视觉吸引力的影像和画面，或是高科技电影手段创造出来的奇幻影像和画面及其所产生的独特的视觉效果”。视差滚动在二维平面上利用层层图像给观者制造出推拉摇移的镜头感、立体纵深的空间感和动静隐现的画面感等都带给观者别样视觉体验。图像化叙事重在传达图像文本信息的内容，奇观性展示重在表现视觉艺术变幻的形式，只有把图像叙事的内容与奇观展现的形式结合起来，才能使观者快速获知信息的同时，又能享受一场视觉的饕餮盛宴。

3.视觉与听觉相结合

视差滚动类网页要想让观者沉浸更深层次，不仅需要奇观性的视觉呈现，还必须把视听统一起来，即其网页的视觉效果要有音效设计相匹配。在平面信息时代，网页设计只注重了文本的视觉信息，而页面背景音频的采样率和比特率都较低，无法达到完美的视听合一效果。但是，“当一个时代凸显某种感觉系统时，其他的感觉系统会在整个平衡机制里被削弱从而导致机制失衡。但它们之间又会谋求新的平衡，其在某种意义上的削弱，会以另一种形式得以弥补”。到了立体信息时代，听觉上的音效设计得以强化，并逐渐摆脱了低音质的束缚。由于声音的空间信息要比视觉广泛，因此音效可以增强虚拟环境的空间信息，通过高保真的多声道立体声进行空间纵深感模拟，制作出能够满足场景视觉表现的音效，既烘托了整个页面的环境气氛，也悄无声息的降低了观者对视觉的依赖。此外，音效设计还提供了一种人机交互的新方式，页面文本的部分视觉信息可以通过声音传达给观者，使用户产生一种身临其境的临场感，进而启动周身的感官融入到虚拟的场景空间中。

五、结语

2012年12月20日，纽约时报官网发表了一篇《雪崩》（Snow Fall）的报道（如图3），几天就吸引了数百万的访问量，该文作者约翰，布兰奇为此获得本年度普利策特稿写作奖。这篇报道的创新之处在于综合运用了文字、图片、动画、视频和音效等多种视听元素，并结合视差滚动将大型背景形式的图片和动画嵌入到页面中。从纸质媒介到电子媒介的转变并不是把传统的文本内容照搬到网络页面上，而是要综合运用各种交互形式，通过页面各层次内容之间的互补和配合，以形象化、多样化的交互的方式表现出来，带给观者非凡的视觉体验。

篇5：网页游戏中界面设计的研究和应用(论文)

网页的展示效果会直接受到网页设计好坏的影响，网页在具备足够媒体能力的同时还充分具备有效的可用性以及时尚性。一个网页设计质量的高低会对网站用户人数的多少产生直接的影响，同时网站以及公司的效益则会受到用户的流量的直接影响。文字是最早进入网络多媒体的对象，图片也随着进入成为网络多媒体的重要对象之一，设置图片有效，就可以将丰富的、美化的网页界面充分的展示出来。随着的社会的发展，多媒体实现进一步发展，宽带跟用户屏幕的尺寸实现了进一步扩大，目前来说，大部分网站在页面中均开始使用大量图片，越来越多的人们开始倾向于有图片网站的浏览。根据相关研究报道，通常来说，人们看过一张图片之后，其记忆会持续很长一段时间，如果浏览一段文字，那么就会在很短的时间内忘记，一般不会出现例外情况。上述这种情景被我们称为“图片优势效应”。网页中的图片优势效应分析

人们可以通过语言的方法或者是通过形象的方法来完成图片记忆，相比文字记忆而言，上述记忆方法则多出了一个形象记忆的阶段，所以，在进行记忆的过程中，通过图片的使用能够促使记忆效率逐渐提升。通常情况下，是通过很多不一致的认知系统来完成信息处理工作的。使用较深语义层的基础上，人们可以更好的记忆信息。例如：感知层记忆。图片是参与深层语义过程的信息，人们通过清晰视觉回忆，在完成上述任务的过程中，文字跟图片所带给人们的信息记忆是不一致的，其中记忆图片信息可以更加深刻地印在人们的脑海中。上述现象，被我们称为图片优势效应。但是并不是全部的图片均具备上述提到的“图片优势效应”，唯有图片非常的清晰，容易被人理解，在外显记忆任务中进行的图片才能被称为“图片优势效应”。所以，在目前大部分网页图片中，70%以上的图片属于外显记忆。我们需要进一步明确网页设计过程中的图片优势效应，为后期的网页设计提供相应的基础以及依据。

1.1 图片优势效应中的视觉优势

在日常生活中，人们所需的信息，需要通过视觉获取的就有60%。网页之所以被用户关注，主要是因为引入了有效的视觉元素，并且在上述的基础上有效的完成了信息传达工作。上述分析得到，我们需要对网页的设计提出一定的标准，例如促使网页的设计最大程度地满足受众视觉心理上以及生理上的需求等。网页的整体视觉表达一般会由以下几个部分直接的影响：第一个部分是图片的位置;第二个部分是图片的尺寸大小以及数量;第三个部分是图片的排列形式;第四个部分是图片的色调等。完成合适的图片选取，就可以将事物内部存在的本质直接地、具体地表达处理，促使原本平淡的事物转化为强有力的诉求性画面类型。在版面的构成要素中，图片的正确使用可以促使网页更具独特的风格以及优势，最大程度的吸引广大用户，对于网页设计来说，图片具有非常强的设计弹性，图片可以有效地配合网页中其他视觉元素一起，促使网页设计能够有效地满足设计目标规划，实现有效的统一、连贯、分割、对比以及和谐。

1.2 图片优势效应中的认知优势

图片的使用可以促使来自不同国家的人有效地理解相同图片表达的意思，所以，可以有效的减少存在阅读文字过程中出现的障碍，同时减少浏览网页的过程中存在的障碍。如果用户不识字，那么也可以通过相应的方法来完成图片中意思的解读。或者是一部分老年人，因为年龄的增长，导致其视觉功能逐渐衰退，那么在进行信息浏览的过程中，对于文字的阅读就会存在一定的困难。如果使用大幅的图片，那么老人就可以直观的理解图片表达的实际意思。如果是摄影类的网站，那么就需要图片更加的优质，通过图片的使用可以有效地表达摄影师按下快门一瞬间存在的真实想法。人们通过图片的展示可以有效的对图片背后故事进行准确的阅读。我们可以使用一句话来表达图片的重要性，同时表现图片的认知优势，那就是“一图胜千言”。

1.3 图片优势效应中的商业优势

图片是网站竞争的重要途径之一，还是大部分企业最主要的营销核心。社会化媒体实现进一步深化变革，目前就跟图片两者之间存在非常密切的联系，目前来说，主要元素为图片的网站逐渐走向蓬勃发展的道路。例如：美国图片视觉社交网站pinterest，在网页的底端会完成自动加载，不需要设置翻页功能，促使用户可以在很短的时间内迅速的发现新图片。就目前来说，我国国内目前已经存在三十多家相似的网站，例如：美丽说网站、蘑菇街网站以及堆糖网站等。在设置上述类别网页的设置过程中，网站的商业优势一般是由图片的性质决定的。

人们通过图片的使用可以有效地展示自我的个性，促使自我个性彰显出来。其中女性群体是具有很强潜力的用户。我们使用高质量的图片就可以很好吸引女性群体，促使她们关注动态。图片的使用可以促使企业发展。根据相关的搜索调查得到，消费者中有60%消费者对那些有显示图片的商户表现出很强的关注度，非常愿意对其进行消费。据统计得到，图片存在的新闻报道访问量明显高于图片不存在的新闻报道访问量。结束语

篇6：网页游戏中界面设计的研究和应用(论文)

网页排版是网页设计过程中的基础工作，也是必备的设计环节。在网页信息内容上，其主要要求在于能够将文字信息内容准确无误地传达给受众者，并且文字需要较强的概括性。在选用图片上，选择能够立即吸引受众者注意力的图片最佳。但是，从我国的网页设计状况来看，我国的网页设计人员在设计页面时，较为注重页面信息丰富，忽视了页面排版的重要性，因此导致网页页面排版总是过于简单，在图片与文字的排版上，总是将文字随意地安放在一个位置，将图片也安放在同一个区域，导致网页页面的整体毫无布局，给人以杂乱无章的感觉，无法吸引大众眼球。专业的网页设计在排版上常常会将信息内容按照等级进行划分，再根据等级进行编排，但许多网页设计人员往往没有关注到这点关键，将重要性较低的信息内容排放至网页的主页面中，还有一些设计人员会将信息广告等安放在网页的主页面上，这种排版方式使得用户在浏览此网页时无法立即获取重要信息内容。在网页色彩编排上讲究适当。当用户在打开该网页时，映入眼帘的首先就是该网页的色彩。色彩不仅与网页的配色有关，且与心理学也有关，一个搭配合理的网页色彩能够让人用欣赏的眼光去看待信息内容，一个颜色搭配混乱的网站则会让人没有继续看下去的念头，国内许多设计师就常用许多冲突的色彩来设计页面，虽然这种页面能够立刻抓住人们的目光，但突出的只有色彩，容易让人无法集中注意力浏览信息内容。

二、平面视觉元素在网页设计中的应用策略

（一）合理安排网页版面

一个出彩的版面对于网页页面整体来说非常重要，恰当地融入平面视觉元素能够将网页页面排版变得合理且丰富，使用户在浏览该网页页面时能够满足其对页面的视觉需求，从而有效地提高网页的浏览率。在网页页面的色彩运用上，设计人员不仅要根据页面的风格来进行制定，还需根据网页的信息内容来制定适合的色彩。网页设计人员可以在日常生活中多观察杂志的版面排版方式，对排版内容与排版结构之间的联系进行详细研究，掌握一定的色彩搭配方法，利用日常所学知识与研究，能够有效地改善设计人员的网页排版方式。

（二）使用简洁的文字形式

网页设计内容中，文字的形式设计非常关键。一个网页页面整体大部分都是以文字信息为页面主要信息内容，其信息内容的呈现方式也是通过文字信息来传达给用户，对此，在网页设计过程中，简洁的文字形式能够有效地吸引用户浏览，引起用户的阅读兴趣。网页设计工作是建立在平面设计的基础之上，是由平面设计所分离出来的设计专业，因此，在网页设计上，平面视觉效果有着不可替代的作用。网页页面文字的安排布局要非常合理，因为许多用户在浏览阅读网页文字时会存在着许多局限性，因此，设计人员在设计文字时，不可过于复杂，盲目地使用艺术型字体。设计者可以采用简单的黑体或宋体形式作为字体形式，在字体大小上以适中为主，这种字体不仅能够减少眼花缭乱的现象，也能帮助用户在下载信息资料时能够更快速。

（三）根据整体搭配网页页面色彩

色彩是页面设计中不可或缺的视觉艺术形态，不同的色彩能够给人带来不同的视觉心理感受。根据人类对色彩的敏感度来看，暖色容易使人联想到阳光、火焰，让人感到温暖。而冷色则会使人联想到蓝天、阴雨，让人有冰冷的感觉。在网页页面色彩搭配上，应根据不同的设计风格和设计内容合理地运用色彩。为了让网页能够有效地突出内容重点，可以选择在重点内容区域采用对比色彩，通过局部对比加强网页页面的整体风格，给人留下深刻的印象。

三、结束语