快手×京东宠物:恋爱中的我是什么动物

2019-07-10 H5案例分享 H5案例分享
快手×京东宠物:恋爱中的我是什么动物


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

识别图中二维码

恋爱中的我是什么动物-查阅二维码

完整欣赏此案例大约需要30秒


案例:恋爱中的我是什么动物

品牌:快手×京东宠物

亮点:

1.创意定位

由快手和京东宠物制作的爱情测试类H5,小清新的手绘风格为主。

 

2.策划逻辑

整个H5主要分为3部分:

 

①Loading部分:背景是皱皱的白纸,有6个小动物的头,中间有一个男孩的头,随着加载依次跳动。加载完成后是一张信纸折起长出花草和男孩女孩出现的一个小动画,木质的主页标题栏:恋爱中的我是什么动物。标题栏上方是快手和京东宠物的Logo,点击下方的“立即测试”开始测试。

 

②测试部分:米黄色的信纸背景,女孩站在一个大圆上,根据回答问题的进程,下方写着百分之几,男孩要回答五个问题才能跳到女孩身边。

Q1:在与新朋友的聚会中,通常你会?

 

Q2:恰好得知暗恋很久的人广告分手,你会?

 

Q3:当听说暗恋的人有心仪对象,你会?

 

Q4:对于飞鸟与鱼相爱,你会觉得?

 

Q5:对于另一半你更看重?

 

每回答一个问题后就会插播一个快手的萌宠小剧场,伴随着一些弹幕出现。最后一个小剧场点击下方的“查看结果”

 

③落地页部分:根据上面的测试会生成海报,测试出你属于哪种动物,还有风格解析和标语,独特的插画风格绘制的小动物,右下角有二维码,最下方有“关注“京东宠物园艺”公众号,福利活动和促销优惠每周必达”,最上方是快手和京东宠物的Logo,长按可保存海报。

 

3.设计上

可爱的手绘风格,清新的色调,不过个人认为中间插播的小剧场可以单拎出来放在最后。

 

4.体验上

很有新意,动画流畅,加载速度快。右上角可以关闭音乐,静音测试。



技术实现: HTML5



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

标签

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

相关推荐:

搜狗APP:垃圾分类全国统一开始

快手:人生问题餐厅

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~