7 个优秀的 UI 交互动画技巧

一时失言乱红尘 2022-05-08 01:24 155阅读 0赞

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

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

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

所有的交互都是使用早期的 InVision Studio 版本访问的。您可以在这里下载源文件。

## 1.使标签内容可滑动 ##

![1661ebd53becf7eb_imageslim][]

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

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

## 2.连接卡片的共享元素 ##

![1661ebd9c3e887ea_imageslim][]

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

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

在不同状态之间制作动画时，查看它们之间是否有存在共享元素并将它们联系起来。在使用 InVision Studio 时，创建 Motion 转换时会自动连接两个屏幕之间重复的组件。 这使得原型动画的制作变得轻而易举。

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

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

![1661ebdcc69083ef_imageslim][]

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

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

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

## 4.让内容把界面的其他元素撑开到界面以外 ##

![1661ebe1176e7f65_imageslim][]

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

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

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

## 5.让菜单出现在上下文中 ##

![1661ebe459a33aaf_imageslim][]

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

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

## 6.使用按钮来显示不同的状态 ##

![1661ebe78095c7b3_imageslim][]

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

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

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

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

![1661ebeb4cd4e04d_imageslim][]

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

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

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

## 总结 ##

![1][]

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

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

--------------------

> 英文地址：[uxdesign.cc/good-to-gre…][uxdesign.cc_good-to-gre]
> 
> 作 / Pabloy Stanley

[1661ebd53becf7eb_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebd53becf7eb?imageslim
[1661ebd9c3e887ea_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebd9c3e887ea?imageslim
[1661ebdcc69083ef_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebdcc69083ef?imageslim
[1661ebe1176e7f65_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebe1176e7f65?imageslim
[1661ebe459a33aaf_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebe459a33aaf?imageslim
[1661ebe78095c7b3_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebe78095c7b3?imageslim
[1661ebeb4cd4e04d_imageslim]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebeb4cd4e04d?imageslim
[1]: https://user-gold-cdn.xitu.io/2018/9/28/1661ebee7267a6a7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[uxdesign.cc_good-to-gre]: https://link.juejin.im?target=https%3A%2F%2Fuxdesign.cc%2Fgood-to-great-ui-animation-tips-7850805c12e