关于动效相信大家早就有所了解，我也就不再啰嗦了。今天这篇文章来自外文自译，可能对您有点帮助。

首先回顾一下动效八要素

1、时间间距

2、缓动缓出

3、预备动作

4、动作跟随

5、挤压和拉伸

6、夸张手法

7、二次动作

8、连续打帧和对应打帧

这是正文

一、动画不应该是事后的想法

您定义了你所有的交互和视觉设计但你觉得少了点什么。然后你可能会想“是时候加一些动画了吧”这简直就是荒唐，也正是动画的被滥用的一个重要原因。

如果将用户体验视为蛋糕，在大多数情况下，动画被认为是蛋糕上的樱桃，但我完全不同意这种做法。我认为动画应该是你需要混合在蛋糕面糊中的另一种成分。

为动画制作的快速手绘效果

这就是说，当您绘制线框时，动画效果就应该已经在你的脑袋里了。

它可以像箭头一样简单，表达出在按下按钮之后特定对象将要去的地方。保持简单，这将有助于您找到运动的目的（或某个目的的运动），而不必太多地关注它的外观。这也有助于您不要变得太依赖动画，因为动画并不能总是解决您的问题。 大胆的丢弃动画吧，如果它不帮助你起到任何作用，不必要的动画将成为用户的障碍。

二、动画必须达到目的

无用的动画只会浪费用户宝贵的时间，并且在第一次初步使用的喜悦之后，用户将会厌倦它，这就是为什么动画需要谨慎使用的原因。如果你想知道什么动画可以帮助你，这里有一些例子。

1.软化生硬的切换

我们都熟悉这个。你在屏幕A，你按一个按钮或者滑动，一个完全不同的屏幕（B）突然出现。那么你不知道这个页面从哪来的，我是否按右按钮？现在怎么办？如果B页面在视觉上类似于A页面，很难辨别，该怎么办？用户甚至可以认为没有发生任何事情。这里就最适合动画，时刻展示变化状态。

2、切换上下文

当你来到一个页面，你不太确定如何与它直接交互。帮助用户的好方法是在引入特定对象时提供一些线索。如果你有一个帖子列表，例如，滑动它们可以帮助用户了解他可以继续滑动看更多。

3、提供方向

给用户感觉空间方向是很重要的。您可以通过与动画相一致来实现此目的，并使您的应用程序结构简单易懂。考虑一个物体，从屏幕向左移动，如果它重新出现，逻辑上它应该从它退出的地方。这将帮助您的用户了解应用程序，从而使他们在与之交互时感觉更舒适。

这同样适用于屏幕中存在的视觉提示。想象一下，您按下一个箭头指向右侧的列表项，逻辑转换应该是从右到左的幻灯片，就好像用户视图端口正在移动，加强了UI中的可视线索。
很多时候你会看到UI元素与过渡相矛盾。就个人而言，我觉得这很烦人，我认为这是我们应该避免的事情，否则动画将会侵害用户，因为它违反了预期的发生。

4、提供即时反馈

你有没有问自己，是否按了该按钮？做了什么吗 我应该再按一次吗？答案可能是肯定的，你可能再次按下它，只是意识到你实际上按了它。这就是为什么提供即时反馈很重要，即使应用程序没有立即响应。

在您的手指经常覆盖按钮的世界中，动画在为用户提供所需的保证方面发挥了巨大的作用。

在某些情况下，您甚至可以再夸张一点，燥一点。假设你的应用程序中有一个“明星”按钮，这是你的“英雄”动作之一（从未见过，我知道）。这正是你可以逗乐你的用户的地方。让它感到有趣，用户将要重复该操作。要注意时间，动画需要瞬间感受，否则会很快变LOW。另外也要有个度。

5、使内容活起来

如果您的界面或网站有实时内容，如图片，评论或某种计数器，动画可以帮助您完成两件事情。平滑添加新元素并缓解加载这些元素的数据延迟。

6、告知提示

在每个APP中，都有一个地方需要解释出错的东西 或引入新的功能。动效提供更直观和直观的方式来了解问题以及如何解决问题。

尽管有消极的消息，我们也要试图通过动效让用户脸上泛起笑容

三、动画必须反映品牌

从左到右考虑一个对象的简单运动。通过调整它的宽松曲线，几乎无限的方式来做出这个动效。有了这个，你可以为你的动画添加一个个性。看下面的例子，所有使用相同的动画和时间，唯一的区别就是缓和曲线。

图 A：快速，快乐，B：光滑自然，C：弹跳

所有的过渡都像橡皮球一样反弹，考虑你的品牌，你的用户和你想要传输的品牌调性。如果动画不符合您的用户 ，用户可能会感到失落，并失去对您的品牌的信任。想像一下，如果您的银行应用程序具有与游戏中相同的弹性风格的动画效果。你会相信吗？

重要的是，您的动画反映品牌，但设计动画时必须牢记的是下一个准则。

四、动画不应该是主角

如果您的动画成为一切的中心，那么您不是设计体验，您只是迫使用户观看动效电影。

动画需要是整个体验的一部分，补充视觉设计和支持互动，如何保持平衡是关键。在大多数情况下，好的动画是用户甚至不注意的动画。

如果您正在设计，您的工作不会让用户感到困惑，而是帮助他以最简单，最直观和最自然的方式完成任务，下一条指导可以帮助您。

五、动画必须自然而然

我知道“感觉”这个词可能是模糊的，但与我同在。
由于用户直接与界面进行交互，因此对界面具有一定的期望，所以动效要遵循物理规则。

六、动画不能浪费时间

动画可以用来缓解用户等待的焦躁0.1秒以下的任何东西似乎都是瞬间的，低于1秒钟的时间似乎是无缝的。所以，如果你有一个过程需要6秒钟的时间，你可以在几个单独的动画中分解。这个方法应该使这个过程感觉快很多，并保持你的用户。

您也可以使用动画来伪造即时动作，所谓的“欺骗用户”，让用户觉得快，这在后台实际上会花费更长的时间。这将使APP感觉更加敏感，即使该过程仍然需要比用户看到的更长的时间。

你不能模仿现实世界中的一切，你需要考虑到用户的期望。如果您在用户界面中按下一个按钮，就可以获得即时的反馈，因此不要忽视在这样的情况下的动画。

谢谢观看 欢迎留言指点

关注UED笔记  看点不一样的