从动效设计到代码｜网易云音乐2018年度听歌报告的背后_从动效设计到代码

从动效设计到代码，网易云音乐这版年度听歌报告的背后有怎样的故事呢？

前言

作为 2019 年第一个爆款刷屏 H5 项目，「网易云音乐 2018 年度听歌报告」除了走心的文案、精美的页面，也包含了不少有意思的动效。大家应该能想到，这些动效的设计是出自我们设计团队，但你可能没想到的是，实现这些动效的前端代码也有一大部分也是设计师「写」的哦。

据不完全统计，可能有上万行之多（为什么会这么多，看完本文就知道了。另外，这个大项目有「听歌报告」和「一歌一遇」两部分，本文主要聊聊「听歌报告」这块儿。）

因为每个用户的数据是不一样的，有的页面可能没有展示在你的听歌报告里，下面的录屏是全部的页面：

情感化设计

「报告」是一个听起来挺枯燥的词语，我们希望能通过设计，让文字和数据不那么冰冷严肃。我们采用了阳光温暖的配色，营造了唯美清新的场景，和穿着小红裤裤闷骚的你。这些人物和场景所搭配的动效也得是有温度的，整体的基调不是酷炫狂霸拽，不是宅萌骚浪贱，我们的每个页面都是柔缓又惬意，慵懒且清新。

从动效设计到代码｜网易云音乐2018年度听歌报告的背后