做靠谱交互动画的 5 种方法

做靠谱交互动画的5 种方法
从我在这个网站上开始写《Flashless Animation》这篇文章到现在已经两年了。

从那时起，交互动画已经从像圆润的APP一样的用户界面到交互式杂志在网站上流行。

对网
页交互动画师、交互开发人员、用户体验师、用户界面设计人员和许多其它与交互动画有关的人员来说，这是一个多么令人兴奋的时间。

但是匆忙的设计交互动画，似乎表示我们很少讨论是否必须要使用交互动画，而是更多地讨论我们用交互动画能干什么？我们花费很多时间为怎么以60fps 使
所有东西可以动画而着急，而不是设计一些方法让初级用户避免障碍。

我喜爱网页动画，并以它为生。

我知道动画能被滥用，而且我们都拿flash-trubation来娱乐。

但是在网页设计期间积累的教训，我们忘记它是如此的快啊。

视差滚动效应也许是对这原因产生的大概介绍。

在Flash和网页动画API 这一令人深思的时期，我们确实学到了很多。

所以这里的五点建议，我们可以用于把处于交互动画滥用边缘的使用者拉回到高水平上。

有这几点建议在心中，我们可以让2015的
网页动画年真正地属于它自己。

有目的性的使用动画很遗憾，大量的Web开发社区认为动画是装饰性的。

UI设计师和交互开发人员当然理解的更到位。

但是当我给一个工作室培训交互动画的时候，我知道我的学生是在和一些决策者做艰苦
的斗争，这些决策者认为有动画会非常美妙并要求尽可能的在项目的结尾附上动画，而我的学生则认为不然。

这种观念差异很难动摇，但是当我们精心做动画的时候这种观念差异也许就会消失。

附加动画带来的危害比益处要多，这点很少被用户考虑。

例如，用户也许会抱怨动画太快或者太慢，或者他们不知道动画在展示什么。

当我今年参加Chrome 开
发峰会的时候，我有和Roma Shah 交流的机会，她是Polymer Material Design 背后的UX 主管。

我问她有什么建议给在设计当中使用动画和转场的设计师。

她简单的回答：有目的地使用动画。

如果你不能慢下来想想如何做交互动画并代表用户做一个充分知情和精心制作的决定，那么你最好不要做这个尝试。

动画需要花费精力来制作，而一个差劲的动画比没有更糟糕。

不止《生活的错觉》这把书中提到的动画12 条准则我们总是试着在激发我们兴趣却毫不相干的
事情之间找到相关性。

最近越来越多的人把《生活的错觉》放在挨着《理解漫画》这本书的同一个书架上。

这些书给我们带来很多来自其它领域的有用的观点。

然而，我们不应该在网站上犯类似与漫画书与动画片的错误。

虽然它们可以帮助我们用新的角度理解我们的工作，但是这些概念会或多或少产生上述混淆两者概念的作用。

我一直在慎重地思考《生活的错觉》，迪士尼动画工作室的经验丰富的工程师们在书
中提出了动画十二条准则。

这些规则对做动人的、逼真的动
画非常有用，如像弹起的球、蹦跳的松鼠、绚丽的物理极光一样的页面转场动画。

但是什么时候或者怎样把一个动画作为一个大型交互体验的一部分，这些准则没有对这些问题做方向性的指导。

比如一个下拉操作需要多久才能伸展完毕，或者一组可操作对象是应该按照顺序，还是按照整体做成动画。

这十二条准则仅仅是一个开始地方，除此之外我们还有其它很多东西要学习。

我已经写过至少六条应用到web和app的设计交互动画功能。

当我们思考做交互动画时，我们不仅仅考虑做什么动画、动画的物理学，还要考虑为什么要做动画，怎样做动画。

如果动画是多余的或者令人费解的，再严密的物理设计也是徒劳的。

有用、有必要，然后是漂亮有一句行内话：除非一个动画既是必须又是有用的，要不然不要做它；如果它既是必须的，又是有用的，那就毫不犹豫去把它做漂亮。

当说到动画和网页，目前很少有文章写什么样的动画是有用或者必要的。

我们大部分都是倾向于做漂亮、令人愉快、令人有趣的动画。

虽然动画的外观漂亮很重要，但是外观是仅次于用户的整体体验的。

第一次我在掌机看到黄色口袋妖怪的开机动画时，我被迷住了。

到了第六次的时候，当Freak的游戏图标出现在屏幕上时，我被开始按钮搞的厌烦了。

当我们在做设计的时候，令我们高兴和有意义的东西对用户来说却是未必的。

像黄色口袋妖怪令人欣喜的开机动画一样，纯粹令人愉快的动画即使是被用户欣然的接受，
但是太多次的重复却最终无意义的动画，用户就会慢慢对该动画产生厌恶之情。

如果一个动画不能在某种方式上帮助用户，如让用户知道他们在网站的什么位置或者一个页面上的两个元素是如何彼此相关的，那么它是在耗费电池并在不停地产生仅仅令用户高兴的效果。

资源很少得到合理的利用。

动画不是仅仅为了令用户高兴，首先，我们必须能让动画给用户清晰的表达两个意思。

以从 网站上这个菜单图标为例。

当我们点击这个菜单图标时，它向我们表达了两个意思。

1.这个菜单按钮用动画给用户以反馈，表面这个图标已经被点击了。

2.这个菜单按钮表明通过点击关闭图标，页面的内容将会发生改变。

假定我们有两个好的理由来做交互动画，那么就会有理由来取悦用户。

以四倍速度让动画更快有一个传统动画的概览法适合于网页动画：不管你的动画应该持续多久，把动画的持续时间减半，然后再减半。

当我们设计动画几个小时之后，我们对时间的感觉会变长。

对我们来说速度很快的动画，对大部分用户来讲已经到了无法忍受的慢。

事实上，最近来自于用户对网站动画接口的绝大数批评似乎是：“它太慢了。

”一个好的动画是不唐突的并且速度是非常快的。

如果让你的动画持续时间处于一个最佳值，那么请把动画持续时间减少到原来的四分之一。

安装一个关闭开关不管一个动画是多么的富有见解和必要性，总有一些人对动画不感冒。

对这些人来说，我们必须增加一种方
式来让他们关闭网页上的动画。

幸运的是，网页设计师已经在考虑赋予用户一些自己做决定来改变网页体验的权力。

以下面的动画为例，这个《小鱼商店》的动画电影网站允许用户关闭视差效果。

虽然它不能移除全部动画，但是这个网站确实减少了动画的视觉给用户带来的头晕的感觉。

在我们网页设计的工具库中，动画是一个强有力的工具。

但是我们必须小心：如果我们滥用动画，动画也许会带来不好的效果；如果我们低估动画，它就不能完全发挥它的作用。

但是如果我们恰到好处的使用动画，当既有必要又有用的使用动画，赋予用户关闭的动画的权力，那么动画会变成一个帮助我们建造一些用起来简单、带给我们快乐的东西。

让我们把2015的网页动画年带给用户吧！?。