5个正确的网页动画例子

动效是用户体验重要的组成部分。 它可以是一个视觉提示，让用户知道正在发生的事情，它可以添加意想不到的喜悦，以及更多。

但是，动效很容易使用过度，从而导致让用户很困惑和无头绪。

让我们来看看5个正确的网页动画例子，我们可以从每个例子中学到更多经验。

一个动画 不要一次性运动太多的元素

下面是一个例子：你想要制作一个特别优秀的设计作品，那么这个设计作品其中要包括文本，插图和令人称许的动效。

在一个优秀的设计案例中，最糟糕的就是运用许多元素从而分散掉用户的注意力，以至于用户不知道下一步操作在那？甚至不知道该去哪里操作！

把每个动画想象成一个故事应该很容易理解，并引导用户看到特定顺序的元素。

我建议一次动画一个元素，并在动画之间添加0.5-1秒的分隔。

在InVision公司的Anton Aheichanka的这个例子中，我们可以看到如何在不过度的情况下将几个元素变成动画。

Master Sketch提供 Anton Aheichanka 提供的免费视频教程

让动画变得有意义

随机动画没有目的？不。

你一定要留意你正在推广的产品或者服务，事实上，这有力的证明了我们的设计师一般倾向于提出不完全符合客户想要推广的产品。我们的设计上只是仅看起来好看的，但是它没有实际意义。

“拒绝做没有意义的动画。”

所以，在制作动画时，问问你自己是否有从客户的角度出发。同样重要的是问问你自己有没有抓住用户痛点。

sergey valiukh的这个有趣的动画有目的，这个动画比较特别是从上午到下午的过渡。静态图将具有相同的效果，但不会像动态一样有趣。

时间线应用程序GIF，由Sergey Valiukh提供

关注你的时间

保持你的动画是简短又有意义，最后，用户必须在按钮变得可点击之前等待你按钮动画完成

下面是一个例子，说明快速捕捉按钮转换也有目的。

Open, 来自 Joe Jordan

要拒绝无聊的线性动画

只有简单的从a到b路径而没有缓动的动画会感觉很机械，所以请尝试添加不同的缓动动画。运动应遵循物理世界，例如：重力。

Remix Jobs这个人非常擅长合理的保持动画的趣味性，遵循Material Design原理使得过渡更加流畅自然。

活动网站设计，Julien Renvoye

动画不应该滞后

当你在画动画分镜的时候一定要考虑到你的动画元素如何去变化，为了创造一个有意义的动画，你需要在项目初期花一定的时间去考虑这些动画如何去很好的去适应用户体验。 

ramotion这个团队在画分镜阶段考虑动画的过渡是给我们做了一个很好的榜样

下拉刷新，来自Ramotion

像设计和动画一般都是主观和个人的，考虑到用你设计的动画交互的用户是十分重要的，每个动画元素都应该在仔细考量之后用来增加用户体验的效果

本篇文章翻译来自于invisionapp，感谢Joe Jordan

https://www.invisionapp.com/blog/web-animation-ux/