[译] APP 动效设计，看完就会！（Material Design 设计者撰写）

• 原文地址：Motion Design Doesn’t Have to Be Hard
• 原文做者：Jonas Naimark
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Ryden Sun
• 校对者：Park-ma neuqzxy

动效让 UI 更有表现力和易于使用。即便动效有不少的潜能，但它多是设计原则中最少被理解的。这多是由于它是设计家族中最新的成员。视觉和交互设计能够追溯到早期的 GUI，但动效设计须要等待现代化的硬件来流畅的渲染动画才能够。UI 动效和传统动画的重叠也会让人模糊不清。在 Disney 的 12 个基本原则 上，须要花费一辈子的时间来掌握它们，这意味着 UI 动效设计也一样这么复杂吗？人们常常告诉我，设计动效是很复杂的，亦或是选择正确的值是很玄学的。我认为，做为 UI 中的重要领域，动效设计能够也应该是简单的。

从哪里开始

动效的主要工做就是经过具象化 UI 元素之间的关系来帮助用户浏览一个 app。动效也有给 app 添加特性的功能，经过带有动画的图标，logo 和插图；然而，构建良好的可用性应该比增长表现度更重要。在展现你特性动画的技巧前，经过专一于导航过渡，让咱们先从设计一个坚实的动效基础开始。

过渡模式

当设计一个导航过渡时，简易性和连续性是最关键的。为了实现这个目标，咱们有两种类型的动效模式能够选择：

1. 基于容器的过渡。
2. 不基于容器的过渡。

基于容器的过渡。

一些元素好比文本，图标和图片被组合到容器中

若是一个组合包含一个容器，好比按钮，卡片或列表，那么它的过渡设计应该是基于其容器进行动画的。容器一般很容易被发现，由于其可见的边界，但要记住，他们也可能在过渡开始前都不可见，就像一个没有分割线的列表。这个模式能够被分解为三个步骤：

1. 使用 Material’s standard easing 让容器进行动画（即它会先迅速加速而后慢慢减速至中止）。在这个例子中，容器的大小和圆角半径会从一个圆形按钮变化到一个充满屏幕的长方形。

2. 改变容器内元素的大小来适应宽度。元素被固定在顶端而且被容器遮盖。这为容器和其内的元素创造了一个清晰地联系。

慢动画来展现元素如何在容器内被缩放和遮罩

3. 元素在容器加速时经过淡出过渡离开。元素在容器减速时经过淡入过渡进入。流畅地处理效果的技巧是经过在元素迅速移动时让他们淡入/淡出来实现的。

慢动画来展现元素是怎么使用淡入/淡出的

【将这个模式运用到全部涉及容器的过渡中能够创建一致的风格。它也会让开始和结束的组合之间的关系清晰明了，由于它们被带有动效的容器链接了起来。为了展现这种模式的灵活性，下面是将它运用到 5 种不一样组合上的例子：

慢动画来展现开始和结束的组合是怎样被容器连接起来的

一些容器简单地使用 Material’s standard easing 从屏幕外侧划入。它划入的方向受它关联的组件的位置影响。好比，点击一个屏幕左上角的导航抽屉图标会让容器从左侧划入。

若是一个容器是从屏幕内出现，它会渐入而且放大。相比于从 0% 开始，它实际上是从 95% 开始放大，为了不过渡动画吸引了过多的注意力。大小改变更画使用了 Material’s deceleration easing，意味着它从最高速度开始，而后慢慢的减速到中止。对于退出来讲，容器只是简单地淡出，不进行任何大小的改变。相对于进入动画，退出动画被设计得更微妙，为了将注意力集中到新的内容上。

慢动画来展现容器是如何经过淡入和大小改变更画进入的

不基于容器的过渡

一些组合是没有一个容器让过渡在其上设计的，好比点击一个底部导航图标，带用户到一个新的目的地。在这些案例中，一个两步式的模式会被使用：

1. 开始的组合经过淡出退出，接着结束的组合经过淡入进入。
2. 随着结束组合淡入，它也微妙地使用 Material’s deceleration easing 动画来放大。一样，大小改变只被运用到进入组合上，为了强调新的内容。

慢动画来展现不基于容器的过渡是如何淡入/淡出和改变大小的。

若是开始和结束的组合有一个清晰的空间和顺序上的关系，它们能够共享一个动效来增强这个关系。好比导航一个分步组件时，开始和结束的组合在淡入/淡出时共享一个垂直方向的滑动动效。这增强了它们垂直方向的排列布局。当点击一个引导页流程上的下一步按钮，这些组合共享一个横向的滑动动效。从左向右移动增强了流程上的概念。共享的动效使用了 Material’s standard easing。

慢动画来展现垂直向和横向的共享动效

---

最佳的练习

保持简单化

考虑到它们高使用频率和可用性之间的强联系，导航过渡大多数状况下应该偏向于功能性而不是设计感。这并非说它们永远不具备设计感，只是肯定设计风格的选择应该根据品牌调整。抓人眼球的动效通常会被用到相似小图标，logo，加载符或是空状态这些元素上。下面一个简单的例子或许不会在 Dribbble 上得到不少关注，但它会让 app 更有可用性。

慢动画来展现不一样的动效风格

选择正确的持续时间和 easing

导航过渡应该使用合适的持续时间，将功能快速排出优先级但不要太快，这样会变得让人迷惑。持续时间是根据动画须要占据多少屏幕来选择的。由于导航过渡一般占据了屏幕中的大部分空间，300ms 的长的持续时间是一个不错的经验结果。相反，想切换这种小的组件会使用一个 100ms 的短的持续时间。若是一个过渡感受太快或太慢，以 25ms 为单位增量调整它的持续时间知道达到合适的平衡。

Easing 描绘了动画加速和减速的比率。大多数导航过渡都使用 Material’s standard easing，这是一种不均匀的 easing 类型。这意味着元素会迅速加速而后缓慢减速来将注意力集中到最终的过渡上。这种 easing 类型给了动画一种天然地感受，由于真实世界的物体并非当即开始或中止运动的。若是一个过渡看起来很呆板或者很机械，多是错误地选择了均匀的或是线性的 easing。

慢动画来展现不一样的 easing 类型

---

文章简要介绍的模式和最佳的练习旨在创建一个实用和精细的动效风格。这适用于大多数的 app，然而一些品牌可能有风格表现更强烈的需求。想学习更多的关于动效设计风格的，点击这里阅读咱们关于自定义动效的指南。

一旦开始考虑导航过渡，给你的 app 添加特性的挑战就开始了。在这里，简单的模式并不适合，而动画的工艺会真正闪耀起来。

特性动画能够给使人沮丧的错误增添一点趣味。

若是你有兴趣了解更多的关于动效的内容，必定要阅读咱们的 Material motion guidelines。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。