原文链接：https://uxplanet.org/ux-design-how-to-use-animations-in-mobile-applications-a8257ebffe90
原文作者：Tubik Studio
在用户体验设计中，App动效是一个不断进行创意探寻的领域，同时也是热议的对象之一。在今天的文章中，我们将考虑如何在移动端设计中使用动效来提供积极的用户体验以及流畅的交互。
作为一个完整协调的界面，动效应该作为一个功能性元素而不是装饰。它需要在开始设计用户使用流程的时候便开始考虑动效元素。设计动效时，你需要分析他们对应用可用性和合理性上的影响。动效在交互过程中的优势和实用性应该是明显的，并且超过可能存在的缺陷。好的UI动效是锦上添花的。让我们来回顾一下增强移动端用户界面的热门类型。
反馈动画
反馈动画可以告知用户特定操作已完成或失败。这种动效保持了用户和应用之间的沟通，即使是基本的操作。它以某种方式模仿了物理世界中与真实事物的交互。比如，当你按下一个真实的按钮时，你会感受到执行这个动作时的力度和按钮的阻力。在移动端应用中，这是不可能的：你仅仅只是点击屏幕，不会有这种物理的反馈。这也是为什么与传感器屏幕进行交互时，我们处理震动和视觉信号来获得应用程序的响应。这是UI动效的解决方式。动态按钮，切换键，开关，打勾或叉会快速的告知用户操作是否完成。
例如，这是Cinema App在购票上的交互流程。从放映画面到选择座位的过渡是通过电影海报的动效实现：屏幕过渡到影厅的图案。选择适宜的座位，用户可以看到按钮如何改变颜色，并且明白系统已经接收了数据。对勾标识的动效标志着流程的结束。
另一个例子可以在Watering Tracher的交互里看到，给植物浇水后，用户点击按钮，图案从水滴变成对勾，表示已完成所需要的操作。
即便是基本导航，移动端UI动效也可以增添反馈和趣味性。看看这个按钮扩张的概念设计：轻捏的动态，模仿了像果冻一样的物理效果。
进度动画
如果交互的过程需要较长的时间，从而用户不得不需要等待，那么他们更宁愿知道正在发生的事情以及进展如何。这种动画交互的最大优势是为用户提供了保证，使他们在使用产品的过程中是有自主意识的，并且充满信心。充满信心的用户意味着积极的用户经验，并为优质用户留存提供良好的基础。进度条，时间轴，和其他动态元素的动画可以一石二鸟：
· 告知用户进度状态
· 提供趣味元素，消除等待可能导致的消极体验
· 有独创性、优雅地设计，可以成为用户想要分享给其他人和吸引更多用户使用的传播特性。
下面，你可以看到一个时间轴应用：在等待的过程中，动画图形从白天过渡到黑夜，而按钮则显示数字进程。
加载动画
这必然是移动端动效中最广泛使用的一种。它可以被规定为进度动画的子类型，因为它告知用户加载的过程是活动状态。它有不同的变化形式，例如加载，预加载，下拉刷新。
这是Slumber应用中下拉刷新的例子，拉下NEW EPISODES标签栏时，用户在等待时，可以看到一个加载环的小动画，显示刷新正在进行中，而同时动态插图使得等待的时间不会无趣。
提醒动画
当用户与你的用户交互时，这种动画扮演交互可视性的角色。它支持一般性的视觉层次，用动效抓住用户的注意力并将它转移到必要的细节处。这样一来，它节省了扫视全屏幕布局的时间，并且使导航更清晰和直接。
下面是Tasty Burger应用的价格变化动画动效交互。它为使用过程添加了生机，并使它看上去很自然。不仅如此，通过这组动效，它及时吸引用户的眼睛去关注核心信息，从而提示用户应该看什么。
过渡动画
过渡动画为屏幕间的切换交互添加了风格和优雅。
这是Perfect Recipes应用的一组过渡：用户可以基于他们的目标和饮食限制自定义自己的食谱。目标卡片的过渡通过动画支持提供了积极的用户体验。
然而，这不仅仅关于美观。在我们近期研究移动端应用概念UI动效的文章中，我们展示了一个动效过渡如何在元素间增加更多空间错觉的例子，这种方式使布局显得轻盈，比如下面的例子。
这还有一个富有创造性的过渡动效例子，当用户从饼状图切换到列表视图时保留颜色标记：动画使屏幕之间的连接与数据可视化彼此紧密相连，并让用户看到这种联系。
营销动画
明智地将品牌整合到UI设计中，可以在提高品牌知名度方面发挥重要作用。在许多的案例中，动态的logo，吉祥物等等，经常被有效地应用在欢迎页中。应用中的营销动画通常更侧重于吸引用户对品牌视觉标志的注意力。这是我们为Whizzly创作的动态logo，Whizzly是一款专为才华横溢的年轻人设计的自我推广应用。动画是引人注目的，令人难忘的，能让设计师增添生动的情感感染力。
动态通知
通知是吸引用户注意更新应用的标志。通过并不唐突的动效，通知甚至变得更显而易见，并且给用户提供了不会错过重要信息的机会。下面你会看到在Home Budget应用中一个相关UI元素的例子：通知不仅仅通过更明亮的颜色，也使用了模仿脉搏跳动的动效来变得更突出。
滚动动画
滚动是我们在Web和移动端界面中都习惯使用的一种交互。动效为过程添加了美感和优雅，使其是时髦的，创造的和和谐的。请记住，滚动可能会应用在不同的方向，不仅仅是垂直的，也可以是像下面展示的图片应用中那样水平的。
故事性和游戏化
另一个在移动端应用中使用动效的原因，是使他们成为故事或游戏的一部分。动态贴纸，徽章，奖励，吉祥物——这只是使应用界面有趣和生动的几种方式。例如，这里你可以看到Mood Messenger的动态贴纸反映了各种各样的感受：使用他们来给用户体验增加强烈的情感感染力。
UI动效的优缺点
在移动端应用中应用动效，设计师应该同时分析他们可能在应用交互中带来的积极和消极影响。我们准备了简短的清单，可以帮助你进行决策。
在移动端应用中动效的优势，我们会提到：
· 节省屏幕空间
· 增强可用性
· 独创性
· 方便且简单的交互
· 能同时实现多个功能
· 加速交互进程
· 为用户提供清晰的反馈
· 创造必要的预期
另一方面，设计师需要考虑的缺点：
· 加载时间
· 分散注意力的因素
· 费时费力的技术实现
