一汽丰田一键认证 关怀备至H5

项目简介:

这是给一汽丰田做的用于朋友圈投放的H5,主题是”一键认证 关怀备至”。整个H5动效包含车辆出场动效、3D俯瞰、3D旋转动效、奖品展示跑马灯效果、车辆360度展示(精灵帧动画)、二维码光效动画。整体设计偏科技风。

核心技术点:

整个H5制作下来,有以下几个核心技术点:

  1. 遵循腾讯广告投放的制作规范,控制整体文件包2M以内;
  2. 使用Animate.css实现基本的过场动画;
  3. 采用three.js进行obj模型和刻度图片加载,并进行纹理贴图,然后控制展示俯瞰图,以及过场动画;
  4. 采用zepto.js中的swipe方法,控制模型左右转动;
  5. 采用PS制作精灵图,实现普拉多线框车型360度展示;
  6. 制作奖品展示跑马灯效果,采用setInterval进行精灵图切换;
  7. 制作二维码覆盖层动效,采用pointer-events:none;属性实现图片覆盖二维码情况下,还能够长按识别二维码。

待优化的地方:

整个H5程序端制作花了2-3天制作时间,通过客户验收并上线。后期腾讯方反馈加载时间偏长,用户绑定偏少,广告投放单用户成本偏高。

程序方面以下几点思考:

  1. 整个H5制作包1.9M,其中素材1M,three.js相关库文件600K左右。整体素材文件偏大,由于需要3D过渡场景和3D操作,3D库文件是必须的。
  2. 由于等待时间和点击事件太多,用户触达留资页面花费时间太多,会造成用户过程中用户流失;

解决方案:

  1. 资源素材再深度压缩;
  2. 增加Loading页面,减少用户白屏等待时间;
  3. 减少点击交互,多使用滑屏或者一屏滚动页面。

设计和制作效果预览:

《一汽丰田一键认证 关怀备至H5》

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注