请勿滥用动效
文章或许会有点长，但真正的干活从来都不是三言两语就能讲得清楚。 <!--more--> 人们对于微交互（如果你对为交互感兴趣，可以看看我的这篇译文为交互:好产品的秘密）的重视带火了动效设计这个话题，在国内设计网站上能看到有越来越多的设计师po上了自己的动效作品，许多公司的用户体验部门对于应聘者的要求也加上了“会使用XX软件制作动效者优先”这一条。这是一个很好的现象，动效对于产品质量的提升无需多讲。
但是，人们对于动效的关注好像更多地是停留在样式上面。对于动效的使用，如果过多地纠结于样式，太过忽视动效也应该为背后的技术服务这一层的话，相信这对于一个产品的发展是极为不利的。
技术发展的制约
人们对于数字视觉设计的态度和需求一直在变。有兴趣的朋友可以去看看那个时候的macOS的图形化操作界面和现在的macOS的图形化操作界面有了什么样的变化。为什么会有这样的变化？那时候的人们不想要更加鲜艳夺目的设计，不想要更加简单易用的设计吗？不是的，那时候的人们当然也有着这样的需求，但是他们做不到。原因是，不同于别的传统艺术领域，数字视觉设计本身就会被数字技术的发展和进化紧紧地限制住。以往的最早的macOS没有如今的macOS所拥有的如此丰富的动效，因为那时候的技术条件不允许，cpu可能没有能力去处理任何的动效，但是现在不一样，就是哪怕你买了一台手机，这台手机的计算能力也绝对比七八十年代的任何一台顶配的电脑强的多。设计师们之所以有开始去设计动效，可并不是以前他们不知道要通过动效来实现更加好的用户体验，而是技术的发展开始允许他们这样做了。所以作为设计师，丰富的想象力固然是重要的，但知道什么是允许的、什么是不允许，也非常重要，因为数字视觉设计天生受制于数字的发展，所以，从事这个行业的设计师们，也将受制于数字的发展。
视觉设计的发展
动效设计的发展有点类似于视觉设计在90年至2000年间的发展。有时候回头看看一些设计历史其实蛮有趣的，或许还能帮助我们分析现在的一些现象。
当一股风潮刚刚兴起的时候，而又没有发展出一套成熟普用的规则之前，设计师们对于新“玩物”的滥用似乎是肯定的（例如现在遍地的弥散阴影）。80后的同学也许映像会比较深刻，那个时候的网页呀，还有一些游戏的ui非常喜欢使用茫茫多的现在看起来并不自然也并不优雅的阴影，也喜欢使用很多的倒角和模拟的灯光效果，也并不讲究留白。总之在那个数字浪潮刚刚开始渗透到每个人的生活的方方面面的年代，设计师总是趋向于毫无节制地使用这种风格，因为他们被允许这样子做。
扁平化设计
不管你喜不喜欢，扁平化设计风格以及占领了你所有设备的UI，各大系统都不约而同地摈弃了拟物化设计，并且以扁平化或者说是这种极简的风格建立了自己的一套成熟的设计语言。
但我并不认为这是一种滥用，相反我觉得扁平化的浪潮是现在数字视觉设计渐渐趋向成熟的一种反映。它既迎合了大众的审美，也能很好地服务于现代设备屏幕大小不一碎片化比以前更加严重的局面，扁平化设计可以说是非常贴合时代的一种设计产物，它相比拟物化设计更加高效，无论是对于设计人员、用户还是设备而言。
在拟物化时代，用在手机端的一枚按钮如果要搬到iPad上去使用，设计人员除了要改变按钮的尺寸之外或许要重新考虑光影的效果，感受过的人都知道，这非常麻烦，而来到了扁平化的时代，大多数情况之下设计人员只需要将按钮的图片的尺寸修改一下即可放置到不同的屏幕上面去，这就提高了设计人员的工作效率。拟物化的按钮的图片文件体积肯定且必须比扁平化的按钮的图片更大，对于设备来说，读取更小的文件肯定更快。对于用户来说，设备运行速度更快，就意味着使用起来效率更高，而且扁平化清晰明快的风格确实能够更高效地传递信息。
动效设计
目前动效设计的发展状况就颇为类似90年代到2000年的数字设计刚刚冒起，一切方兴未艾的状况。
从早期Web上面的各类CSS写的简单动效到后面各种强大的Javascript驱动的，支持硬件加速渲染的更加复杂的动效，由于技术的迅速发展，设计人员关于“动效”这个命题能够做到的越来越多。
被滥用的动效
动效的滥用随处可见，尽管是经验丰富的设计师也容易在潮流的席卷之下忽视掉这个问题。然而动效这个东西本身就非常的抓眼，一旦出现问题，那么用户肯定能够察觉得到。设计师们要注意的是你的产品本身并不是一个玩具，在大多数情况下没有人会因为你的动效比人家更复杂而选用你的产品。当然，用户对于产品的品质的要求比你想象中更高，但人们最想要的不是充满炫技意味的无理的动效，而是“讲道理”的动效。这也是各大设计指南一直推崇的东西。
举栗子时间到——OS X（Yosemite）的进入全屏模式的动画
不管是移动端还是桌面端，都存在着这种并不完美的动效，这个例子离我们不远不近。尽管是像苹果这样的，以牛掰设计高端品味著称的厂子，也会出现这种既没意义也没效率的动效。在15年发布的Yosemite里面，从窗口模式进入全屏模式，会有这样一个动画：
这个动效的问题包括：
- 太慢了，用过的人都知道
- 有点没有必要
- 这个动效不能关（要知道OS X里面虽然有非常非常多的动效，但是大部分都是可以由用户来选择打开或关闭的，但是这个动效不行
- 返回最小化的动态效果有点糟心，看起来好像卡顿了一下，并且也很慢
或许你会说上面的问题都非常主观，你就是觉得这个足够快，也有必要，你也不会想要关闭它，它返回最小化的效果并不让你觉得很糟心。但是事实是，在诸多负面反馈压力之下，苹果在El Capitan这个版本中就把这个动效给撤了，这个动效对用户和产品本身没有任何裨益。
你说的那么多，那如何设计一个好的动效呢？
下面又来了一个小栗子。
这个小破动画乍一看可能还蛮正常的，但是且听我一番分析：
- 这里并没有使用蒙层的必要，用户只是想看看详细信息而已。
- 在点击按钮的一瞬间没有任何的反馈，用户并不知道其实后台正在加载东西。
- 看起来太慢了。
- 这个动效没有体现任何意义。
最烦人的地方时，点击后，界面上并没有任何反应，如果在网络不好的情况之下，用户很有可能要对着这个黑乎乎的蒙层看非常久全然不知道它在干嘛，直接让人感到这个产品反应迟缓，总是需要等待。
接下来我会一步一步地改善这个动效。
这个动效的意义何在？
添加动效之前一定要清楚知道这个动效的是否能够服务到产品本身以及用户，是否能够在某个层面上切实地提高了用户体验水平。
例子里面的操作既然是需要通过网络加载一些数据的，那么我们最好加上一个示意“正在加载”这个状态的动效，起码让用户知道自己在等什么。
改善一——加上必要的元素
正如上面所说到的，我们加上了一个loading动画，整个过程看起来就起了非常大的变化了，用户知道应用正在工作，然而由下往上滑动的那个卡片状弹窗，还是显得没什么实际意义，它慢慢悠悠出来的动作让人觉得等待时间有点长。
我们试着让它直接出来。这让消耗同样时长的加载过程显得没有那么久，但是完全去掉动画也有一点不好，它直接显示的方式让人觉得很突然，也让应用显得不那么现代，这篇文章并不是提倡你拿掉所有的动效，这是万万不可的，文章后面会给补上一个新动效。
改善二——障眼法
人们从很久以前就以各种手段减少用户的等待时间。缓存、预加载甚至花大力气不断提高网速上限，人们真是恨透了等待。尽管如此，等待加载这东西还是没有谁能绕过去。
等待总是在所难免的，然而合理地运用一些“障眼法”能够让一些等待“看起来”更快一些，从而提升整个产品的体验。
我们去掉之前的在蒙层之上的loading动画，取而代之的是一个点击之后在按钮侧边就出现的较小的loading动画。
更近一步的是，我们使用了渐进加载的方式，让先加载到的数据得以先展现，后加载到的数据后面再展现。这不仅让用户“感觉”到你的产品运行速度非常快（其实数据还没完全加载完毕，我们骗了用户，整个加载花费的时间并没有变化，但是这场欺骗的出发点是非常善良的，就像你妈经常说你好看得很一样），而且用户也能更好地阅读这些被分步展现出来的信息。到了这一步，我们的动效样式已经比刚开始的时候好很多了。
不过还是不够，文章并不是要让大家去干掉一切动效，这个卡片出来的方式有点突然了不是吗？
于是乎我们最后加上了一个卡片展开的效果。
这种卡片展开的动效多见于Material Design，也是最近比较流行的样式，它与我们想要达到的目标配合得非常好，几乎没有一丝多余的动作，也没有让人觉得不够炫酷。
从毫无意义，到能照顾到各方需求（用户、产品、技术限制），这个动效已经变成一个有表有里，充满意义的一个动效了。
结论
我们最好不要再去走前人走过的弯路，走直线的速度肯定是最快的，当然啦，走了弯路也不要紧，或许沿途的风景也很美。
设计人员使用动效的时候切忌心浮气躁，一个劲地想加入一些只图好看的动效样式真的会有反效果。组成优秀体验的元素从来就不只“好看”，动效除了好看还应该有用，既能服务用户，也能为产品、为技术本身服务。
参加工作四个月，坚持写点小总结，希望你们喜欢。