当前位置: 首页 >> HTML5+CSS3_HTML网站模板_DIV+CSS技术分享 >> 阅读正文

网易云音乐H5案例欣赏:你的2017年度听歌报告

上上周我们的微信朋友圈刷爆了2017支付宝年度账单的h5页面,今天学堂君继续跟大家分享又一个刷爆微信朋友圈的H5,那就是网易云音乐的2017网易云音乐用户年度听歌报告H5.

网易云音乐H5案例欣赏

制作这样一款好看精致的H5,目的是让网易云音乐更进一步通过每位用户这一年的听歌“足迹”,展现音乐对每个人生活的陪伴;并最终传递出,网易云音乐将继续陪伴用户温暖前行。丰富的创意内容如同一个完整的闭环,最终落到每一个具体的个体身上,直击人心,迅速引发用户的广泛参与和深度共鸣。

废话不多说,我们直接来欣赏下网易云音乐H5吧~

H5页面动效如下:

 

设计上,配色为网易云音乐经典红,每一页都有不同的听歌数据主题,每页的配图也都与主题相贴合,界面简洁,画风清新,背景音乐选用了节奏欢快、旋律清澈的钢琴曲“Christmas-徐梦圆”,整体无论是视觉还是听觉都让人觉得非常舒服。

 体验上,案例虽然简单,但给人的感觉还是很精致的,并且案例内容也让人产生了足够的分享及传播欲。一大早,这支H5就在小五票圈悄无声息地刷屏了,朋友们都喜欢将自己的听歌习惯晒出来,跟别人分享喜欢的好歌好曲。2018,又是新的一年,愿大家都能享受音乐所带来的美好。

 技术实现: React.JS

 

全部H5页面设计如下:

 

网易云音乐H5 PC端欣赏地址:https://music.163.com/nact/year2017_42

 

需要用网易云音乐APP来打开,才能看到更酷炫的H5动效以及听到优美的音乐。

《2017网易云音乐用户年度听歌报告》H5 记录每位用户这一年的听歌“足迹”。也算是一次不错的网易云音乐品牌营销案例。

本文标题:网易云音乐H5案例欣赏:你的2017年度听歌报告

本文地址:http://www.25xt.com/html5css3/17006.html

本文关键词: , , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。