由于人类是视觉驱动的生物，图像的影响只有在动画的帮助下才会增加。我们的眼睛天生就会特别关注移动的物体，而动画就像糖果一样，吸引人的注意力，有助于区分应用程序和竞争对手。

截止到目前为止，越来越多的设计师将动画作为一种功能元素融入其中，以增强用户体验。动画不再只是为了娱乐；它是完成交互的最重要工具之一。

然而，动画在设计中只有用在合适的时间和地点的时候，才能够增强用户体验。好的用户界面动画是有目的的；它们有意义，而且功能性强。在本文中，我们将讨论功能动画在UX设计中的作用，并了解何时将动画运用到设计中。

什么是功能动画？

功能动画是嵌入在UI设计中的一个微妙元素，它是该设计功能的一部分。并且它强化了设计，具有非常明确和合乎逻辑的目的，包括：

1、减少认知负担

2、防止变化迷失

3、在空间关系中建立更好的联系

动画使用户界面栩栩如生。在以用户为中心的设计方法中，用户是主要焦点，用户界面需要直观、快速响应和人性化。功能动画就可以帮助你实现这些目标。

功能动画在用户界面设计中的作用

经过深思熟虑和经过测试的功能动画有可能实现多种功能。

用户操作的可视反馈

良好的交互设计提供反馈。这种反馈会让你觉得你正在与屏幕上的元素进行交互，并演示这种交互的结果（不管它是否成功）。

用户界面元素，如按钮和控件，即使它们位于一层玻璃的后面，也应该是可感知的。

按钮和其他活动控件应通过视觉反馈响应用户操作。（图片来源：Behance）

当您需要告诉用户操作结果时，视觉反馈也很很重要。在操作未成功完成的情况下，功能动画以快速、简单的方式提供有关问题的信息。例如，当输入错误的密码时，可以使用震动动画。这样很容易理解，因为晃动是一个普遍表达“不”的含义，就像摇头是人们相互反馈的方式。

用户看到此动画并立即了解问题。图片来源：thekineticui

目的

确认系统已收到用户的操作。

确认（或拒绝）用户的操作。

系统状态的可见性

作为尼尔森的可用性的10大法则之一，系统状态的可见性仍然是用户界面设计中最重要的原则之一。用户希望在任何给定时间知道他们在系统中的当前位置，并且应用程序不应该让他们猜测，系统应该通过适当的视觉反馈告诉用户发生了什么。

数据上传和下载得到过程是使用功能动画的最好时机。例如，下载进度条，给用户实时反馈和心理预期。

有趣的动画也会分散用户的注意力，并使他们等待更长时间。

功能动画还可以用于吸引用户注意应用程序中的重要状态变化，例如来电：

或收件箱中的新电子邮件。

目的：

提供系统状态的实时通知，并使用户能够快速了解正在发生的事情。

视觉提示

用户在第一次使用某个应用程序时，通常需要一些帮助来理解如何使用该应用程序。特别是含有不熟悉或者独特交互方式的界面（如手势操作的界面），这一点尤为重要。如果没有帮助，用户可能会对如何与应用程序交互感到困惑。

当涉及到教用户如何使用你的UI界面时，你应该提供一组视觉提示，来传达哪些是可能存在的交互。这种功能性动画驱使用户注意到可能存在的交互。

视觉提示可以让用户了解将要发生的事情。例如，可以在iOS相机应用程序（iOS 7之前）中找到功能动画，它为用户拍摄照片做准备。

==相机应用程序中的快门图像===

或者，通过演示设计中的某些功能是如何工作的，这种方式可以让用户采取进一步的步骤。同时，视觉提示也可以提高产品的可用性。

用途：

告诉用户即将发生什么给用户足够的心理预期  帮助用户定位自己在界面中的位置  告诉用户他们怎样做才能与屏幕上的元素进行交互

导航过渡

导航过渡是应用程序中状态之间的转换，例如，从主屏幕到细节屏幕。通常默认情况下的状态变化是界面之间很僵硬的切换，这样很难区分界面之间的层级关系。功能动画可以帮助用户更好的理解；它可以在导航上下文之间平滑转换，并通过状态的转换创建可视连接来解释屏幕上的变化。

导航过渡可以是分层转换（亲子过渡）或同行过渡（兄弟过渡）。当用户探索应用程序的更深层次的时候，将使用分层转换，这些应用程序是当前（父屏幕）的子级。运动突出显示从父母到子女（子元素）的移动，同时加强父屏幕和子屏幕之间的关系。

同行过渡发生在层次结构的同一级别的元素之间。例如，当用户浏览选项卡时使用此动画。

每个标签的内容和表面保持在同一级别，动画只是引导视图之间的焦点。

在这两种情况下，功能动画都可以帮助眼睛看到新对象在其显示的位置以及隐藏对象的位置（并且可以再次找到）。它提供了视觉提示，使交互更容易被发现并强调已发生的事情。

用途：

定义屏幕和元素之间的空间关系  通过帮助用户理解页面布局中刚刚发生的变化，避免出现意外的过渡

品牌塑造

通常情况下，有几十个应用程序具有相同的功能并完成相同的任务。他们可能都有很好的用户体验，但是人们喜欢的东西不仅仅是提供一个良好的用户体验。用户更希望与他们建立情感联系。

品牌动画负责参与品牌塑造。它可以作为营销工具-支持公司的品牌价值或突出产品的优势-同时使用户体验变得令人愉快和难忘。这种方法可能不是以用户为中心的设计，但它有一个功能性的目的。为了成功，品牌动画应该支持体验的连续性。

用途：

娱乐用户，为设计带来同理心和乐趣  创建产品的标签; 帮助用户与产品建立关联，增加品牌认知度

如何找到平衡

有用和炫酷的动画之间的平衡在哪里？花时间仔细考虑动画何时恰当的何时是不恰当的非常重要的。

动画的目的

动画应该是有目的性的，不要为了动而动。当一个动画不适合某个功能性的目的时，它可能会让人感到厌烦，尤其是当它减慢了一个没有任何动画的过程的时候。

请记住，用户出于某种目的访问网站或启动应用程序 – 我们需要在短时间内向他们展示他们所希望看到的内容。因此，当决定在应用程序中使用动画时，只有当动画有意义并且不会干扰用户成功完成他们想要做的事情时，才加入动画。

时刻牢记

即使是好的动画，如果使用过度也会很烦人。在设计动画时，问你自己一个问题：“动画在第100次使用时会很烦人吗，或者它是普遍清晰和不引人注目的吗？

原型和测试动画

在将UI动画添加到你自己的工作中时，与实际用户进行迭代原型设计和测试是非常正确的。原型设计是能够表达你打算如何在设计中使用动画的最佳方式。如果你使用交互原型，你将得到一个清晰的设计描述，关于怎样工作和应用程序的缺陷隐藏在哪里。通常，这会导致频繁的返工，因为动画的外观与感觉不同。因此，经常迭代和快速迭代！在最微小的细节上多次尝试和重复都会使你的动画很棒。

结论

如果你要在设计中运用动画，那么应该好好的创造关联，并且只有当动画是设计过程的自然组成部分时，这才是可能的。