让用户集中注意力

接下来提到的这些关键点，可以帮助你的UI动效快速提升。交互状态间的连续感非常重要，既能说明元素之间的关系，还能让用户集中注意力，很好地完成相应操作。

示例中创建的动效，都遵循了Material Motion，IBM的Animation Principles和The UX in Motion Manifesto，所有交互都使用的是InVision Studio早期版本完成。

《The UX in Motion Manifesto》这篇文章，UX辞典也进行翻译收录，是非常全面的一篇动效法则讲解指南！

▶▶辞典精译｜我见过总结最好的UI动效设计法则！

01 使选项卡片中的内容滑动

左：内容淡入淡出，无滑动

右：内容与选项卡一起滑动

Good：内容是从一种状态淡入淡出到另一种状态；

Great：内容随着卡片移动标明状态切换，也让过渡更有连续性。

在设计选项卡或飞行菜单上应用的交互时，试着将内容的位置与打开它的操作相关联。通过这种方式，使内容与位置产生动画效果。比如添加一个滑动手势，将用户从一个内容带到另一个内容。

02 连接卡片的共享元素

左：向上滑动的卡片打开了一个新屏幕

右：展开的卡片填满整个屏幕

Good：使用向左推或向上滑动类的过渡效果，让详细内容显示在屏幕上；

Great：通过共享动效和内容，来建立两个状态之间的联系。

在不同状态之间设置动效时，先看看有没有能共享的元素，再将其连接。用InVision Studio创建Motion过渡时，将自动连接两个屏幕内的重复组件，这使原型动效制作变得轻而易举。以上示例结合了《The UX in Motion Manifesto》中的Masking，Transformation，Parenting和Easing原理。

03 在内容中使用瀑布效果

左：卡片通过滑动和淡入显示

右：卡片具有相同动效，但每张卡片都带有延迟

Good：材质进入屏幕时，改变其位置和不透明度；

Great：使每个组或元素的外观区别错开。

实现瀑布效果，就要对每个内容或每一组内容应用延迟。设置相同的缓动、持续时间，以保持一致。但没有必要给每个小元素都设置，因为动效应是快速又生动的，Google建议每个元素的开头间隔不超过20ms。

04 使内容推开其他元素

左：卡片顶部设置了动效

右：随着内容的增长将其他元素推出

Good：在局部移动和变换；

Great：改变时会影响周围环境和元素。

内容中的元素应与周围环境呼应，也就是说使内容吸引或排斥周围元素。有关更多示例，可以去了解Material Design中的Aware运动原理。

05 使菜单显示在上下文中

左：菜单从底部飞入

右：菜单从创建它的动作中展开

Good：从打开菜单的按钮方向出现；

Great：从创造它们的动作中出现，类似于从触点处生产出来。

06 利用按钮显示不同状态

左：按钮显示了被选定时的状态

右：按钮使用容器，显示了不同事件

Good：在按钮旁边显示事件；

Great：使用按钮本身，来显示不同的状态。

使用按钮容器去呈现状态反馈，例如，加载动效或下拉式，或者把动效添加到背景中去显示进度，依据实际情况决定即可。

07 把注意力集中到重要的事情上

左：使用颜色和位置突出元素

右：使用细微的动效来引起用户注意

Good：使用颜色，大小和位置来突出显示用户需要注意或采取的重要操作；

Great：使用动效来吸引人们注意这一重要动作，且不突兀。

当用户需要对重要事情完成操作时，可以尝试用动效来以吸引他们的注意力。从一个微妙的动效开始，并根据动作的重要性增加强度（大小，颜色和速度的变化）。不过仅限用在关键操作上，因为用的次数越多，其影响就越小，还会让用户厌烦。

总结

希望这些示例可以帮助你在添加动效时，做出更好的决策！应用动效，可以用来解释状态的变化，吸引人们注意必要的动作，确定元素之间的关系，并为我们的产品增添些许乐趣和特色。遵循这些原则，让动效从Good to great！

相关引用

-翻译自原文

https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

-封面图来自网络

-未经UX Pedia允许不得转载

欢迎关注作者微信公众号：UX辞典，获得更多UX设计干货