酷狗音乐:你的甜度测试

2019-12-25 H5案例分享 H5案例分享
酷狗音乐:你的甜度测试


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

识别图中二维码

你的甜度测试-查阅二维码

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


案例:你的甜度测试

品牌:酷狗音乐

技术实现: JavaScript + qrcode.js​

亮点:

  1. 创意定位

酷狗音乐推出的测试类作品,用户通过选择问题生成自己的甜度海报,还可以登录平台聆听推荐歌单,以此让用户感受酷狗的音乐推荐功能,增加用户粘度和使用量。

 

  1. 策划逻辑

粉色系标题界面,一段导语逐句出现,点击触点开始答题,题目包括只根据电影名选择自己最想看的,被列举的哪句情话戳到,选一杯想喝的饮料,中彩票后会怎么生活,日常快乐源泉是什么,吃火锅时最爱的食材,最后为小狗画双眼睛,输入用户名和性别,生成海报,海报包括主图(小狗),用户甜度指数,甜度增加和降低的因素及甜度特质分析,用户可分享作品或登录平台查看推荐歌单。

 

  1. 设计上

粉紫色系的作品,烘托甜蜜氛围,每题都有主题配图,每个选项也有个小配图,界面元素丰富,看起来琳琅满目很可爱。

 

  1. 交互上

竖型长幅作品,用户自己滑动屏幕至每一题,点击选项后,选项旁的小配图会发生动态变化,并发出卡通化的声音,就像作品标题一样,整个作品也给人一种甜度满分的感觉。

 

  1. 技术上

最后合成海报时,使用的qrcode.js值得一提,因为以前生成海报中的二维码需要后台配合完成,因为前端生成的二维码不够理想。那句老话,随着技术的发展,现在的生成二维码插件qrcode.js,还真是不错。





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

标签

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

相关推荐:

华为主题&华为音乐&颐和园:与R1SE共度甜蜜的一天

由你音乐榜:还是朋友吗?测测就知道

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~