作者 José Torre，有感于动画被大量错误使用的现状，结合经验，总结出 6 条动画设计指南，通过案例介绍了何时、何处、如何使用动画。
全篇4300字左右，预计阅读时间为11分钟 (按均值400字/m计算)
这篇文章是我在medium上搜索animation for ux 找到的，觉得不错打算翻译，但是知乎有好心人翻译了，但缩减掉了一些内容。我觉得有意思且经历过的，就重新翻译了一遍。
作者 José Torre，有感于动画被大量错误使用的现状，结合经验，总结出 6 条动画设计指南，通过案例介绍了何时、何处、如何使用动画。
这里以作者的一个学习Freehand(Adobe收购Macromedia的一款类AI软件和Flash是兄弟软件)的经历故事开始
作者自述：
回到03年，那是我刚刚开始做平面设计，那时接触的第一款软件工具是Freehand，当时是热情高昂。软件学习到的一些技能，渐变，阴影，Comic Sans(一个梗，一种类似手写的字体，可能刚开始玩字体好玩，后面该字体的可读性不好，遭人诟病)，在创作的时候所有能想到的都会用上。结果出来的东西就很糟糕，很乱。但是谁年轻的时候还没干点事儿出来，我就像第一次去糖果店的小孩，还没人管那种，然后吃了所有我想吃的糖果，最后肚子痛。就像“John Snow，you know nothing。”这个梗是《权力的游戏》里面，耶哥蕊特（Ygritte）深深地爱着斯诺，但两个相爱的人处在敌对的两个阵营，所以耶哥蕊特对斯诺总是忽冷忽热，所以，“John Snow，you know nothing”其实是一种无奈，无奈自己与斯诺不能长相厮守，同时也包含对斯诺不理解耶哥蕊特的抱怨。)
时间拉回现在，你可能会问这跟我要说的动画有半毛钱关系。但是，我想说的是，现在的设计师和开发者，就像我故事里面的小孩子一样，在开发应用或者网站的时候，过度的使用动画，忽视了动画在提升用户体验中的作用。
所以在经过思考和实践后，我总结了如下的6条指南，或许对你有用。
1.动画不应该在设计结束后添加
当你的设计过完了抠每个像素的过程后，仿若感觉缺点什么的时候。突然想起来是“展示真正的技能的时候了”，这个时候想到了加点动画。显然这是不对的，同时这也是导致了动画被滥用的原因。把设计完加动画和你在PPT里面加过渡效果的考量混在一起，这是不对的。
如果把用户体验比作蛋糕，大多数时候，动画被视作蛋糕上的草莓一样，但我不同意这种观点，我认为动画应该是和到这个蛋糕里面的一种原料。
这就是说，当您在绘制线框图的时候，动画应该已经在您的脑海中。就像上图，按钮按下后的红色箭头指示对象向左移动一样简单，或者像下面简单的说明一样。保持简单，这样才更有助于关注动画的意义而不是动画的形式。从而避免你更多的依赖动画去解决问题。如果它不能有效得为你服务，那就不要它。因为刻意而为之，会成为用户体验上的障碍。
2.动画一定要有意义
没必要的动画只会花费用户宝贵的时间(生命)，在动画第一次引起用户的兴趣后，后面用户就会逐渐生厌。所以，动画需要带有意义，这样附着到体验上，就是显得流畅自然。如下是几个好的例子。
-避免生硬的切换-
不管是不是设计师，这样的体验你肯定有过
第一种，你按下按钮，然后 bong！在 界面（A）上，界面（B）突出闪现出来，“这？！是从哪来的”(黑人问号脸)。“我按对了吗？”“我要做什么？”。
第二种，界面（A），界面（B）非常像，感觉什么都没有发生过一样，用户茫然无措。
这样的情况引出了动画另一个至当的因素，变化时刻。考虑下从界面（A） 到（B）过渡需要花费了多长时间，哪些对象应在界面保留，如何到达那个位置的？但不要考虑得过头了，因为接下来你将发现，动画最好在「无形」中起作用。
-为引入物体提供线索-
有时候你进入界面的时候，不是很清楚如何直接有效的产生互动，有一种好办法就是为引入特定的对象提供合适线索。例如，文章列表，滑动有助于用户明白继续滑动可以看到更多，你也可以通过按照一个接一个定时滑动增加，从而显示这些项是分开的，可以与每个项目单独产生交互。
假设您要点击其中的一个，打开并显示特定帖子的全部内容，现在，之前与其他信息处于同一层级的信息变成了主要内容。过渡动画强调了用户的选择，同时也让用户聚焦于之前选择的对象进行交互，也带来更多的界面空间。
-提供方向感-
当用户界面与用户之间的所有障碍没有了，用户界面就会变得真实具体起来。所以有必要赋予用户空间方向感，你可以通过让动画的保持一致性和易于理解的结构来实现。
如下一个对象从左移除界面，如果它再次出现的话，理论上如果它应该再次出现应该是从它消失的地方出现。有始有终，这有助于使用户了解app的全貌，从而使交互体验更加流畅舒适。否则，就会给用户一个错觉，出现的对象是一个新的对象。
这同样适用于屏幕中的视觉提示。想象一下，你按下了一个箭头指向右边的列表项，理论上过渡方向应该是从右到左的滑动，就好像用户视角向右移动一样，从而加强了用户界面中的视觉引导。
很多时候，您会看到与过渡相矛盾的UI元素。就我个人而言，我觉得这非常烦人，我认为我们应该避免的这样做，否则动画会对用户造成困扰，因为它们和用户的预期不一样。
-提供及时反馈-
你是否遇到过这样的情况心里默默的问过自己，“我是要点按钮吗？”“它是做什么的”“我要再按一次吗”，答案是肯定的，而且你肯定也不只点过两次，来确定你之前点的是有效的。这就是为什么提供及时的反馈那么重要了，即使是没有提供即时反馈。
在按按钮的操作上，你的手指会遮住按钮，而动画恰恰能更好的提供及时的反馈，从而让用户能安心操作。
在某些情况下，你可以做得更好甚至更吸睛一些。假如应用中有一个「星星」收藏按钮，它是你「英雄」(“Hero”actions)操作之一。这时你可以把动画做得好玩些，有趣些来让用户开心。让用户上瘾，想不断的点按，好像中奖了一样。但是谨记别做过头了，弄巧成拙。
-让实时内容动过来-
如果你的app或网站有实时内容，如图片，评论或某种计数器，动画可以更好地让新元素顺畅的增加以及缓解加载这些元素可能带来的延迟。
-讲故事-
几乎在每个应用程序中，都有一个解释出错或引入新功能地方如404，新功能引导页面。插图在这块的作用很大，因为提供了可视化，直观的方式来说明问题以及如何解决问题。如果说一张图胜千言的话，想想一下，动画一秒可是有30张图的。能说多少事了。
在报错或者新功能特性展示这块上，用动画来呈现就再好不过了，这会让用户愉悦并印象深刻。即使是出现问题的时候。但是，如果你的 app 总是显示错误页面，那就算了吧。
现在你知道该何时(When)，何处(where)使用动画了。现在我们再来了解下如何(how)使用了。
3.动画要能体现品牌调性
试想一下从左到右这个简单的动效，通过调节缓动曲线就会有很多种不同的效果。而这样就可以赋予动画不同的个性，如下例子，它们是相同时间内相同的动画，只是缓动曲线不同。
虽然有无数种缓动可调，但是，为了避免选择困难症犯了或者把缓动调得像果冻一样跳得咚咚前，先考虑下品牌，用户和你想要传递的调性。如果动画与调性不符合，那么用户可能会很尴尬，并且不再喜欢这个品牌。试想一下，如果您的银行APP里的动画和你玩开心消消乐一样的动画，你会放心使用这个银行app吗？
4.动画不应该成为孤胆“英雄”
动画是扭转难堪的局面的英雄，但是，不是一个孤胆英雄的角色，更像是忍者神龟一般各展所长合作的英雄，如果你让动画的地位占据在屏幕中心，那你就不是设计动画，而是让用户看电影了。
动画应该是整个用户体验的一部分，视觉部分的补充和辅助交互体验。保持使用的度是关键，好的动画设计在某种意义上甚至都不会引起用户的太多的注意。
如果你在设计动画，你需要明白你的工作不是取悦用户而是让你的用户尽可能更容易，更直观以及更自然的方式完成任务。接着下一指南就有说明
5.动画必须自然
由于用户直接与用户界面进行交互，在操作上会有一种遵循现实物理规则的预期，虽然你与之产生交互的列表会根据快慢进行回应是就是好案例，这同样适用于其他对象。
然而，这不意味着所有的app都应该有一样的反馈，在现实中，如果你踢了不同的球一脚，得到的反馈不会都一样的。足球会飞走，但保龄球就不会飞还可能会弄伤你，就像在上一条指南里面提到一样，这都关乎于你要传递的品牌的调性和要点。
你需要定义你的app的元素和要点，并产生相应的行为。但是记住，要不断的调整优化这样才不会和下面的这条指南相悖。
6.动画不应该浪费时间
动画可以用来调节用户感知的时间，所以利用好这点会很有帮助，对人的大脑来说，低于0.5秒的感知就是连续无缝衔接的，如果一个耗时6秒过程的动画，你就可以将其拆解为若干个小动画，这个技巧可以让用户在过程中感觉更快而且更关注。
你也可以用一个动画来掩盖一个实际上在后台耗时更长的动作。这可以让app感觉响应更快即时这个响应过程事实上比用户看到的动画时间更长。
你不可能仿真现实世界的一切，你需要考量用户的预期。如果你在用户界面按了一个按钮，预期得到一个及时反馈，此时就不是运用物理规律的好时机，所以别在这样的情况下使用缓入动画。
好了，如果你做到了我说的这些，也应用好了这些指南。那你就打开了利用好动画的大门，也提升了你用户界面的观感还有用户的体验。虽然知道了这些，但下面还有最后一道栏杆需要跨越。
临门一脚，跨越最后的栏杆
如果你想让你的用户参与进来，你需要提供无缝的体验。如果使用得当，动画绝对可以帮助你实现这一点。这不是一个容易实践的过程，因为任何与设计有关的事情都需要为迭代过程做好准备。
你还需要了解如何制作原型并收集反馈，如果你的同事缺乏动画方面沟通的词汇，沟通起来就很困难，他们无法在不使用拟声词的情况下对动画发表评论（例如“那个按钮就嗖嗖，然后是嘣，你知道吗？”），因此我认为向大家介绍12个基本原则是很好的动画，让大家熟悉这些术语，让他们以一种你能理解的方式表达自己的感觉。
最后一道障碍是你的开发团队能和想要投入动画的精力了。你必须推动，让他们知道在这个世界上，动画正在成为一个良好的用户体验的固有的一部分，问题不是 是否 要，而是 何时 你们才能紧跟上这个洪流。你们越快做，效果就越好。用户用爽了，你们也会大有裨益。
https://vimeo.com/93206523
12个基本原则视频
原文作者：José Torre
原文地址：https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a