2015.09 动效设计，好看也要hold住

刚看了一篇关于动效设计的文章《动效设计：你的UI不是一部迪斯尼电影》，刚好最近工作中也碰到一些关于动效的问题，记录一下。

最近有同事在做首页改版，其中一个评审时候以为很简单的需求，耗费了大量开发资源：首页banner动效。首页banner一般是滚动图的样式，也出现过一些类似3D动效（让当前banner图置前、前后两张banner图作为两侧背景，从而形成类似3D的立体效果）、魔方动效（礼物说采用）这样的，但总体而言，创新不大。

设计大大们做了一个新的创新，简单的说，就是将一张banner图用两张来表达，一张是图，一张是文字。在banner图切换的时候，两张图的淡出效果是不一致的，在用户侧形成“一张图片突然分裂成两张的酷炫感”。

碰到的几个问题：

1. 这个动效要达到什么效果？在评审的时候，没有人仔细考虑这个问题。

2. 开发工作量超出，开发反馈是因为两张banner图淡出的过程中，导致整个页面不可操作。因为不是我的需求，具体开发逻辑不了解。最终是一堆开发耗时2个工作日群策群力才达到了设计的要求。

3. 由于两张图片动效速度不一致，就肯定有较慢的一张，结果是整个banner图淡出速度变慢，真个消失过程耗时3.5s，给用户感觉是反而慢了。

4. 两种图片对加载的要求高了，由于不能保证两张图片同时加载出来，会出现一张图片加载出来，另一张还是占位图的情况。出错感强烈。

借用上面提到那篇文章中的原则，确实是我看到这个动效时候，总是说不出来的淡淡不满意，对照下面这个原则，基本了解了，是有些问题。ORZ。

这里是我个人认为值得向你们推荐的几条法则：

1 明确每一个动效都能对户产生正面意义。“看起来很酷”解决不了任何问题；

2 确保所有的动画效果能在300毫秒之内完成；

3 避免线性动画出现，不然只能让我联想到“缓慢”、“无趣”、“机械”；

4 99%的动效都应该具备基本的加速、减速效果；

*其实你很少需要用到更复杂的动效方式，比如弹簧（Spring）或弹跳效果。