作者 José Torre 是 TomTom 公司的资深视觉设计师，有感于动画被大量错误使用的现状，结合自身多年的设计经验，总结出 6 条动画设计原则，通过丰富的案例介绍了在何时、何处、如何使用动画及其克服障碍的心得体会。

1.动画不应在最后添加

你确定了所有交互并且视觉设计已经定稿，但是你感觉少了些什么。这时你可能会想「是时候加些动画点缀一下了」。这是一个巨大的错误，也是动画被滥用的原因之一。在设计过程最后考虑动画通常会和在 PPT 中添加过渡效果混为一谈，这是完全错误的。

如果把用户体验看作是一个蛋糕，在大多数的情况下，j2直播，动画被认为是蛋糕顶部的樱桃，但是我完全不同意这个观点。我认为动画应该是你混入蛋糕糊的另一种原料。

我为本文描述动画快速绘制的草图

在你绘制线框图的时候，动画就应该成竹在胸了。这就像在按下按钮后，特定物体会根据箭头指示的方向移动那么简单。保持简单有助于你无需关注过多样式，就能发现动效的目的（或特定目的的动效）。也会让你不过于依恋动画，因为动画不总是问题的解决方案。如果它无法助你达成目标，弃之即可，无用的动画将会成为最终用户的障碍。

这就把我们直接带入到下一条原则。

2.动画一定要有用

多余的动画会占用用户宝贵的时间，并且用户在获得初次愉悦之后就会厌倦，这就是为什么动画需要有功能性的原因。假如你想知道哪些动画可以帮助你，下面是一些案例。

减轻生硬的切换

没有过渡 vs 水平滑动过渡

不管是不是设计师，我们都对此很熟悉。你在屏幕 A 中点按一个按钮，砰！一个完全不同的屏幕（B）突然出现了。然后你会疑惑，它是从哪来的？我按下的是正确的按钮吗？接下来呢？如果「B」看起来和「A」很像怎么办？用户可能会认为什么都未发生。这展示了动画中最常见的一类，变化时刻。考虑下从屏幕 A 到 B 这次「旅程」花费了多长时间，哪些对象应在屏幕中保留，它们将如何达到那里？但请不要过度使用，因为接下来你将发现，动画最好在「无形」中发挥作用。

提供上下文

没有过渡 vs 从底部滑入

有时候你进入了某个页面，但是并不确定如何与之交互。一种帮助用户理解的好方法就是在特定物体进入时，提供一些它的特性的线索。以文章列表举例，滑动它们有助于用户理解可以不停的刷动查看更多。你甚至可以更进一步，让它们一个接一个的定时滑动出现，强调这些项目都是分开的，你可以与当中的任一个进行交互。

假如你决定点击其中一个项目，然后它展开了那篇文章的全部内容，之前与其他信息处于同一层级的信息现在变成了主要内容。过渡动画是加强用户选择的一种好方法，不仅展示了你仍然和处于选中状态的同一物体进行交互，而且也会给你带来更多的屏幕空间。

提供定位

当用户界面和用户之间的所有障碍被移除后，用户界面变得更加真实具体起来，因此赋予用户空间定位感变得十分重要。你可以通过让动画保持一致和 app 的结构易于理解做到这一点。

一个物体向左移出屏幕，如果它再次出现，从逻辑上讲，应该来自其移出的地方。这将帮助你的用户理解 app 的面貌，用户在使用时会感觉更加舒畅。反之则会引发混乱，用户甚至可能会认为他们看到的完全不是同一个物体。

内容从底部进入 vs 内容从右边（箭头的指向）进入

这同样适用于屏幕上出现的视觉提示。想象你点击了一个带有向右指示箭头的列表项，逻辑上的过渡应该是自右向左滑动，好像用户视图向右移动一样，加强了用户界面中的视觉线索。

很多时候你会看到 UI 元素与过渡动效相矛盾。这有点恼人，我认为这些是我们应该避免的，否则动画会让用户看起来很突兀，因为它们违反了用户的预期。

提供及时反馈

你曾否问过自己，我按下那个按钮了吗？它做了什么？我应该再按一次吗？回答可能是肯定的，你或许会一遍又一遍的点击，只为确认实际上你在最初的时候就按下了。这就是为什么提供及时反馈是重要的原因，即便 app 没有立即做出反应。

在这个世界中，你的手指通常会盖住点按按钮，动画在为用户提供他们所需的安慰上发挥了巨大的作用。

轻微的颜色变化 vs 快速动画