动效没那么难 

动效让交互界面富有表现力，便于使用。尽管它有如此大的潜力，但动效在所有设计学科中可能是最低调、最不被深入了解的，这可能是由于它进入UI家族时间较短造成的。视觉和交互设计可以追溯到早期的GUI，而动效则是因现代硬件逐渐成熟，可以流畅地呈现后，才逐渐流行开来。

UI动效和传统动画的重叠也使人感到困惑，而迪士尼的12条基本动画原则，也需要一定的时间来勤思苦练，那是否意味着UI动效也同样复杂？身边的人常和我说，设计运动很复杂，设置相关数值也非常模棱两可。但我觉得，动效设计可以变得很简单。

过渡模式 

动效的主要作用是通过说明UI元素之间的关系，来指导用户使用程序。通过添加图标、Logo和插画让程序更丰富；但要注意的是，建立可用性应优先于花哨的设计。接下来就从导航过渡开始，看看动效是如何提升界面效果的。

在设计导航过渡时，简单性和一致性都至关重要。为此，我们将从2种运动模式中来阐述：

-基于布局容器的过渡；

-无布局容器的过渡。

基于布局容器的过渡

文本，图标和图像等元素在布局容器内的分组

如果构图涉及按钮、卡片或列表之类的容器，那么过渡就是基于不同容器进行动效处理的。这种过渡模式直接就能看出容器边缘，但也不全这样，因为容器也可以在过渡开始前不可见，就像没有分隔符的列表项一样。此模式分为3个步骤：

-使用Material Design的标准缓动，对容器进行动画处理（这意味着它会快速加速，然后缓慢缓慢地静止）。在下图示例中，容器的尺寸和角半径从一个圆形按钮过渡为铺满整屏的矩形。

-缩放容器中的元素应与变化的宽度保持一致。元素被固定在顶部，这样可以在容器和内部元素之间建立清晰的连接。

容器内元素的缩放轨迹

-随着容器的加速，过渡期间退出的元素逐渐消失。随着容器减速，输入的元素逐渐淡入。元素快速过渡转化时，加入颜色变化，让用户清晰地感知。

元素应用渐变色配合淡入淡出

将这种模式应用于容器过渡，建立统一样式。它使start和end组合之间的关系更加清晰，因为它们是由动画容器链接起来的。为了显示这种模式的灵活性，这里将它应用在了5种不同的组合：

容器将开始和结束连接在一起

有些容器只是使用Material Design的标准缓动从屏幕外滑入。它滑动的方向取决于与其关联的组件位置。例如，点击左上方的导航抽屉，图标将从容器左侧滑入。

如果容器是从屏幕范围内进入的，则它会淡入并放大。它从95％开始，而不是从0％缩放进行动画处理，避免在过渡中引起过多关注。比例动画使用Material Design的减缓缓动，这意味着它以峰值速度开始，然后缓慢减速至静止。如果要退出，容器会简单地淡出而不缩放。出口动画的设计要比入口更微妙，以便将注意力集中在新内容上。

容器通过淡入和缩放动画进入

没有布局容器的过渡

有些设计组合并没有设定容器来进行过渡，例如：在底部导航中点击一个图标，即可将用户带到新的目的地。在这些情况下，将使用2种模式：

-动效开始时以淡入退出，动效结束后通过淡入进入；

-通过Material Design的减速缓和功能巧妙地放大。而缩放仅在动效开始时出现，以强调新内容的出现。

没有容器的渐变和缩放过渡

如果开始和结束动效具有明确的空间或顺序关系，则可以使用共享动效来增强它。例如，在步骤顺序上导航时，开始和结束会随着它们的淡入而共享垂直滑动动效，这加强了它们的垂直布局。当在一个流程场景中，点击“下一步”按钮时，则共享水平滑动动效。页面从左到右移动增强了顺序感。

垂直和水平共享动效

最佳实践 

把事情简单化

导航过渡通常应优先考虑功能而不是样式，这并不是说它们永远都不应被程式化，只是要确保风格选择是符合品牌的。醒目动效通常最适合于小图标、Logo、加载程序和空白状态之类的元素上。

不同的动作样式

选择正确的持续和缓动时间

转换过渡的持续时间，应以优先确定功能性为目标，但又不能快到另人迷惑。持续时间是根据动画占用的屏幕面积大小来选择的。导航过渡通常会占据大部分屏幕，因此300ms的持续时间是一个适度的时长。相反，诸如开关之类的小型组件，可以使用100ms的短时间。如果过渡感觉太快或太慢，请以25ms为增量调整其持续时间，直到平衡。

缓动描述了动画加速和减速的速率。大多数转换过渡都使用Material Design的标准缓动，这是一种非对称的缓动类型。这意味着元素会快速加速，然后缓慢减速，为的是将注意力集中在过渡的结束时。这种类型的缓动使动画具有自然的质量，因为现实世界中的对象不会立即开始或停止移动。如果过渡显的僵硬或很机械，则可能是错误地选择了对称或线性缓动。

不同类型的缓动

本文概述的模式及最佳实践经验，为的是创建一种实用而微妙的动效样式，而且适用于大多数应用程序。熟练掌握过渡转换，就可以挑战向程序中加入个性动画了。以上说的过渡模式仅是动效基础，还有更多的动画技巧等你去发掘尝试。

个性动画可以让报错变得更有趣味性

／End. 

相关引用
-翻译自原文
https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2
-图片、GIF来自网络
-未经UX Pedia允许不得转载



本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：UX辞典！