动画，简单明了才最关键

今天的干货文章选取了一篇来自Sophie Paxton的译文，关于UI设计中的动画效果这个问题，来听听大神是如何看待的！

要知道使用者界面里的动画不全都是坏事，坏的是那些过度滥用动画以至于影响使用者体验的设计师。一个好的设计师应该要知道该如何取舍使用的时机，以下几点将会告诉各位，在什么样的情况适合使用动画，让你在未来不会再不必要的时机乱用动画。

太过刻意

以下的例子指的是现在迪斯尼化的UI动态设计，看起来是有点夸张没错，但还真的这样设计的UI其实不在少数。

这样的设计看起来就好像我们用隐形的橡皮筋把这些符号Icon垂吊在半空中让它一直晃，一点都不好看。

过度使用

动画就像杀虫剂一样，你用太多就会失去它的效果。

动画原则

很多UI设计师常常会建议大家多去看看迪斯尼的动画制作原则，但其实这种东西只会让使用者的界面使用起来更缓慢而已。

很多UI设计师常常把界面当成动画展示区，但除非你真的是想进到皮克斯当动画家，最好还是少用那些太过卡通化的动画效果。

到底什么才是界面

界面存在的目的就是将不断流通的信息传达出去，对于设计师来说，他们的工作就是决定何时是他们介入流通信息中的最好时机。

动画在UI设计中扮演的角色

以下是几个使用动画的基本原则：

你是否能确定使用动画能帮助到使用者。「看起来很好看」不是一个正当的理由

尽量让动画出现的时间少于300毫秒

避免使用线性移动的动画，因为这会让整个界面看起来迟缓无趣

99%的动画都应该使用简单的缓入缓出效果

只有在极少数的情况下才会使用弹簧（Spring），弹跳（Bounce）等效果

通知动画

简单的通知动画最常不要超过300毫秒，这样的设计才能真正帮助使用者，因为它能吸引到使用者的目光。

吸引你的使用者

动图

从以上的例子我们可以看到，通知的强度在第二次点击的时候大大的增强。

第一次点击时，通知缓慢地出现。

第二次点击时，通知列的信息激烈的震动。

当使用者不断的点击按钮时，界面会出现另外的信息通知使用者。

设计师也可以改变安钮的颜色来吸引使用者的注意。

动图

这个设计非常的简单且有效，常常在行动装置上能看到它的踪迹。它特别的点是，使用者即使在扩张列表之后，原先的画面还是维持在原本的状态。

在上方的案例中，我刻意将关闭键的出现时间稍微延长，我也使用转折的动画让使用者把目光聚集在较重要的信息上。

信息重要的优先级

身为一位设计师与软件开发者最重要的就是决定UI上哪个设计元素才是优先选择，以下方法可以用来强调：

1使用标题

2画底线或是加上粗黑字体

3使用颜色

4使用形状与图片

5动画

没有人会把文件里每一段文字都改成标题大小，同样的，也没有人会把界面里的每一个符号元素都改成动画。请把动画当成一只荧光笔，只在重点的部分运用。过多的使用会让人很难抓到重点，造成你想传达的信息流失掉。

功能性vs美观

如果你开始听到团队里有人提到他的UI动画能让使用者「赏心悦目」，那你就该当心了，因为单纯为了美观而设计的动画几乎都不是什么好设计。

记住，简洁就是美，功能性的设计永远胜过纯粹为了美观的动画。

不要让你的动画影响使用者的体验，想想看为什么飞机的导航界面为什么从不使用动画。你也许会觉得300毫秒的动画又无伤大雅，但对于使用者来说，你多余的动画只会烦死大家，不会让任何人「赏心悦目」！

但是我们不可否认的是好的动画设计也是吸引用户停留的精髓所在，具体可以看看这篇推文☞别拿LOADING不当回事

结语

另外，似乎我们刚抛弃了拟物化的视觉设计，又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻，或像是挂在隐形的橡皮绳上。

动画就像某种咒法。如果过度使用，就会效力尽失。我听闻一些UI设计师推崇卡通化的动画设计，将它作为UI设计师的必读准则。不幸的是，这增强了UI的娱乐功效，总会使得界面变成用户的阻碍。

许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar，否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。

所以，你可以尽情的运用动画吧，把动画当成一个能更快传达信息的工具，但记得，功能性远比美观更重要，多为使用者着想，不要让他们在你的界面上多浪费那几毫秒。

想学习的话可以关注公众号U爱设计菇凉 即可获得相关学习资料，也可以加QQ交流学习哦！1289916063.