移动无忧行:地球仪大作战
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分05秒
案例:地球仪大作战
品牌:移动无忧行
技术实现: VueJS + html2canvas
亮点:
1、创意定位
无忧行是中国移动旗下的旅行服务平台,本H5邀请用户在一个虚拟地球上,以国家为线索,回答境外出行相关的注意事项、冷知识等,进行闯关挑战,最后生成称号和排名海报。海报中加入无忧行的品牌曝光和业务推介信息。
2、策划逻辑
主要为闯关答题类型。 开篇引导页过后,会展现给用户一个手绘建模的地球仪,每个国家的地图轮廓就是一个答题按钮,共30个。玩家可以自由拨动地球仪,点击按钮,即可触发问题。问题是选择题,由玩家二选一。答错5道题后,弹出分享求复活页面,分享后获得复活机会;再答错5道题,就会弹出结果页。在错题机会用尽之前,答完全部30道题,也会弹出结果页。 为了方便玩家查找未回答问题,每回答完一个问题,此国家的名字就会在地球仪上消失。
3、设计上
地球仪以明快的色块组成,在深蓝色的宇宙背景中缓缓转动。每个国家的名字漂浮在各自地图上空。背景音乐欢快灵动,问题答对,出现“YES!”的动画和鼓励音效;问题答错,出现“OH NO!”的动画和打击音效。
4、玩家体验上
拨动地球仪时的动画效果,充分模拟实际场景。每次答对或者答错问题,立即出现相应动画和音效,给玩家即时反馈,有动力开启下一题。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号