动效是应用程序或网站开发的热点：部分人认为动效会使屏幕和页面超载，而其他人则表示它对用户体验有很多大的帮助。无论如何，大多数用户都认为动效是必须要有的。我们来看看哪些类型的UI动效受大家欢迎和广泛使用，以及它们是如何影响用户体验的。

加载和进度

这可能是众多的UI动效中最多样化的。它们的目的是告知用户它们在应用程序或网站上取得的进展。很难想象有什么比等待更糟糕的事情——加载和进度动效解决了这个问题。例如，pull-to-refresh动效显示页面正在重新加载内容。进度条告知用户进入过程的时间和完成完成的时间。

Icons8团队制作的Bright加载动效模仿了与等待相关的被公认的沙漏型图像。

Gal Shir的这个概念展示了付款确认的过程：当用户正在等待时，进度条正在填补的动效使用户对进度有更加直观的了解。

Dimest的进度条动画是基于引人注目的色彩对比度和添加到主要部分的小颗粒的特殊效果。栏右侧的计数器还包含进度百分比。

导航

这种类型的动画通过界面导航用户。它提示着某些元素是可点击的、可滑动的、可拉动的。例如，当Web界面布局中的某些东西在悬停时的动画效果，通过增强视觉层次和直观的导航，吸引用户注意交互的核心元素。

Minh Pham的这个移动概念具有照片的轻微的动效，提示用户可以移动。

Piotr Kohut在UI设计概念中的动画微交互：当您点击卡片时，它会以动效响应，向您显示按钮被按下的状态以及卡片的数量随动作的变化。

Dmitro Petrenko的动画概念具有显示按钮类别的顺序，这种方式让人感觉项目逐一被显示，而不是一次性将所有的东西统一显示。

Icons8团队的动效图标是快速吸引用户使其注意操作反馈的好方法。此外，它们可以用作网站上的悬停动效，以便向用户提示可以进行哪些交互。

Prekesh交互式标签栏是有趣的和引人注目的：配置文件图标向右或向左移动，就好像它正在查看用户按下的图标一样。

Oleg Frolov的动画交互概念显示了一个转换成光标的搜索图标

动作完成

另一种类型的UI动画对应用程序或网站的可用性具有战略意义。基本上，这个动效通知用户动作已经完成，例如：按钮被按下，菜单打开或关闭，文件上载，付款被接受等等进行反馈。

它为什么如此重要？因为只需点击屏幕或点击鼠标进行各种操作，我们就能了解正在发生的事情。它不同于物体间的相互作用。

简单的例子：用键盘输入文字，感受按键纹理，阻力和听到声音，与在智能手机屏幕上输入文字完全不同，后者没有给出任何物理反馈。因此，振动和视觉符号发挥了重要作用，让用户在交互过程中得到反馈。

当您点击电子商务网站上的“支付”按钮，但是没有任何反应时也会发生同样的情况。你会觉得付款完成了吗？你应该再次按下“支付”按钮，还是再注册一次支付方式并付款那么他将两次拿走你的钱？给出一个快速的视觉提示，例如更改按钮的颜色，将其转换为勾号符号或或者打开一个弹出窗口，提供进一步的细节，不仅可以帮助用户，而且能帮助那些不会乱花钱或数以百计的错误点击的企业主。

Gal Shir的这个简单动画显示了从待办事项列表中删除任务的过程。它同步模仿了我们在纸上所做的步骤：用户只需在文本上滑动，当复选框转换为勾选时，它就会被划掉。

Kreativa Studio的时尚动画概在屏幕显示中表现的较为出色，同时提供从系统到用户的快速反馈。

Anton Skvortsov与电影院应用程序的交互流程中将确认设置更改为从票证条形码中删除的标签。

Jakub Antalik的这个移动界面显示了勾选动画，以标记动作在单独的屏幕上完成。

滚动

我们花了几个小时的时间滚动可能没有特效效果和动画效果。然而，加上动态照顾使得过程更加优雅和谐。它经常模仿来自物理世界的自然相互作用，并赋予界面整体外观。滚动可以应用于不同的方向，不仅是垂直方向，也可以是水平方向。

然而，这不仅仅是关于美。这种动画还可以帮助支持屏幕上更多空间的视觉错觉，或者快速阐明元素的限制。特别是在移动界面和有限的屏幕空间。

Nathan Riley的网站滚动动画创造了层次互动的效果，使页面看起来完整而美观。

在Tubik的这个概念中，应用程序库中的水平滚动使移动过程感觉像异步移动。

Nathan Riley对角卷轴的实验动画：结合大胆的色彩和引人注目的形象，使它看起来既新颖又时尚。

Robbin Senijn的活泼的滚动动效将滚动和视觉拆卸物品形象和谐地结合起来。

转变

在许多设计师的作品集中都可以找到转换这一动效的实验。动效过渡为用户界面的交互增添了原创性和趣味性。它们允许应用程序、登录页面或网站脱颖而出。更重要的是，他们经常与现实世界有着强烈的联系。当网页像纸质杂志的页面翻过来一样，或者像真实的那样拉出卡片时，它会是多么吸引人的，令人难忘。它甚至可能是用户在网站上停留更长时间的原因（这对SEO有好处）或APP。

Zhenya Rynzhuk的优雅的设计特点是翻页与翻页之间的过渡。

Minh Pham的UI概念：产品图像屏幕之间过渡的动效是基于物体图像的光滑运动和下面页面指示符的同步运动。

在Anton Skvortsov的这个概念中，动效让你感觉你正深入一个屏幕，而不仅仅是从一个屏幕移动到另一个屏幕。

解释器

这种类型的动效通常出现在教程、工具提示和具有信息性视觉内容的屏幕中。Motion允许设计师吸引用户注意图形并提供快速提示。在这里您还可以找到动画人物和插图。

Adam Zielonko的移动入职教程的概念：动效用于更好的叙事，并使视觉更具信息性。

Virgil Pana上传教程的另一个动作设计：图形看起来非常简单，但动画将它们转换成一个统一的故事，为用户提供简单明了的指示。

由MikołajSzymanowski制作的具有突出3D图形的动画教程，其中提供了关于应用程序如何以最少的元素产生清晰的视觉指导。

品牌化

在UI设计中整合视觉品牌标识现在并不是什么新鲜事。公司的颜色和排版、标志和吉祥物，提供可视化、自定义插图和照片。这些所有东西使产品和市场携手共进。动效在这个视角中越来越多地出现。例如，标志动效可以增添情绪并引起用户的注意。

Zhenya Rynzhuk的启动画面动效使应用程序加载过程变得美观，并为应用程序创造了与跑步者性质相呼应的动态。

Tubik的有趣标志动效为角色增添了俏皮感，使其迅速引人注目。

标志动效在屏幕上变化的移动UI设计理念由Johny Vino设计。

要考虑的要点

无论动效看起来多么吸引人和时尚，您在应用程序或网站中应用它的应该经过充分权衡和充分测试来决定的。让我们简要回顾一下交互设计中UI动效的优缺点和缺点。

优点：

• 增强了可用性

• 节省屏幕或页面的空间

• 为交互增加便利和速度

• 明确从系统到用户的反馈

• 支持视觉层次和完整性

设计师必须考虑的缺点：

• 更高的加载时间（与静态图像相比）

• 分心因素（太多动效对用户来说很累）

• 耗费时间和精力的技术实现（开发此类交互需要更多的工作时间）

因此，在做出决定之前，要将所有这些因素与用户一起分析。