如今，界面动画很难给人留下深刻印象甚至感到惊讶。它显示屏幕之间的交互，解释如何使用应用程序或只是引导用户的注意力。在浏览有关动画的文章时，我发现几乎所有文章都只描述了有关动画的特定用例或一般事实，但我还没有遇到任何文章会清晰实用地描述有关界面动画的所有规则。好吧，在本文中，我不会写任何新的东西，我只想将所有主要原则和规则收集在一个地方，以便其他想要开始动画界面的设计师不必搜索其他信息。

动画的持续时间和速度

当元素更改其状态或位置时，动画的持续时间应足够慢，以便用户能够注意到更改，但同时又足够快，以免导致等待。

在动画中使用适当的持续时间。不要让它太快，也不要给用户留下足够的时间来打哈欠

大量研究发现界面动画的最佳速度在 200 到 500 毫秒之间.这些数字是基于人脑的特殊品质。任何短于 100 毫秒的动画都是瞬时的，根本无法识别。而超过 1 秒的动画会传达延迟感，因此对用户来说很无聊。

您应该最好在界面中拥有的动画持续时间

在移动设备上，材料设计指南还建议将动画的持续时间限制在 200-300 毫秒。至于平板电脑，持续时间应该延长 30%——大约 400-450 毫秒。原因很简单：屏幕的尺寸更大，因此物体在改变位置时克服了更长的路径。在可穿戴设备上，持续时间应相应地缩短 30%——大约 150-200 毫秒，因为在较小的屏幕上，旅行距离更短。

移动设备的大小会影响动画的持续时间

Web 动画以不同的方式处理。由于我们习惯于在浏览器中几乎即时打开网页，因此我们也希望在不同状态之间快速转换。因此，Web 转换的持续时间应比移动设备短约 2 倍——在 150-200 毫秒之间。在其他情况下，用户将不可避免地认为计算机冻结或互联网连接出现问题。

但。如果您要在网站上创建装饰动画或试图吸引用户对某些元素的注意力，请忘记这些规则。在这些情况下，动画可能会更长。

电脑大屏幕=慢动作？不可能！

您需要记住，无论平台如何，动画的持续时间不仅应取决于行进距离，还取决于对象的大小。较小的元素或具有小更改的动画应该移动得更快。因此，具有大型复杂元素的动画在持续时间更长时看起来更好。

在相同大小的运动物体中，第一个停下来的是经过最短距离的物体。

与大物体相比，小物体的移动速度较慢，因为它们会产生更大的偏移量。

动画的持续时间因对象的大小和行进距离而异

当物体碰撞时，碰撞的能量必须根据物理定律在它们之间均匀分布。因此，最好排除反弹效应。仅在有意义的特殊情况下使用它。

避免使用弹跳效果，因为它会分散注意力

对象的移动应该清晰锐利，因此不要使用运动模糊（是的，After Effects 用户，这次不是）。即使在现代移动设备上也很难重现这种效果，并且根本不用于界面动画。

不要在动画中使用模糊效果

列表项（新闻卡、电子邮件列表等）在出现之间应该有很短的延迟。新元素的每次出现应持续 20 到 25 毫秒。元素出现较慢可能会惹恼用户。

列表项的动画应持续 20–25 毫秒

宽松

缓动有助于使对象的移动更加自然。这是动画的基本原则之一，在《生命的幻觉：迪斯尼动画》一书中得到了详尽的描述，该书由两位关键的迪斯尼动画师奥利约翰斯顿和弗兰克托马斯撰写。

为了使动画看起来不机械和人造，对象应该以一定的加速或减速移动 - 就像物理世界中的所有活动对象一样。

与线性动画相比，具有缓动功能的动画看起来更自然

直线运动

不受任何物理力影响的物体线性移动，换句话说，以恒定的速度移动。正因为如此，它们对于人眼来说看起来非常不自然和人造。

所有动画应用程序都使用动画曲线。我将尝试解释如何阅读它们以及它们的含义。该曲线显示了对象位置在相同时间间隔内的变化。在当前情况下，运动是线性的，因此物体同时行进相同的距离。(y axis)(x axis)

直线运动曲线

例如，线性运动只能在对象更改其颜色或透明度时使用。一般来说，我们可以将其用于对象不改变其位置时的状态。

缓入或加速曲线

我们可以在曲线上看到，在开始时物体的位置变化缓慢，速度逐渐增加。这意味着物体正在以一定的加速度移动。

加速曲线

当物体全速飞出屏幕时，应使用此曲线。这些可以是系统通知或只是界面卡。但请记住，这种类型的曲线只应在对象永远离开屏幕并且我们无法回忆或返回它们时使用。

将卡扔出屏幕的加速曲线

动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到所有对象的移动持续时间和距离是相同的，但即使是曲线的微小变化也有可能影响动画的情绪。

当然，通过更改曲线，您可以尽可能像现实世界一样移动对象。

相同的持续时间和距离，但不同的情绪

缓出或减速曲线

它与缓入曲线相反，因此物体快速覆盖长距离，然后缓慢降低速度，直到最终停止。

减速曲线

当元素出现在屏幕上时，应该使用这种类型的曲线——它全速在屏幕上飞起来，逐渐减速直到完全停止。这也可以应用于从屏幕外部出现的不同卡片或对象。

减速曲线，呈现漂亮

缓入或标准曲线

这条曲线使物体在开始时获得速度，然后慢慢将其降至零。这种类型的运动是界面动画中最常用的。每当怀疑要在动画中使用哪种类型的运动时，请使用标准曲线。

标准曲线

根据材料设计指南，最好使用不对称曲线使运动看起来更自然和逼真。曲线的终点必须比起点更强调，以便加速的持续时间比减速的持续时间短。在这种情况下，用户将更加关注元素的最终移动，从而关注其新状态。

网站UI设计公司,UI外包公司,UI设计公司排名,UI设计公司,UI界面设计公司,人工智能体验设计咨询公司,高端UI设计公司