在用户体验中，运动和动画如果有节制地使用，可以是有益的和交流的。运动通常是最合适的一种运动形式不易察觉的反馈对于微相互作用，而不是为了引起用户的喜悦或娱乐。在本文中，我们将探讨有用的、不引人注目的反馈动画的目的。在第二篇（即将出版的）文章中，我们将讨论时间和动作的细节，以使这些动画看起来平滑自然。
UI运动的最大优点（也是缺点）是吸引用户注意.我们的周边视觉（特别是通过人类视网膜中的杆状光感受器）负责检测运动。从进化的角度来看，我们可以检测到视野中心以外的运动这一事实当然是一个优势：我们可以识别危险并保护自己。但这意味着我们很敏感，容易受伤心烦意乱通过任何类型的运动（有意义或无意义）。这就是为什么用户界面中的运动很容易变得烦人：很难停止关注它，而且，如果与手头的任务无关，它会极大地降低用户体验（就像任何遇到移动任务的web用户一样）广告可以证明）。
虽然动画可以是有用的，可以建立用户期望关于用户界面，它们应该轻触使用——主要是作为一种工具，为用户提供容易察觉、平滑的反馈。
UI动画的目的
当以一种微妙的方式使用动画时，它可以帮助用户建立关于系统如何工作以及他们如何与之交互的心智模型。动画对于用户体验来说并不那么重要，因为它们只是在过渡期间填充时间的视觉刺激（事实上，正是这些停机时间的动画经常阻碍可用性测试的参与者）。而不是使用动画来提供表面的喜悦（这很快就会变糟），动画可以用于可用性：作为系统当前发生的事情的线索，作为UI元素行为的标志，以及作为用户在信息空间中位置的易于理解的空间隐喻。
反馈动议
动画通常有助于作为系统已识别动作的一种明显反馈形式。一个普遍存在的例子是导航菜单在页面上滑动的动画汉堡包点击图标。因为我们的视觉系统与运动非常协调，一个简短的动画可以确保用户看到反馈。
有时，由于c语言的原因，静态视觉反馈被忽略吊盲。例如，人们可能不会在单击后注意到购物车-徽章更新添加到购物车按钮。动画增加了注意到该反馈的机会。（另一种选择是使静态反馈更加突出-例如，通过对话框或使用更大的徽章。这两种解决方案可能比简单动画更具侵入性。）
动画也可以作为反馈的一种形式之前用户提交操作，例如在使用拖放对列表重新排序时预览项目的新位置。
传达状态变化的动议
运动可用于指示接口切换到不同的状态，例如，由于模式更改。模式动画通常是一个很难与用户沟通的概念，但动画可以在两个方面提供帮助：（1）通过使模式变化变得明显；（2）通过提供模式转换的概念隐喻。例如，单击铅笔图标后将其变形为磁盘表示从编辑到拯救模式比立即将一个图标换成另一个图标更清晰。
材质设计：铅笔图标转换成+图标，有助于传达两种颜色之间的差异编辑模式和新增模式
除了显示模式或数据视图之间的转换外，动画还有助于传达非用户操作触发的状态更改。例如，加载指示器显示系统尚未准备好接受输入。其中一种形式是“骨架屏幕”（一个占位符用户界面，看起来像加载页面的线框，没有内容），通过光线在其上移动来设置动画。
Hipmunk：在加载飞行搜索结果时，Hipmunk提供了几个动画提示。首先，有一只动画的花栗鼠假装飞行。（虽然很可爱，但花栗鼠对反馈不是必不可少的，但有助于建立品牌基调。)然而，与此同时，出现了其他更具交流性的动画：飞行结果的数量从0稳步上升到754，表明系统正在同时执行多个联合搜索。此外，占位符还显示了内容在航班结果加载时显示的位置。A.进度条，以及两个动画椭圆，表示结果仍在加载中。最后，随着新结果的加载和相关性顺序的改变，一个微妙的动画显示列表中出现的新结果，并表示搜索结果的顺序正在动态变化。然而，同步动画的数量是压倒性的：这些动画中任何一个吸引用户注意力的力量都会因为来自所有其他动画的竞争而减弱。
空间隐喻与导航的运动
复杂信息空间的结构通常很难与用户进行沟通，而不会占用用户的认知资源或占用太多屏幕空间。浏览导航菜单、树形图，甚至面包屑找出一个人在信息层次中的位置是一项复杂的认知工作。虽然动画本身并不适合替代带有清晰、无标签的可见导航，但它可以向用户发出信号，告知他们在流程或层次结构中的移动方向；这补充的暗示可以使通过复杂IA的导航更加直观和易懂。
缩放动画可以帮助用户在不查看树形图的情况下了解他们进入分层信息空间的旅程方向。缩小显示的细节较少，但对象较多，因此建议用户向上进入层次结构，而放大显示的细节较多，但对象较少，给人一种深入层次结构的印象。
iOS照片使用缩放隐喻来显示用户在信息空间中的位置（在本例中，由我的狗Daphne的无休止的照片库表示）。中间人年，月和天具有细微的放大或缩小动画，可帮助用户了解他们在照片层次结构中是向上还是向下。这种方法有助于将用户的注意力保持在内容（可爱的狗照片）上，而不是导航上铬.
同样，幻灯片动画有助于确定用户在诸如签出之类的过程中向前或向后移动。
Amtrak显示了一个微妙的幻灯片动画，表明用户正在预订火车。
动画还可以防止迷失方向，告诉人们他们是否在同一个页面上或已经移动，特别是在移动设备上，由于屏幕太小，上下文可能会丢失。手风琴,锚链，并且如果更改立即出现，菜单覆盖可能会使人迷失方向或混淆；由于菜单覆盖填满了整个屏幕，如果没有动画提示，覆盖和基础页面（例如，“此内容是新页面还是其他内容？”）之间的关系很难理解。（如果用户知道自己在哪里，那又有什么关系呢？如果他们认为自己在一个新页面上，他们往往会被诱惑使用返回按钮导航到上一个视图；不幸的是，对于覆盖或手风琴，该操作会将它们从页面中移除，而不是简单地关闭元素。）
WebMD：打开页面上的手风琴时，相关内容立即显示在屏幕顶部（没有动画）。用户可能认为新内容位于全新页面上。滚动动画（显示页面如何移动，从而使手风琴位于屏幕顶部），然后进行移动扩展可以帮助用户理解这不是一个全新的页面，而是页面内容中的一个手风琴。
大都会博物馆：锚链通常会让用户感到困惑或迷失方向，但在这种情况下，锚链接使用平滑滚动动画来显示（1）内容全部包含在单个页面上，以及（2）内容在该页面上的位置。
作为能指的运动
动画帮助用户了解如何与UI元素交互。运动的方向（或其他属性）表示可接受动作的类型。例如，一个卡片它从屏幕底部向顶部扩展，向用户发出向下拉即可关闭的信号。屏幕右侧的新卡发出向右滑动即可关闭的信号。
iPhone的Car2Go：短反弹动画是刷卡整个列表项显示选项。
注意力攫取与注意力劫持
因为人类的视觉系统对运动非常敏感（特别是对似乎有运动的运动）生命度)，动画可以用来吸引用户的注意力，不管是好是坏。一方面，它可以使一个微妙的能指变得明显，但另一方面，毫无意义的动画会分散用户的注意力并使其烦恼。此外，使用动画劫持用户的注意力或创造一个害怕失去是一个暗色图案：不道德地应用用户体验原则和认知心理学，让用户做他们通常不会做的事情。
PrimeReald:29在社交媒体的心理健康效应的故事中间嵌入了一项民意调查，并显示了滑块旋钮上的辐射晕来强化能指并吸引用户的注意力。这种有限的动画使用是相对良性的（虽然大多没有帮助）。吸引用户注意力的方法。如果动画在整个网站上广泛传播，这种动画将是一个分散可用性的问题。
黑暗模式：warmlydecor.com上一个闪烁的倒计时时钟表明销售即将结束（令人费解的巧合是，无论你何时访问，网站上的每一个产品都不到一个小时）。时钟激活了用户强烈的损失厌恶本能，闪烁（闪烁时数字会细微放大）是很难避免的。
总之，当UI动画微妙、不引人注目且简短时，它们可以改善用户体验，并可以传达反馈和状态变化，防止迷失方向，并加强能指。但它们不应该被过度使用，因为它们很容易变得势不可挡，分散用户的注意力。
工具书类
校长，V.（2016年）界面动画设计. 罗森菲尔德媒体。
Saffer，D.（2014）。微相互作用.奥雷利媒体。
普拉特，J.，拉杜列斯库，P.，郭，R.M.，和艾布拉姆斯，R.A.（2010）。它还活着！动画运动捕捉视觉注意力.心理科学, 21, 1724–1730
分享这篇文章：