网易云音乐:你的恋爱人格,藏在老歌里
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30秒
案例:你的恋爱人格,藏在老歌里
品牌:网易云音乐
技术实现: JavaScript
亮点:
1、创意定位
网易云音乐品牌宣传H5,以音乐为载体,测试为形式,恋爱为主题,每个人都会经历或者进行中,再或者想过恋爱的模样;这个主题选择的好,受众范围很大;在音乐的海洋中,在测试的内容中,听到几首爱情的音乐,想起网易云音乐品牌。
2、策划上
① 测试类型H5,一共7个问题,每个问题3个选项;有根据问题选择选项中的音乐;也有听到音乐后的感觉;
② 问题的设定像是恋爱的过程,从心动、感觉、最勇敢的决定、初恋、告白、爱的代价、爱情是场梦;
③ 7个问题回答完毕后,提醒用户输入昵称,根据选择生成一张海报,给出恋爱关键词和精神年龄,三个特点关键词,海报下方还有恋爱概要和爱情风格描述文字。
3、设计上
① 整体颜色是浅棕色,颗粒度质感,辅助色使用的是网易云音乐logo的红色;
② 底色为方格牛皮纸;配合中性的人物,中性的人物好处,可以认为是你我他她;
③ 辅助元素是棕色的波浪线或者沙粒,有种尘封记忆被吹开的感觉。
4、技术上
可圈可点的是动画部分,细节动画是APNG(看着是png格式,但是有动画),动画演示如下
人物走动
信封开启,出现音乐音符
APNG诞生于2004年,是一种类似GIF的动画图片,当透明背景时,没有GIF动画的白边、锯齿、色彩失真;APNG完美支持1600多万种颜色。我们可以使用iSparta将PNG序列图片转换成APNG动态图片。
5、推广位置
网易云音乐APP首屏Banner
网易云音乐2021年12月1日的微博
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号