交互

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

2405

动效是应用程序或网站开发的热点：部分人认为动效会使屏幕和页面超载，而其他人则表示它对用户体验有很多大的帮助。无论如何，今天大多数用户都希望链接的动效是必须的。让我们看看哪些类型的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的优雅设计特点是翻页与翻页之间的过渡。