苏宁易购:王者农药•台词大考验

2017-11-09 H5案例分享 H5案例分享
苏宁易购:王者农药•台词大考验


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

识别图中二维码

王者农药•台词大考验-查阅二维码

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


案例:王者农药•台词大考验

出品:苏宁易购

制作:简豆科技

亮点:

  1. 策划上,答题类小游戏。苏宁易购双十一活动宣传。Loading完毕进入案例,首屏露出主题“王者农药·台词搭考验”,点击开考按钮进入游戏环节。游戏形式为听声音答题,系统会从题库中随机抽取6道,用户需要从4选1,选项同为随机。题目是农药中英雄的台词,同时会播放台词的音频,选项是农药的英雄,用户需要依据台词选出对应的英雄。答题结束后,系统会根据用户的成绩,给出对应的段位和评价。结尾页图片可以长按保存,点击下方抽取铭文的按钮,可以抽取本次活动的奖品,成绩不同,能抽取的“铭文”次数也不同。点击“不服重来”按钮可以重考一次,点击“向TA炫耀”提示分享给好友或票圈。

 

  1. 设计上,萌到骨子里的卡通插画,整体背景色调偏暖黄。画面中的人物角色,在保持风格统一的同时,又各具特色,还原了游戏中人物的外形特点。小五对这种画风的喜爱真的不能用文字来形容了。随机题目的设定也很赞,在题干本身随机的同时,选项也采取了随机,且后续也不会重复,玩很多遍都会依旧充满新鲜感。最后保存的图片中,没有把按钮合成到图片里,保留了用户的段位成绩,并只放了一个方便进入的二维码,可以放心大胆地发到票圈去秀段位了哈哈哈。

 

  1. 体验上,最让小五打call的,除了案例的画风之外,还有它的细节和代入感。除了游戏风格的背景音乐,答对或者答错每道题,都会有不同的音效出现,并且音效也跟游戏中的音效很像,程度会随成绩而递增。连活动规则和铭文抽取部分,都设有音效,种种小细节,会让思绪分分钟就被带入游戏里。除此,品牌的露出也一点都不突兀、生硬,用户体验起来很连贯、流畅。快来答题吧,这可能是上王者的唯一机会了哈哈哈哈。



技术实现: howler.js(JS音频库) + jQuery + CSS3(Animation)



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

标签

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

相关推荐:

途家:老板在群里@了你

海航:神秘密码在哪里?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~