设计：UI 动画优化技巧

简评：本文介绍了几种优化动画的实用技巧，从优秀到卓越往往体现在细节处。

tabs slide 内容过渡动画

• 好的动画会淡化页面直接的过度。
• 但更好的做法是使用连续的动画来来过度内容

当我们在设计交互式选项卡或弹出式菜单的时候，尝试将内容的问题和打开它的操作相关联，这样我们不单只能够实现一个很棒的过度动画，还可以清晰的知道不同内容直接的位置关系。如果你愿意还可以添加滑动手势。

连接卡片的共享元素

• 良好的设计会使用向左或者向右滑动来过度屏幕中的显示内容。
• 更好的做法是使用共享元素来建立两种状态直接的关系。

不同状态之间进行动画制作时，我们可以从共享元素出发，来链接不同的内容。例如右图 过渡前的卡片展开形成过度后的卡片。

使用瀑布流动画

左边的卡片通过滑动和淡入来显示。右边的卡片具有相同的动画，但每张卡片都有一个短暂的延迟

• 良好的设计会改变元素进入屏幕时的位置和不透明度。
• 更好的设计是迅速错开最每个元素的显示，效果看起来会更好。

不同元素间动画相关联

• 良好的设计会通过上下文中移动来显示动画。
• 更好的动画是，当显示的内容的时候能够影响到周围的元素。

这种设计可以帮助用户感知到内容周围的元素。

让菜单显示在上下文中

• 良好的设计会在点击的位置显示菜单。
• 更好的动画是菜单内容从点击的地方展开

使用 button 展示不同的状态

• 良好的交互会在点击按钮的时候显示指示性内容。
• 更好的交互式使用按钮本身来指示不同的状态。

尝试使用按钮的容器来提供状态的可视反馈。

使用动画来强调重要的内容

• 良好的设计使用颜色，大小和位置突出显示用户需要注意的元素。
• 伟大的设计使用动画来关注那个重要的动作，而不会造成干扰。

---

原文链接：Good to great UI animation tips
推荐阅读：推荐：深入浅出！从零开始学配色（内附配色工具和方案）