王老吉X抖音:寻找你的音乐DNA

2019-08-16 H5案例分享 H5案例分享
王老吉X抖音:寻找你的音乐DNA


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

识别图中二维码

寻找你的音乐DNA-查阅二维码

完整欣赏此案例大约需要4分30秒


案例:寻找你的音乐DNA

品牌:王老吉X抖音

制作:

亮点:

  • 1.创意定位

王老吉和抖音联合推出“看见音乐”计划,八月中旬火爆开启,用户可以在作品中show出音乐态度,生成专属音乐海报,还有好听的歌曲推荐哦!

 

  1. 策划逻辑

用户根据自己的偏好选择音乐元素,生成海报,大致步骤如下:

 

①导入界面是两位头像潮酷的青年在聊天,要用音浪给夏日带来清凉,点击“寻找我的音乐DNA”进入作品。

 

②首先从四位音乐表演者中选择一个,四个人物代表四种音乐风格,hiphop,rack roll,电音和小清新,选择自己喜欢的点击“pick”即可,然后从吉他,架子鼓,贝斯和电子琴中选择一个乐器,点击乐器时乐器会变亮,并发出3秒左右的演奏声音,点亮后选择“pick”即可进入下一环节。

 

③作品根据用户的选择自动推荐歌曲,歌曲名,歌手名和歌手照片会显示在屏幕中间转动的唱片上,点击分享生成海报,海报主图是用户选择的人物在演奏刚才选择的乐器,同时播放推荐的歌曲作为海报的BGM,海报还包含对用户音乐态度的解析,出品方,活动时间以及游戏二维码,用户可保存海报,分享作品,或重新测试。

 

  1. 设计上

深蓝色的主题色,从视觉上带来清凉的感觉,四位人物的服饰造型也是非常的时尚个性,符合音乐节的画风,最后的海报还自带BGM,让用户的体验更丰富有趣,突出“音乐节”的主题。

 

4.交互上

用户选择时,人物和乐器是暗色的,点击后才会变亮,乐器也会变亮并发出声音,很有“pick”的感觉。



技术实现: jQuery



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

标签

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

相关推荐:

王老吉:玩转“小家大爱”

虾米音乐:梦回长安,你会遇见谁?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~