动效设计如何影响用户体验？

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

1、加载和进度

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

Gal Shir的这个概念显示了付款确认的过程：当用户正在等待时，进度条正在填补以使其清楚。屏幕上的动画圆圈也营造出活跃过程的感觉。

 

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

2、导航

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

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

 

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

 

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

3、动作完成

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

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

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

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

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

 

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

4、滚动

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

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

Radesign的 Web UI动效， 其中的照片不会立即显示，而是通过滚动逐渐打开。

 

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

5、转变

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

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

 

6、解释器

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

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

7、品牌化

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

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

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

总结

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

优点：

• 增强了可用性
• 原貌
• 节省屏幕或页面的空间
• 为交互增加便利和速度
• 明确从系统到用户的反馈
• 支持视觉层次和完整性

缺点：

• 更高的加载时间（与静态图像相比）
• 分心因素（太多动效对用户来说很累）
• 耗费时间和精力的技术实现（开发此类交互需要更多的工作时间）。

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

 

 

原文地址：https://icons8.com/articles/interaction-design-basic-types-ui-animation/