休闲游戏的信息反馈和提示交互设计

休闲游戏的信息反馈和提示交互设计（通用2篇）

1.休闲游戏的信息反馈和提示交互设计 篇一

出色的设计源于生活，那么我们就从生活中说起，我们依照用户生活的使用情景来设计一款产品，我们不需要重新培养的用户的使用习惯，用户可以在第 一次使用你的产品来完成自己的目标，并且不需要他人的指导，比如说苹果公司在设计第一代iMac的过程中，乔纳森及其团队前往日本，曾向日本某糖果行业的 人请教，如何在生产糖果颜色的电脑外壳的同时，保持其一贯的半透明度。

在下文中我们将聊聊反馈式交互设计对于网站设计重要性，在这之前我们有必要了解相关的概念：

何为反馈?

来自的维基百科解释：反馈又称回馈，是现代科学技术的基本概念之一。一般来讲，控制论中的反馈概念，指将系统的输出返回到输入端并以某种方式改变输入，进而影响系统功能的过程，即将输出量通过恰当的检测装置返回到输入端并与输入量进行比较的过程。

何为交互设计

交互设计，又称互动设计，(英文Interaction Design， 缩写 IxD 或者 IaD)，是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”，即人工制品在特定场景下的反应方式)相关的界面。 交互设计师首先进行用户研究相关领域，以及潜在用户，设计人造物的行为，并从有用性，可用性和情感因素(usefulness， usability and emotional)等方面来评估设计质量。

结合上述概念我们综合来说，反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情出错时显 示一个警告。我们暂时将反馈分成2种类型：一种正面反馈，另一种为负面反馈。对网站用户而言反馈属于提示信息类型的一种，从用户注册账号输入错误的提示， 到退出成功的提示，都是属于反馈式交互设计的范畴。

反馈式交互设计如此重要

让我们来想象生活中的几种情景，假设你在乘坐地铁需要换乘时，此刻如果地铁没有换乘的指示标识，会让人摸不着东南西北，非常容易让人迷惑，不知道哪条通道才是正确的换乘通道。地铁的建设者各换成通道上增加醒目的提示文字，很直观清楚就让你知道哪条通道正确的换乘路线。

(london：地铁换成指示牌)

以网购当中的交易流程为例，在用户提交了订单之后，如果系统的处理时间较长，导致后续页面加载迟缓，而这当中没有任何反馈提示，那么用户很有可 能会认为自己的订单并没有提交成功。这种情况下，可以在页面加载的过程中向用户提供一些正面反馈信息，例如告诉他们“系统正在处理订单，请稍候”一类，这 样可以防止用户由于不明真相而点击后退按钮。

(某网站购物车)

以安装软件为例，通常来说软件的文件较大，安装文件加载的时间会稍微长一点，软件界面没有任何反馈提示，想象一下你置身于中的情景，是不是非常 容易让人感到烦躁不安，原因是由于安装软件过程是由用户主导的，用户安装软件目的是为了完成他自身目标，而此时界面无任何提示，用户对此突然失去了控制， 导致目标中断无法完成。此时此刻户关闭软件重新安装，如果较长时间还没有响应，用户会选择离开。

我们通过什么方法来避免或彻底解决这些问题呢?我们前面提到了两种机制，分别是“正面反馈和负面反馈。”我们是不是可以在安装的过程的界面增加 一个安装进度条，数值和进度同时变化，这样不会偏离用户把控范围，如安装进度条，邮箱表单账号输入正确时，界面回馈给用户的对勾提示状态，称之为正面反 馈。

(photoshop安装安装进度提示条)

(序列号输入正确对勾提示状态)

通过正面反馈机制，我们可以逐渐帮助用户打消这些顾虑，帮助他们建立信心，让他们感到一切都在顺利的进行着，防止用户在做了正确的事情之后由于 担心自己操作有误而撤消之前的行为。这一点，对于那些对自己在计算设备操作能力方面缺乏信心的用户来说尤为重要。这类用户，其实未必真正缺乏操作技能，只 是在很多时候，由于系统没有作出足够的正面反馈，致使他们对自己的判断产生了疑虑。我们要利用这两种机制打消大小用户方面的顾虑。

在举几个负面反馈机制的案例，我们在来想象一种情景。接上述案例，软件安装完成，告知你的填写序列号不符合规范，而且之前你填写过的序列号并没 有保存下来，需要重新输入。用户心里此刻会有较大的落差，因为做了无用功，其实我们完全可以用户在输入序列号的过程中，实时匹配，如果序列号错误，我们要 要通过错误提示，第一时间告诉用户你填写的序列号不正确，及时帮助用户纠正错误。

通过负面反馈机制，我们也可以准确无误帮助用户减少错误的操作，确保在第一时间告知用户的操作不正确，及时改正， 已达到用户的输入符合网站自身运营需要。让用户感受到一切都在顺利的进行着，这一点，对于互联网专家型用户，主流型和菜鸟级用户都尤为重要。专家型的用户特征习惯拿来一个网站，通常不会看你提供的文字介绍说明使用帮助，想通过网站希望尽快达成的自己目标。比如说下载资料。

反馈式交互设计的优秀案例

正面反馈机制

用户与数据内容内容发生交互时，都需要正面反馈，比如说注册、登陆、验证、微博的转发评论等等，

特别用户在使用支付类的产品交易时，我们要却确保用户输入的信息是符合规范的，是正确的，所以我们要对用户实施正确的引导。

(Google 注册界面表单的提示信息 )

链接的移入和移出：网站产品特性不同，整个页面的长度会在一屏显示，在不影响视觉的前提了，我们需要对某个模块弱化或者是强化。比如说网站页 脚，用户点击相对比例比较低，我们将弱化显示，当鼠标移入到产品模块当中，模块颜色会加深。在这方面twitter产品是一个不错的范例，默认页脚灰色字 体，不会喧宾夺主，当用户鼠标移入到这个模块当中，系统判断用户可能需要通过页脚了解网站的相关信息，文字区域色值改变，由灰色变成黑色。在视觉呈现的方 式上，正面反馈可以让我们的用户体验更上一层楼，如虎添翼。

按钮的提示状态：内容为空时不可点击的按钮状态和有内容的按钮的区别。按钮为灰色状态不可发表内容

(google plus当前状态不可发布内容)

(当有内容之后，按钮被点亮，内容可以正常发布)

加载的过程：下拉自动翻页的功能，会载入较多内容，如果没有loading.等字样，告诉用户你所看的内容正在加载，荣请稍等片刻。用户会感到迷惑之前，还容易导致用户误以为自己的操作有误，容易撤销之前的操作。除了文字提示以外，Google plus 的做法在Loading的圆球增加动态的效果，告知用户你所等待的内容正在加载。

(Google plus加载过程中圆球注水的效果)

(链接：用户点击过的链接状态)

负面反馈机制

在人生的道路上，每个人都难免犯错误，重要的是我们如何纠正自己的错误。对于网站的使用者用户而言，为了不让用户继续错误下去，我们帮助他们纠 正错误也同样重要。在上文我们举了一个序列号案例来做作为负面反馈机制的案例，为了让让大家理解更透彻，在这里在举几个案例，加深下印象。

文字超出提示文字：例如在Twitter中发表内容时，当文字超出140字时，TWITTER在第一时间用红色负数的数字代表你已经超出的字数，按钮为灰色，不可点击，希望你及时做删减。

(Twitter文字超出提示状态)

(豆瓣：不符合规范表单字段提示)

反馈式交互设计常用的几种方法：

利用视觉来提供反馈式交互设计

我们可以改变界面的视觉呈现效果和视觉元素属性来改变反馈的表型形式。譬如在鼠标移入图片增加浮动层，改变风格样式，增加图片圈选的效果，或者页面的配色和大小等方式来实施正面反馈。前面提到链接被点击之前和被点击之后所呈现高对比的背景色。Google plus加载过程中注水的过程，或者用户注册时填写正确时所给出的状态提示图标。再比如Twitter中页脚模块，鼠标划入通过改变文字颜色等方式来突出显示。

在比如一个非常典型的例子，鼠标指针的状态变化。操作者(用户)将鼠标移动到可输入文字的文本区域，指针会发生变化，变成I的标识，意味着可输 字。再比如鼠标鼠标指针的状态变化，当用户将鼠标指向一个可交互的界面元素，如链接或者是按钮，他们会希望按钮变成手形，链接变为手形，并增加下划线，来 反馈并告知用户链接和文本区别。如果系统在这里并没有做出符合或者达到符合用户预期的反馈，那么用户很有可能会为此感到迷惑，甚至不解。

利用动画效果提供反馈

其实，动画自身就属于视觉表现的一种方式，比如说登陆WordPress管理后台时，用户名和密码错误，登陆框表单会表现出抖动的效果。提示用户输入用户名或密码错误。根据动画的视觉表现是，也可以将动画效果运用在反馈上

比如说页面内的锚点链接跳转，在系统默认的情况下，锚点跳转没有任何动画过度效果，页面只是很突兀的移动到锚点所指定的位置，而现如今，我们可 以在很多优秀注重用户体验的网站中看到具有平滑滚动效果链接的跳转。部分网站在页面在目标到达位置后，将锚点所指定的位置进行高亮显示。这种细微的改变使 得整个交互方式更加符合用户的直接。同时可以很清晰的讲交互结果呈现给用户。

全文总结：

例如文章中第三段落提到的“反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情出错时显 示一个警告。我们暂时将反馈分成2种类型：一种正面反馈，另一种为负面反馈。对网站用户而言反馈属于提示信息类型的一种，从用户注册账号输入错误的提示， 到退出成功的提示，都是属于反馈式交互设计的范畴。”通过正面反馈和负面反馈我们可以很清晰的让用户知道当前正在发什么?帮助用户打消疑虑，使用户尽快完 成自己的目标，同时也让我们的网站更加易用，更加人性化。

产品经理门户：www.pmtoo.com/ucd//0808/868.html

2.休闲游戏的信息反馈和提示交互设计 篇二

在浏览网页时,当把鼠标放在某个选定的对象时,会看到该对象的简介信息。这里用的就是动态提示。动态提示是快速浏览信息时的常用方法,在很多W e b系统中都会用到,如网络书店、网络影院、电子阅览室等。

使用传统的方法实现的动态信息提示,在第一次获取页面时服务器端要传回整个页面的信息,这样会有大量的信息可能永远用不到。这种方法的缺点是传输数据量大,浪费带宽。使用Ajax技术实现的动态提示实现了无刷新、只更新局部数据的用户体验。

1 Ajax技术简介

严格来讲,Ajax不只是一个特定的技术,更应算是一种技巧,其全称是:异步J a v a S c r i p t+X M L。A j a x是将JavaScript、文档对象模型(Document O b j e c t M o d e l,D O M)、层叠样式表(Cascading Style Sheets,CSS)等几种既有技术整合在一起,形成的一种功能强大的W e b开发新技术,主要实现在客户和服务器之间进行异步动态交互,其核心是JavaScript和XMLHttpRequest对象。Ajax的主要技术包括:

(1)JavaScript:一种基于对象的脚本语言,用来开发Web客户端应用程序。

(2)XMLHttpRequest对象:基于Ajax的Web应用程序通过XMLHttpRequest对象以后台异步方式同服务器进行数据交换,不用每次都向服务器提交数据,不需每次都刷新页面。

(3)DOM:文档对象模型(DOM)是一组API,可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

(4)CSS:层叠样式表,用于负责定义Web页面中元素的外观样式。

(5)X M L:可扩展标记语言(X M L),用来描述数据结构的一种语言,可用于服务器和客户之间传送数据。

2 Ajax工作原理

传统B/S的Web系统是一个同步的请求/响应过程,就是“请求-响应-请求-响应”的过程。用户和程序的数据交换都需服务器来处理。在这种模式下如果交换信息量大时会导致服务器响应时间较长以及浪费较多的网络资源。图1所示为传统Web系统请求过程。

而基于Ajax技术的Web应用采用的是异步交互方式,不需要打断用户的操作,并且只需要更新需要的数据,这就减少了用户的等待时间,提高了系统的可用性和效率。图2所示为Ajax工作原理及请求过程。

3 动态信息提示的实现

本文以显示一本图书的动态信息为例来构建动态信息提示的实现。通过用户图1传统Web系统请求浏览图书将数据异步发送到服务器。在服务器端通过ASP.NET技术处理请求并将响应作为X M L D O M对象返回。开发环境是VS.NET2003,开发语言是c#。本例主要包括:前台显示页面、客户端发送请求及处理响应脚本编码、服务器端处理请求编码。

3.1 前台显示页面(BookInfo.aspx)

BookInfo.aspx页面包含一个表格,为表格的单元格指定onMouseOver事件的处理函数getPic Data(this)以及onMouseOut事件的处理函数clearData()。函数getPicData(this)用来获取图片信息并显示动态提示信息,函数clearData()用来清除动态提示信息。

3.2 客户端脚本编码

3.2.1 创建XMLHttpRequest对象。

在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个X M L H t t p R e q u e s t对象。由于XMLHttpRequest对象不符合万维网协会(World Wide Web Consortium,W3C)标准,不同浏览器支持创建方法的不同,因此要考虑跨浏览器的创建问题。在Book Info.aspx页面的Java Script脚本代码中创建一个XMLHttpRequest对象。

3.2.2 发送请求。

在服务器端由PicInfo.aspx处理发送的请求,同时还要传递一个请求参数b k I D,参数值通过JavaScript函数escape(string)进行编码。通过XMLHttpRequest对象的open建立对服务器的调用,并通过send方法向服务器发送请求。XMLHttpRequest对象的onreadystatechange属性存储回调函数指针,当XMLHttpRequst对象内部发生变化时就调用回调函数callback。

3.2.3 处理响应。

页面根据回调函数更新用户界面。根据XMLHttpRequest对象的ready State属性和status属性值来处理请求。readyState属性为4表示完成请求,如果status属性为200表示请求成功。如果满足以上条件将执行pBookInfo()函数。通过XMLHttpRequest对象的responseXML属性可以获取服务器响应数据。response XML对象是一个XML DOM对象,使用该对象的get Elements By Tag Name(String)方法可以获得对应XML元素的值。回调函数callback和pBookInfo()函数实现主要代码片段如下:

3.2.4 动态提示信息位置的定位。

元素定位主要依赖于它的CSS参数以及与其邻接的内容。但是访问CSS属性不能获取元素在页面中或者仅在其他元素中的确切位置,并且不同浏览器上的偏移量可能不同,为了实现跨浏览器的兼容,提示信息的位置可以访问D O M生成标准的偏移量来计算。本例提示信息的位置使用offsetParent属性沿着DOM树上行,通过一路累加偏移值实现定位的。提示信息的定位函数如下:

3.3 服务器处理请求

首先在服务器端取得通过XMLHttpRequest对象以GET方法通过url传递过来的bkID的值:

int bkID=Convert.ToInt32(Request.Query String.Get("key"));

然后根据bkID的值从数据库中检索出该书的简介、出版社、出版日期、作者等信息。服务器响应返回的数据是XML DOM对象,需要设置Response对象的ContentType属性为”text/xml”。程序片段如下:

4 结束语

使用Ajax技术实现的异步Web应用,能够实现只更新部分内容给用户带来无刷新的用户体验。同时,Ajax也有它的缺点,太多的客户端Ajax Java Script代码也会影响用户的使用速度。另外,也要考虑Ajax的安全,因为任何人都可以在浏览器中查看到Ajax脚本源代码。谨慎地使用Ajax可以降低以上风险。

摘要：相对于传统的Web应用技术,Ajax技术是异步动态交互技术。通过介绍Ajax技术的工作原理和重要技术构成,并配合.NET技术实现Web页的动态信息提示。

关键词：Ajax,动态提示,ASP.NET

参考文献

[1]刘近勇,张建嵘.Ajax技术与Web应用[J].邮电设计技术.2007;(7):49-53

[2] RyanAsleson,NathanielT.Schutta著,金灵等译.Ajax基础教程[M].第1版.北京:人民邮电出版社.2006;95-100

[3] JohnResig.ProJavaScriptTechniques[M].第1版.NewYork:Apress.2006;137-145