AE动效设计

在产品设计中构成界面的三大元素：「形状、颜色和动效」，其中动效最能够第一时间吸引用户的注意力，传统的用户静态界面设计，受限于时间的关系，很难阐述表达用户想要的某个点，但动效设计不仅可以表达页面的时间关系，还可以叙述因果关系。

动效设计的意义

为什么要做动效设计，当然是能够为产品带来价值才会去投入资源去做，那么带来的价值是什么？在大多数的认知里，动效能吸引用户的注意，那么自然能为产品带来点击或跳转等价值，但这仅仅是动效赋能产品价值中的其中一种，动效的意义针对产品和用整体可以分为两块：

其中很多因素是互动或者呈因果关系的，比如引导用户操作可以减少用户对产品的认知成本，提升产品易用性也变相提升了用户和产品的互动性，为产品注入活力也会让用户减少部分不可避免的不适感等等，两者是相辅相成的。

举个简单的例子，POP 弹窗的设计大家都不会陌生，POP 弹窗的出现往往目的是为了引导用户点击跳转至新的模块，最终目标都是引导用户去点击弹窗上的行动点；上图示意的静态弹窗往往是市面上大部分弹窗的出现方式，很明显的对比下动态弹窗和行动点让人的点击欲望更强烈，固然结果自然是动态的点击率比静态的要好。

动效的种类

动效的种类大致可以分为四种：转场类、展示类、引导类和反馈类。很多产品设计中我们最常见的往往是以这四类动效或衍伸的动效为主，下面给大家介绍不同种类动效的样式和意义

转场类

转场类动效用于页面层级的跳转或场景切换,帮助用户理解界面间的变化和层级关系，也让界面更加真实生动；避免页面场景的瞬间切换导致用户产生变化盲视（视觉刺激的突兀变化会阻止用户注意到新的信息）；简单来说就是在产品页面切换中让用户有一个心理预期，看到哪些东西变了，新增了哪些东西要注意的，而且整体切换看上去非常的丝滑舒适；经常用到的手法以缩放、透明度、旋转等平滑的效果为主，来搭建层级与层级间的关系和切换。

展示类

展示类动效更多的如字面意思——常规场景用作展示，其目的是能够在第一时间吸引到用户的视觉，突出产品核心功能和特点，引导用户的视觉流向，去帮助用户更好的理解产品；主要在产品的KV版头、网页以及品牌传播等场景中出现。

引导类

引导类动效底层逻辑为通过界面中某些元素的变化，拉开与不同的元素的视差，引导用户进行下一步操作，能够自然而然的聚焦用户视线，降低其他视觉元素的干扰，目的是帮助业务达成某个模块的KPI，或者引导用户相关的操作，产品中常见的就是新手引导、Toast提示等。

反馈类

反馈类动效是在用户进行行为后及时给出相应的反馈，更多偏向于用户体验侧；底层逻辑是以视觉表现的形式传达给用户当前时下的操作反馈，给予用户一定的心理预期。

1.动效的优势

动效设计并不是可有可无的视觉修饰，也不是设计师炫技的手段，而是解决问题，提升体验的有效工具，其存在明确的目的性，同时，相比静态页面动效设计有一下几点明显的优势：

（1）阐述：更好的告知界面发生的变化

当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知，阐述层级关系和界面变化。

（2）吸引：更有效的吸引用户注意力，营造视觉焦点。当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力，有效传达信息。

（3）及时反馈：让用户更有掌控感

当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。但反馈动画不可滥用，会使用户界面变得凌乱。

4）提升：趣味性的内容缓解用户焦虑，提升用户体验

例如加载动画，可以有效降低用户对时间的感知，对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。