在古代，人们就知道运动的巨大力量。文学、艺术、民俗、技术都见证了人们无数次尝试将运动解释为生命中最明亮的特征之一。

设计师在 UX/UI 设计的各种项目中工作，深刻意识到动画在现代高效用户界面中的作用和巨大潜力。经过深思熟虑和测试的界面动画以及图标，我们分析了它们的作用我们之前的一篇文章, 能够支持快速简便的交互，并具有实现多种功能的潜力。所以，今天我们想考虑界面动画的一些方面，它的功能，以及在现代设计中的作用。

拉动刷新 

动画的本质

在人类活动的不同领域如此流行的“动画”一词有着古老而浪漫的起源。它起源于拉丁词 anima，意思是“空气、灵魂”，在大多数情况下，它定义了首先通过运动为物体添加生命和灵魂的过程。因此，动画是创造运动幻觉的过程，自远古时代人们试图在雕刻或绘画中表现出运动幻觉时就开始了，并通过动画卡通在世界范围内广受欢迎。它为艺术家们打开了新的视野，创造了一个新的图像工作领域。

如今，动画作为实现成功交互的最重要工具之一，在界面设计中也赢得了特殊的地位。由于人大多是视觉驱动的生物，价值一千字的画面背后的力量在动画的帮助下变得更加强大。随着移动设备的快速增长，动画变得更加流行和多样化，使可触摸界面的流程变得快速而简单，尤其是在旅途中。因此，动画是使产品简单、清晰、明亮和以用户为中心的一种非常强大的方式，从而提供积极的用户体验。

 

iPad 应用程序交互 

 

界面动画的类型

动画是一种非常灵活和多功能的工具，可以满足不同用户的需求。一般来说，根据我们在不同网站和移动应用程序的界面工作的实践经验，我们可以在 UI 中定义几个动画功能组：

• 动画启用 微交互
• 动画显示进程的路径
• 澄清/解释动画
• 装饰动画

在更详细地研究它们之前，我们应该提到这种划分实际上是非常相对的，因为在大多数情况下，设计师会尝试同时应用动画项目的多个功能，以尽可能地发挥其潜力。

微交互动画

第一种类型，包括启用微交互的动画，也许是用户界面方面最有用的运动设计类型。它成为让用户快速清晰地进行交互的一种方式，通常模仿真实的物理交互，例如按下按钮、打开盒子或门、拉动把手等等。这种动画就像健康：当它正常工作时人们不会注意到它，但当出现问题时人们会理解它的重要性。由界面动画启用的微交互也几乎不会引起用户的注意，直到他们面临缺席问题的那一刻。

 

橡胶指示器 

 

微交互通知用户操作已成功完成：按下按钮、移动切换按钮、填写必要的字段、提供规则等。反之亦然，当步骤未完成时，他们可以通知用户成功，因此用户可以快速简便地获取有关错误或未完成操作的信息。

动画申请 微交互 通常很小，但作为界面的所有小而简单的元素，它们需要花费大量时间和精力才能变得清晰并提高产品的可用性。

 

日历应用动画

 

动画显示过程

这种类型的动画以某种方式扩大了前一种类型的潜力。它包括向用户展示流程阶段的不同方式，例如，不同类型的加载条显示流程进行的速度以及激活用户对可能的时间和获得结果的方式的期望。

 

时间线应用 

 

预加载器 

 

澄清/解释动画

这种类型的动画在不同地区广受欢迎 教程和工具提示，但实际上，它们的潜力非常广泛。通过细节的运动，人物、插图项目或文本，它们向用户提供有关如何处理应用程序的各种提示。此外，这种类型的动画可以吸引用户采取进一步的步骤，这些步骤乍一看并不那么明显，或者解释一些更复杂的操作。提供具有大量信息的产品的可用性尤为重要，用户可以通过这些信息快速找到实现其目标所必需的信息。因此，它们可以提高可用性水平，从而提高产品的可取性。

 

餐厅菜单 

 

天气应用

 

装饰动画

这种类型的动画现在经常用于创建原创和引人入胜的用户界面设计，这将是吸引人的和明亮的。装饰性动画使界面充满活力，可以添加有趣的细节，而不是提供成功交互的真正重要特征，而是使一般图像更有趣并脱颖而出。装饰性动画可以成为吸引用户注意力的好方法。但是，应该从长期留住用户的角度仔细分析它们。

优点和缺点

我们将提到的界面动画的基本好处包括：

• 提高可用性
• 独创性
• 方便简单的交互
• 同时完成多项功能的能力
• 加速交互过程的巨大潜力
• 向用户提供明确的反馈并创造必要的期望

上面提到的一切似乎都是在应用程序或网站周围使用动画的令人信服的因素，但在实践中，我们坚持在设计中应用动画时非常谨慎和明智。在我们的世界中没有什么是理想的，UI 中的动画也有许多缺点，在决定这个或那个动画之前应该仔细研究和分析。他们之中有一些是：

•  占用大量流量资源进行加载

如果你的动画过重，没有仔细分析产品的使用情况，可能会带来长时间加载的问题，惹恼用户，而不是创造积极的情绪
 

• 重载屏幕/页面

即使是纯粹的装饰性动画也应该有其基于一般概念的目标、位置和功能。用于纯粹吸引而不是增强积极情绪和有效交互的动画可能会失去大量用户，他们会找到解决问题的方法，而这些用户会因不必要的细节而过载。

此外，充满动画项目的屏幕降低了它们的潜力。打个比方，你可以非常喜欢一首歌，但如果你每天到处听一千次，你最终可能会因为厌倦了而讨厌它。动画带来同样的事情：当它是一个有趣且引人入胜的细节时，它将成功地帮助用户，并且与静态元素相比看起来更有吸引力。但是，如果您让页面上的所有内容都移动，用户很快就会感到疲倦。只有在需要时有机会停下来，您才能感受到运动的力量和乐趣。

• 分心

在用户界面设计的情况下，即使是最小的动画片段也应该与页面或屏幕的目标相对应。所以，首先，UI/UX 设计师应该研究和思考屏幕或页面的功能和目标，以及与他们互动的目标受众的能力和愿望。如果动画不能解决任何问题，不能增强积极的体验，不能支持用户，最好省略它，以便只用基本的细节来创造产品的性能，而不会使一般过程。

总而言之，当今的界面动画是留住用户的好方法，因为它使用户体验愉快并能够更快地解决他们的问题。然而，在决定将其应用于产品之前，设计师应该深入分析其提高产品可用性、实用性和吸引力的潜力。

原作者：Marina Yalanska

 

推荐阅读

移动友好型网站设计的7个技巧

9个构建视觉层次的有效提示

如何使用网格来改善视觉层次结构？

网页设计中的5种基本图像类型

黄金比例在UI设计中的运用

用户界面的3C规则：颜色、对比度和内容

UI设计中负面空间的重要性

用户体验：对设计一致性的洞察