值得注意的UI设计动画细节

关注公众号：设计摄影。每周福利按时抵达。

让我们 来看一些Ui动画的例子。进行一些微调，就可以通过动画来提升整体的UI模式 。

列出的交互显示状态之间的连续性，表示共享元素之间的关系，并引起用户注意他们应注意采取的措施 。

使用标签中的内容滑动

左侧的内容淡入和淡出。右侧的内容与选项卡一起滑动。

好的动画会使内容从一种状态淡入淡出到另一种状态。

出色的动画通过使内容在状态之间移动来显示过渡的连续性 。

在设计诸如选项卡或弹出菜单之类的交互时，请尝试将内容的位置相对打开的操作进行放置 。这样，您不仅可以为内容的可见性设置动画，还可以为位置设置动画 。当您使用它时，请添加滑动手势，即可将一个内容 转移到另一个内容。

链接卡的共同元素

左侧的内容将打开一个向上滑动的新屏幕。右侧的卡将展开并充满屏幕。

• 好的动画使用向左推或向上滑动之类的过渡来在详细屏幕上显示内容。
• 出色的动画通过为共享内容设置动画来在两个状态之间建立联系。

在不同状态之间设置动画时，请查看它们之间是否存在任何共享的元素并将其连接。使用InVision Studio，在创建Motion过渡时，将自动连接在两个链接的屏幕之间重复的组件。这使原型动画制作变得轻而易举。

在您的内容中使用级联效果

左侧的卡片通过滑动和淡入显示。右侧的卡片具有相同的动画效果，但是每张卡片的延迟时间都很短。

• 好的动画会在材质进入屏幕时改变其位置和不透明度。
• 出色的动画很快会使每个组或元素的外观错开。

要实现瀑布效果，请尝试对每个内容或每一组内容应用延迟。保持相同的缓动时间和持续时间，以便保持一致。但是，请不要层叠每个小元素-为内容组设置动画。保持动画快速且生动。Google建议每个元素之间的间隔不超过20毫秒。

使内容推开其他元素

左侧的动画在其他内容的顶部动画。右侧的动画随着内容的增长将其推出。

• 好的动画会在上下文中移动并显示元素。
• 出色的动画会显示元素在更改时会影响周围的环境。

使内容中的元素了解其周围环境。这意味着使内容吸引或排斥周围的元素。有关更多示例。

使菜单显示在上下文中

左侧菜单从下面飞入。右侧的菜单从创建它的操作中展开。

• 好的动画菜单显示从打开菜单的按钮方向显示的内容。
• 出色的动画菜单从创造它们的动作中出现，从触摸的角度出发不断发展。

使用按钮显示不同的状态

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

• 良好的互动会在按钮旁边显示事件。
• 良好的交互使用按钮本身来显示不同的状态。

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

注意一些重要的事情

左侧的示例使用颜色和位置使元素脱颖而出。右边的一个使用细微的动画来引起用户的注意。

• 好的设计使用颜色，大小和位置来突出显示用户需要注意或采取的重要操作。
• 出色的设计使用动画来吸引人们注意这一重要动作，而不会造成破坏 。

当用户需要对重要的事情采取行动时，请尝试设置动作动画以吸引他们的注意力。从微妙的动画开始，并根据动作的重要性增加强度（大小，颜色和速度的变化）。仅将其用于关键操作-使用此效果的次数越多，其影响就越小……并且用户越会烦恼。

结论

我希望这些示例可以帮助您在向交互中添加动画时做出更好的决策。借助InVision Studio等新的动画和原型制作工具，我预计我们很快就会开始看到创意互动的复兴。我们只需要记住负责任地使用这个新的超级大国即可。

让我们应用动画来解释状态的变化，吸引人们注意必要的动作，确定元素之间的关系，并为我们的产品增添些许乐趣和特色。遵循这些原则，我们将使动画从优秀变为优秀。

动画愉快！

关注公众号：设计摄影；每周福利按时抵达。