苏宁易购:燃客特工队

2018-08-09 H5案例分享 H5案例分享
苏宁易购:燃客特工队


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

识别图中二维码

燃客特工队-查阅二维码

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


案例:燃客特工队

出品:苏宁易购

制作:简豆科技

亮点:

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



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



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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

苏宁易购:我的潮人认证卡

华硕&苏宁:华硕1月19日苏宁超级品牌日私密群

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~