Lec 22 动画 & 反馈

本节主题关于

理解动作

一个良好的动作效果设计可以传达如下信息：

说到元素之间的关系，动效设计可以用来传达层级结构（hierarchy）。在这里，动画体现了父元素（如收件箱 inbox）与子元素（收件箱中的邮件 inbox message）之间的层级关系。

反馈

动效可以提供及时反馈（feedback），并显示用户或系统操作的状态。

当动画元素对键盘输入做出响应时，它可以通过反馈来表明该操作是否成功。“摇头（shaking head）”是一种隐喻，用来表达“否定”或“操作失败”的含义。

占位

动画列表项作为占位符，用来表示内容正在加载中

IMPORTANT

人在周边视觉中感知到的运动，会触发一种由刺激驱动的注意力转移，这属于自下而上加工（bottom–up processing）。

这与目标驱动的注意力转移（top–down processing）形成对比，在后者中，人会主动、有意识地将注意力集中到某个感兴趣的区域。

这种对“运动即注意”的本能反应，可以追溯到远古时期——人类需要快速察觉草丛中的蛇，或其他潜在的危险与猎物。

在网页中，“周边区域”通常指的是阅读的 F 型浏览模式之外的区域。右侧栏中闪烁的图片和视频广告，就是利用周边动画来实现商业目的的典型例子（但这种过度使用会导致“横幅盲视”和“右侧栏盲视”）。即使是出于善意的动画，也可能变得分散注意力甚至令人厌烦（比如 Clippy，我们都懂）。

屏幕边缘出现的通知，用来提示相关功能、最近活动或在线聊天功能等，也是周边动画的例子。它们本意是提醒用户关注相关内容，但在实际体验中，往往和弹窗一样具有干扰性和令人不适的效果。

— NNGroup (“Animation for Attention and Comprehension”)

86926325541

IMPORTANT

视觉注意力在周边视野中转向一个移动物体的速度，取决于该物体被感知为“具有生命性”（animacy）的程度。

影响这种“生命感知”的因素包括：

这些因素都会影响人们对“它像不像一个有生命、主动在移动的物体”的判断。这意味着：

任何以“滑入（slide in）”或其他位置变化方式出现的界面元素，不管速度快慢，都会比“慢慢淡入（fade in）”的元素更快吸引用户注意力。

页面右侧边缘的箭头按钮会在用户向下滚动页面时逐渐淡入（fade in），用于返回页面顶部。

这种缓慢的动画，并且不涉及位置移动，相比前一个例子中的“滑入动画（slide-in）”，对视觉的干扰要小得多。

当然，还有另一种解决方案：可以将该链接始终固定在页面中的某个位置，这样可以避免动画可能打断用户浏览商品这一任务的注意力。

较慢的过渡动画：更不容易引起注意力转移，也更不容易造成干扰。适用于那些由用户间接触发，或并非由用户主动发起的动画。

较快的动画：在用户注意力不在该区域时，更容易吸引注意力。适用于那些重要的元素，需要用户关注并采取行动的情况。

要考虑当前情境以及用户的情绪。

下面是来自 Mac 代码编辑器 Espresso 的一个例子：当使用“跳转到某一行（Go to line…）”功能时，在编辑器实际滚动到目标行之前，会先播放一个弹出窗口消失的动画。这个动画并没有传达任何信息，本质上只是装饰性的。

虽然这种动画在某些情况下可能会让人感到愉悦，但在调试场景中，用户通常已经处于挫折状态，并且目标导向非常强。他们没有时间去“欣赏设计”，而是希望尽快完成任务、继续前进。随着需要查找的行数增加，用户对这种无意义动画的容忍度会进一步下降。

动效可以用来强调用户旅程中的关键时刻，为常见的交互增添个性，并能够体现品牌的风格

Newton Running的主菜单是在一段较长的动画序列结束时才被展示出来的，而当用户选择某个选项后，这段动画还会再倒放一遍。

因此，每当用户想要使用主菜单时，都必须再次经历完整的动画过程。这种多余的、没有实际目的的动画会降低用户继续与网站交互的意愿，因为它无谓地浪费了本可以用来浏览实际内容的宝贵时间。

这个故事告诉我们：不要妨碍用户。要考虑在一次典型访问中某个操作的出现频率，对于高频使用的动画，应尽量保持非常简短。