​译者：Lily

来源：Medium-Tubik工作室

原文链接:https://uxplanet.org/ux-design-how-to-use-animations-in-mobile-applications-a8257ebffe90

在用户体验设计中，应用动画为界面带来了更大的创意空间，也是为什么我们要在界面中加入动画元素的原因之一。在今天的文章中，我们将考虑如何在移动应用程序设计中使用动画来为界面设计提供良好的的用户体验和顺畅的交互。

当所有的内容都集中到界面时，APP动画必须是功能元素而不是装饰。我们所添加的动画必须分析它们对移动应用程序的可用性和可取性，如何造成反面影响，请重新考虑该方法的使用。在交互过程中运动的优点和效用必须是显而易见的，良好的UI动画只会使界面更加出色。接下来看一下目前比较流行的动画类别有哪些：

反馈动画

是通知用户的操作失败或成功。它是用户和应用程序之间的通信线，它的创作灵感来源于我们真实世界中与物体的互动。例如，当你按下一个真实按钮时，您会感受到动作的强度和阻力。而在移动应用程序中，这种感觉是不可能的：您点击屏幕时，并没有物理反馈。这就是为什么我们要为屏幕设计交互的原因，我们的操作需要震动或者视觉信息来为应用程序提供响应。当我们要操作按钮时，点击按钮，切换、开关、勾号或者十字加号可以快速通知用户操作是否完成。

例如，我们购买电影门票时的交互流程。从放映屏幕到座位选择的转换是通过电影海报的动画制作的：屏幕转换成电影播放厅的图片。选择需要的座位，用户可以看到按钮颜色的转变来了解到系统是否接受了数据。

另一个例子的交互中可以看到给植物浇水，用户点击按钮，它将图像从下降到刻度，出现的勾号动画，表示所需的操作已完成。

即使是基本的标签导航，移动UI动画也可以为用户的操作带来乐趣。检查这个可扩展按钮的概念：通过一撮运动，它模仿与果冻等物质的弹出物理交互动作。

进度动画

如果页面的交互时间过长，用户必须等待，这时我们必须告诉用户正在发展的事情的进展。这种动画交互最大的优势就是为用户提供保证，使他们在使用产品的过程中感到愉悦。进度条和时间轴的运用使我们可以清晰的为用户提供发展情况：

告诉用户有关进度的信息

情感化设计，减少用户等待的焦虑感

优雅的设计，可以像病毒一样得到传播，让用户希望与他人分享，让用户参与其中

下面这个例子是一个时间轴的交互动画：从白天到夜晚的过度，而按钮显示数字的进度。

加载动画

加载动画是最广泛使用的交互动画类型之一。它可以定义为进度动画的子类型，因为它也是通知用户加载过程的活动。它有不同的变体，如加载器、预加载、拉动刷新等动画。

下面是Slumber应用程序中的puii-to-refresh的例子：拉动新剧集的标签，用户正在等待并看到加载的微动画，其中显示轨道库刷新正在进行中，而动画插图使得等待的时间并不那么无聊。

注意力动画

当用户与你的应用程序互动时，这种动画扮演用户体验的角色。他支持一般的视觉层次结构，动作引起用户的注意并将其引导至必要的细节。此外，通过动作，它可以吸引用户注意核心信息，从而提示要查看的内容。

Tasty Burger应用程序的这组交互动画功能在价格变化上使用的动画。流畅自然的动画给价格变动增添了生命。

过渡动画

过渡动画在交互过程中风格优雅，我们常见的引导页设计就采用这种典型的交互动画，从一个屏幕到另一个屏幕。

以下是Perfect Recipes应用程序中的一组过渡：用户根据他们的目标和饮食选择食谱，卡片之间的过渡起到良好的用户体验。

下面一个列子，当用户从饼图列表到列表视图保存和颜色标记时，这是转换过程的创意动画的另一个示例：动画使屏幕和数据可视化之间的连接彼此紧密连接，并让用户看到此链接。

营销动画

明智地将品牌整合到UI设计可以提高品牌的知名度。大多数情况下，它是徽标、吉祥物等的动画，通常使用场景在启动页面。这样的运用可以吸引用户对品牌视觉标志的关注。

通知动画

通知是吸引用户注意应用程序更新的标志。在动人的动画的支持下，通知变得更加明显，并且可以使用户不错过重要的信息的可能性更高。下面这个例子：通知不仅具有鲜艳的颜色，而且还具有模仿脉动的运动。

滚动动画

滚动是我们在web和移动界面中习惯使用的典型交互之一。动画的使用使这个过程增添了美感和优雅。请记住，滚动可以应用于不同的方向，垂直方向或者水平方向，如下面的Photo App所示：

故事和情绪化动画

在移动应用程序中使用动画的另一个原因是使其成为故事或游戏的一部分。动画贴纸，徽章，奖励，吉祥物 - 这些只是使应用界面有趣和生动的几种方法。例如，这里可以看到Mood Messenger的动画贴纸，反映出各种感受，它们可以为用户体验增添强烈的情感吸引力。

UI动画的优点与缺陷

在移动应用中的动画，设计师应分析他们可能对应用互动产生的积极和消极影响。

UI动画的优点：

保存了屏幕空间

提高了可用性

独创性

方便易用的互动

能够同时完成多个功能

加快互动过程

向用户提供明确的反馈

创造必要的期望

UI动画的缺点：

加载时间的等待

个别动画的运用容易使用户分心

耗费时间和精力的技术实现

文章看完了，有私货给你。这里有一份 【免费领取设计素材】 的机会，你要吗？

扫码一次性加入知识星球，不定期更新设计素材资源，可随时获得各种设计素材（UI设计界面、教学教程视频、app界面模版下载，还有相关PDF电子版设计书籍等你来领。统统都是源文件哦）。

获取方式：由于是新开账户所以前【10】名加入者是免费的，不收取任何费用。关注微信公众号“U点计”，回复【666】添加星主微信，私发免费入口给你，免费名额还有【3】 个，扫描可预览星球主题。机会难得快快行动吧！