移动无忧行:地球仪大作战

2020-08-29 H5案例分享 H5案例分享
移动无忧行:地球仪大作战


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

识别图中二维码

地球仪大作战-查阅二维码

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


案例:地球仪大作战

品牌:移动无忧行

技术实现: VueJS + html2canvas

亮点:

1、创意定位

无忧行是中国移动旗下的旅行服务平台,本H5邀请用户在一个虚拟地球上,以国家为线索,回答境外出行相关的注意事项、冷知识等,进行闯关挑战,最后生成称号和排名海报。海报中加入无忧行的品牌曝光和业务推介信息。

 

2、策划逻辑

主要为闯关答题类型。 开篇引导页过后,会展现给用户一个手绘建模的地球仪,每个国家的地图轮廓就是一个答题按钮,共30个。玩家可以自由拨动地球仪,点击按钮,即可触发问题。问题是选择题,由玩家二选一。答错5道题后,弹出分享求复活页面,分享后获得复活机会;再答错5道题,就会弹出结果页。在错题机会用尽之前,答完全部30道题,也会弹出结果页。 为了方便玩家查找未回答问题,每回答完一个问题,此国家的名字就会在地球仪上消失。

 

3、设计上

地球仪以明快的色块组成,在深蓝色的宇宙背景中缓缓转动。每个国家的名字漂浮在各自地图上空。背景音乐欢快灵动,问题答对,出现“YES!”的动画和鼓励音效;问题答错,出现“OH NO!”的动画和打击音效。

 

4、玩家体验上

拨动地球仪时的动画效果,充分模拟实际场景。每次答对或者答错问题,立即出现相应动画和音效,给玩家即时反馈,有动力开启下一题。





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

标签

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

相关推荐:

劳斯莱斯:劳斯莱斯攻氪行动

你的H5就是一张最美的城市名片

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~