前言
互动产品作为各大电商的重要手段，吸引尽可能多的用户参与活动。本文试图从动态设计的含义出发，分析视觉设计师如何更好地赋能产品，如何提高动态设计的效率，节约开发成本。
动效的价值
一.满足用户的心理预期
我们生活在一个物理世界，一切事物的运动都符合物理世界的客观规律。因此，人们对事物的观察和认识都是建立在对物理规律的认识之上的。虚拟界面上的元素都是现实世界中不存在的东西，会让用户感到陌生。
通过合理的动态效果。让虚拟界面模拟物理世界的规律，比如惯性、视差等。这可以使虚拟世界与物理世界相交。用户将把他们对物理世界的知识映射到他们对产品的知识。下面是一些常见的模拟真实环境的动态效果。
1.灵活性。
2.空间
3.变形
案例说明
这是一些线上案例的动态演示，分别模拟了彩票机抽奖；工厂机器运转；雷达扫描的真实感。让用户快速将现实认知带入产品。
二.引导用户注意力
一个营销运营产品往往承载着海量的信息，可能会给用户造成视觉上的困惑。用户可能不知道页面的关键点在哪里，导致页面核心利益的沟通效率低下。而梳理这些页面信息的层次关系可以通过合理的动态效果来实现。
在实践中，我们发现用户对动态元素的关注度最高，其次是颜色，最后是亮度。通过这样一个简单的优先级关系，我们可以初步梳理页面的层次结构。
案例说明
合理的优先级规划可以有效地吸引用户的注意力，让他们关注设计师想要他们关注的东西。体验产品时优化用户的视觉动作，帮助用户分清轻重缓急。在下面的例子中，动态按钮和金额是设计者希望用户最关注的。
img.com/large/pgc-image/98312d33e86e43a591c30e331270745b' alt='互动营销类产品动效浅析' />
三.情感化设计
情感化设计的目标是在用户接触和使用产品的过程中，激发用户的正向情感，比如愉快、信任、满足，避免用户产生负向情感，比如失望、挫折感、痛苦。正向的情感会使用户更乐于使用产品，遇到使用过程的一些小问题也更加包容。
案例说明
在萌宠项目中用户点击狗狗，狗狗会挠痒作为反馈。这种反馈没有功能上的作用但是可以愉悦用户，让用户觉得和虚拟的狗狗产生一种情感联系，最终可以提高用户粘度。
面临的挑战
为了应对以上挑战，设计师、运营、产品、开发也提出了很多解决方案，而动效组件化就是其中之一。
动效组件化的优势
一.统一体验
统一用户体验的好处是可以保证两个产品或者同个产品相关界面的设计风格和样式上保持一致。用户体验产品时可以保持一个视觉体验的流畅性。
案例说明
在京友圈中各类活动中红包动效出现次数非常频繁，如果不进行样式统一，整个产品会显得非常杂乱，用户的体验会很零碎不够整体。
二.提高效率
动效的模块化可以显著提高动工作效率。主要可以体现在动效设计师本身在设计大量同类动效时。模块化设计可以减少重复设计，减轻设计师工作量。
案例说明
该说明案例为“东东萌宠”卡通形象动效设计。该模块运用了组件化设计思维，大大提高了工作效率。在该项目中的多名设计师输出的动效也保持了高度的统一性。
三.降低成本
降低成本主要是指降低动效开发成本。因为动效有时候做出来很酷炫但是开发排期有时候并不允许，所以类似的效果就需要用组件化来提高代码复用性。
案例说明
在诸多营销运营类动效中都会用到的数字滚动效果，该效果可以引导用户注意力，体现金额变化，强化用户获得感。该效果开发完成后在不同的项目中均可复用。
组件化系统
一.明确设计原则
设计的本质是为了解决问题，制定设计原则时需要建立在这个设计的中心思想之上。其核心可划分为两个维度：审美交互维度、开发实现维度。设计师在满足审美维度的同时也应该考虑到开发实现的难度，毕竟最后动效的落地离不开开发的努力。
二.运用设计语言
为了实现一个高质量的动效，需要熟悉几种动效的基本属性和运动方式。以下几种工具的熟练运用就可以满足现有大部分动效的需求。
锚点： 控制旋转的中心点位置。实际设计中可以做出自转和公转的效果。
位置： 最常用的工具，表现物体移动。
缩放： 多用于按钮呼吸效果，或者物体的强化感知。
旋转： 表现物体旋转，可以表现物体方向。
透明度： 可以表现物体强弱，或者用于转场淡入淡出效果。
以下是动效设计中常见的几种运用态势，他们之间细微的差别就是体现设计细节满足用户心理预期的关键所在，每种运动态度所蕴含的情绪是完全不同的。
节奏： 有着比较强烈的变化，给人视觉冲击力最大，最能吸引注意。
线性： 整体平稳，毫无波澜，没有任何变化。
缓动： 细分的话也有几种模式，分别是Ease In、Ease Out和Ease
Both。缓动具有节奏感和韵律感，相比于线性的匀速显得更加优雅生动，是使用较多的类型。
惯性： 效果自然，恰到好处。不会给人感觉突兀又不失丰富的细节。
三.建立组件库
组件库的建立对视觉设计的效率提升、成果展示、团队成员间互相提高、共享信息有着非常重要的作用。对开发提高代码复用减少开发成本也有很好的促进效果
动效导出
1.提供静态图及动效说明
设计软件：Sketch PS
开发成本：★★★☆☆
简单动效比如缩放，旋转，位移等，提供JPG或PNG的静态图及动效说明，由开发实现动态效果。其优点是效果流畅且体积小。关于动效说明，如果简单的话可以用图文表示，复杂的话需要结合动效Demo动态展示效果，以及具体参数
在将数据提供给开发时，可以选择用下面的表格的形式。这样有助于提高开发工作效率和还原度。
2.提供GIF图片
设计软件：Sketch、AE、principle、PS、Flinto等
开发成本：★☆☆☆☆
复杂动效，比如生长、形状变化，组合变化等，我们可以直接生成GIF图交给开发，这样实现起来成本最低，所有的动效由设计内部消化了，对于开发的同学来说点击只需要替换图片就可以，很受他们欢迎。但GIF也不是完全没有问题，它最主要的问题是文件较大，画质越清晰的文件则越大，而且响应速度相比其他形式偏慢，如果是复杂一些的图就需要在画质和文件大小之间找平衡了。
3.提供SVG图片及动效说明
设计软件：Sketch
开发成本：★★★★☆SVG图片其实就是用脚本写好的矢量图，Sketch可以直接导出SVG格式，所以对于设计师来说是比较方便的。而且SVG是最小最灵活的，可以很好地扩展，同样的图形动效SVG比GIF小约95％。而且与JPG或PNG不同，由于是矢量的所以SVG图片不会失真，可以支持生长、变形等效果的，开发同学能根据我们提供的动效说明用代码还原实现。但它也有自身的限制，一是开发成本较高，二是如果需要在web使用，IE浏览器是不支持的，如果产品在web使用的话还需要考虑到这一点。
4.提供Json文件
设计软件：Sketch、AE
开发成本：★★★☆☆用AE做好动效后，导出Json文件给开发，其优点是还原度高，能节省一定内存，不过也需要注意Json虽然好用，但过多使用会耗设备的性能，尤其对一些低端设备造成较大的负担，特别是一些较大的动画，容易造成卡顿，所以json还是比较适合小范围的动画。总体来说实现的方法还是挺多的，我们可以先做动效Demo，然后与开发的同学探讨选择出最佳实现方案，确定后再去着手准备交付物。
小结
动效设计在营销运营类产品中的重要性越来越高，动效设计的意义也越来越被认可。如何平衡运营、设计师、开发关于动效实现层面的矛盾是接下来我们需要一起思考和解决的。设计师们在日常的需求中积累的经验和模板可以搭建一个共享的组件库，对后续提高工作效率，相互学习进步都有着很好的促进作用，从而更好地为产品进行赋能，为用户提供更高质量的体验。
作者：董亦颂 京东用户体验设计部设计师，致力于创造更美好的电子商务购物体验。
