小米:寻找王一博的硬核搭档

2021-03-06 H5案例分享 H5案例分享
小米:寻找王一博的硬核搭档


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

识别图中二维码

寻找王一博的硬核搭档-查阅二维码

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


案例:寻找王一博的硬核搭档

品牌:小米

技术实现: pixi.js + tweenMax.js + EaselJS + jQuery

亮点:

1、创意定位

小米新品手机K40宣传H5,以执行任务的方式,融入品牌代言人王一博,在不断的故事浏览过程中,时不时出现新产品的关键信息和局部,最后产品整体亮相。

 

2、策划上

① 故事+游戏的形式,首屏提示用户向上滑动屏幕开始任务,出现一扇门,门上有字母K(新品手机就是K40 系列),进入一间屋子,屋子里整齐的排满物品,屋子中间有K40的图标再次加深用户印象,出现一个架子,用户不断的滑动中,聚焦一款手机,出现一个人物剪影,YIBO来电了,点击接听,出现提示让用户上传头像,用户上传头像和输入代号后,点击“开始任务”按钮,开始执行任务;

② 在执行任务的过程中,穿过城市和街道,来到一座大厦,开始是两个人的对话(王一博和用户刚刚上传的头像),第1个互动环节,将图片移动到正确的位置(图片右下角有数字提示),点击“GO”,再继续向上滑动;第2个互动环节,滑动锁盘(密码是K40,再次加深手机型号的用户印象),进入后故事提示京东对方,开始骑着摩托车逃脱,在一个书架中出现手机侧影,任务完成。呵呵,明白了吧,任务就是找到手机,中间不断提示K40;

③ 尾页中出现存储海报,点击后用户可以长按保存带有你头像的海报;了解王一博的K40,进入产品购买页;要不就是再玩一次。

 

3、设计上

黑色和暗红色配色,欧美风格的漫画线条,配合故事感的城市、摩托车等。

 

4、体验上

用户在不断的滑动中先了解故事,而后两次互动执行任务,最后了解产品,虽然整体体验时间偏长,但一点不枯燥。





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

标签

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

相关推荐:

小米:MIUI 12.5

小米:是什么,让周围突然安静?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~