网易考拉工厂店:测一测朋友的“垃圾水平”

2019-08-16 H5案例分享 H5案例分享
网易考拉工厂店:测一测朋友的“垃圾水平”


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

识别图中二维码

测一测朋友的“垃圾水平”-查阅二维码

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


案例:测一测朋友的“垃圾水平”

品牌:网易考拉工厂店

亮点:

  1. 创意定位

网易考拉工厂店出品,用户可以在线答题赢取代金券,也可以自己出题去考朋友,提高垃圾分类能力,增加平台浏览量。

 

  1. 策划逻辑

用户在作品中可以直接答题,也可以自己当出题人,步骤如下

①答题。一共五题,每题出现三个垃圾,答题时间30秒,点击垃圾拖入相应垃圾桶,正确的话得一分,错误的话会出现正确答案及原因分析,屏幕上方有倒计时和分数记录,答题完毕后生成结果海报,包括出品方,用户微信名和头像,最后得分,打败了多少人及评语,还有每道题的对错一览表,用户可分享作品或点击“我也要出题”,也可点击链接领取优惠券。

②出题。用户在作品初始页和答题结束后都可选择去出题,出题界面与答题界面大体相同,只是用户需要从给出的垃圾里选两个填入问题中,所选垃圾的图案会增加到题目配图里,点击配图中所选垃圾旁的叉叉可删除重选,出题途中可随时选择回到上一题重新出题,最后生成出题海报,包括导语和二维码,可分享给朋友让其答题。

 

  1. 设计上

每个题目界面都是不一样的背景颜色,很鲜艳,营造活泼氛围,各种垃圾也都是手绘的卡通图案,每个垃圾形态和神态都各不相同,有害怕的,哭泣的,也有抱腿发呆的,都因为自己变成了垃圾而情绪低落,看起来呆萌有趣。

 

  1. 交互上

可以当答题人,也可以当出题人,作品给予了用户双重身份,还是很新颖的,答错时会有正确答案出现,还会解释原因,让用户即刻明白错误原因,提高垃圾分类技能。



技术实现: html5



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

标签

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

相关推荐:

三七互娱:60秒挑战垃圾分类

网易考拉:凡人,想修仙吗?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~