UX Pedia Presents
本文约1979字，阅读需要5分钟
让用户集中注意力
接下来提到的这些关键点，可以帮助你的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！
／End. 
相关引用
-翻译自原文
https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
-封面图来自网络
-未经UX Pedia允许不得转载
往期推荐：
辞典精译 | UI组件要点「狙击」：按钮设计的这些坑别再踩啦！
辞典甄选 | 书单02：送你一本「小偷」指南
辞典精译 | 告别繁琐！下拉菜单的细节设计法则
辞典精译 | Google动效设计师，为你答疑解惑！
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2021©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文