由于HTML5和CSS3转换和过渡的兴起，动画和移动在现代网页设计中变得越来越普遍。在最近的一次网络和移动会议上，有几次会议讨论了在UI元素中添加交互性的视觉设计和开发考虑。不幸的是，围绕这一主题的大多数讨论几乎都没有提及这种动画的可用性，以及哪种类型的动作最适合不同的设计目标。

网页上的动画和互动通常具有以下用户体验目标之一：

  • 画注意并解释变化在页面上：元素状态的更改、内容的显示和隐藏，或内容转移到另一个区域都是过渡动画的常见区域。
  • 添加风趣：淡入、更改颜色或以其他方式移动的元素被认为会取悦用户并使设计“流行”。动画和声音效果在屏幕上尤其常见面向儿童和青少年的网站．(这样的伎俩往往会分散孩子们的注意力;然而，由于年轻观众比成年人目标更少，这些影响更少让他们烦恼，也更容易容忍。)
  • 显得现代和最新的新的设计趋势:在网页设计中使用新技术和技术，不仅对开发人员来说是一项令人兴奋的活动，而且可能会传达一个最新的品牌，是当前的和知识渊博的。

在将动画添加到网页或应用程序之前，确保它们的目标和目的是明确的。在考虑动画时，考虑以下问题:

  1. 用户的关注：当动画发生时，用户的注意力会集中在哪里？
  2. 动画的目标：是要：
    1. 吸引用户的注意力:动画对象是用户必须立即注意并采取行动的东西吗?
    2. 在过渡中显示连续性在一个物体的状态之间?
    3. 表示用户已经关注的对象之间的关系?
  3. 动画的频率:一个用户在一个会话中遇到它的频率是多少?
  4. 动画的机制::
    1. 直接由用户的行为引起?
    2. 间接触发（在页面加载时、滚动时，或由其他一些不相关的活动触发）？

只有回答了这些问题，才能设计出合适的动画。

用户注意：周边运动需要注意

一个人的周边视觉的运动触发了视觉注意力的刺激驱动转移，这是自下而上处理的一个例子。这与目标导向的转变(自上而下的处理)形成了鲜明对比，后者是指一个人主动将注意力调整到感兴趣的领域。当我们需要迅速注意到草丛中的一条蛇，以及其他迫在眉睫的危险或潜在的猎物(你可以决定蛇属于哪一类)时，这种本能的注意力转移到运动上是一种残余。(更多关于自上而下和自下而上的处理在我们的课堂上每个设计师都应该知道的用户界面原则．)

在网页上，外围通常包括网页外部的任何区域f形阅读模式.右侧轨道上闪烁的图像和视频广告是利用周边动画实现商业目标的最明显例子（过度使用会导致横幅失明和右眼失明)，但即使是善意的动画也会让人分心和讨厌(Clippy，我们在看着你)。出现在屏幕边缘的通知和宣传相关内容、最近的活动或实时聊天功能都是外围动画的例子，目的是提醒用户注意相关功能或内容，但在实践中，它可能会被打断和不受欢迎弹出窗口．

在加载了Olark的主页后不久，一个我们能帮忙吗？窗口从屏幕的右下角向上滑动嘿…窗口，然后在上面弹出。虽然动画确实成功地提醒了用户聊天功能的存在，但它突然出现在用户视觉的边缘，分散了用户对页面主要内容的主要任务的注意力。

视觉注意力转移到移动物体的速度取决于物体的边缘认为为了更好的对象。诸如物体速度的增加、位置变化的大小，以及最重要的是，这种运动是否看起来是自我推动的(而不是由某种外部碰撞引起的)，这些因素都会影响对生命的感知。就交互设计而言，这意味着以任意速度滑动或显示位置变化的元素比缓慢淡入位置的元素更能吸引注意力。

的回到顶部当用户滚动时，Festival of Marketing网站上的链接会从页面的左下角向上滑动，这个动作会立即将用户的注意力吸引到屏幕外围的元素上，从而分散了阅读主页内容的主要任务。
当用户向下滚动页面时，滚动回页面顶部的箭头按钮会在屏幕的右边缘慢慢淡出。这个没有位置变化的慢速动画在视觉上比前一个例子中看到的幻灯片动画更容易分散注意力。当然，另一个解决方案，避免了可能中断用户浏览产品的任务，是始终显示页面中的某个地方的链接。

如果目标是快速将注意力吸引到新对象上，那么从一个方向滑动的动画将非常有效。另一方面，如果目标是在不打断用户的主要任务的情况下提供对上下文功能的访问，那么不改变位置的更微妙的动画将是更好的选择。(完全不做动画是最不会让人分心的，如果可能的话，甚至是更好的选择。)

目标：动画帮助理解和理解

一个人当前焦点内的运动不会引发与周围发生时相同的视觉反应。因为我们已经吸引了用户的注意力，所以我们不再需要吸引它，而可以专注于设计一个动画，以提高用户理解UI的能力:元素如何与其他元素相关联，特定元素的状态变化，等等。

如果出于适当的原因使用动画，屏幕上的元素可以帮助传达该元素与页面上的其他元素以及用户刚刚采取的任何操作之间的关系。例如，如果表单包含条件逻辑，用户在一个字段中输入的内容可能会导致在该输入字段下立即出现其他相关字段。(例如，在许多电子商务结帐表单中，如果用户指示了不同的账单和送货地址，则第二个地址的字段将被激活，并作为用户操作的结果显示在下面。)这个动画加强了触发场和依赖场之间的关系。

一旦复选框我的账单地址和送货地址是一样的在Nest签出表单上取消选择，帐单地址的输入字段将使用幻灯片切换动画公开，这清楚地表明这些新字段的依赖关系。如预期的那样，重新检查框会折叠当时不需要的字段。

要使动画有效地传达UI元素之间的因果关系，效果必须开始在0.1秒内初始用户操作的。这共计0.1秒响应时间保持直接操纵的感觉，并支持用户操作导致新元素出现的感觉。

频率:不要妨碍用户

设计动画时要考虑的另一个重要方面是在一个典型用户的单一访问中可能出现的频率。反复遇到的动画是内容的障碍，会延长完成任务的时间。用户不希望等待和观看一个冗长的动画序列一遍又一遍，特别是当它除了“有趣”和炫耀开发人员的编码能力之外没有其他目的的时候。记住：仅仅因为你可以实现一个动画，并不意味着你应该．

我们甚至无法计算我们在用户测试中坐过多少次，听到测试参与者说出了以下一些变体：“这（动画）第一次很好，但现在越来越烦人了。”

一个越来越常见的免费动画例子便是与显示隐藏主菜单相关的过渡。隐藏全局导航这本身就很糟糕，但迫使用户在每次需要访问主菜单时都要观看动画就更糟糕了。虽然第一次看的时候动画可能很可爱，视觉上很吸引人，但是第二遍看的时候就很无聊了，第三遍看的时候就很彻底了烦人的(如果用户感到沮丧并完全放弃站点，这种情况可能永远不会发生)。

例如，Newton Running网站将它的4个导航选项隐藏在3线后面汉堡菜单图标．点击图标会触发一个动画，显示当前页面缩小并转换为一个彩色方块，而其他彩色方块会进入屏幕并成为菜单选项。一旦选择了一个选项，动画将反向重复，并以缩放到新选择的页面结束。当然，一旦动画被触发，就没有办法跳过它。表示维度是动画的一个优点，但在这个例子中，页面之间的空间关系是没有意义的，动画是一个完全不必要的障碍，因为4个菜单选项可以很容易地在页面上以静态链接的形式显示。

的主菜单牛顿运行在漫长的动画序列结束时显示，一旦选择了一个选项，就会反向播放。当用户想要使用主菜单时，他们必须再次忍受整个动画序列。不必要的、无目的的动画阻碍了用户与网站的进一步互动，因为他们不必要地浪费了本可以用来吸收实际内容的宝贵时间。

机制:选择合适的动画

如果要在设计中使用动画，请确保选择适合动画背景和目标的速度：

  • 慢转换更不可能引起注意力转移，因此也更不容易让人分心。它们适用于由用户间接触发或非用户以任何方式发起的动画。在这些情况下，新元素应该出现在很少或没有改变的位置，以减少干扰。
  • 快速动画当它们发生在用户关注的焦点之外时，更容易引起注意。它们适用于用户必须关注和采取行动的重要元素。

快速转换还可以减少用户的时间浪费。当用户直接触发动画并且已经关注元素时，它们是合适的。然而，这些类型的过渡不应该是刺耳的，也不应该取代任何文本，用户可能仍在阅读。虽然很少见，但有时UI太快了，用户无法注册更改以作出相应响应。

动画用户界面：小心操作

动画用户界面元素是一种诱人且强大的工具，但它们很容易浪费宝贵的金钱:用户的注意力和时间。谨慎地使用动画，并且只在它们为交互添加意义时使用。考虑一下动画是否会引起用户的注意力转移，以及同一用户是否会一次又一次地被它绊倒。动画会加强UI元素之间的关系吗?用户是否会直接触发它?所有这些都是成功动画设计的关键。

参考资料：

(2010)。它还活着！动画运动捕捉视觉注意力．心理科学, 21, 1724–1730. （警告：链接导致错误。）PDF文件．)