网页动画的基本规则

动画可以使网站脱颖而出。 或者，它们同样可以破坏体验。 在使用网页动画时，可能会出现一些问题，例如添加毫无目的的动画、设置过长或过短的持续时间，或者一开始就使用错误类型的动画。 即使所有这些事情都做对了，动画 *风格* 也不一定感觉良好，尤其是在动画不同步或与网站的整体个性不符的情况下。

另一个需要注意的重要事项是，并非所有数字体验都应该使用相同的动画。 营销网站可能需要与产品网站或移动应用程序不同的动画。 虽然所有动画都遵循相同的运动基本原理，但根据内容类型和屏幕尺寸，还是有一些细微差别。

例如，假设您想让一个无聊的表格更有趣地填写。 您在每个步骤中添加了一些令人愉快的动画，但对于用户需要经常访问和填写的表格来说，这是一个好主意吗？ 在这种情况下，反复观看相同的动画可能会让人厌烦。

显然，有一些条件和考虑因素会使动画发挥很好的作用。 在本文中，我们将讨论如何将动画添加到产品网站中。 让我们深入了解一下，并为使用动画制定一些基本规则。 这与其说是宣言，不如说是我们可以参考和团结一致的基线。

首先，什么情况下适合使用动画？

如果使用得当，动画几乎就像内容一样——它提供上下文并具有意义，帮助告知用户发生了什么事，甚至告诉他们接下来会发生什么。 下面列出了一些动画可以做到这一点的良好情况。

转换 UI 块

这可能是动画最常见的用例。 当 UI 块从其原始位置移动，或从 DOM 中添加或删除时，最好让用户看到这种情况。

加载内容

加载动画是我们都曾在某个时间点看到和遇到过的！ 如果没有，快速访问 CodePen 就可以看到加载动画有多么流行。 它们非常适合作为 内容占位符，用户不仅可以从加载动画中得到提示，了解加载的内容，还可以确信确实在加载内容。

除了让网站感觉更快之外，它还可以避免内容重新流动的卡顿，因为元素在不同时间渲染会导致页面出现卡顿。

客户端渲染真是太有趣了。 看看这种卡顿的加载体验。 页面本身并不慢，但加载过程非常奇怪。 前端开发者将不得不熟练掌握这一点。 pic.twitter.com/sMcD4nsL98

— Chris Coyier (@chriscoyier) 2018 年 10 月 30 日

当然，当您提前知道内容块的高度时，加载占位符效果最好。

提示

这通常是一次性动画，其目的是提示用户注意哪里或者接下来应该做什么。 有些 UI 本质上很复杂。 一点微光或涟漪可以帮助用户完成任务或突出显示特定功能。

它不必在用户面前大张旗鼓。 相反，一点视觉提示，在不接管整个体验的情况下告知用户就足够了。

微交互

微交互通常用于单个元素，在用户执行操作后立即为用户提供视觉反馈。 它们增强了用户对已执行操作的信心，并表明操作已生效——同时还带来了一丝愉悦感。

这些不必像 Twitter 的心形动画 那样花哨，但它们确实应该表明对用户操作的某种反馈或响应。 只需看看当用户执行像将一项从一行添加到另一行这样的微小操作时，这种动画是多么微妙——但又多么令人愉悦

好的，那么我们什么时候应该 *避免* 使用动画？

我们刚刚看到了一些使用动画很有意义的情况。 让我们阐明动画通常对用户体验贡献很少或没有贡献的相反情况。 换句话说，它们会因不好的原因而变得引人注目，最好不要使用它们。

路由转换

是的，我们通常不会在产品网站上看到这些类型的动画，但值得一提的是，了解为什么它们没有意义。 这些转换在移动应用程序上效果更好，因为屏幕区域较小。 在桌面屏幕上，动画区域更大。 为了平滑地动画整个内容，您需要设置比移动屏幕上更长的持续时间。 这只会让用户感到厌烦，让他们等待才能看到内容，因为他们已经习惯了在网页上看到即时内容。 最糟糕的情况是，路由转换不仅会分散注意力，而且在 出现运动敏感问题时，还会成为严重的可访问性问题。

• 

在页面内容的初始加载时

当您想教育用户或将他们的注意力转移到特定区块时，您可以在营销网站中执行此操作。 对于产品网站来说，每次用户在页面之间导航时都会看到相同的动画，这也会让人感到厌烦。

当它出乎意料时

在用户使用特定功能时，最好考虑他们的心态。 用户是否期望在使用动画的地方得到视觉反馈？ 如果没有，动画可能会让用户更加困惑，而不是帮助他们。

例如，看看这个计算器应用程序。 当输入数字和运行计算时，UI 模式没有任何新内容。 用户已经知道在哪里集中注意力。 没有必要让用户等待才能看到结果，或者用没有额外意义或益处的动画来给他们惊喜。

当你不知道它的表现如何时

值得记住的是，并非所有设备、互联网连接和浏览器在动画方面都平等。Eric Bailey 在他的 prefers-reduced-motion 媒体查询深度解析中很好地总结了这一点

我们还需要承认，并非所有能够访问网络的设备都能渲染动画，或者流畅地渲染动画。当动画在“技术上”支持它的低功耗或低质量设备上使用时，整体用户体验会受到影响。有些人甚至 故意将这种体验作为一项功能。

上面引用的标题是一个明智的提醒：动画是渐进增强。如果我们打算使用动画 - 特别是那些可能主导体验的动画 - 我们必须至少考虑一种选择退出动画的方法，以及体验是否在没有动画的情况下仍然有效。prefers-reduced-motion 是一个最好的起点。

当目的不明确时

最后，我想说不要在你不确定动画目的的地方添加动画。多余的动画会分散注意力，弊大于利。这条 2018 年的推文仍然非常适用

动画应该持续多久？

动画的持续时间与所用动画类型一样重要。等待时间过长，动画看起来会拖沓。速度过快，动画的细节就会丢失（在最好的情况下）或者完全让用户迷失方向（在最坏的情况下）。

那么，我们应该将动画的持续时间设置为多长时间呢？我会给你一个经典的答案：这取决于。

距离越大，持续时间一般越长

动画（比如我们之前看到的那些）可以限制在较短的持续时间内。但是如果我们谈论的是一个对象要移动很长距离的大规模过渡，我们可能会觉得它需要更长的时间来确保事物不会移动得太快。但是避免使用超过 400ms 的持续时间。

看看这个例子。注意内容的过渡时间稍微长一些，因为它要移动更大的距离。但也请注意，它不需要持续太长，因为离开的对象会淡入进入的对象，而进入的对象从更短的距离进入，而不是让它在整个屏幕上移动。

这表明即使是大型动画也可以通过一些优化方式让它感觉更短，而不会迷失在混音中。

当用户触发操作时，使用较短的持续时间

这一点很重要，也是一个常见的错误。如果用户已经期待某事发生 - 并且焦点已经明确地位于应该的位置 - 那么没有必要让用户等待几秒钟才能完成他们已经期待的事情。

另一方面，如果更改是由系统自动触发的，那么更长的持续时间更有意义，因为它将允许用户跟上正在发生的更改。想想那些不是由用户触发的工具提示或模态，它们不需要立即引起用户的注意。

进入和退出动画可以有不同的持续时间

有时让进入视图的对象的动画比退出对象的动画快一点是有意义的，尤其是在用户预期看到内容更改时。

以之前的下拉菜单为例。当用户点击它时，他们会希望立即看到菜单项 - 至少，我不必等待才能看到菜单项。当用户点击时，让子菜单快速进入，然后在被关闭时平滑地退出，这样可以避免在它不再需要的时候，在退出时分散用户的注意力。

但这不适用于大型 UI 块。对于大多数大型块，在大多数情况下，需要超过 200ms 的持续时间。在这种情况下，颠倒持续时间，让块比它进入时退出得更快，可以确保它不会阻塞现有的页面视图。

产品中的动画持续时间应该彼此同步，并与品牌的个性一致

我遇到过很多产品，其中一个功能有非常好的动画，而另一个功能则太快、太慢或根本没有动画。

更糟糕的是，同一个功能内的动画不同步。

这就是拥有一个包含周到动画指南的样式指南，并在整个体验中一致地使用这些指南，可以提供巨大帮助的地方。

简单到什么程度才算太简单？复杂到什么程度才算太复杂？

动画的复杂程度应该基于用户预期遇到它的频率，以及我们迄今为止所看到的其他因素。用户预期看到它的次数越多，动画就应该越简单。在必要时，这应该优先于之前的持续时间规则。

例如，下面的动画在主菜单中可以使用，但在产品中的下拉菜单中使用相同的交错效果就太多了，难以理解。确实存在动画方面的 边际效用递减，就像经济学中一样。

但是，嘿，如果这种复杂的动画在有意的情况下谨慎使用，那么它可以非常令人愉快！

但是的，你可以在用户做出决定或处理数据时，用动画进行创意创作。这会让等待时间更具吸引力，比如网络断开或输入错误密码时。

你应该使用哪种缓动函数？

缓动？缓入？缓出？缓入缓出？一些三次贝塞尔曲线？

正确的缓动符合物理定律。 迪士尼的动画原理是这方面的黄金标准。

对于进入动画，如果你想要用户的立即关注，请使用弹跳效果，否则使用平滑的加速（和减速，当然也要减速）效果，它是逐渐增长的，而不是线性的。弹跳应该反映重力。Brandon Gregory 关于 自然感觉动画 的文章提供了各种符合物理定律的示例。

你可以参考 Adam Argyle 的这个 Gist，用于在 CSS 中定义缓动。

灯光，摄像机，还有…刻意行动！

对细节的关注是将出色的动画与普通（甚至直接损坏）的动画区分开来的关键。如果您正在学习网页动画，或者正在进行一个需要网页动画的项目，我希望这篇文章能作为一套有用的基本规则，帮助您充分利用您的工作。

除了这些规则，我还想说，好的动画需要时间和练习。当然，这里提到的许多内容都是基于个人经验的轶事，但这是多年来接触动画后培养出来的对动画的敏锐眼光的结果。学习、尝试、改进，并不断学习。否则，您最终可能会得到一系列动画，这些动画会给用户带来糟糕的体验，甚至会损害您网站的可访问性。