🎞️ 面向开发者的动画

🎬 动画在 UI 中的作用

✔️ 何时以及制作什么动画

👮‍♀️ 何时以及什么不该动画

📚 延伸阅读

这篇文章将探讨界面设计中的动效。你会听到我滔滔不绝地谈论动画的含义、何时、用什么来制作动画，以及如何负责任地使用动画。我所说的一切都不是一成不变的。我只会尝试提供一些处理 UI 动画的通用建议。
不过，你不会在这里找到任何实际的代码片段或分步教程。

开始之前：作为一名 Web 开发者，我经常谈论网站，但这也适用于各种可视化 UI。
我的一些示例是抽象的线框图或 Codepen，但都曾在实际项目中使用过。此外，大多数 Codepen 并非本人所写。非常感谢它们各自的作者！

现在就坐下来，泡杯茶。开始吧！☕

🎬 动画在 UI 中的作用

用户界面始终是一种抽象。它以人类能够感知和理解的方式抽象出问题，最好是我们习以为常的方式（物理按钮、拟物化、有形的Material）。我们也习惯于动效。了解事物从哪里来、到哪里去，不仅能帮助我们在现实世界中定位，也能帮助我们在网站等抽象空间中定位。UI
中的动画可以极大地帮助用户理解布局及其交互。它可以为你的项目增添趣味性、速度感和/或价值感，并有助于打造品牌。它也可能妨碍用户，使操作变得迟缓、令人困惑，或者更糟的是，引发有害的身体反应：比如晕动病和癫痫（我对这两方面都不了解。如果我搞混了，请留言）。
与 UI 中的大多数事物一样，动画是一种需要正确运用并用于特定目的的工具。

这些目的是：

• 提供有关可能发生的相互作用的信息
• 使布局更改可见且易于理解
• 强调 UI 元素之间的空间关系
• 提高 UI 的感知响应能力
• 打造知名品牌

✔️ 何时以及制作什么动画

ℹ️ 提供有关可能相互作用的信息

用户交互需要提供反馈。让用户知道他们的操作是否成功。这可以包括在视觉上按下按钮或在链接处于活动状态时更改其颜色。有些简单的例子没有在布局中融入空间变化，因此实际上不需要动画。
然而，有些情况下动画可以提供有用的反馈——例如像滚动结束动画（Safari 就支持这种动画）一样的滚动结束动画。

虽然平滑滚动本身是一种提供有关变化空间信息的动画，但过度滚动效果提供了额外的信息，即用户已经到达可滚动区域的末尾。

您还可以告知用户一些乍一看不太明显的功能。您的页面上有滑块？让它在初始化后立即滑动到第一个位置。这样，您就可以在用户进行交互之前，提示他们还有更多内容需要查看。

有些元素会将背景故事放大到极致，完整地讲述背景中发生的事情，从而在极小的空间内浓缩大量信息。动画在这里大放异彩，因为它无需用文字解释整个过程，而是可以直接展示出来。“展示，而非讲述”是叙事的重要组成部分。

（作者：Nerdmanship）

👀 使布局更改可见且易于理解

假设你有一个元素网格和一个按类别排序的过滤功能。用户打开图库，一眼就能看到前几张图片。此时，他们对页面内容有了大致的了解。现在，他们意识到自己实际上想要的是一组特定的元素，于是应用了一个过滤条件。图库会在此过程中重新排列。
如果这种情况立即发生，单个图片的内容似乎会发生变化。用户很难跟上这些变化，也很难记住自己第一眼看到的是哪些图片。
然而，当用户为重新排列添加动画效果时，新图片出现在视口中的位置就会变得清晰起来，从而更容易处理状态变化。Isotope
官方的演示很好地展示了这一点：

（戴夫·德桑德罗 撰文）

👪 强调 UI 元素之间的空间关系

基本设计原则之一是接近性：彼此靠近的元素属于同一元素。这也适用于动画。让你的动画在UI元素之间建立起联系。举个简单的例子：让你的工具提示从触发词的方向出现和消失。

（作者：克里斯·布拉科）

举个更高级的例子：假设有一系列裁剪后的缩略图，每张都会触发一个全屏叠加层。您可以只显示叠加层，但这样就无法显示全屏图像所属的缩略图信息了。

现在让我们通过从一个状态到另一个状态的小转换来修复它：

叠加层本身会向用户展示其来源，从而建立起自身与触发事件之间的关联。它不仅提供了用户刚刚操作的反馈，还提供了一种学习体验。用户可以期待在下一个缩略图上看到类似的行为。

通过缩略图，我们强化了用户已经触发的交互，但反过来也一样。让我们提示他们用户故事的下一步。
我们的用户饿了，想从我们的网站订购披萨。他们配置好了餐点，准备放入购物车并了解如何付款。让我们引导他们：

这样，我们就可以通过有趣的方式教会用户有效地使用 UI。

💬 提高 UI 的感知响应能力

🚀 感知速度

感知速度与测量速度略有不同。尽管有时动画从数学角度来看会减慢 UI 速度，但它们会加快实际使用速度。这听起来可能违反直觉，所以让我们先来理清一下。
用户可能等待 200 毫秒动画完成，但只需要 50 毫秒来处理视觉变化，导致下一个交互需要 250 毫秒。
如果没有任何布局变化的迹象，用户不会等待动画完成，但可能需要 350 毫秒来适应和理解突然的变化，这不仅会导致下一个交互的时间更长，而且会给用户带来更大的压力。

⌛ 加载动画

爱立信的一项研究将流媒体中的缓冲时间与心率增加联系起来。我们这里不是在谈论流媒体，但等待的压力仍然是真实存在的。
当您的页面加载特别重的资产或缓慢的 API 时，请务必让您的用户知道发生了什么事情。动画比静态加载屏幕具有明显的优势，因为它是移动的。它告诉您的用户它正在忙碌地工作。与动画相比，当显示无加载屏幕或静态加载屏幕时，用户往往会更快地放弃加载时间。
此外，请确保尽可能多地传达有关将要发生的事情的信息。布局骨架（下面第一个）似乎工作得很好，而微调器（下面第二个）总比没有好（来源）。

（作者：Razvan Caliman）

（作者：奥雷尔）

⏱️时间

我已经给出了一些数字，所以让我们来谈谈时间（双关语）。
许多项目对所有动画都使用一个时间值。请不要这样做。相反，应该单独考虑每个动画。大动作比微小变化需要更多时间。文本颜色变化需要 100 毫秒看起来可能没问题，但对于弹出的覆盖层来说这太快了。更糟糕的是，它可能被视为输入延迟而不是转换，因为用户根本不会将您的动画视为适当的动作。
指示布局变化的动画应花费 100 到 500 毫秒，具体取决于它们的大小。100 毫秒被认为几乎是即时的。低于这个时间，您的用户可能甚至不会注意到您的动画。超过 500 毫秒，您可能会激怒用户，因为他们必须一遍又一遍地观看同样冗长的动画。请记住，您的布局动画可能会重复播放。远远超过 1 秒，您的用户就会开始失去注意力。
认知科学似乎在 200 毫秒左右找到了一个最佳点。所以我最好的猜测是从那里开始，尝试一下感觉最好的方法。

🍃 缓和

缓动与时间紧密相关。它描述了动画的加速度。
最简单的缓动函数是线性的，这意味着动画的开始和停止不会加速或减速。因为这样的动作在现实世界中没有起源。它们感觉非常不自然和机械，很快就会陷入恐怖谷效应。
大多数时候，这正是你想要避免的。你的目标是流畅、自然的动作。
你可以快速开始，缓慢结束（缓出），相反的动作（缓入），两者兼而有之（缓入缓出），以及介于两者之间的任何动作。甚至还有一个很酷的工具可以帮助你创建自己的工具。

加速和减速传达出重量和惯性的感觉，并模仿物理物体——我们大脑已经习惯的东西。它们不太容易被察觉。
与时间安排一样，重要的是要考虑每个动画的个体差异，而不是仅仅创建一条缓动曲线并将其应用于所有动画。

对点击做出反应的动画元素在缓出时会感觉更加敏捷。

对光标悬停做出反应的元素在缓入缓出时会显得更平滑。
这是因为用户点击时有明确的意图。这是一种主动输入，而不是悬停。

启动悬停事件是一种更被动的输入，更多是“意外”发生的。需要注意的是，悬停在元素之外通常被视为一种更主动的交互，因此可能更适合使用缓出（ease-out）的方式。

您可以利用差异让用户探索他们尚未触发的功能（被动）并对他们已经触发的事件提供反馈（主动）。

链接或按钮等需要立即做出反应的元素不应该等待动画完成后再向用户发送反馈，而应该在触发后播放动画。

（马克斯·卡鲁瓦 撰文）

✨ 打造知名品牌

这就是你来这里的目的，对吧？炫酷炫目，设计师的虚荣心。
让所有元素完美契合，并在你的 UI 中打造无缝衔接的体验，这本身就很有趣。让你的过渡效果保持一致的，不是它们的制作方式，而是它们带来的体验。

• 想要传达一种轻盈透明的感觉吗？试试缩短动画时间，并强调缓和效果。
• 想要安全感和力量吗？试试更长的时间、更松弛的缓和曲线，甚至更少的动画。
• 想玩玩吗？试试负缓和曲线，让你的动画像卡通一样朝相反方向移动，积聚动量，然后再开始。或许可以考虑在入口页面顶部添加一个英雄动画。或者找一些奇特的形状来打造一个标志性元素，就像 Smashing 的用户头像和图标那样。这方面很难给出建议，因为它要具体情况具体分析。

👮‍♀️ 何时以及什么不该动画

😗 尊重你的用户

现代浏览器都实现了prefers-reduced-motion属性，它可以告知你的网站用户是否不喜欢动画。这有很多原因——从健康问题、屏幕限制到个人喜好。如果用户有办法告诉你他们不想看到你那些花哨的动画，你就不要显示它们。尊重他们的决定，并提供关闭动画的方法。

😵 小心使用大型全屏动画

如今，许多人都坐在大型宽屏显示器或多显示器设置前，或者完全专注于手机屏幕而自己也在运动。这些情况对于人脑来说难以处理，有时会导致晕动病或其他身体反应。移动构成注意力中心的元素的动画可能会被视为扰乱用户周围的物理空间。
虽然这并不总是会导致晕动病，但总是很难处理。这种情况实际上类似于晕船或宇航员在零重力下所经历的。
作为一个经验法则：动画越大，越容易引起这些反应。
请注意这一点。如果有疑问，请找一个容易受到影响的人并与他们一起测试您的布局。如果仍然有疑问，请稍微降低音量。

🤯 不要分散你的注意力

内容为王。如果你的动画过于烦人，导致用户难以集中注意力于文本，那么它就失去了它应有的作用。如果它让你的内容难以阅读，也同样如此。
务必了解你希望用户关注的地方，然后使用动画引导他们。
要做到这一点，我们必须巧妙一些。

• 我们将人造的数字动画伪装成自然动作（参见有关缓和的段落）。
• 我们力求使它们简短而信息密集。
• 我们不会为不必要的东西制作动画。我们的动画有明确的起源（例如用户交互或推送通知）和明确的目标。

⚙️ 功能动画

这就是整篇文章的核心。问问自己，一个动画是否满足了用户的需求。如果没有，那它可能纯粹是为了美观，因此需要重新考虑。
我想将纯粹的美观动画与代码异味进行比较。它们并不总是坏消息，但它们会发出警告。代码异味是重构的起点，而美观动画则是整理 UI 的起点。

♿ A11y 和渐进式增强

您可能很想先将元素设置为不可见，然后再触发一个漂亮的淡入动画。试想一下，如果动画加载失败或被用户挡住，会发生什么。元素会一直不可见吗？理想情况下，动画只是锦上添花。如果没有动画，蛋糕就没那么美味了，但它仍然是蛋糕。
您是否通过动画来传达信息？请确保为屏幕阅读器提供替代方案。设置您的 aria 属性。请考虑认知和视力障碍人士。

📚 延伸阅读

• Material Design 是最好的设计系统之一。他们有一些关于动效的详尽指南：https://material.io/design/motion/#
• 关于功能动画的一篇好文章：https://startupsventurecapital.com/your-ui-isn-ta-disney-movie-703f7fbd24d2#.ls9jjs76l
• 减少感知加载时间：https://wp-rocket.me/blog/perceived-performance-need-optimize/
• 对缓和函数的深入研究：https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/