很好的UI动画技巧

让我们看看UI动画从好到更好的一些例子。只要稍加调整一下，你就可以通过动画提升你的UI模式。

列出的交互显示状态之间的连续性，表示共享元素之间的关系，并提请用户注意他们应该注意并采取行动的内容。

为了创建这些动画，我遵循了MaterialMotion、IBM的动画原理和UXInMotionManifesto的指导方针。

所有的交互都是使用InvisionStudio的早期访问版本进行的。

滑动选项卡中的内容。

左边的内容会逐渐消失。右边那个带标签的幻灯片。

一个好的动画会使内容从一种状态消失到另一种状态。

一个伟大的动画显示了过渡的连续性，使内容在状态之间移动。

当您设计一个像选项卡或弹出菜单这样的交互时，尝试将内容的位置相对于打开它的操作。这样，你不仅可以动画的内容，但位置也。哦，当你在做的时候，增加一个滑动的手势，让你从一个内容到另一个内容。

连接卡的共享元素。

左边的内容打开一个新屏幕，该屏幕向上滑动。右边的卡片展开并填充屏幕。

一个好的动画使用像推左或幻灯片向上的过渡来显示细节屏幕上的内容。

一个伟大的动画建立了两个状态之间的连接，通过动画共享内容。

在不同状态之间动画时，查看它们之间是否有任何共享元素，并将它们连接起来。使用InvisionStudio，在创建运动转换时，在两个链接屏幕之间重复的组件将自动连接。这使得原型动画变得轻而易举。

请查看“运动宣言”以查看您可以应用的动画类型。上面的示例使用了掩蔽、转换、父母化和宽松原则的组合。

在内容中使用级联效应。

左边的卡片是通过滑动和褪色出现的。右边的是相同的动画，但是每一张卡都有一个很短的延迟。

一个好的动画改变了材料的位置和不透明度，当它进入屏幕。

一个伟大的动画迅速错开每个组或元素的外观。

要实现瀑布效果，请尝试对每一段或每组内容应用延迟。保持同样的宽松和持续时间，这样感觉是一致的。不过，不要将每一个小元素串在一起-使内容组生动化。保持动画的快速和快速。谷歌建议开始每个元素的间隔不超过20毫秒。请参阅“物质运动”中的舞蹈原理，以了解更多的例子。

让内容推开其他元素。

左边的动画位于其他内容之上。右边的动画随着内容的增长将内容推开。

好的动画在上下文中移动和显示元素。

伟大的动画显示元素影响他们的环境时，他们的变化。

让你的内容中的元素了解它们的周围环境。这意味着使内容吸引或排斥周围的元素。要获得更多的例子，请参阅材料设计中的感知运动原理。

使菜单出现在上下文中。

左边的菜单是从下面飞进来的。右边的菜单从创建它的操作中展开。

好的动画菜单显示从打开它们的按钮的方向出现的内容。

伟大的动画菜单是从创建它们的动作中产生的，从触点开始增长。

使用按钮显示不同的状态。

左边的按钮显示表示状态的文本。右边的按钮使用容器显示不同的事件。

良好的交互显示按钮旁边的事件。

伟大的交互使用按钮本身来显示不同的状态。

尝试使用按钮的容器来提供状态的视觉反馈。例如，可以用旋转器或加载动画替换CTA；或者可以在显示进度的背景中添加动画。解决方案取决于您，想法是使用用户已经与之交互的空间。如果您使用按钮颜色并复制以确认成功状态，则奖励点数。

把注意力放在重要的事情上。

左边的示例使用颜色和位置来突出元素。右边的那个用一个微妙的动画来引起用户的注意。

好的设计使用颜色、大小和位置来突出用户需要注意或操作的重要动作。

伟大的设计使用动画，以提请注意的重要行动，而不是破坏性。

当用户需要对一些重要的事情采取行动时，试着用动画来吸引他们的注意力。从一个微妙的动画开始，增加强度(大小、颜色和速度的变化)与动作的重要性相关。只用于批判性的行为-你越多地使用这个效果，它的影响就越小，就会变成…。你的用户越生气就会得到

结语

我希望这些例子能帮助您在将动画添加到交互中时做出更好的决策。有了新的动画和原型工具，比如Invision的Studio，我预计我们很快就会看到创意互动的复兴。我们只需要记住负责任地使用这个新的超级大国。让我们应用动画来解释状态的变化，提请注意必要的操作，确定元素之间的关系，并为我们的产品添加一点乐趣和个性。通过遵循这些原则，我们将把我们的动画从好的转变为伟大的。动画快乐！

---

三米工作室“大吉大利”小组的每周优质设计文章汉化计划12篇《Good to great UI animation tips(很好的UI动画技巧)》

原文链接:

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