作者最大原文链接

内容简介

我之前的文章提到过，优秀的动画应该与人和谐。响应已经非常惊人，而且看到别人对过度动画界面感到沮丧是一种非常棒的体验。

要清楚的是，我并不是反对UI中的动态设计。恰恰相反，我只是觉得那些最终阻碍用户的动画是有问题。

一个良好的UI设计师的最明显的标志之一是克制。也就是说在你选择功能或动效时要考虑，在完美的机会出现的时候才使用它们。

本文不仅告诉你哪些是不必要的动效，我也会尽力告诉你们那些场景下使用动画会为你的设计增色。

一个有争议的例子

下面是一个我能想到的，阐述UI动效设计中的迪士尼原理。虽然这例子有些夸张，但实际上，的确有很多UI的动效会做的比它还有扎眼。

这就像我们摒弃了视觉上拟物风（skeuomorphism），而用交互上的拟物风来代替它，这样的效果让我们感觉这些数字化的物品都是用果冻做的，或者是从一个无形的橡皮筋上掉下来的。

停止万能动画

动画就像诅咒。如果你过度使用它，它会失去所有的影响。

动画原理

我听过一些UI设计师将《迪斯尼的动画原理》作为UI设计师的基础阅读书籍。不幸的是，这使得我们所设计出的UI过于娱乐化，最终导致交互过慢的UI。

许多UI运动设计师似乎将其用户界面视为动画组合。除非你希望被皮克斯收购，否则你应该避开像“弹跳”或“缓入缓出”一样轻松的动画。

什么是交互？

在计算中，交互是共享的边界。计算机系统的两个单独的组件交换信息。

交互主要负责交换信息，也就是这个职责使得交互尤为重要。设计师面对的挑战是决定在什么样的时候运用这个中心UI原则。

UI设计中的运动

这里有一些简单的原则，对我来说很好用，所以我建议：

1.确保每个动画对用户来说都是有用的，而不仅仅是因为“看起来好看”。
2.确保动画的持续时间在300ms以内 。
3.避免动画线性缓入，这让动画看起来很慢，并且无趣、机械。
4.99%的动画都应该使用简单的“缓入”或“缓出”动画缓动
5.尽量少使用太过异常的动画效果，比如弹性、弹动。

一些UI示例

请随意批评/分开这些例子。您的意见和建议经常有助于改善我对这些问题的想法。

通知

一个简单的动画，只需持续300ms以内。有一个非常微妙的分层效果，消息在红卡动画启动后100ms内显示。在这个例子中使用运动确实增强了该应用程序的用户体验，因为它有助于将用户的视线吸引到容易被忽视的重要通知上。

迅速升级

上面的演示使用强度升高的动画。
在第一次点击通知消失
在第二次点击标签震动

如果用户继续单击该按钮，则可以使用可选的模态弹窗来吸引用户对该问题的注意。

此外，按钮本身可以改变颜色，以提示后续尝试的失败。

卡片展开

这是在移动设备上通常使用的卡片视图的简单但非常有效的实现之一。我真的很喜欢这种交互，因为它允许用户自动联系前后的界面。即使我们不记得这个清单了，但我们清楚它就出处于展开弹窗的正下方。

我有意延迟显示卡片的关闭icon，我使用了一个位置和不透明度同时变换的动画。这将吸引用户注意到一个重要的UI元素，自然而然的就会注意到关闭按钮。

重要层级

作为设计师和开发人员，我们最需要做的的事情之一是确定的UI的哪些元素比其他元素更重要。我们可以按以下顺序执行：

1.通过使用标题
2.下划线或使文字粗体
3.使用颜色
4.使用形状和图片
5.动画

您不能将文档的每个句子都放入标题中。同样的原则也适用于动画。将UI中的每个动画元素都视为与书面文档中的标题同样的重量级别。它应该用于表明元素的重要性。过度使用它会使您的层次结构变得平坦，并弱化您尝试传递的信息。

功能与美学动画

程序员经常谈论“代码味”的代码。这是指编程代码的特征，可能不是完全不好的，但是那些程序员的经验丰富的代码可能会导致潜在的差的代码。

如果您开始听到团队成员使用诸如“取悦”用户之类的界面动画，您的“设计味”闹钟应该可能会开始关闭。为了动画而做的动画设计（几乎总是）糟糕的设计。

记住，少即是多同样适用于动画。功能性总是胜过纯粹的美学动画。

不要让你的动画妨碍用户。这就是为什么飞机的导航UI不使用任何动画。添加不必要的300ms动画的UI可能不会杀死任何人，但它不仅仅不会取悦用户，更会阻碍你的用户！

说在最后

一切都可以在您的UI中使用动画。将其用作高效的方式来快速传达重要信息。注重功能而非纯粹的美学动画，并珍视用户投入到您的UI的宝贵的一毫一秒。