大厂实战！QQ音乐2023年度听歌报告设计总结

音乐作为一种跨越时空的艺术形式，音乐回忆是每个人内心深处最珍贵的财富，承载着情感、故事和经历。我们通过艺术馆的方式，向用户展示自己独特的音乐回忆，每个音乐回忆都是一件宝藏艺术品。2023 年的年度音乐报告将汇聚这些艺术品，给用户呈现一个全方位沉浸的看展体验。

一、整体体验结构设计

这次音乐年度盘活动分为看展前、看展时和看展后三个阶段。在看展前，通过用户全年数据打造了展览阵容海报，提前预告并积累用户数据。看展时，展览按照四大主题场馆呈现年度数据，加强用户沉浸感，设计了沉浸式的展览体验。看展后，邀请年度艺人录制感谢视频，提供了专属 BGM 和留言区，使用户分享回顾展览。整体活动为观众提供了丰富的音乐数据体验。

1. 看展前：预热邀请函

在展览开幕前，通常会发展览邀请函。这次活动也采用了这一理念，将邀请函移至线上。我们结合了用户数据，打造了用户的展览阵容。今年，根据用户喜好的歌手，我们生成了阵容海报，海报上显示用户昵称、参展歌手和上线时间。提前预告激发用户对年度听歌报告的期待，并提醒和激励数据较少的用户在这段时间内多听歌，积累数据。

2. 看展时：沉浸的音乐艺术展

① 分场馆展示主题内容

将年度数据分为四大主题场馆：独家珍藏、音乐色彩、音乐空间和音乐回忆。这四大主题分别对应最喜爱的歌曲、四季心情、歌曲排行榜和历年数据。这种精心分类不仅丰富了主题形式，更使得数据展示精确清晰，为观众呈现出更高层次的音乐数据体验。

② 一镜到底

打造沉浸式用户体验需要加强画面之间的衔接，增加动画转场，以及有关联的元素。在年度盘点设计之初，我们有意构想了一个仿佛真实展览场馆的概念，旨在将用户带入真实场景，还原真实的观展体验。我们精心设计了入场和出场动画，使用了相同的元素来呼应彼此，从而完美闭合整个年盘的循环。

3. 看展后：分享与回顾

① 总结分享

设计选用了与主题相符的纪念票根形式，使得加载页面转变为一场打印机制作纪念票的过程，增添了细节丰富度，并且使内容前后衔接更加连贯。

② 感谢信

年度盘活动上线后，我们邀请了你的年度艺人录制了感谢视频。页面延续了门票设计的风格，视频包框沿用了整体色调和质感。此外，我们还为本次年度盘活动专属的 BGM《记忆博物馆》制作了封面。这首歌的评论区也成为用户们相互交流和留念的热门地。

二、方案选型设定

为了给用户还原身临其境的看展体验，让用户感受到在参观真实艺术馆，我们也尝试了全新的技术：一镜到底、全画幅处理、陀螺仪交互。在小小的移动端手机中，不断探索设计和科技的交互上限，让用户沉浸其中，体验无限可能。

1. 一镜到底的体验，利用看展的动线策划整体的设计

开头的入场动画固然重要，但是内页的体验更是需要在设计之初需要思考的问题。本次设计的整体动线参考了真实的观展路径，目前大部分 H5 活动所使用的翻页或者渐隐过渡方式不适合当前主题。因为展览的体验通常是安静而平缓的，视角和透视是固定的。为了满足这一需求，我们采用了左右画面相拼接的方式来减少镜头变化，以此营造更加恰当的体验。

2. 全横幅处理

我们借鉴了中国传统的卷轴画，将左右画面相互拼接，以呈现一步一景的观赏方式，这种设计手法至关重要，使得观赏者能够逐一品味每一小节。我们精心设计了左右相接的画面，留出了足够的空间，仿若展厅中艺术品之间的错落有致，让整个体验松弛有度。

3. 陀螺仪加入增强空间真实感

为了增强空间感的真实性，本次年度盘首次融入陀螺仪技术，并结合最新的人工智能技术对画面进行扩展，随后将其分层为前、中、后三个图层。通过微调三个图层的运动系数，实现视角轻微变化的效果，进一步提升设计的丰富度。

三、视觉整体设定

在视觉设计中，我们致力于呈现真实的博物馆场景。通过建模还原场馆、在光影、材质以及场景动线布局中融入实景元素，力求为观众营造最佳的视觉体验。

1. 前期 AI 介入

在前期设定阶段，利用 Midjourney 的能力，将脑海中的图像，关键词，批量生成图片，并从中挑选出结构合理、构图完整的画面进行初步修改，同时为文案预留足够的空间。最后进行建模渲染精细处理。

2. 选取建模的视觉表达

为了突出展馆的质感和空间氛围，我们选择了黑白灰等低饱和度的颜色为基础， 并在此之上增加了五彩亮色营造出更丰富的空间氛围，表达音乐的情绪和温度，为展馆增添层次感。考虑到展厅的设计风格，在材质上主要以大理石、玻璃、金属三类材质为主。让画面更富有层次和品质感。

3. 衔接处理

运用 AI 技术在数据页之间，补充连续完整的空间过渡页，配合动画镜头移动，打造无缝的空间场景体验，增加用户沉浸感和真实感。同时，在过渡场景中融入了丰富的展览内容，包括介绍文案、场馆指引和品牌形象等小彩蛋，丰富内容的同时增强真实感。此外，针对场馆的分割页，我们设计了另一种动画过场，让用户仿佛置身于场馆中穿梭。通过门的处理，使转场更加流畅自然。

四、分场景打磨

在每一个分场景中，我们努力将数据与环境无缝融合，用心打磨每一个场景。让用户能直观地了解一年听歌数据的同时，也享受到美的视觉体验。这种呈现方式旨在为用户创造更加丰富和吸引人的互动体验。

1. 场馆设定与建模呈现

2. 动态设计巧思

① 动态风格的思路

基于整体视觉风格走的是博物馆的陈列风，整体动作需要干净利索，希望能让用户在体验时有身临其境的视觉动态体验。

② 方式与形态

横滑一镜到底的沉浸观展方式，结合前、中、后三景的错位差，让用户在静态的图片上也能体验到空间感和真实感。

③ 怎样实现&工具的选择

AE 中导出的 PAG、Lottie 动画在兼容和素材替换上都不够方便，骨骼动画成为了最优解。骨骼动画可以通过骨骼绑定让游戏角色活灵活现地动起来，看上去并不适用于场景动画。但我们惊喜地发现，如果把场景绑上骨骼和权重，动起来的动势和空间感出奇地好，于是一拍即合选择了骨骼动画。

3. 动态设计落地关键

无缝衔接转场并一镜到底，保证全程沉浸式体验

微动、微转面、微动画细节表达动画质感

前中后三景错位，表达空间感

我们着重进行了动画性能优化。通过使用骨骼动画压缩和级别细分技术，我们成功地减少了动画文件的大小，并提高了运行时的效率。这使得我们能够在不牺牲质量的前提下，实现更好的性能表现。

五、结果分享页

1. 结果页主 KV 设定

基于数字艺术馆这个“高逼格”的视觉，怎么让结果页视觉页符合这个设定？设计独一无二的“数字艺术品”让结果页的主题呼应数字艺术馆，形成闭环。

设计难点主要在：

1. 用图形化高度概括抽象的结果页关键词；
2. 在暗调环境下保证玻璃质感的通透；
3. 在三维软件中还原细腻的噪点质感。接下来会从形、色、质三个方面分别介绍一下思考与实践的过程。

① 造型/构成探索

有一个结果页的主题是[千万个 音符中的蒙太奇]。首先去搜索了一下蒙太奇手法的解释和它在平面作品中的表现手法。注释说明蒙太奇手法其实可以概括成:装配构成两个方面。在这个是视觉中，用音符的图形来构成主视觉，再用几种不同材质的几何图形去把这个音符图形”装配”起来，其实在这个设计中也运用了一种“蒙太奇的手法”。

左边的设计主题是[生活永远 ROCK AND LIVE]对应曲风是摇滚，摇滚很容易让人联想到灯球，我们用莫比乌斯环像“∞”无穷符号来代表“永远”，灯球和永远没用尽头的莫比乌斯环合在一起意为“永远年轻 永远ROCK”来呼应主题。

② 颜色探索

在黑暗环境下让玻璃质感颜色更加通透，主要是通过巨大的渐变的有色灯片实现的，发渐变光的灯片，可以给物体增加除自身颜色之外更丰富的颜色信息。后期再通过 PS 增加色散、强光效叠加图层样式，整个图就会非常绚丽。

③ 材质探索

基础材质是玻璃或者金属这两个基础材质。材质的难点主要在噪点材质的实现，尝试的时候发现 C4D 虽然可以直接实现，但是噪点位置、形状和颜色不太可控，最后决定直接 PS 笔刷大法！

2. 效果合集

六、总结

本次 QQ 音乐年度报告呈现了全新的视觉风格，探索了创新的设计手法，同时引入了 AI 辅助我们前期设定视觉方向。未来，我们将持续改进，致力于为大家提供更加优质和沉浸式的体验。我们期待在未来的活动中进一步发掘设计的可能性，为用户带来更加丰富多彩的音乐体验，并不断创新以提升用户参与感和愉悦度。这次的尝试是我们不断进步的开始，我们将继续努力，为观众带来更多惊喜和乐趣。

欢迎关注作者微信公众号：「腾讯音乐娱乐MUX」