实用的UI动画技巧
改进UI微交互的实用建议
让我们看一些UI动画从良好到优秀的例子。只要稍稍调整，就可以使用动画来提升UI模式。
列出的交互显示了状态之间的连续性，表示共享元素之间的关系，并将用户的注意力吸引到他们应该注意并采取行动的事情上。
为了创建这些动画，我遵循了Material Motion，IBM的动画原则和Motion Manifesto中的用户体验。
所有的交互都是使用早期版本的InVision Studio制作的。你可以在这里下载源文件。
将标签页中的内容做成幻灯片
左侧的内容淡入淡出。右边的那个与标签滑动。
· 一个良好的动画会将内容从一个状态转移到另一个状态。
·一个优秀的动画通过使内容在状态之间移动来显示转换的连续性。
当你设计一个类似标签或飞出菜单的交互时，试着将内容的位置与打开它的动作相关联。通过这种方式，你不仅可以使内容的可见性动画化，还可以使位置动画化。哦，当你在看的时候，添加一个滑动手势，将让你从一个内容带到另一个内容。
连接卡片的共享元素
左边的内容将打开一个新的屏幕，并向上面滑动。右边的卡片展开并填充屏幕。
·一个良好的动画会使用像向左或向上滑动这样的过渡来显示细节屏幕上的内容。
·一个优秀的动画通过动画共享内容来建立两个状态之间的连接。
当在不同状态之间进行动画时，查看它们之间是否有任何共享元素并将它们连接起来。在InVision Studio中，当您创建动作转换时，在两个链接屏幕之间重复的组件将自动连接。这使得原型动画变得轻而易举。
查看Motion Manifesto以查看可以应用的动画类型。上面的例子使用掩蔽、转换、养育和放松的原则的组合。
在内容中使用级联效果
左边的卡片通过滑动和淡入来显示。右边的是同样的动画，但是每张卡片都有一个短暂的延迟。
·一个良好的动画会改变素材进入屏幕时的位置和不透明度。
·一个优秀的动画会迅速错开每个组或元素的外观。
为了完成瀑布效应，尝试将延迟应用到每一件或一组内容上。保持相同的放松和持续时间，所以感觉是一致的。不要将每一个小元素串联起来，而是将这些内容组合起来。保持动画快速、流畅。谷歌推荐开始每个元素不超过20毫秒。
查看Material Motion中的编排原理以查看更多示例。
让内容将其他元素排除在外
左边的动画在其他内容的顶部动画。右边的动画会随着内容的增长而将其推出。
·好的动画在上下文中移动和显示元素。
·优秀的动画显示当他们改变时会影响周围环境的元素。
让你的内容中的元素意识到他们的环境。这意味着使内容吸引或排斥它周围的元素。
有关更多示例，请查看材料设计中的Aware运动原理。
使菜单出现在上下文中
左边的菜单从下面飞进来。右边的菜单从创建它的动作展开。
·好的动画菜单显示了从按钮方向显示的内容。
·优秀的动画菜单从创建它们的动作中浮现出来，从触摸点发展而来。
使用按钮显示不同的状态
左边的按钮显示文本指示状态。右边的按钮使用容器显示不同的事件。
·良好的交互显示按钮旁边的事件。
·优秀的交互使用按钮本身来显示不同的状态。
尝试使用按钮的容器来提供状态的视觉反馈。例如，您可以用旋转器或加载动画替换CTA;或者你可以在背景中添加一个显示进度的动画。解决方案取决于你，想法是利用用户已经与之交互的空间。如果您使用按钮颜色和复制来确认成功状态，可以获得额外的积分。
引起重视
左边的例子使用颜色和位置来使元素脱颖而出。右边的一个使用微妙的 动画来唤起用户的注意力。
·良好的设计使用颜色，大小和位置突出显示用户需要注意或采取行动的重要动作。
·优秀的设计使用动画来引起人们对重要动作的注意，而不具有破坏性。
当用户需要处理一些重要的事情时，尝试用动画来吸引他们的注意力。从一个微妙的动画开始，增加力度(大小、颜色和速度的变化)与动作的重要性相关。只在关键的操作中使用它——您使用这个效果越多，它就变得越没有影响力……用户就越恼火。
结论
我希望这些例子能帮助您在向交互中添加动画时做出更好的决策。有了新的动画和原型工具，比如InVision的工作室，我预计我们将很快看到创造性互动的复兴。我们只需要记住负责任地使用这个新的超级大国。 让我们应用动画来解释状态的变化，引起人们对必要动作的注意，确定元素之间的关系，并为我们的产品添加一些乐趣和特色。通过遵循这些原则，我们将把动画从优秀变成卓越。
快乐动画！
三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划04篇--《Good to great UI animation tips（很好的UI动画技巧）》。 Medium英文原文链接https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
作者：TF三缺一与他们的经纪人
