在用户体验中，如果使用得当，动作和动画可能是有用的和交流的。运动通常是最合适的一种形式微妙的反馈为microinteractions，而不是为了取悦或娱乐用户。在本文中，我们探讨了有用的、不引人注目的反馈动画的目的。在第二篇(即将发表的)文章中，我们将讨论在时间和运动方面的细节，以使这些动画看起来流畅和自然。

UI motion最大的优点(同时也是缺点)是它吸引用户关注．我们的周边视觉(特别是通过人类视网膜的杆状光感受器)负责检测运动。从进化的角度来看，我们能够察觉到视野中心以外的运动，这当然是一种优势:我们能够识别危险并保护自己。但这意味着我们是敏感的，而且容易变得敏感心烦意乱通过任何类型的运动(有意义或没有)。这就是为什么用户界面的移动很容易变得令人讨厌:很难停止关注它，而且，如果与手头的任务无关，它会大大降低用户体验(就像任何遇到移动的网络用户一样)广告可以证明)。

虽然动画可以是有用的，可以构建用户的期望对于用户界面，它们的使用应该轻描淡写——主要是作为一种工具，为用户提供容易注意到的、流畅的反馈。

UI动画的目的

当以一种微妙的方式使用动画时，它可以帮助用户建立关于系统如何工作以及他们如何与它交互的心理模型。动画对于用户体验来说就不那么重要了，因为它们只是在过渡时刻填充时间的视觉刺激(事实上，在可用性测试中，正是这些暂停时间的动画经常让参与者感到沮丧)。而不是使用动画来提供表面高兴(很快就变坏了)，动画可以用于可用性:作为系统当前正在发生的事情的线索，作为UI元素将如何表现的符号，以及作为用户在信息空间中的位置的容易理解的空间隐喻。

运动的反馈

动画通常作为一种明显的反馈形式来帮助系统识别动作。一个普遍存在的例子是，当导航菜单在页面上滑动时的动画汉堡图标被点击。因为我们的视觉系统是如此适应运动，一个简短的动画可以确保用户看到反馈。

美国自然历史博物馆:当点击展览在页面中间的菜单图标，一个菜单面板从页面内容顶部的左侧滑过，而不是像一个新页面那样突然出现。

iPhone的美食:当用户向购物清单中添加新商品时，购物清单功能会显示一个微妙的动画反馈:点击完成键盘上的按钮，刚才输入的单词(咖啡,在这种情况下)立即变成浅灰色，然后迅速变成黑色，表明它已被接受。同时，输入域淡入并向下滑动，表明它正在等待新的输入。

有时，静态视觉反馈由于c焊割失明．例如，人们在点击后可能不会注意到购物车标识的更新添加到购物车按钮。动画能够增加注意到反馈的机会。(另一个选择是使静态反馈更加突出-例如，通过一个对话框或使用一个更大的徽章。这两种解决方案都可能比简单的动画更具侵入性。)

一个电子商务产品页面，在添加商品到购物车时没有动画反馈
Cuisinart.com:在用户点击之后添加到购物车,购物车面板只是简单地更新，没有动画。因为徽章很小而且离。很远添加到购物车按钮(很可能是用户正在看的地方)，很容易错过这个更改。结果可能是用户多次向购物车添加相同的产品。

动画也可以作为一种反馈形式之前用户提交一个操作，例如在使用拖放对列表重新排序时预览项目的新位置。

Airtable:当使用拖放来重新排列表中的列时，在用户释放并提交操作之前，会有一个微妙的动画预览新顺序。

传达状态改变的动议

运动可以用来表示接口切换到不同的状态——例如，由于模式改变。模式这通常是一个很难向用户传达的概念，但动画可以通过两种方式提供帮助:(1)让模式变化变得明显;(2)提供模式转换的概念隐喻。例如，在单击一个铅笔图标后，将其变形为一个磁盘表示从编辑来保存模式比即时切换一个图标为另一个更清晰。

材料设计:一个铅笔图标转换成一个+图标有助于沟通的区别编辑模式和添加新模式。

除了显示模式或数据视图之间的转换外，动画还有助于传递不是由用户操作触发的状态变化。例如，加载指示器显示系统还没有准备好接受输入。其中一种形式是“骨架屏幕”(一种占位符UI，看起来像加载页面的线框，没有内容)，它是由强光穿过它而产生的动画。

Hipmunk:当加载航班搜索结果时，Hipmunk提供了一些动画提示。首先，有一只动画花栗鼠假装会飞。(虽然花栗鼠很可爱，但对反馈并不是必要的，但有助于建立品牌基调。)然而，与此同时，出现了其他更易于交流的动画:航班结果的数量从0稳步上升到754，这表明系统正在同时执行多个联邦搜索。另外，一个占位符会显示航班结果加载时内容将出现的位置。一个进度条，以及两个动画椭圆，表示结果仍在加载中。最后，当加载新的结果和相关顺序发生变化时，一个微妙的动画显示在列表中出现的新结果，这意味着搜索结果的顺序正在动态变化。然而，同时出现的动画数量是压倒性的:这些动画吸引用户注意力的能力被其他动画的竞争所削弱。

空间隐喻和导航运动

复杂信息空间的结构通常很难在不消耗用户认知资源或占用过多屏幕空间的情况下与用户进行沟通。浏览导航菜单，树形图，甚至面包屑要弄清楚自己在信息层级中的位置是一项复杂的认知工作。虽然动画本身并不能替代带有清晰、无品牌标签的可见导航，但它可以向用户指示他们在一个过程或层次中移动的方向;这补充提示可以使复杂的IA导航更加直观易懂。

缩放动画可以帮助用户理解他们进入层次信息空间的方向，而不需要看树形图。缩小显示更少的细节，但更多的对象，因此暗示用户进入层次，而放大显示更多的细节，但更少的对象，造成更深层次的印象。

iOS Photos使用缩放隐喻来显示用户在信息空间中的位置(在这种情况下，表示为我的狗达芙妮无尽的照片库)。之间年,月,天有一个微妙的放大或缩小动画，帮助用户了解他们是上升还是下降的层次照片。这种方法有助于将用户的注意力集中在内容上(可爱的狗照片)，而不是导航上铬．

同样，幻灯片动画有助于确定用户在结账等过程中是向前还是向后移动。

美国铁路公司(Amtrak)展示了一个微妙的幻灯片动画，表明用户正在预订火车的过程中向前移动。

动画还可以防止迷失方向，并告诉人们他们是否在同一个页面上或已经移动了——特别是在移动设备上，由于屏幕太小，上下文可能会丢失。手风琴，锚的链接，如果更改立即出现，菜单覆盖可能会让人失去方向感或困惑;因为菜单覆盖会填满整个屏幕，所以如果没有动画提示，就很难理解覆盖和底层页面之间的关系(例如，“这个内容是一个新页面，还是别的什么?”)。(为什么用户知道他们在哪里很重要?如果他们认为他们在一个新的页面上，他们经常会被诱惑使用回来按钮导航到上一个视图;不幸的是，在覆盖或手风琴样式的情况下，该操作将把它们从页面中带走，而不是简单地关闭元素。)

WebMD:当在页面上打开手风琴时，相关的内容会立即显示在屏幕的顶部(没有动画)。用户可能会认为新内容出现在一个全新的页面上。一个滚动的动画(显示页面如何移动，使手风琴位于屏幕的顶部)，然后是一个移动的展开，可以帮助用户理解这不是一个完全新的页面，而是页面内容中的手风琴。

MetMuseum:锚的链接通常会让用户感到困惑，但在这种情况下，锚链接使用平滑的滚动动画来显示(1)内容都包含在一个页面上，(2)它在页面上的位置。

运动作为一种能指

动画帮助用户理解如何与UI元素交互。动作的方向(或其他属性)表示可接受动作的类型。例如,一个卡它从屏幕底部向顶部扩展，向用户发出信号，向下拉可以关闭屏幕。屏幕右侧出现一张新卡片，表示可以通过向右滑动来关闭。

苹果音乐的iPhone:现在玩卡片动画以一种帮助用户理解该视图可以通过下拉而不是在边缘上向左或向右滑动而被取消的方式向上移动到合适的位置。

iPhone上的Car2Go:一个简短的弹跳动画是一个标志刷整个列表项显示选项。

抓住注意力和劫持注意力

因为人类的视觉系统对运动非常敏感(特别是对那些看起来似乎有运动为了更好)，动画可以用来吸引用户的注意力，无论好坏。一方面，它可以使一个微妙的符号显而易见，但另一方面，不必要的动画分散和惹恼用户。此外，使用动画来劫持用户的注意力或创建一个害怕失去是一个黑暗的模式:一种不道德的用户体验原则和认知心理学应用，让用户做他们通常不会做的事情。

良性:Refinery29在一个关于社交媒体对心理健康影响的故事中嵌入了一个民意调查，并在滑块的旋钮上显示了一个辐射光环，以加强符号并吸引用户的注意力。这种有限的动画使用是一种相对良性的吸引用户注意力的方法。如果动画遍布整个网站，这个动画将是一个分散可用性的问题。

分散注意力:在Outline的内容页面上，移动的歪歪扭扭的文字并没有带来任何好处，而是不必要地将用户的注意力从内容上转移开。

黑暗图案:warmlydecor.com上一个闪烁的倒计时时钟表明促销即将结束(一个令人费解的巧合是，无论你何时访问该网站，该网站上的每一件商品都将在不到一个小时内结束)。时钟激活了用户强大的损失厌恶本能，而闪烁(闪烁时数字会轻微放大)是很难避免的。

总之，当UI动画是微妙的，不引人注目的，简短的，他们可以改善用户体验，可以沟通反馈和状态变化，防止迷失方向，并加强符号。但它们不应该被过度使用，因为它们很容易让人不知所措，让用户分心。

参考文献

头,诉(2016)设计界面动画．罗森菲尔德媒体。

Saffer, d .(2014)。Microinteractions．O ' reilly媒体。

(2010)。它还活着!动画捕捉视觉注意力．心理科学21岁,1724 - 1730