哈罗出行:哈啰时光骑迹

2019-07-17 H5案例分享 H5案例分享
哈罗出行:哈啰时光骑迹


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

识别图中二维码

哈啰时光骑迹-查阅二维码

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


案例:哈啰时光骑迹

品牌:哈罗出行

亮点:

1.创意定位

此作品是由“哈啰出行”制作的宣传推广H5,哈啰出行是囊括哈啰单车、哈啰助力车和汽车等综合业务的移动出行平台。哈啰出行坚持“绿色低碳·共享出行”的服务理念,为用户提供覆盖短、中、长距离的绿色、经济的共享出行服务,缓解城市交通压力,减少车辆尾气排放,为智慧城市提供立体可持续发展的共享出行解决方案。

 

2.策划逻辑

整个H5主要分为三部分:

 

①Loading部分:横屏,米黄色的格子背景,哈啰出行的吉祥物——一只小哈士奇在追着气球跑,背景是矢量图绘制的城市,下方写着“正在开启你的时光骑迹…”还有加载百分比,最下方是哈啰出行的Logo。

 

②动画长图部分:左上角是哈啰出行的Logo,中间标题大字“哈啰,我的时光骑迹”“无论是和熙的春风里,还是炎炎烈日下,哈啰都会陪伴您行好生活每一程”点击“开启我的时光骑迹”,开始动画长图。背景一开始是城市,一群人骑着哈啰单车,走过一些建筑,骑车的换成一位上班族骑着哈啰助力车,过段时间换成骑电动车,到达机场开的是哈啰顺风车,变成海边风情时候是一家人骑着景区车。一段短动画把哈啰出行的车型都介绍了一遍。

 

③游戏部分:“街头霸汪”“与“哈哈”(吉祥物小狗)一起,开启你的时光骑迹s吧!做超拉风的“街头霸汪””点击“开始游戏”;游戏规则:帮“哈哈”选择一款你喜欢的哈啰车,躲开障碍物取得积分,超过300分,就可以参与抽奖哦!点击“选车开路”,最下方共有5种车型可以选择,就是刚刚长图介绍的那五中,3个数的倒数后,开始三条路的躲避游戏,拖动狗子即可。右上角有表明收集的钱币和王老吉数量,最上边是积分。

结束游戏后会显示你的积分,还有钱币和王老吉数量,有“去抽奖”选项,还有提示分享更多,幸运更多。

 

3.设计上

一个H5把游戏和长图动画结合到一起还是很用心的。小狗的卡通形象也可爱。色调主要以蓝白为主。

 

4.体验上

加载速度快,动画部分右上角有跳过选项,为客户着想。左上角可关闭音乐。



技术实现: HTML5



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

标签

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

相关推荐:

哈啰单车:异兽骑行记

银联手机闪付:打开99层你真行

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~