7个小技巧大幅度提高UI动效品质
原做者：Pablo Stanley 原文连接动画
将选项卡种的内容作成可滑动的
- 好的动效将内容从一个标签页淡出，再淡入到另外一个标签页；
- 优秀的动效让页面内容在不一样标签之间移动，可以展示过分时的连续性。
当你设计选项卡或者弹出菜单这种交互时，试着将内容的位置与打开它的动做相关联。经过这种方式，你能够将你的内容和内容的位置都作成可视动画。作这种页面时，也加上一个能够在不一样内容之间切换的滑动手势。ui
关联卡片上的相关元素
左边的卡片打开一个新页面是滑上来的； 右边则是扩展了卡片并使其占满屏幕。设计
- 好的动画展现信息详情页时使用左滑或者上划的方式；
- 优秀的动画会在有共同信息的两种状态之间创建联系。
当给两种不一样的状态的过渡作动画时，看看这两种状态之间有没有共有的元素，若是有则能够在动画中体现二者的联系。在InVision Studio中，两个相关联的页面有重复的元素时，当你建立一个Motion的时候，系统会自动在两个元素之间建立关联动画。这让建立动画原型变得垂手可得。3d
在内容中使用瀑布流效果
左边的卡片经过滑动和淡入的效果显示; 右边的卡片在一样动画的基础上，让每一个卡片都有短期的延迟。cdn
- 当卡片进入屏幕时，好的动画改变它的位置和透明度；
- 优秀的动画则会快速蔓延每组元素。
要达到瀑布流的效果，能够将每一个动画元素都保持相同的动画速度以及持续时长，并对其按序设置必定的延时。要将瀑布流的形式应用在组里，不能应用在单独的元素上。保持动画的快速简介，谷歌的提醒功能里，每一个元素出现的间隔不超过20毫秒。点击动画里的瀑布流形式查看更多案例。blog
让内容推开其余元素
左边的动画中，动画效果直接出线在其余内容上面。右边的动画中，随着动画的扩大，其余内容被推开了。进程
- 好的动画直接在画面中移动和展现元素；
- 优秀的动画则会展现出动画对其周围元素的影响。
让内容与周围的环境相互动。这意味着让内容吸引或者赶走它周围的元素。ip
让菜单从按钮中出现
左图中菜单直接从下面滑入；右图的菜单则从打开它的按钮中扩展出来。get
- 好的动画菜单出现的方向与打开它的按钮的方向保持一致；
- 优秀的动画菜单从打开它的按钮中展开。
用按钮展现不一样的状态
左边的动画使用文字代表状态；右边的动画则直接使用按钮展现不一样状态。animation
- 好的交互将活动状态用文字方式展现在按钮旁边；
- 优秀的交互则直接用按钮展现不一样状态。
试着用按钮自己展现不一样状态。例如：用旋转菊花或者加载动画代替CTA；或者在按钮背景中加一个动画代表进程。具体方式取决于你，核心就是利用好已有的用户已经与之交互的空间。若是你使用按钮颜色去确认成功状态，对于用户来讲就是一个大彩蛋。
将用户的注意力引导到重要的东西上
左图中的案例使用颜色和位置让元素突出显示；右图中则使用了一个简单的小动画吸引用户的注意力。
- 好的设计使用颜色、尺寸和位置，来突出须要格外引发用户注意并触发用户行为的重点内容；
- 优秀的设计使用动画引导用户将注意力放在重要的地方，而且不会打扰到用户。
当用户须要作出一些重要的操做时，试着将这些操做的按钮以动画的方式展示，以吸引用户的注意力。能够作一些简单细微的动画并逐渐增长强度，并根据行动的重要性改变按钮的大小、颜色和动画的速度。记住只在最重要的操做上使用动画，由于你用的动画越多，它就变得越不重要而且会打扰到用户。