动态设计的好处和效用是显而易见的，甚至可能产生的不良后果也很容易被掩盖。但是，一个成功高效的UI动态设计，对于App来说应该是锦上添花，而不是画蛇添足。

因为移动终端中有很多组件组成一个界面，所以添加的动态效果需要更有目的性和功能性，而不仅仅是一个增加美感的装饰。而且UI设计中的动态效果要从设计初期就考虑到，避免设计不成熟，导致整体页面设计过于突兀或不协调。

当然，动态效果的加入也需要设计师提前分析其可能产生的影响，尤其是对App的可用性和性能的影响。

如果你从一开始就无法预见任何积极的效果，那么设计师就需要重新考虑是否有必要添加动态效果来改善用户体验。虽然动态设计的好处和效用是显而易见的，但它甚至可以轻易地掩盖其可能的不利后果。但是，一个成功高效的UI动态设计，对于App来说应该是锦上添花，而不是画蛇添足。

下面，我们就来回顾一些成功大幅提升用户体验的最流行的动态设计类型，并总结相关的设计技巧：

反馈效果反馈效果通知用户特定操作已经完成或失败。它的目的是：保证用户和app保持沟通的状态。所以，在一定程度上，这种动态效果是一种模仿现实世界中人与物交互的方式。比如在现实世界中，人们按下一个按钮时，一般会感觉到自己的按压力和按钮的反作用力。

但是，在使用移动应用时，这种交互的感觉是无法实现的：用户点击屏幕时，无法获得类似的物理反馈。

这就解释了为什么设计师们努力加入各种感应屏的交互设计，通过震动和视觉设计得到相应的app响应。而且，这也是一些小游戏经常被嵌入UI动态设计的原因。通过动态按钮、页面开关、开关、“复选标记”或“十字标记”标志等。可以快速通知用户操作已经完成。

比如下面这个电影APP购票流程的动态设计，从放映画面到座位的选择，都是通过电影海报风格的动态效果来展示的：用户选择了一个喜欢的座位后，座位的颜色会相应变化，以显示系统已经为其选择了座位。之后，勾号的出现表示购票流程已经完成。

再比如下面这个浇水追踪应用的交互设计：浇水完成后，用户点击查看相关细节，界面右侧的蓝色水滴按钮会相应变成一个勾号，通知用户浇水操作已经完成。

而且，即使是最常见的基础导航设计，动态效果的加入也能提供反馈，给用户带来乐趣。比如看看下面这个关于按钮展开的概念性动态设计：通过一系列的动态设计，模仿物体之间的交互来制造Q弹如果冻结的展开效果。

动态效果如果UI交互过程需要很长时间，并且用户需要等待，那么他们更愿意或者愿意知道过程中正在发生的事情和进展。进度动态效果最大的好处就是可以给用户一定的保障，让他们意识到在等待期间，应用在积极解决他们的问题，让他们充满信心，避免直接退出离开的情况。

获得自信的用户往往意味着软件需要提供更好的用户体验，为更高的用户留存率奠定基础。而添加动态进度条，时间行等动态组件也能轻松实现类似效果：

告知用户交互的进度，增强了界面的趣味性，减轻了等待的负面影响，加强了App设计的原创性，成为一大特色。它鼓励用户积极分享，吸引更多用户参与其中，实现一定的商业价值。再比如下图所示。这一段时间线是通过添加从白天到夜晚的场景变化、数字的动态变化、进度等动态效果来缓解用户等待时的负面情绪。

加载动态效果加载动态效果是应用最广泛的手机动画类型之一。它也经常被认为是进步效应的一个亚型。因为它的主要目的是通知用户加载过程是活动的和正在进行的。此外，在实际设计中，存在许多加载动态效应的变化。比如：加载程序，启动页面效果，下拉刷新动画等。

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

吸引注意力的动态效果当用户与App交互时，这种动态效果对增强界面的可操作性有着重要的作用。通过吸引用户的注意力，可以引导用户更多地了解产品细节的炫酷效果，建立一定的视觉层次。这样可以缩短用户的浏览界面时间，使其导航更加清晰直观。

如下图所示，这个美味汉堡应用的交互设计的特点是它的动态价格变化。有了更多的现实因素，就更自然了。而且它的动态设计很漂亮，很吸引用户的注意力，能让用户不由自主地把注意力集中在界面的核心信息上，给他们无形的暗示，值得学习和效仿。

过渡效果过渡效果为页面之间的相互转换增加了一定的转换风格和美感，也是App动态效果设计中非常重要的一类。

比如下面完美食谱app的页面转换设计。目标页面之间的动态转换为用户提供了非常高质量的用户体验。

而且过渡动画的设计和加入，不仅可以增加整个App设计的美感，还可以增强其视觉空间感，使界面布局更加宽敞明亮。

如图所示：

如下图所示，当用户需要通过饼状图或列表视图等图表展示相关数据时，动态效果设计可以有效实现其数据的可视化展示，加深用户印象。

营销效果巧妙地将品牌融入UI设计中，可以有效提升品牌形象和知名度。在具体的设计实例中，设计师往往会在欢迎页面中加入品牌logo、吉祥物等相关的动态设计，从而实现。营销效果通常侧重于引导人们对品牌视觉标志的关注，加深对品牌的认知。

Whizzly下面的动态Logo设计，引人入胜，令人难忘，可以轻松实现与用户的情感交流。是一个很好的营销动态设计。

通知活动通知是吸引用户注意应用程序更新的一种方式。通过加入一定程度的动态设计，使通知相对明显醒目，从而降低用户遗漏重要软件信息的可能性。

如图，在家庭预算App的界面设计中，通知不仅通过鲜艳的颜色来突出，还通过模仿运动的脉动来突出。

动态滚动是我们在网络和移动界面中使用的典型交互方式之一。在这个过程中，动画增添了美感和优雅，使之时尚、新颖、和谐。请记住，滚动可以应用于不同的方向，不仅是垂直的，也可以是水平的，如下图应用所示。

基于故事或者游戏的手机App设计需要加入动态设计。另一个重要原因是基于故事或游戏的动态设计可以有效地增强应用程序的趣味性和吸引力。动态表情、徽章、奖励、吉祥物可以让界面更加生动有趣。比如下面的Mood Messenger的动态表情，这些表情反映了人类的情绪，可以为用户体验增添强烈的情感诉求。

UI动态效果设计的利与弊动态效果是否加入，需要设计师提前分析其可能产生的正负效应，以权衡其必要性。我们准备了一份简短的名单来帮助你做出决定。

移动应用动态设计的优势：

节省界面空间，提高软件可用性，加强界面设计的原创性，提供更简单方便的交互设计，提高通用性，加快交互过程，提供清晰直观的用户反馈，创造必要的期望。另一方面，设计师也应该考虑一些可能的负面影响：

加载动画时间费时费力添加界面干扰因素的技术实现。原地址：https://blog . tubikstudio . com/UX-design-how-to-use-animations-in-mobile-apps/

本文由@小见见翻译发布。人人都是产品经理，未经作者允许，禁止转载。

来自Unsplash的图像，基于CC0协议。