数字产品中的动效可能是一把双刃剑。运用得当时，动效是引导用户注意力的利器。它可以起到连接交互并有助于打造流畅的体验。但是过度或不相关的动效会分散用户的视觉注意力，导致混淆甚至增加认知成本。
在我们的设计开发中，重要的一步是提出一系列动效设计的指导原则。我们的产品应该如何优化？从明确，重点突出的原则开始，以便搭建一个框架，确保各种产品团队可以扩展的方式评估各个组件动效。
“为什么动效会引起注意？并且如何才能帮助我们做出更好的设计决策？“
保持起码的尊重
考虑到这一点，我们在Hubspot 中提出的关键动效设计原则之一（只有三个）直接关系到注意力：
产品中的动效应该尊重用户的注意力
动效不宜华丽或多余。它应该是被有意识地、巧妙地运用，并且充分考虑了使用的场景。动效尊重用户的注意力，但不要在用户当前任务中吸引注意力，除非是特殊的目标（如警报）。
这看起来很明显。当然太多的动效会分散注意力。但作为设计师，探索我们遵循的最佳实践背后的深层原因很重要。任何人都可以告诉你太多的东西在屏幕上弹跳会让人分心。但为什么动效会引起注意？如何才能帮助我们做出更好的设计决策？
所以让我们更深入地了解视觉，视觉注意力以及动效如何起作用。
饥渴的眼睛
人类视觉是一个非常复杂的系统，由几个神经器官和一系列处理阶段组成。将光转化为意义涉及很多。但在更高的层面上，它实际上非常简单。毫不奇怪，视觉注意力都始于你的眼睛。
光线通过瞳孔进入你的眼球，并在背面接触到约一亿三千万个称为视网膜的特定细胞层（沿着各种流体和血管行进）。在视网膜中有两种类型的细胞，其名称基于它们的形状：杆状和圆锥状。在视网膜的正中央是中央凹。中央凹是一个重要的结构，因为它是光线最直接照射到的地方。请记住：中央凹就是焦点。
明确视杆和视锥之间的差异，尤其是视网膜分布的差异，对于理解视觉和注意力非常重要。
视锥大约是视杆的20倍，也是专门用于细节和色彩视觉的细胞。中心凹处充满了锥体。但锥体也具有敏锐的方向感，并且在弱光下不太好。激活锥体需要更多的光子。
另一方面，杆细胞在方向上不敏感。他们对各种角度的光进行响应。它们也比锥细胞更快地响应光（它需要更少的光子来激活它们），并且它们对对比度差异更敏感。
视杆细胞成大部分视网膜，但仅存在于中央凹之外。你可能认为这个地区是你的周边视野。外围视觉中的视杆细胞将注意力吸引到未直接看到的事物上起着至关重要的作用。
现在我已经把你放在我的视野里了
视觉故事的其余部分主要发生在大脑中。视觉处理有几个阶段，根据他们发生的大脑区域命名，如外侧膝状核（lgn）和视觉皮层1-6（v1 - v6）。
这些名字对于这次讨论来说不是非常重要，但重要的是这些阶段需要时间和过滤。光线进入眼睛并被大脑处理的时间可能在数百毫秒之内，而且在第三或第四阶段之前，您并没有意识到自己正在看什么。
甚至有一种方法可以“看到”这种延迟。
回想一下时间（或者现在尝试一下），当你轻轻一瞥秒钟。你可能会注意到，当前秒钟，当你看着时钟时，看起来比以下时间更长。那不是你的想象力。这就是所谓的时间平衡，这是你的大脑为弥补视觉处理延迟所做的事。
“在你意识到你在看什么之前，你的大脑已经对事情的重量级做出了很多决策。”
每当你睁开眼睛时，会收集到大量的信息。幸运的是，我们的大脑是基于启发式的强大输入过滤机器。在所有这些处理过程发生的时候，在你意识到你在看什么的时候，你的大脑已经对事情的重量级做出了很多决策。只有在物体通过这些门时有意识地注意场景中的任何特定物体才有可能看到它们。
在整个过程中，移动的东西会得到特殊的处理，这可能并不让你感到惊讶。
Preattentive：注意力捷径
即使我们的大脑正在积极处理所有通过视网膜摄取的信息，但这些信息并不都是一视同仁的。有些像落在中央凹的东西，会在深层认知里处理，同时被给予更多的权重。毕竟，任何时候这是你在关注的场景的一部分。这通常是我们所说的（视觉上）所关注的。
另一方面，落在外围的视觉信息通常对眼前的任务来说并不重要。你的大脑通常不会有任何有意识的注意。
外围的物体或事件被大脑标记为足够重要，我们称之为注意力捕获。你的眼睛会将这个区域带入你的中心凹视野，并且它对认知处理的权重也更高。这时你就能关注它啦。
所以大脑对视觉区域的“无意识的关注”，比你有意识的视觉区域大得多。有趣的是，该区域的大小（即可用于注意力捕获的视野量）可能会发生变化。这种行为叫做变焦镜头模型。
当一个人专注于复杂的任务时，“镜头”的大小（不要与眼睛的物理镜头混淆）可能很小。但如果他们没有参与进来，或者他们已经接受了培训能够预期到外围的事情能够中断，那么镜头会变得更大。在这个模型中更关键的是镜片的大小与认知处理的效率成反比。
换句话说，无论你关注什么，潜意识事件导致注意力分散得越分散，认知效率越低。再次，这可能看起来像常识，但至少现在我们对它发生的原因有一些基本的认识。
那么究竟是什么触发了注意力捕获？你的大脑用什么规则来决定场景中的哪些对象需要注意？
Preattentive注意力线索
事实证明，整个过滤系统被调整为关注场景中的一组特定属性。因为这些属性在信息被有意识地关注之前被用作过滤器，所以它们被称为preattentive线索。这很可能已经为设计师所熟悉了。它们包括方向，大小，色调和强度等特性，当然还包括动效。
在视觉场景中，Preattentive线索的强烈变化将吸引注意力。
一个影响任务容易度的Preattentive线索典型例子是在一组随机数中计算3的数量：
这很困难，需要很多有意识。您可能必须按顺序扫描所有数字。但如果我们改变一个Preattentive属性，色调，它变得更容易：
视力正常的人几乎可以立即计算出所有红色3。这是因为颜色是Preattentive处理的。它可以更快地捕捉注意力，而不需要较慢的顺序处理。
通过动效捕捉注意力的更多例子
让我们看看几个在真实世界的Web界面中捕捉动作的例子：
在用户可以在福特车的面板搜索过滤信息是动效捕捉注意力很好例子。他们会帮助告诉你刚刚申请的过滤器正在被应用，并且巧妙地捕捉到注意力，以至于你第一次可能会想念他们。但这不是一件坏事。
一小部分动效意味着强化一项具体行动并传达更多关于刚刚完成的任务的信息，这可能非常有效。放置在这里，出现在用户刚刚点击的位置，完美地完成了该任务，而不是分散注意力。
用于 MailChimp 下拉主菜单的过渡动画效果非常好。它们非常敏捷，复杂程度也足以有效传达空间定位（特别是对于子菜单屏幕）。子菜单轻微反弹是在产品运动中传达其品牌风格，同时不会分心的一个很好的例子。动效设计往往在某些细小的地方发挥更大的作用。
回到原则上
在数字产品中有效应用动效需要考虑注意力和用户的目标。当用户沉浸在任务时，即使小的视觉干扰也会堆积并增加处理信息的负担。
另一方面，有意识的动效设计是一个强大的工具，将引导用户的注意力到我们想要的地方。与当前任务直接相关的动效是一个强有力的强化机制。如果对象或事件彼此密切相关，则使用动效可以帮助传达这种关系。在有必要的时候，动效也可以在某些特殊的时刻的从当前任务中引起注意。警报和通知系统就是很好的例子。
所以要清点你产品中的动效。避免夸张的动效或打扰用户的动效。明白为什么这个动效令人分心。无论如何，引用动效设计的第三个原则：如果有疑问，请加快速度。
进一步阅读
Colin Ware 写的《信息可视化：设计的感知》和 Stephen Few 的《信息仪表板设计》都讨论了preattentive处理的思考。前者对视觉感知的研究更为深入。
我强烈推荐两个新闻通讯，其中包括动效设计和网页动效方面的令人惊叹的资源， Val Head’s UI Animation Newsletter 和 Rachel Nabors’ Web Animation Weekly.
原文链接