苏宁易购：王者农药•台词大考验
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例：王者农药•台词大考验
出品：苏宁易购
制作：简豆科技
亮点：
- 策划上，答题类小游戏。苏宁易购双十一活动宣传。Loading完毕进入案例，首屏露出主题“王者农药·台词搭考验”，点击开考按钮进入游戏环节。游戏形式为听声音答题，系统会从题库中随机抽取6道，用户需要从4选1，选项同为随机。题目是农药中英雄的台词，同时会播放台词的音频，选项是农药的英雄，用户需要依据台词选出对应的英雄。答题结束后，系统会根据用户的成绩，给出对应的段位和评价。结尾页图片可以长按保存，点击下方抽取铭文的按钮，可以抽取本次活动的奖品，成绩不同，能抽取的“铭文”次数也不同。点击“不服重来”按钮可以重考一次，点击“向TA炫耀”提示分享给好友或票圈。
- 设计上，萌到骨子里的卡通插画，整体背景色调偏暖黄。画面中的人物角色，在保持风格统一的同时，又各具特色，还原了游戏中人物的外形特点。小五对这种画风的喜爱真的不能用文字来形容了。随机题目的设定也很赞，在题干本身随机的同时，选项也采取了随机，且后续也不会重复，玩很多遍都会依旧充满新鲜感。最后保存的图片中，没有把按钮合成到图片里，保留了用户的段位成绩，并只放了一个方便进入的二维码，可以放心大胆地发到票圈去秀段位了哈哈哈。
- 体验上，最让小五打call的，除了案例的画风之外，还有它的细节和代入感。除了游戏风格的背景音乐，答对或者答错每道题，都会有不同的音效出现，并且音效也跟游戏中的音效很像，程度会随成绩而递增。连活动规则和铭文抽取部分，都设有音效，种种小细节，会让思绪分分钟就被带入游戏里。除此，品牌的露出也一点都不突兀、生硬，用户体验起来很连贯、流畅。快来答题吧，这可能是上王者的唯一机会了哈哈哈哈。
技术实现： howler.js(JS音频库) + jQuery + CSS3(Animation)
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
