UI/UX设计中动画效果设计的作用和思路

设计师致力于UX/UI设计的各种项目，充分认识到动效在现代高效用户界面中的作用和巨大潜力，通过精心设计和测试的界面动效，以及图标，我们分析了其作用，使之能够快速方便地进行交互，并且有可能实现多种功能，今天我们来看看界面动效的一些方面，它的功能，以及在现代设计中所处的角色。

动效作为一种成功地实现交互的重要工具，在界面设计上也占有特殊的地位。因为人类大部分都是视觉驱动的生物，所以价值千字图片背后的力量在动效的帮助下变得更加强大。伴随着移动领域的迅速增长，动效也越来越受欢迎和多样化。所以，动效是一种让产品变得简单、清晰、明朗、以用户为中心的强大方法，并提供积极的用户体验。

动效是一种非常灵活和多功能的工具，能够满足不同用户的需要。一般而言，基于我们在不同网站和手机应用界面上工作的实际经验，我们可以在UI中定义一些动效功能组：

支持微交互的动效

表示过程路径的动效

阐明/解释动效

装饰动效

我们应该先说明一下，这个分类其实是相当有关系的，因为在大多数情况下，设计师一般都试图把动效的多种功能应用到动画作品中，以便最大限度地发挥它的潜能。

微交互动效

其中的第一类，包括支持微交互的动效，可能是最有用的用户界面运动设计类型。这成了一种让用户快速、清晰地进行互动的方法，通常是模拟真实的物理交互，比如按住按钮、打开盒子或车门、拉把手等。这一行为就像健康一样：人们在正常工作时并没有注意到它，但是当问题出现时人们会明白它的重要性。在面对缺席问题的时候，界面动效所支持的微交互也很难吸引用户的注意力。

已经成功完成了微交互操作：按下按钮，移动开关按钮，填写所需字段，提供规则等等。反之，当步骤没有完成时，他们可以通知用户成功，这样用户就可以迅速简单地获得关于错误或未完成动作的信息。

动效展示流程

这类动效可以在一定程度上扩展前面几种类型的潜能。这涉及向用户展示过程阶段的不同方法，例如，不同类型的加载条显示进程进展的速度，以及用户对可能的时间和获取结果的期望。

时间线应用

阐明/解释动效

这类动效在各个领域都受到了广泛的教程和工具提示，但是事实上，它们的潜力是很大的。透过动作、角色、图例或文字细节，为使用者提供不同的应用程式操作技巧。

而且，这类动效还能促使用户采取进一步的步骤，第一眼看起来不太明显，或者解释一些更复杂的动作。特别重要的是，要提供那些拥有大量信息的产品，用户可以迅速地找到必要的信息以达到他们的目标。这样，他们就能提高可用性水平，从而增加产品的可取性。

餐厅菜单

天气应用

装饰动效

这类动效经常被用来创造独创的、迷人的用户界面设计，而且很有吸引力，也很漂亮。装饰动效让界面更加生动，可以添加有趣的细节，而不是提供成功互动的重要特征，而是让普通图片更加有趣、突出。装饰动效是一种很好地吸引用户注意的方式。然而，应该从长期保留用户的角度对其进行仔细分析。

优点和缺点，下面要讨论的界面动效的基本优点包括：

提高可用性

独创性

简单易行地互动

能够同时实现多种功能

加快互动过程的巨大潜力

给使用者提供清晰的反馈，并建立预期。

看起来上述所有的东西都是在应用程序或站点上使用动效的重要因素，但是实际上，我们在设计中坚持要非常小心和明智地运用动效，目前世界上没有任何东西是完美的，UI动效也有很多缺陷，在做出这个或者那个动效之前，需要仔细的分析。其中有些是：

需要加载大量的流量资源，若您的动效过于繁重，没有仔细分析产品使用，可能导致加载时间过长，令用户恼怒，而不能产生积极的情绪

显示/页面过载

就算是一个纯装饰动效，也要根据总体概念，目标、定位和作用。用来单纯吸引而非加强积极情感和有效互动的动效，可能会失去大量用户，并为那些由于没有必要的细节而超载的问题找到解决办法。

最后，如果你让页面上的所有元素都动起来，用户会很快会进入视觉疲劳，只要在需要的时候开始动或停，才能感到这是一种产品的表现力的合理且有效的传达。