UI中使用动效的3个关键点

系统状态

在你的程序在后台总发生一些过程，如正在从服务器下载数据，进行计算。这总是需要一些时间的。你需要让用户知道这个程序没有冻结，显示正在处理的状态。视觉交互给用户一种控制程序的感觉。

加载完成度

加载时间对大多数产品是不可避免的。而动效虽然不能解决这个问题，但会减少一点问题。

当我们不能缩短时，当然可以使等待变得更愉快。

有创意的过程动效可以减少用户感知的时间。动效影响用户感知你的产品，使它看起来比实际上更好。

下拉刷新

这组很流行的动效是“下拉刷新”，它发起一个移动设备上的内容更新的过程。

提示：刷新动效应该与设计整体匹配——如果应用很小，动效也应该是。

通知

因为运动会吸引注意力，动效是一个令人愉快的方式可以与没有太多经验的用户进行交互。

导航和转换

最基本的动效是转换。这种类型的动效背后的逻辑是帮助用户理解发生在页面上的布局的变化，改变了什么以及以后如何再次改变。一个典型的例子是一个汉堡包按钮，进行切换隐藏内容。

导航之间的转换

设计师使用动效在导航之间切换用户上下文，解释屏幕上的元素的变化。

视觉元素之间的层次结构和联系

动效可以完美的描述对象，并说明它们如何进行交互的。

功能变化

在某些情况下，设计师们不得不设计一个在一定条件下变化但操作按钮。我们经常在空间受限的手机设计中看到。

这种类型的动画显示了当用户进行交互时元素是怎样改变的。在下面的示例中，当用户按浮动操作按钮，加号变成了一支铅笔。这表示铅笔是主要的功能。这个小的细节意味着接下来发生不同的情况，知道图标意味着这两种状态。

视觉反馈

任何用户界面的视觉反馈都是至关重要的。它可以让用户有控制感，让用户感觉理解在给定的时间的当前上下文的系统。

反馈确认

用户界面的元素如按钮和控件应该有的，即使他们是在另一个图层后面。

在物质世界中，按钮、控件和其他与我们进行交互的对象。人们都会在交互中期望类似水平的用户界面控件的响应能力。

为了弥合这一差距，视觉和运动轨迹需要即时输入，动画的外观和方式直接进行操作。

可视化的行为的结果

动效可以提高每一个交互并且是加强用户预成型的操作。

在下面的例子中，当用户点击“支付”，一个转轮短暂出现在应用中表示成功的状态。动效让用户觉得他们可以很容易支付而且用户会很喜欢这样的细节。