点击事件实现动效_店铺动效制作总结

动效交互是顾客体验的润滑剂 ； 是藏在店铺里的小彩蛋 ； 是 “突出引导”的好帮手 ； 更是 提升点击率的重要手段 。 越来越多的交互动效及视频出现在店铺设计中，它们能承载更多的信息，更直观得表现产品的卖点、活动福利等，同时营造活动的氛围，使店铺品质及用户体验得到有效的提升。 动效设计已经是店铺设计师日常工作中非常重要的一环，经过今年一年的学习积累，总结出了不同动效在店铺各模块中的应用及取得高点击率的方法。 店铺内动效及视频应用讲解 (天猫平台双11期间)

随着5G技术的普及和平台功能的支持和开放，视频及动效在店铺已成为一种趋势。店铺首页视频能够承载更多的信息内容，能够更直观的表现产品的性能，操作方法，使用场景，等进行详细的介绍，这是平面图文无法比拟的。kv作为店铺页面呈现的第一阵地，是整体活动最主要的氛围展现，带动整个店铺氛围的呈现，表现真实场景中产品的使用，满足用户需求。

开屏弹窗的目的是以最直接的方式告知用户活动福利，飞出的金币和优惠券传达了丰富的福利，增加了活动的氛围，另外将按钮增加了放大和缩小的动效以及光效来增加用户的点击欲望，提升点击率。

福袋入口图着重突出利益点，位于店铺首页最顶部，采用的是吸顶模块。大促期间，如需要增加氛围(根据业务需求)，可在装饰上如金币做一定动效，动效能很好的增加视觉注意力，需要用在核心位置上，展现最重要的内容，一般会用在按钮上，同时可以增加点击欲望。因为该位置展现量大，重要程度高，使用系统代码制作可保证稳定性。通过不断测试迭代，醒目突出的利益点配合动效点击icon，点击率较高。

浮点位于首页右侧，和吸顶福袋会在一屏内出现，动效展示形式需注意与吸顶福袋错开，避免一起进；浮点位置较小，样式简单，清晰表达文案和赠品利益点即可，采用简单的动效；上线尺寸推荐150px，制作尺寸可等比例放大，保证像素清晰度；动效同样推荐使用系统代码制作。

上图为大促期间利益块的展示，背景也采用了动效增加氛围。模块内动效光效和下拉箭头起到引导提示的作用能，样式简单，颜色醒目为宜。AE视频/系统代码制作均可：简单循环效果使用代码制作，较为复杂使用AE视频。

主销产品在店铺里重要性较高，动效的展示要体现产品的性能，画面上线需要多系统测试(苹果/安卓)，保证画面无卡顿等bug。主销模块分为2屏，考虑到加载以及整体效果的展示第一屏展现性能的动效；第二屏可通过视频丰富产品的表达，可体现使用场景等效果。主销产品需使用动态吸烟效果呈现性能，通过AB版本测试，主销产品使用动态吸烟效果的点击率明显好于单一图片，按钮同样需要通过动效来提醒用户点击下单。

服务模块位于页面底部，可使用视频形式展示服务权益，在结尾可作为点睛之笔。同时采用了插画的形式，内存较小，无加载负担，位于店铺首页尾部，视频时长不具体限制。

店铺动效后台设置注意事项

(天猫平台)

动效呈现方式有4种：系统代码、视频、多图动画、帧动画

A.系统代码特点：

1、上线效果最稳定、兼容性强，可适配绝大数手机。

2、操作简单，策略维护简单。

3、动效样式较少，无法满足更多的呈现效果。

4、提示类ICON建议使用此方式。

B.视频动效特点：

1、效果呈现最为丰富。

2、PNG视频有黑底，应使用遮盖图片或非透明底视频。

3、维护制作导出第一帧图片和MP4视频上传后台即可。

4、最大尺寸不超过1300px。

C.多图动画：

1、针对系统代码无法实现的效果，适用较少帧数的动画。

2、将视频帧图片上传后台，并按顺序一一排练即可。

3、多图动画上线效果稳定，适配广。但维护麻烦，建议使用在维护频率低的模块。

D.帧动画：

1、在针对以上情景均无法满足的情况下使用。

2、导出帧动画图片时尺寸要正确(不支持后台修改尺寸)。

3、帧动画上线后，在安卓手机会有1像素的动画抖动，需在下层放置一张jpg图片，用以中和动画抖动。

4、帧动画图片张数不超过90张。

5、无需上传在后台，可直接选择文件。