网易云音乐:你的恋爱人格,藏在老歌里

2021-12-02 H5案例分享 H5案例分享
网易云音乐:你的恋爱人格,藏在老歌里


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

识别图中二维码

你的恋爱人格,藏在老歌里-查阅二维码

完整欣赏此案例大约需要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案例分享”团队原创文章,转载请注明出处!

标签

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

相关推荐:

网易云音乐:摸鱼计算器

网易云音乐 X LANCÔME:测一测你灵魂的颜色

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~