小米:寻找王一博的硬核搭档
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例:寻找王一博的硬核搭档
品牌:小米
技术实现: pixi.js + tweenMax.js + EaselJS + jQuery
亮点:
1、创意定位
小米新品手机K40宣传H5,以执行任务的方式,融入品牌代言人王一博,在不断的故事浏览过程中,时不时出现新产品的关键信息和局部,最后产品整体亮相。
2、策划上
① 故事+游戏的形式,首屏提示用户向上滑动屏幕开始任务,出现一扇门,门上有字母K(新品手机就是K40 系列),进入一间屋子,屋子里整齐的排满物品,屋子中间有K40的图标再次加深用户印象,出现一个架子,用户不断的滑动中,聚焦一款手机,出现一个人物剪影,YIBO来电了,点击接听,出现提示让用户上传头像,用户上传头像和输入代号后,点击“开始任务”按钮,开始执行任务;
② 在执行任务的过程中,穿过城市和街道,来到一座大厦,开始是两个人的对话(王一博和用户刚刚上传的头像),第1个互动环节,将图片移动到正确的位置(图片右下角有数字提示),点击“GO”,再继续向上滑动;第2个互动环节,滑动锁盘(密码是K40,再次加深手机型号的用户印象),进入后故事提示京东对方,开始骑着摩托车逃脱,在一个书架中出现手机侧影,任务完成。呵呵,明白了吧,任务就是找到手机,中间不断提示K40;
③ 尾页中出现存储海报,点击后用户可以长按保存带有你头像的海报;了解王一博的K40,进入产品购买页;要不就是再玩一次。
3、设计上
黑色和暗红色配色,欧美风格的漫画线条,配合故事感的城市、摩托车等。
4、体验上
用户在不断的滑动中先了解故事,而后两次互动执行任务,最后了解产品,虽然整体体验时间偏长,但一点不枯燥。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号