编者按:现在，我们每天都在使用各种各样的应用程序。我们会发现很多应用中的一些动态设计很有意思，比如不同平台的赞动画，加载动画等。一个高质量的动态设计可以让用户体验更好；本文作者阐述了APP界面动画交互的具体作用和实际案例展示，大家一起来看看。

动画是我们熟悉的东西，也是我们小时候看到的大画面。从小时候记忆中的电视动画片，到长大后的手机动画，我们都觉得它不再是一件神秘或奢侈的事情。

但是在浏览动画的过程中，也许我们完全沉浸在了当时那种美好多彩的画面中，却很少去探索和研究这个过程。

比如为什么动画比静态图片更吸引我们，为什么动画更有视觉上的感觉，为什么动画让我们觉得它是充满活力的东西。

这些问题都是我今天要讲的动画的核心:动画界面的作用。

一、动画界面的基本概念

动画界面的作用:因此，名称暗含了动画在界面中的主要目的和实用功能，而其背后隐藏的意义则是指动画带来的一些主观感受和体验。

我们都期望外界的事物或人按照我们想要的结果去移动或改变。即使我们不能，至少对方可以改变，这样我们不仅会觉得它有生命力，还会有一种潜在的意识，就是它可以互动！

APP界面的动画也有这样的目的。用户在使用APP时，预期的功能需求和反馈也希望界面能生动活泼，真实地回应用户操作后的感受；正因为如此，它可以提高用户对产品的认知和偏好。

接下来我们通过几个常见的APP界面操作进行动画演示和讲解:

二、加载状态

用户看到的产品是可视化优化设计后的可视化界面，但背后的逻辑其实是APP的多个数据和系统的展示。

当用户在界面中操作或查看某个内容或数据时，需要对APP的后台进行一次刷新和检索，然后显示在用户使用的APP界面中，让用户在操作后看到新的内容。

但是在网络不流畅的情况下，应该如何通过界面显示告知用户，他在这个操作之后没有死机或者延迟？

即在加载状态下使用动画显示。设计师要让用户知道，APP在自己操作后，正在毫不延迟的下载数据，并通过有效合理的动画展示当前系统的处理状态。只有这样，用户才能感觉到APP是可追溯的，有一定的控制感。

如果不能绝对缩短或解决用户的等待时间，就应该让用户的等待更加愉快，让用户少关注等待本身。

就像海底捞的等待体验一样，你可以在等待桌边享受小吃，也可以用手机控制LED屏幕进行对弈。

因此，创建加载动画是为了最大限度地减少用户对时间的感知，也是转移用户注意力的有效途径。

第三，下拉刷新

下拉刷新和刚才加载的效果差不多，唯一不同的是显示形式不同。虽然它们有相同的场景显示，但它们也有不同的场景显示。

比如加载可以从一个界面进行到另一个界面，也可以是下载游戏压缩包时的加载条；但是下拉刷新实际上已经固定了用户的操作形式。他唯一的操作场景是在用户手指滑下界面，界面同步滑下后刷新界面数据。其他的大致相同；动画可以梅花圈、小飞机漂浮、IP图像运行或跳点等形式展示。

APP中刷新动画的主要作用是在用户操作后，明确告知用户当前界面已经刷新，并要求他耐心等待结果表现，以便从操作前到操作中到操作后，有效显示完整的操作和可视化路径。

四.信息通知

大多数应用都会有消息功能，主要是显示系统的新消息和用户自行操作后的结果消息等。新消息来了，就像快递员给你发新快递一样，需要提醒，这个提醒需要动画来表现。

虽然有些APP的新消息提醒是以“小红点”显示的，但是根据用户心智模型的逻辑和实际场景，新消息的到来应该是通过小铃铛或者手机震动和声音匹配来提醒的；而且细微的动画消息提醒自然会吸引用户的注意力。因此，动画通知也是用户传达信息的一种令人愉快的方式。而且细微的小动画也不会影响用户的核心体验。

动词 （verb的缩写）导航转换

导航一般分为:顶部分类导航、底部标签导航和侧边栏导航。

首先说一下底部的tab主导航。主要控制APP界面的一级界面切换。一般点击后的反应是直接切换，过于花哨的切换动画好看；但是在真实的操作场景中，这么高的频率切换导航一次两次就不错了。如果太多，不仅会增加APP的加载速度，还会让用户产生视觉疲劳，所以直接切换时最适合动画显示。

其次是顶部分类导航。这里的导航主要控制某个界面中当前的一级切换，比如网易云音乐中的“广场”和“关注”。这里的导航动画可以用相对简单柔和的滑动方式显示。这样做的目的是为了让用户在操作后通过视线清楚的知道新的界面来自哪里。我想回到起点，怎么操作。通过视觉路径，我可以完美地形成从头到尾的视觉路线。

最后一个是侧边栏导航。这种导航的最终显示形式一般分为两种。一个结果是从页面左侧滑出导航，另一个是从顶部滑出导航；无论导航按钮滑出哪里，大部分都显示为面包按钮。当用户点击面包按钮时，界面从左侧或顶部轻轻滑出一个模态窗口，然后用户可以选择其他内容。

导航的交互动画功能是明确告知用户操作路径，让用户在触发选项后告知用户界面的变化过程，有效的让用户学会如何再次触发页面，回到起点。

不及物动词按钮过渡

只要界面上有一个很大很明显的填色按钮，那一定是很重要的存在。它不仅是一个APP的操作点，也是用户解决核心问题的必要途径，所以按钮过渡的动画需要精心设计。

简单实用的按钮动画是点击后滑入新界面，开发成本最低，但如果仍然遵循心智模型和视觉路径，按钮动画可以扩展到平滑扩展；比如扩展按钮，用户点击按钮后，按钮边移动边放大颜色区域，最后填充整个界面或者扩展区域界面；这样做的好处是可以引导用户清楚地了解APP页面上元素的排列变化，过渡动画实际上充当了页面不同状态之间的媒介，帮助用户更好地理解屏幕变化时发生的变化。

七、动画视觉反馈

动画视觉反馈对于任何APP来说都是非常重要的，可以让用户觉得APP在他的控制之下；当然，对于用户来说，控制APP意味着在操作APP的时候，APP要有一个上下文连接的过程，让用户在记住片段的情况下，简单的学习和基础操作路径和轨迹。

八.总结

交互动画的核心作用是告诉用户操作过程从哪里来，往哪里去。当然也包括了另一个场景，就是冲淡等待时间，刷新用户对产品的兴趣和满意度；而过渡性的增强型交互动画，不仅会提高用户满意度，还会增加APP的运行时间，降低用户满意度和视觉疲劳。

因此，设计师合理设计交互动画，掌握动态与静态的平衡是很重要的。