上上周我們的微信朋友圈刷爆了2017支付寶年度賬單的h5頁面，今天學(xué)堂君繼續(xù)跟大家分享又一個(gè)刷爆微信朋友圈的H5，那就是網(wǎng)易云音樂的2017網(wǎng)易云音樂用戶年度聽歌報(bào)告H5.

制作這樣一款好看精致的H5，目的是讓網(wǎng)易云音樂更進(jìn)一步通過每位用戶這一年的聽歌“足跡”，展現(xiàn)音樂對(duì)每個(gè)人生活的陪伴；并最終傳遞出，網(wǎng)易云音樂將繼續(xù)陪伴用戶溫暖前行。豐富的創(chuàng)意內(nèi)容如同一個(gè)完整的閉環(huán)，最終落到每一個(gè)具體的個(gè)體身上，直擊人心，迅速引發(fā)用戶的廣泛參與和深度共鳴。

廢話不多說，我們直接來欣賞下網(wǎng)易云音樂H5吧~

H5頁面動(dòng)效如下：

設(shè)計(jì)上，配色為網(wǎng)易云音樂經(jīng)典紅，每一頁都有不同的聽歌數(shù)據(jù)主題，每頁的配圖也都與主題相貼合，界面簡潔，畫風(fēng)清新，背景音樂選用了節(jié)奏歡快、旋律清澈的鋼琴曲“Christmas-徐夢(mèng)圓”，整體無論是視覺還是聽覺都讓人覺得非常舒服。

?體驗(yàn)上，案例雖然簡單，但給人的感覺還是很精致的，并且案例內(nèi)容也讓人產(chǎn)生了足夠的分享及傳播欲。一大早，這支H5就在小五票圈悄無聲息地刷屏了，朋友們都喜歡將自己的聽歌習(xí)慣曬出來，跟別人分享喜歡的好歌好曲。2018，又是新的一年，愿大家都能享受音樂所帶來的美好。

?技術(shù)實(shí)現(xiàn)： React.JS

全部H5頁面設(shè)計(jì)如下：

網(wǎng)易云音樂H5 PC端欣賞地址：https://music.163.com/nact/year2017_42

需要用網(wǎng)易云音樂APP來打開，才能看到更酷炫的H5動(dòng)效以及聽到優(yōu)美的音樂。

《2017網(wǎng)易云音樂用戶年度聽歌報(bào)告》H5 記錄每位用戶這一年的聽歌“足跡”。也算是一次不錯(cuò)的網(wǎng)易云音樂品牌營銷案例。