益达 ✖️ QQ音乐:我的专属自信BGM
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要25秒
案例:我的专属自信BGM
品牌:益达 ✖️ QQ音乐
技术实现: reactjs
亮点:
1、创意定位
益达和QQ音乐联合出品的H5,查阅两种默契度,一种是与益达品牌代言人吴亦凡在音乐上的默契度;另一种是与全网乐迷在音乐上的默契度;结合了益达品牌,同时又与QQ音乐中的音乐相结合。
2、策划上
① 进入H5案例后,首先是QQ登录授权、微信登录授权或者QQ音乐APP登录授权,获取用户的歌单,为后续默契度做准备;
② 登录授权后,显示大标题“每个人都有属于自己的自信BGM”,有两个入口选择,一个是点击黑胶片上的吴亦凡头像,另一个是点击黑胶片上的全网乐迷;选择入口后,列出你最近听歌排行榜,默认勾选前5首,用户可以修改勾选,点击“生成我的自信BGM歌单”按钮;
③ 进入音乐对比,上方为用户的歌单,下方是你选择对比人的歌单(吴亦凡、或者全网乐迷),点击中间的“测试默契度”按钮,可以生成默契度百分比海报;海报中列表用户自己的歌单,默契度百分比;下方还有益达产品购买以及QQ音乐抽奖按钮。
3、设计上
整体蓝色调,与益达的LOGO蓝色配合,看到案例就会产生品牌联想的印象。
4、体验上
案例短小,简单测试了默契度,因为分享的海报中有喜欢的歌单,也会引起一部分人共鸣,乐意分享。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号