用户体验要好，App动画得这么作

如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

在用户体验设计方面，App动画的设计和添加，带给设计师无限的创造空间的同时，也成为设计师群体最具争议的话题之一。而针对这一话题，本文将就如何经过移动端App动画设计，提供更加优质的用户体验以及流畅稳定的交互，进行分析。但愿对你们有所启发：

当各种App部件汇集在同一个界面时，添加的动画就需更具目的性和功能性，而不只仅只是增添美感的装饰。并且，UI设计中的动效，从用户流计划和设计的最初阶段就应该归入考虑范围，以免不太成熟的设计，致使页面总体设计太过突兀或不够协调。固然，动画的添加也须要设计师事先详细分析其可能代来的影响，尤为是对于App可用性和需求性方面的影响。若是，从一开始就没法预见到任何积极正面的影响，那么，设计师就须要从新考虑，是否有必要添加动画，提高用户体验。尽管，动画设计的好处和效用显而易见，甚至可以轻松掩盖起其可能带来的不利后果。然而，成功高效的UI动画设计应是能为App锦上添花，而非多此一举。

下面，咱们就一块儿来回顾一些最受欢迎，且成功大幅提高用户体验的动画设计类型，总结相关的设计技巧：

反馈动画

反馈动画可以清楚直观地告知用户，某些操做已成功或失败。其目的旨在：保证用户与App之间保持必定的交流，即便是一些最基本的操做，其做用也是如此。因此，必定程度上讲，这类动画是模仿真实世界中人类与物体之间互动的一种方式。好比，在现实世界中，当人们按下按钮以后，通常会感觉到本身按下的力量，以及按钮的副作用力。而在使用移动端应用时，这样的交互感觉却没法实现：用户点击屏幕时，是不能得到相似的物理反馈。这也就解释了为何，设计师们努力尝试添加各类感应屏幕交互设计，经过震动和视觉设计等，得到相应的app响应。并且，这也是UI动画设计中会时常嵌入一些小游戏的缘由。经过动态的按钮, 页面切换, 开关, “对号”或“叉号”标志等，迅速通知用户：操做已完成。

好比，下面这个关于Cinema App购票流程的动画设计, 从放映屏幕到座位的选择方面都是经过电影海报风格的动画加以展现：用户选择好喜欢的座位后，该座位的颜色会相应发生变化，以代表系统已经为其选定好该座位。而以后，打钩符号的出现，则预示着购票过程已完成。

又如，下面这款浇水追踪应用的交互设计：浇水完成以后，用户点击查看相关详情，界面右边的蓝色水滴按钮就会相应的转变成打钩标志，通知用户：浇水操做已完成。

并且，即便是最多见的基础导航设计，动效的添加也能为用户提供反馈，带来乐趣。例如，看看下面这款关于按钮展开的概念性动画设计：经过一系列动效设计，模仿物体之间的相互做用，打造出若是冻般Q弹的展开效果。

进程动画

如若UI交互过程不可避免的须要花费较长的时间，而用户不得不等待时，他们更愿意或更但愿了解在其等待期间，软件究竟作了什么，以及其交互的进展状况如何。而进程动画的最大优点就是可以给予用户必定的保证，让他们在使用App的过程当中，认识到等待期间，应用正在积极解决他们的问题，从而对其充满信心，避免出现直接退出离开的状况。得到一个信心满满的用户，时常意味着软件须要提供更优的用户体验，并为更高的用户留存率奠基基础。而动态进度条，时间线以及其余动态部件的添加，可以轻松实现一举几得的相似效果：

• 告知用户交互进程状况
• 提高界面趣味性，弱化等待带来的消极影响
• 增强App设计的首创性，成为一大特点，鼓励用户积极分享，并吸引更多用户参与其中，实现必定的商业价值

又以下图，该款Timeline App，在用户等待期间，经过添加从白天到夜晚的场景变换，以及数字的动态变化，展示进程状况等动效，以减缓用户等待时的负面情绪。

加载动画

加载动画是设计师最经常使用的移动端动画类型之一。它也时常被视做是进程动画的一个细小分支。由于其主要目的也是告知用户：加载过程是活跃的，而且正在进行。并且，在实际的设计中，也存在不少加载动画的变体。例如：加载器，启动动画以及下拉刷新动画等等。

例如，下面一款Slumber app的下拉刷新动画，用户下拉刷新剧集以后，会看到一个加载轮动画，代表剧集库正在运行，加载相关剧集。而相应的动态插画设计，也有效地减缓了用户等待期间的枯燥乏味之感。

吸睛动画

当用户与App互动时，这类动画发挥着加强界面可供性的重要做用。经过打造吸睛，且可以引导用户了解更多产品细节的炫酷动画，创建必定的视觉层次结构。如此，以缩短用户浏览界面的时间，让其导航更加清晰直观。

以下图，这一款Tasty Burger App的交互设计，突出特色就是其动态的价格变换。因为融入了更多现实因素，显得更加天然。并且，其动效设计，美观吸睛，可以让用户情不自禁的集中于界面的核心信息，给予用户以无形的暗示，很是值得学习和效仿。

转场动画

转场动画为页面之间的相互转换添加了必定转换风格和美感，在App 动效设计中也是很是重要的一类。

以下面这一款Perfect Recipes app（一款可以帮助用户，根据各自目标和饮食限制，定制本身专属的食谱的软件）的页面转换设计。其目标页面之间的动态转换，就给用户提供了很是优质的用户体验。

并且，转场动画的设计和添加，不只可以增添整款App设计的美感，还能提高其视觉空间感，让界面布局更加宽敞和明亮。如图所示：

以下图例子，当用户须要经过饼图或列表视图之类图表展现相关数据时，动画设计可以有效的实现其数据的可视化展现，加深用户的印象。

营销动画

巧妙的将品牌融入UI设计，可以有效地提高品牌形象和知名度。而在具体的设计实例中，设计师时常经过在欢迎页面添加品牌logo，吉祥物之类相关动画设计，加以实现。而营销动画则一般侧重于引导人们对品牌视觉标志的关注，加深其品牌知名度。如下这款Whizzly（一款可以帮助年轻一代自我提高的应用软件）的动态Logo设计， 引人入胜，使人难忘，轻松实现与用户的情感交流，是一款不错的营销动画设计。

通知动画

通知是引导用户了解和使用软件更新的重要方式。经过添加必定程度的动效设计，让通知相对明显，引人注目，从而下降用户错太重要软件信息的可能。如图，在Home Budget App的界面设计中，软件通知经过明亮色彩的选用和跳动动效的添加，以吸引用户注目。

滚动动画

滚动交互是在Web和移动端应用设计中，最典型的交互设计之一。而动效设计可以极大地加强滚动设计的美感，使其更加新颖时尚，优雅和谐。这方面，设计师须要牢记的是：滚动设计能够应用到各个方向，而不只限于垂直方向。以下图 的Photo App, 也可添加水平方向的滚动设计：

故事化或游戏化设计

移动端App设计之因此须要添加动画设计，另外一个重要缘由就是：经过故事化或游戏化的动画设计，可以有效加强应用的趣味性和吸引力。动态的表情包，徽章，奖励以及吉祥物等，可以让界面更加生动有趣。好比，如下Mood Messenger的几款反映人类情感的动态表情包，应用到界面设计中时，就可以有效的加强用户的情感体验，吸引和留住用户，下降跳出率。

UI动画设计的优缺点

添加动画与否，须要设计师事先分析其可能带来的正面和负面影响，以权衡其必要性。如下就是一个简单的UI动画设计优缺点对照表，但愿能帮助你作出正确的选择：

移动端App动效设计优势：

• 节省界面空间
• 提高软件可用性
• 增强界面设计的首创性
• 提供更加简单、便捷的交互设计
• 提高多功能性
• 加快交互过程
• 提供清晰直观的用户反馈
• 建立必要的指望

而另外一方面，设计师也须要考虑到其可能带来的一些负面影响：

• 动画加载时间
• 增长界面干扰因素
• 费时费力的技术实现

总之，但愿设计师们可以更加全面，详细的考虑相关的优点和可能存在的问题陷阱，打造更加优质吸睛的移动端动画App。

相关性阅读：

15款最新家在动画设计，让等待成为一种享受

UI动画中的微交互设计技巧

提高用户体验：巧妙使用转场动画

为何动效设计如此重要

6原则，轻松搞定移动端App动效设计

做者：Marina Yalanska

原文连接：tubikstudio.com/ux-design-h…

学习工具，但不受限于某种工具。Mockplus作原型，更快更简单，如今下载Mockplus，免费体验畅快的原型设计之旅。