超实用！7 个优秀的 UI 交互动画技巧

如下是提升 UI 动效的实用建议，让咱们一块儿看看 UI 交互动画从良好走向优秀的实例。他们是如何经过细节的调整，使用交互动画来提高用户的界面体验。

本文所列出的界面主要显示状态之间的连续性，表示共享元素之间的关系并将用户的注意力引向他们应该注意和采起行动的事物上。

为了建立这些动画，我遵循了来自 Material Motion、IBM 的动画原理和 UX in Motion Manifesto 中的指导原则。

全部的交互都是使用早期的 InVision Studio 版本访问的。您能够在这里下载源文件。

1.使标签内容可滑动

左边的内容是淡入淡出的，右边的内容是随着标签一块儿滑动。

1. 一个好的动画会将内容从一种状态转换为另外一个状态。
2. 一个优秀的动画则是使内容在不一样的状态转换之间保持连续性。
3. 当你设计像标签或弹出菜单相似的交互时，能够尝试将内容的位置与打开它的操做相关联。这样你不只能够提高内容的可见性，还能够为内容的位置设置动画。当你在设计这个动画的时候，还能够添加一个滑动手势，将你从一个内容带到另外一个内容。

2.链接卡片的共享元素

左边的内容是打开一个向上滑动的新界面，右边的内容是将卡片展开并填充满整个屏幕。

1. 一个好的动画使用向左或向上滑动等过渡细节来展现内容。
2. 一个优秀的动画经过共享元素的动画来创建两个状态之间的联系。

在不一样状态之间制做动画时，查看它们之间是否有存在共享元素并将它们联系起来。在使用 InVision Studio 时，建立 Motion 转换时会自动链接两个屏幕之间重复的组件。 这使得原型动画的制做变得垂手可得。

查看动画宣言，了解您能够应用的动画类型。 上面的示例使用了 Masking，Transformation，Parenting 和 Easing 原则的组合。

3.在内容中使用级联效果

左边的内容是在动画中有滑动和淡入的显示，右边是相同的动画，但每张卡片都有短暂的延迟。

1. 一个好的动画会在元素进入界面时改变元素的位置和不透明度。
2. 一个优秀的动画会很快的将界面元素错落有序的出现。

要完成瀑布效果，请尝试延迟应用到每一个内容或每组内容上。 保持相同的缓和和持续时间，会带给用户一致的感受。 尽管如此，不要对每一个小元素进行级联 而是使内容组动画化，保持动画的快速和流畅。 谷歌建议每一个元素开始运动不要超过 20 毫秒的间隔。能够查看 Material Motion 中的编排原理来查看更多时示例。

4.让内容把界面的其余元素撑开到界面之外

左边的内容是盖在其余内容的上面，右边的内容是随着界面的展开将内容推出来。

1. 一个好的动画是在上下文中移动并显示元素。
2. 一个优秀的动画是在当元素改变时会影响周围环境的元素。

让内容中的元素了解周围环境。这意味着内容改变时会吸引或排斥其周围的元素。有关更多示例，请查看 Material Design 中的 Aware 运动原理。

5.让菜单出如今上下文中

左边的内容是菜单从下面飞进来，右边的内容是菜单从建立它的动做中扩展而来。

1. 一个好的动画是菜单从打开它们的按钮方向显示出现的内容。
2. 一个优秀的动画是从建立它们的动做中浮现出来，从触摸点开始展开。

6.使用按钮来显示不一样的状态

左边的内容是按钮显示指示状态的文本，右边的内容是按钮使用变化的容器来显示不一样的事件。

1. 一个好的动画是在按钮附近显示事件。
2. 一个优秀的动画是使用按钮自己来显示不一样的状态。

尝试使用按钮的容器来提供状态的可视反馈。例如，您可使用微调器或加载动画替换 CTA; 或者您能够在显示进度的背景中添加动画。解决方案取决于您，咱们的想法是使用用户已经与之交互的空间。若是您使用按钮颜色和样式来确认成功状态，则奖励积分。

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

左边的内容是用颜色和位置使元素脱颖而出，右边的内容是使用微妙的动画来引发用户的注意。

1. 一个好的动画会使用颜色，大小和位置来突出用户须要注意或采起的重要操做。
2. 一个优秀的动画会使用动画来引发用户对重要操做的关注，而且不会对用户形成干扰。

当用户须要对重要事项采起行动时，请尝试设置动画来吸引他们的注意力。从一个微妙的动画开始，增长与动做重要程度相关的强度（大小，颜色和速度的变化）。同时仅将其用于关键操做，您使用此效果的次数越多，其影响就越小，而且用户得到的烦恼也会越多。

总结

我但愿这些示例能够帮助您在为交互添加动画时作出更好的决策。借助 InVision 工做室等新动画和原型制做工具，我预测咱们很快就会看到创意互动的复兴。 咱们只须要负责任地在这个新的超级大国里任意发挥。

让咱们应用动画来解释状态的变化，引发对必要动做的注意，肯定元素之间的关系，并为咱们的产品添加一些乐趣和特征。 经过遵循这些原则，咱们将把动画从好转变为优秀。

---

英文地址：uxdesign.cc/good-to-gre…

做 / Pabloy Stanley

译 / 大学不轻松 @ 创宇前端

好看的皮囊千篇一概，有趣的灵魂一百四十斤

编 / 荧声 @ 创宇前端

本文已由译者受权发布，版权属于创宇前端。欢迎注明出处转载本文。本文连接：knownsec-fed.com/2018-09-27-…

想要看到更多来自知道创宇开发一线的分享，请搜索关注咱们的微信公众号：创宇前端（KnownsecFED）。欢迎留言讨论，咱们会尽量回复。

感谢您的阅读。