（一）为什么要给产品加上动效？
较为全面地讲解了UI动效的存在价值，以及动效的设计思路和注意事项。
本文为UI动效的全面讲解，主要为初学者提供了产品动效改版的理论支撑以及设计思路和注意事项。
整体篇幅会比较长，因此会分几篇来进行写。
（一）为什么要给产品加上动效？
（二）在哪些场景加上动效？
（三）怎么制作相应场景的动效？
（四）动效的细节怎么处理？
（五）怎么与技术对接？
为什么要给产品加上动效？
在正式讲解为什么要给产品加上动效之前，我先给大家普及一个知识点——大家知道用户注意力的是怎么被吸引的吗？
不要克制，我知道你一直盯着那个小粉红看着呢，哈哈哈~~~~
一般来说人们的注意力总会先被一些动态的事物吸引，其次才会注意到物体的颜色，最后才会注意形状。
也就是说，一个页面中，按照吸引力来排序应该是，动图>颜色>形状。
其实早些年在dribbble等设计网站上，就有了概念动效的设计图，但是在国内在近几年才出现了比较不错的带有动效体系的产品，并且基本都是大厂下面的产品。（有人应该会说，好多app都有动效啊，我这边指的是整个动效是配合交互一起设计出来的，形成一个体系的。🙂）
究其原因，主要是因为：
a.早些年国内的app产品需要进行市场的争夺，产品研发以及迭代周期短，没有充足的时间以及资源去进行完整的交互以及动效的设计，这也是这几年交互设计，动效，用户体验火热的原因。
b.硬件设备的原因，动效会占用大量硬件资源，影响产品的正常使用。
c.前端技术的不成熟，使得动效在实际的运用之中还原度比较差。
那为什么现在要做？——
日渐饱合的app市场，单纯的静止页面已经很难使人眼前一亮了，需要增加新的东西来提升产品的竞争力；另外得力于技术的发展，使得近年来动效的实现也越发的简单，因而我们需要在产品添加动效设计。
而所谓的动效添加并不是这边加一个，那边加一个！因为这是属于交互设计的一部分，所以需要在范围层、结构层就进行全面考虑的，并且是需要形成一个动效体系的，不管是在风格，颜色，速度，等维度，以保证整个产品形象的统一。
除了这些，动效还有利于提升产品的交互，它具有以下几个优点：
①状态——可以形象地显示状态的变化；
相比直来直去的页面，带有动效的页面，更能吸引用户的注意力，并且给用户展示详细的状态变化情况，让用户更易接受。
②可以快速的吸引用户的注意力，并且引导用户进行操作；
汉堡包导航属于隐藏式的导航，不利于二级内容的流量导入，采用动效展示之后会吸引用户的并进行操作的引导。
③可以告诉用户，操作与对象的关系；
对用户的操作进行动态反馈，直接明了，更能符合用户的心理预期。在一些展示性的页面，利用动效直接展示，更是免去了文字的说明。
④可以缓解用户对处理速度的感知；
当页面刷新或者加载的时候，如果时间稍长用户就会产生不耐烦的情绪，而加上动效就可以让用户忽略加载的时间，降低用户的不友好情绪，并且拉近产品与用户的距离。
⑤可以提升内容的展示空间，提供沉浸式体验；
相同尺寸的界面，利用动效可以增加Z轴的深度，在不同的层级展示不同的内容，大幅度增加展示的内容，并且减少页面跳转给用户带来的不好的体验。
⑥可以让产品更有趣，增加品牌感、情感化、个性；
在一些转场，空白页，刷新等场景，可以将动效与品牌相结合，不仅可以增加品牌的传播度，还能提升产品的趣味性，让产品更加人性化。
未完待续······
