王老吉X抖音:寻找你的音乐DNA
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要4分30秒
案例:寻找你的音乐DNA
品牌:王老吉X抖音
制作:
亮点:
- 1.创意定位
王老吉和抖音联合推出“看见音乐”计划,八月中旬火爆开启,用户可以在作品中show出音乐态度,生成专属音乐海报,还有好听的歌曲推荐哦!
- 策划逻辑
用户根据自己的偏好选择音乐元素,生成海报,大致步骤如下:
①导入界面是两位头像潮酷的青年在聊天,要用音浪给夏日带来清凉,点击“寻找我的音乐DNA”进入作品。
②首先从四位音乐表演者中选择一个,四个人物代表四种音乐风格,hiphop,rack roll,电音和小清新,选择自己喜欢的点击“pick”即可,然后从吉他,架子鼓,贝斯和电子琴中选择一个乐器,点击乐器时乐器会变亮,并发出3秒左右的演奏声音,点亮后选择“pick”即可进入下一环节。
③作品根据用户的选择自动推荐歌曲,歌曲名,歌手名和歌手照片会显示在屏幕中间转动的唱片上,点击分享生成海报,海报主图是用户选择的人物在演奏刚才选择的乐器,同时播放推荐的歌曲作为海报的BGM,海报还包含对用户音乐态度的解析,出品方,活动时间以及游戏二维码,用户可保存海报,分享作品,或重新测试。
- 设计上
深蓝色的主题色,从视觉上带来清凉的感觉,四位人物的服饰造型也是非常的时尚个性,符合音乐节的画风,最后的海报还自带BGM,让用户的体验更丰富有趣,突出“音乐节”的主题。
4.交互上
用户选择时,人物和乐器是暗色的,点击后才会变亮,乐器也会变亮并发出声音,很有“pick”的感觉。
技术实现: jQuery
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号