百度云盘账号被盗:ui花园 - 编织可用性与文化: 人机交互：网页动画的指导方针

阅读本文英文原文 （翻译：廖植群，殷文婧 校对：刘松涛）

摘要:

人机交互是一门跨领域的学科，吸引着许多来自各方面的研究人员、教育人士和从业者。人机交互研究人和机器之间的交流和互动，涉及人和机器两方面的相关知识领域。本文主要讲述人机交互中人这一方面中的动画问题。网页上使用动画的情况越来越多，这说明了制作这种多媒体十分容易。这个趋势也表明制作动画的水平和运用动画的水平不够匹配。经过大量的文献调查，本文提出了一些技巧和原则，可帮助设计者建造更优秀、更高效的网站。

1、介绍

人机交互（HCI）是一门跨领域的学科，吸引着许多来自各方面的研究人员、教育人士和从业者。目前，人们对人机交互的范围定义还没有达成共识，不过大体上来说，这个学科主要关注于供人使用的交互计算系统的设计、评估和实现，并对相关的主要现象进行研究[1]。

人机交互在很大程度上是一个跨不同领域的学科，这些领域包括计算机科学、心理学、社会学、人类学、和工业设计等等。因此人机交互研究人和机器之间的交流和互动，它源于来自机器和人两方面的相关知识领域。在机器的方面，有计算机图形学、操作系统、程序设计语言、以及研发环境；在人的方面，有通信理论、图形学、工业设计学、语言学、社会科学、认知心理学、以及人的行为学；除了上述这些，还包括工程和设计方法。

本文主要讲述人机交互中人这一方面中的动画问题。经过大量的文献调查，本文提出了一些技巧和原则，可帮助设计者建造更优秀、更高效的网站。

2、背景

动画，通过展现动态的用户界面，作为一种更加强有力的方式来教育用者，长期被推崇。然而，由于运用动画的好处很难测量，所以实际的研究结果常常会使那些动画爱好者感到惊讶和失落[2]。浏览者对动画通常是很满意的，但是动画也分散了他们对关键内容的注意力[3]。

最近有一篇文章从教育、人机交互和心理学的方面研究了电脑动画[4]。该文章的作者们指出电脑动画虽然不是万能的，但是它能在一定条件下提高浏览者的效率和态度。他们总结了能够影响动画效力的五个因素：动画内容、交互程度、动画目标、动画界面设计和个体差异。

Haas等人(2005)比较了使用文本、图形和动画这三种表达方式在解释统计学术语时的不同。发现这几种表达方式的表达效果相差无几。虽然用者喜好各有不同，但是术语类别不同时，就出现了差异，动画在表达动作术语或者过程术语时显现出更大优势。缺乏对动画的时间的控制则是一个问题[5].

3、网页上的动画

动画是一种动态的视觉上的表达、形式和结构，并随时间推移而变化[6]。动画十分普遍，用途不尽相同，我们在电脑上、尤其是网页上和在线广告中常常可以看到。一些设计者使用动画来传递信息，并认为在有限的电脑屏幕上动画比文本有用的多[7]，但是我们对于动画的效果却要小心谨慎[8]。

多数人在多数情况下认为网页上的动画是令人讨厌的。很多用者在浏览网页时常常会被网页上的动画所干扰，或者被分散了注意力，特别是当动画不能给用者正在进行的工作带来任何信息的时候。Zhang Ping把这种动画称作为对用者的“非主要信息刺激”或者“辅助刺激”[9]。换句话说，他们不能对用者正在进行的查找数据任务或者当前所需要的信息带来任何有价值的信息。

Zhang认为这类非主要信息刺激动画会引起视觉上的干扰，这种干扰影响了用者搜寻信息的能力。无关紧要的动画经常出现或者突然出现，往往会分散用者在有用信息上的注意力。因此，当人们在网页上搜寻有用信息时，常常会受到这些动画的干扰，正确获得所需信息的时间也随之变长，这十分令人讨厌[9]。

她也指出，虽然有一些视觉关注理论可以解释这种视觉干扰现象，但是能否把它们直接用于像网页这样的计算环境中的搜寻信息任务中，我们还不太清楚。一个主要的原因就是传统的视觉注意力研究中刺激物的曝露时间（通常为几毫秒）远远短于网页上的刺激物的暴露时间（几秒或者几分钟），并且一个人的视觉行为在这段相对较长的曝露时间中可能会改变[9]。第二个原因是，在传统的视觉注意力上的实验环境或者试验设置也和诸如网页那样的计算机环境上不同。为了展现刺激和捕获反应，我们常常在视觉注意力研究中采用各种专业的设备类型。因此，直到今日，仅仅有少数的经验主义的研究报导了在网页环境上的动画效果。因此，视觉注意力研究的适用性必须要在网页环境进行测试。Zhang Ping的研究得出了以下结论：(1)辅助刺激性的动画恶化了浏览者搜寻信息的表现。(2)当任务困难程度的增加时，动画对浏览者搜寻信息的表现的影响较小。(3)那些和任务相似但是不相关的动画对浏览者负面作用要多于和那些与任务不相似的动画。(4)对浏览者的负面影响，色彩明亮的动画要大于色彩暗淡的动画[9]。

视觉注意力理论和干扰现象

视觉注意力和视觉感知的研究结果，可以对干扰现象提供一个似是而非的解释。研究表明，通常情况下，在我们视觉范围内的物体都能够吸引我们的注意力[10]。由于注意力是有限的，所以，当用在相关信息上的注意力减少了，处理这些信息的能力（包括处理时间、精确性）就下降了[11]。因为我们注意刺激物的能力是有限的，所以注意力的方向决定了我们感知、记忆、对于信息反应能力的好坏程度。没有受到关注的物体或者信息常常落在我们的意识之外，因此，它们对我们的表现影响不大[12]。对于感知注意力（perceptual attention）的研究，集中在两个主要的主题上：选择性（有意识的感知常常是有选择性的）和能力限制 (我们同时执行多种脑力操作的能力是有限的) ，不过也有对其他主题的研究 [13] 。特别地，为了理解注意力的不同方面，我们从选择注意力和发散注意力两个范畴上来研究注意力。

*选择注意力（Selective Attention）*也称为聚焦注意力，指的是我们聚焦某一特定信息源并忽略其它信息源的能力[12]。通常情况下，选择的标准常常是一个简单的物理属性比如位置或者颜色等[13]。

*研究发散注意力（Divided Attention）*时，也至少需要两个刺激物，人必须对这些所有的刺激物产生注意并有所反应[14]。在发散注意力中，要求的主题问题毫无条件地依靠多于一种刺激物的身份[13]。对发散注意力的研究告诉我们，人把注意力发散开来处理多个任务的能力是有限的，同时也告诉了我们关于注意力机制和能力[14, 12]。

5、网络动画的指导方针

前文已经提到，研究结果表明我们必须小心地设计网页动画以免对用者产生负面影响。Wire和Heep等作者已经为设计者提供了相关的指导方针[15]。以下列出设计网页动画的十个原则。

5.1不要干扰在重要信息上的注意力

注意往往被动画的某一基本特征吸引，因此用者会聚焦于动画的相关方面[16]。创建一个简单，整洁的动画可以直接将其所包含的信息投射到可视化元素上，从而方便用者从动画显示中选择本质的信息[17]。但动画形式本身是非重要的信息刺激，往往带来视觉干扰影响用者的信息搜索绩效（performance）[9]。

所以，原则之一是，动画不能干扰人对重要信息的关注，而应该提供相应的、积极的、有帮助的信息，也就是说，动画可以有效地吸引人的注意力，并引导人的注意焦点和感觉。因此，我们期望动画应该像指路标一样，它吸引人了的注意力，强化了有关联的信息。

5.2 避免混乱

人的信息处理系统中，具有足够的视觉加工能力，但该能力也是有限的。静态和动态对象的多种表征在视野中相互竞争视觉加工的资源，从而导致混乱。文献中提到，我们的注意力是有限的，注意的方向决定了我们对信息感觉、记忆和反应的质量。不被注意的物体或信息往往也不被人意识，其影响甚微[12]。但当用者面对一个混乱的显示局面时，可能会试图忽略存在其感觉域内的一些元素，这样就恶化了信息的传递。避免混乱，从积极的角度来说这个设计原则，就是创建简短整洁的动画。

5.3. 设定合适的持续时间

人眼需要一定时间来处理变化，过于快速显示的物体简单地将人的注意分配给以前图像和当前图像[18]。 物体快速显示蒙蔽了大脑，使其相信以前和当前的图像必须立即加工[19]。同样道理，如果显示时间过长，长于人实际需要的时间，多余的时间很有可能导致疲劳，从而削弱了观看者的集中度和理解力。

精确地给定合适的持续时间是很难的，因为它很大程度上依赖环境和不同动画的内容。然而这里要提到的是，信息的显示时间总体上过多好于多少。

5.4 管理布局和组织显示对象

这方面的原则与格式塔理论（Gestalt theory）有关[20]。根据格式塔理论的就近性原则，相关的项目应该比非相关项目靠得更近。

根据这一定律，当一些项目被紧密放置在一起时，组中的各个项目的感知会被更准确的回忆。简单说来，相似的项目更可能形成组。对于动态项目，同时移动的项目可能被用者感知为一组。此外，信息还应该以优先的形式组织。较为重要的对象应该出现在屏幕上用者感知起来较为重要的位置上 [21]。

5.5 遵守颜色的惯例

颜色不仅仅有修饰的作用，明智地选择颜色可以帮助动画设计者传递信息同时移除模糊性。

某些组织设定了的关于颜色意义的标准，例如职业安全与保障管理总署（www.osha.gov）的标准是：红色代表危险，橙色代表警告，黄色代表提醒，蓝色代表通知，绿色表示安全。也有一些其他的使用惯例：红色代表热，绿色代表自然， 黑色代表死亡。动画设计者应该注意人们对于颜色概念化的影响。颜色应该主要用来适当的区分对象或对象的某些方面。颜色上不适当的差异往往会干扰和误导用者；使用的颜色应该为一个传递特殊的动画概念提供额外的信息。

Zhang Ping的研究结果值得注意：“着色明亮的动画相比于着色暗淡的动画对用者的绩效有更强的负面影响”[9]。

5.6 使用文本和听觉信息来辅助动画

不同用者对于动画会有不同的理解，因此单独地呈现动画会带来含义不确定的风险。使用文本、声音，或者有条件的情况下使用叙述可以明确动画的含义。

虽然文本也可能不太明确，但与动画相联系时不确定的几率就减少了。当用者对于动画的理解可能出现偏差时，作为支持的文本可减少其不明确性。

声音也许是被人忽视的方法，在动画中经常如此。颜色和声音应该用于突显存在的对象以及他们的动作（例如：将一个声音链接到一个动作上）或提供额外的支持。声音可以帮助区分动画中的不同动作或者提供基于一个特殊结果的反馈。

叙述在教育类动画中往往备受青睐，其背后的原则是叙述可帮助人们有效的学习。叙述必须与相应的动画同时呈现，否则将大大减少学习和回忆的效果。另外，应该避免和叙述不相关的动画。假设给定了一个动画的内容，应该使用更进一步的非图片交流的方式来支持其含义。换句话说，图画内容应该决定图画的形式特征。

5.7关注对符号学的探究

符号学（Semiotics）“涉及意义以及信息的所有形式和其所处的各种环境”[22]；“语义学的主旨是以一个符号的传递方式交换信息”[23]。掌握这个原则可以支持有潜质的动画设计者决定如何通过可视化的信息线索创造和传递动画的含义。动画设计者需注意设计合适的信息提取层次，动画如果包含过于细节的对象和动作会造成信息过载。

5.8 遵从合作原则

Grice’s的合作原则[24]提到在一般的对话中，参与交互的双方都会采取合作原则来促进理解。Grice分析交互过程涉及四个准则：数量、质量、关系和方式。虽然Grice是基于口头交谈构想出这些原则，但采用这些原则对设计出成功的动画也非常适合。针对动画，Weir和Heeps提出了如下一些准则：

1. 质量: 动画设计者所传递和描绘的必须是正确的。
2. 数量: 表达的内容需充足，足以传递所需信息同时避免过量的动态。
3. 关系: 动画的播放和组织需遵守有意义的顺序。
4. 方式: 清晰自然地表达动画，避免含义概念广泛、晦涩、不明确、无序。

如果我们应用这些准则将会有力地促进理解和成功的交互过程。

5.9 向迪斯尼学习

很多传统动画的特点来源于1930年代的沃尔特迪斯尼工作室，他们强调如何使动画更真实和有娱乐性[25]。很多基于此目的提出的设计技巧作为加强或最佳化网页动画的方法也是相当中肯的。以下是一些主要的技巧：

1. 挤压和伸展 – 通过在动作中扭曲设计对象的形状来定义其硬度和质地。
2. 定时和运动 – 用空间动作来刻画对象的重量和体积以及个性化特征。
3. 预期 – 准备一个动作
4. 阶段化 – 阶段化的表达一个概念使其清晰的表达
5. 贯穿整体的或重叠的运动 – 终结一个动作同时建立和它相关的另一个动作。
6. 直线向前运动和一个姿态到另一个姿态的运动 – 使用这两种相对的方法来创建运动。
7. 慢进慢出 – 在帧内或帧与帧之间缓慢地进出以达到速度和移动上的精准
8. 弧线形 – 设计自然的动作路径
9. 夸张 – 通过设计和动作着重强调一个概念的主旨
10. 二级动作 – 考虑对象一个动作之后紧接着的那个动作
11. 吸引 – 创建一个观众喜爱看的设计或动作

迪斯尼的经验是为了保证动画强烈的真实感，这将大大减少不确定性。同时能够尽量去除潜在的不真实的行为特征，传递更加明显的信息。

5.10 避免设计“近视”

当动画为了传达特殊的信息时，通常会有“设计近视”的风险[26]。部分“目光短浅”的设计者往往会出现这个问题。一般来说，设计者的系统观点是被他们所熟悉的目标和对象影响的，这些熟悉的事物也就成为他们设计的灵感。从设计者自己角度来看，他们的作品似乎是合适的理想的，但对一个新用者这些系统可能非常模糊和晦涩。

6. 总结

动画是一种动态的视觉上的表达、形式和结构，并随时间推移而变化。动画十分普遍，用途不尽相同，我们在电脑上、尤其是网页上和在线广告中常常可以看到。使用动画的情况越来越多，这说明了制作这种多媒体十分容易。这个趋势也表明制作动画的水平和运用动画的水平不够匹配。以上一些来自于文献中研究结论的原则能够帮助网页设计者。提出这些原则的目的是提醒设计者应谨慎考虑可能出现的潜在问题。