[译] 小 Tips 让你的交互动画从 “还不错” 变成 “超级棒”

一些优化你的应用（本文特指移动端） / 页面交互效果的最佳实践

原文传送门：Good to great UI animation tips

让我们直接进入正题来看一些常见的交互场景，并且通过一丢丢的改进，完成从 『还不错』 到 『超级棒』的进化。

通过这些改进，我们让自己的应用在不同状态之间的切换变得具有连续性、使不同状态间共有的元素更看得出是同一个元素，也因此能让用户的注意力尽量不分散，更容易引导他们进行操作。

PS：接下来的这些动画我都是遵循 Material Motion, IBM’s Animation Principles 和 The UX in Motion Manifesto. 产出的。

Tab 页面切换时，让内容跟着滑动

左侧的内容只是简单的淡入淡出。右边的内容却是跟着 tab 切换而滑动

• 一个『还不错』的动画是淡入淡出两个页面
• 一个『超级棒』的动画让页面随着状态滑动给人以连续的体验

当我们实现一个 Tab 切换或者其他类似的使窗口内容切换的交互时，尽可能的让内容与触发其改变的动作「联系」起来。你不仅仅可以控制他们的可见性，更可以控制他们的位置！。如果你这么做了，别忘记添加一个滑动的手势使之「自然」。

复用共享的元素

左侧点击卡片从下网上划出具体内容，而右侧测试展开这个卡片让其充满整个屏幕

• 一个『还不错』的动画通过上下左右滑出内容展示详细信息
• 一个『超级棒』的动画则是通过复用「简要信息」和「详细信息」之间的共享元素建立了视觉联系

当我们要在两个状态之间切换内容试图时，找出他们所共有的元素！让它们成为视觉导线，引导内容的铺陈。我们可以在 The UX in Motion Manifesto. 找出我们想要的动画类型， 上面这个例子我就用了其中的 Masking，Transformation，Parenting和 Easing 原则

赋予列表内容错落感觉

左边的一堆卡片通过渐显进入我们的视线，而右侧则是为每一个卡片的进入添加了一个短小的延迟

• 一个『还不错』的动画通过改边进入屏幕的一堆元素的位置或者透明度达到目的
• 一个『超级棒』的动画则为这些元素再加上一个错落感觉

为了完成瀑布流的感觉，可以试着为这组元素加上小小的延迟。当然了，首先他们得有一样的缓动函数和动画时长，这样它们就能保持感官一致。注意不要去纠结那些微小的地方，这个效果追求的是「整体」。此外，要保持动画干净利落。Google 推荐每相邻的元素延迟不超过 20ms。查阅 Material Motion 可以看到更多的例子。

让元素们各自推攘

左边的动画让展开的主体突然站在最顶层去遮盖兄弟元素，而右边的则是把兄弟元素都推到屏幕外

• 一个『还不错』的动画在不忽略现有上下文的情况下完成
• 一个『超级棒』的动画则让元素去影响周围，影响上下文，就像你挤公交一样

你的每个元素必须对周围任何事物保持警惕 ，指不定就得把他们推开或者勾引过来呢！这样才显得真实。更多例子请查看 谷歌感知动效

让菜单出自上下文

左边的菜单就是这么突然出现，反观右边的是从按钮处舒展出来，有种睡醒了的感觉呢！

• 一个『还不错』的动画让菜单从按钮的方向大致展示出来
• 一个『超级棒』的动画则从触发的地方「涌」现出来，就像是你敲敲一只纸箱，里面就钻出一只橘猫一样

用一个按钮显示更多的状态

左边用一行文字显示 Loading 状态，右边的则让按钮变成状态条的方案来展示

• 一个『还不错』的交互多加一些东西来展示状态
• 一个『超级棒』的交互则是用按钮自身的改变阐明不同状态

试着用按钮的容器去包容另一个状态指示器来提供一个状态的视觉反馈。例如，你也可以在按钮上字旁边多加个转圈圈来标识 Loading 动画。这里的重点是 「使用那些已经和用户产生交互的区域来丰富体验，尤其是当用户集中注意力点某些按钮的时候」。来吧，给按钮多改变集中状态来为你的应用加分！

重要的事情要明显

左边，好吧，我们又来说左边了，左边让这个感叹号的颜色和位置来突出其重要性，右边就稍稍加了个微小的动画来吸引用户注意力

• 一个『还不错』的设计运用色彩、尺寸、位置来展示用户需要注意的地方
• 而一个『无与伦比』的设计运用动画，在不打扰用户的情况下引导他操作

当我们希望用户注意到一个真的很重要的消息或者动作时，试着加点微笑的动画吧！开始的时候幅度小点然后慢慢增加动画强度（改变尺寸、色彩、速率等）来对比突出这是个多么重要的操作啊——但是！！但是！！当你运用更多的动画时，每个动画的冲击力就变少了，更不用说这其实会烦死你的用户了。

最后

原文作者强烈安利了一款应用 InVision’s Studio 上面的图片都是他用这个软件做的。

Happy animating！