网易云音乐:网易云音乐陪你温暖同行

2018-01-02 H5案例分享 H5案例分享
网易云音乐:网易云音乐陪你温暖同行


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

识别图中二维码

网易云音乐陪你温暖同行-查阅二维码

完整欣赏此案例大约需要1分钟


案例:网易云音乐陪你温暖同行

出品:网易云音乐

亮点:

  1. 策划上,数据报告类。网易云音乐用户专属年度听歌总结。案例最佳观看环境为网易云音乐App。如果是好友从网易云音乐分享至微信的链接,用户可以直接点开并“点击查看”来查看好友的年度听歌总结,点击屏幕下方“查看我的年度总结”则会跳转至网易云音乐App来查看自己的“年度总结”。

 

案例通过若干不同的维度,来展示用户的听歌数据,如2017年听歌总数、听歌时段、听到最多的歌词、你的年度歌手等等,所有数据都基于用户这一年在网易云音乐里的听歌行为。结尾处点击“分享给好友”可以分享至各社交平台,点击“重温你的2017”可以从头观看,点击屏幕中间的视频播放按钮,可观看网易云音乐新年献礼“2018音乐的力量”主题视频。

 

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

 

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



技术实现: React.JS



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

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

相关推荐:

网易云音乐:寻找「梦想」的旅程

【网易】H5案例大汇总(干货精选)——2017大合集第17波

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~