我们来看看一些良好的和更出色的交互微动效的例子，只要稍加调整一下，你就可以借用动画来提升UI操作体验。

以下列出的交互动效显示了状态之间的连续性和元素间的关联性，并让用户将注意力放在他们应该关注和采取操作的内容上。

1. 利用滑动表现状态切换的连续性

左边的内容切换是淡入淡出的方式，右边的则是随着选项卡左右滑动实现。

－良好的动效会让内容以淡入淡出的形式实现状态间的转换。
－更出色的动效则会让内容在状态间移动，来突显状态过渡的连续性。

当设计一个选项卡或一个弹出菜单的交互时，试着把内容的移动路径与打开操作相结合，也就是说，你不仅要做出内容本身的动效，还要做出内容位置的动效。还有，在设计的时候，可以添加滑动手势来表示从一个内容到另一个内容的切换。

2.关联共同元素

左边的内容切换是向上滑入一个新页面，右边的卡片则是扩展，在当前页面上填充新的内容。

－良好的动效会用左滑或向上滑的切换方式来展示新内容。
－更出色的动效则会利用共同元素的变化来建立两种状态间的连接。

当要做不同状态间的动画时，看一下其中是否有共同的元素，并把它们联系起来。使用InVison Studio创建动效时，重复的组件就会自动从一个状态转换到另一个状态，这使制作原型动画变得更简单。

3. 让内容逐次展开

左边的页面是滑动淡入的，右边的页面采用同样的方式，但是每个小卡片会依次有短暂的延迟。

－良好的动效在页面内容出现时会改变其位置和材质透明度。
－更出色的动效则会让各个组件和元素依次迅速错落出现。

在 实现瀑布流效果时，尝试对每个组件的出现作稍许延迟，保持同样的松弛度和持续时间，这样就动效会显得更连贯。不过这种操作适用于整个组，而不要在每个细小元素上做层叠效果，否则就太乱了。并且，这种延迟动效要短暂敏捷。谷歌的Metarial Design建议每个元素间隔不超过20毫秒。要了解更多案例请参阅Metarial Motion中的编排原理。

4.让内容影响周边环境

左边的动效是在其他内容的上层变化，右边的则是随着内容的扩增，将其他元素推开。

－良好的动效会在场景中移动和展示元素。
－更出色的动效则会让元素变化时影响当前的环境。

让页面中的元素了解它们所在的环境，这意味着让内容吸引或排斥围绕着它的元素。大家可以从Material Design的动效原理中了解到更多示例。

5.让内容从触发点展开

左边的菜单是从下方飞入的，右边的菜单则是从打开菜单的触发点上展开的。

－良好的菜单弹出动效会让内容从打开按钮的方向出现。
－更出色的菜单弹出动效则会从打开操作的触发点上展开内容。

6.用按钮本身表现不同状态

左边的按钮用下方的文案来表示状态，右边的按钮以变化成进度条的形式来表示加载状态。

－良好的交互会在按钮旁边标明状态。
－更出色的交互动效则是用按钮本身来表现不同状态。

尝试利用按钮的外形变化设计状态的可视化反馈。比如，你可以用转动“菊花”或加载动画表现点击按钮后的反馈，或者在背景上加入动画来显示进度。具体怎么做都可以，这个方法的关键在于利用用户已经产生交互动作的空间去设计。如果运用按钮的颜色变化做出确认成功的状态，会更加分。

7.利用动效使重点信息更引人注目

左边的示例是用颜色和位置使重点元素突出，右边则采用一个巧妙的动画吸引了用户的注意力。

－良好的设计通常会用颜色、大小、位置强调一个需要用户注意或操作的重要行动点。
－更出色的设计则会用动效抓住用户对重点信息的注意力，并且不会造成打扰。

当用户需要对重点信息有所操作时，试着让行动点动起来来吸引用户的注意。你可以根据行动点的优先级选择动画的强度（大小、颜色、速度的变化）。但是这个方法只能用在关键的行动点上，不能滥用。动效用的越多，它就越起不到作用，甚至会对用户造成困扰和不悦。

总结

我希望这些例子能帮助大家在交互中加入动效时做出更好的决定。现在很多例如InVion Studio这样新的动效原型工具让制作交互动效更简单，效果也更好，相信会有越来越多有创意的交互动效出现。

让我们用动效来解释状态的变化，让重要的行动点更醒目，明确元素间的关系，给产品加入点趣味和个性。遵循这些原则，我们可以设计出更出色的动效。