酷狗音乐:你的甜度测试
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例:你的甜度测试
品牌:酷狗音乐
技术实现: JavaScript + qrcode.js
亮点:
- 创意定位
酷狗音乐推出的测试类作品,用户通过选择问题生成自己的甜度海报,还可以登录平台聆听推荐歌单,以此让用户感受酷狗的音乐推荐功能,增加用户粘度和使用量。
- 策划逻辑
粉色系标题界面,一段导语逐句出现,点击触点开始答题,题目包括只根据电影名选择自己最想看的,被列举的哪句情话戳到,选一杯想喝的饮料,中彩票后会怎么生活,日常快乐源泉是什么,吃火锅时最爱的食材,最后为小狗画双眼睛,输入用户名和性别,生成海报,海报包括主图(小狗),用户甜度指数,甜度增加和降低的因素及甜度特质分析,用户可分享作品或登录平台查看推荐歌单。
- 设计上
粉紫色系的作品,烘托甜蜜氛围,每题都有主题配图,每个选项也有个小配图,界面元素丰富,看起来琳琅满目很可爱。
- 交互上
竖型长幅作品,用户自己滑动屏幕至每一题,点击选项后,选项旁的小配图会发生动态变化,并发出卡通化的声音,就像作品标题一样,整个作品也给人一种甜度满分的感觉。
- 技术上
最后合成海报时,使用的qrcode.js值得一提,因为以前生成海报中的二维码需要后台配合完成,因为前端生成的二维码不够理想。那句老话,随着技术的发展,现在的生成二维码插件qrcode.js,还真是不错。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号