动效的运用可以让我们的界面更具表现力的同时，更易于被理解与使用。

我们早期的GUI其实只有视觉和交互设计，直到近几年的硬件技术发展成熟，动效才开始出现并逐渐模糊了与传统动画之间的界限。

可能对于做动画设计的人来说，需要花一辈子时间才能真正掌握《迪士尼的12条动画原则》，但这是否意味着设计UI动效也需要如此复杂？

动效的主要作用是表现UI元素间的关系、引导用户的操作；同时，动效还可以为界面里的图标、Logo和插画等赋予性格特点。

不过，在我们追求界面表现力之前，我们需要先保证界面的可用性。以下，我们会从一些基础的过渡动效开始讲解。

过渡动效的形式

过渡动效的设计关键在于简单和一致性。因此我们可将其形式分为2种：容器内过渡，非容器过渡。

一、容器内过渡

如果过渡对象是一个容器（比如按钮、卡片或列表等等），那么过渡的动效会基于这个容器的边缘进行设计，这种形式可以分为3步来实现：

1. 首先是容器形态的过渡变化。如下图，从一个圆形按钮过渡转变成一个铺满界面的矩形。

2. 其次是容器内元素的同步缩放。元素需顶部固定于容器再进行缩放，才能在容器与元素之间建立一个清晰的联系。

3. 最后是让退出的元素随着容器加速而淡出，并在容器减速时，淡入输入的新元素。让元素的淡化与其移动的速率相等，可以让这个过渡效果无缝衔接。

将这种运动模式应用到所有涉及容器的过渡中，可以让我们的用户建立统一的界面理解。

同时由于这种动效的承接，可以对模块“从哪来”“到哪去”有更清晰的表述。为了显示这种模式的灵活性，这里将它应用于五种不同的场景:

还有些容器的过渡只是单纯从屏幕的上方滑进，不过它们滑动的方向都是由与它相关的组件位置决定的。

如下图中，点击左上角的导航按钮，导航栏会从界面的左侧滑进：

如果一个容器是在屏幕中淡入并放大出现的（如弹窗），那它放大的过程其实是从95%开始而不是从0%开始放大，因为这样可以避免这个过渡过程引起用户太多的注意。

所以像这种缩放动效，是从运动曲线的峰值开始，再慢慢减速到静止的状态。

值得注意的是，这些容器的退出只会进行淡化而不会再缩放，以便于用户将注意力集中在新的内容上。

二、非容器过渡

如果过渡对象并不是一个成形的容器（比如点击底部导航栏切换整个页面等等），我们可以分2步来设计过渡动效：

1.退出的对象淡出，同时进入的对象淡入；

2.当进入的对象淡入时，也是逐渐放大的过程。注意这种缩放动效只适用于进入的对象（退出的对象只需淡出），这样更有助于强调新进入对象的内容。

如果在界面中，退出与进入的对象之间已经有清晰的空间或逻辑关系，那么“共享运动路径”可以帮我们强化这种关系表现。

比如下图对步骤的导航，每个退出与进入的对象都是共享一段垂直的滑动路径。（退出与进入对象在其运动路径的中间进行淡出淡入，而不是从路径的开头就开始运动）

如何实践应用

一、保持简单

考虑到导航栏的使用率很高，其过渡动效设计更需要考虑功能而不是样式。

但这并不说明这些过渡动效不可以有风格化的设计，只是我们需要确保这些风格是建立在其品牌基础上。通常，一些吸引眼球的动效设计会被应用在图标、Logo、加载动画或空状态中。

不过像上图这些过渡动效，虽然不会吸引用户太多的注意力，但可以让一个App的可用性得到提升。

二、正确的运动时长

导航的过渡不能太慢，它需要让用户快速进入对应的功能；但也不能太快，这会让用户在操作过程中迷失方向。

过渡动效持续的时间是由过渡对象的占屏比决定的。由于导航的过渡通常是包含整个页面的切换，所以运动的持续时间为300ms较为合适。相较之下，如果像开关这种小组件的过渡，只需要持续100ms即可。

如果你觉得过渡得太快或太慢，可以以25ms为单位进行调整，直到达到适当的平衡。

三、不对称的缓动形式

缓动描述的是运动对象加速、减速的速率。大多数情况下，过渡动效需遵循Material’s standard easing规律，其实这是一种不对称的缓动形式：

运动对象经过快速加速后，再缓缓减速的过程。这种缓动形式能让运动对象更加真实，因为我们现实生活中的物体运动也不会突然开始或停止。

如果选择了对称或线形的缓动形式，那将会让我们的过渡动效显得特别僵硬。

好戏刚刚开始

以上介绍的运动模式与实例应用，可以为我们的产品塑造出实用且微妙的动效表现。

一旦这些过渡动效处理好了，我们就可以开始为界面赋予一些性格化的表现。而这通过简单的动效是远远不够的，我们需要用到一些动画技巧才能实现它。

Powered by Froala Editor