苏宁易购：燃客特工队

2018-08-09 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

燃客特工队-查阅二维码

完整欣赏此案例大约需要2分40秒

案例：燃客特工队

出品：苏宁易购

制作：简豆科技

亮点：

策划上，这是一则功能性和交互性都很强的案例。该案例邀请用户参与电脑 DIY 的游戏，分为电脑组装和桌面秀两种参与方式。用户参与完成之后，可以进行分享，针对用户装机策略的好坏进行自发性的点赞打分，赞同数多的可以得到相应的奖励。分享不同的装机和秀机方案，极大地提升了用户之间的互动频率，对案例传播量的提升有极大的帮助。
设计上、这则案例采用偏冷的色调，辅以充满科技感的字体，加上渐变的色彩呈现，给用户以浓浓的极客风。呼应了案例的主题。
体验上，用电子风格背景音乐烘托一种科技感十足的氛围。首页缓入的动画，消除了场景切换产生的生涩感，十分自然地将用户带入到这则案例的主题。交互上，用十分丰富点击音效，作为交互反馈的同时也使用户能更好的沉浸其中。查看信息页面的红心动画，每次点击都会产生一次类似真实心脏一样的跳动，给用户十分活泼的感觉，提升了用户的参与度。
技术上，使用移动端十分流行的 Vue 去实现页面逻辑的渲染，分发前端页面的数据。使用 PIXI.js 去实现图片合成相关的操作。使开发者从原生 canvas 渲染中解放出来，更便利的实现各种定位、缩放以及动画效果。

技术实现： PIXI.js、Vue.js

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签