大厂实战案例！QQ MUSIC 2024年度版本总结

一、前言

从 2005 年的一款音乐播放器开始，QQ 音乐不知不觉中 18 岁了。我们始终以不断推陈出新的态度，引领着音乐流媒体领域的变革。但不变的是，不忘初心地去还原最简单最舒适的听歌体验，去打造最积极向上的音乐生活状态。

QQMUSIC 2024 年度版本升级，从我们的核心用户群，年轻人的需求出发，在 UI 画布的风格、音乐内容的浏览路线、音乐播放的沉浸空间等触点上做体验升级。旨在为用户打造一个简约有序、有柔和光影、能有爱看、能自由听的音乐美术馆。

二、UI 风格升级

美术馆是为展览服务的，需要包容各种风格的艺术作品。为更好地突出艺术品本身，美术馆需要先把自己“隐藏”起来，让观展者注意力都在艺术品本身上，我们的 UI 设计也是如此。要如何做好“隐藏”的设计呢？我们从页面信息的疏密度着手，来梳理核心信息的层级，挖掘标签价值。来搭建一个纯粹的，克制的，能更好的包容多彩音乐的 UI 界面。

这是一个纯粹的音乐空间

我们调整了作为展架的宫格体系，较大的图片可以更好的展示音乐内容，提升内容吸引力。同时，相同屏幕内显示的内容减少，内容之间的相互干扰也就减少了，视觉感受上会更简洁、更纯粹。我们减小了圆角，让图片展示更完整，让负空间的图形更规整，让页面排版更整洁。从情感上来看，恰到好处的圆角能让页面看起来更亲和。

这是一个克制的音乐空间

颜色上，用高对比度的黑白作为文字和背景，尽可能地减少多余的色彩干扰，把色彩留给图片、封面等内容本身，只用少量的品牌绿色来作为点缀和强调。

「推荐」里把辅助判断功能的标签从绿色减弱为灰黑色；

「我的音乐」收藏那一排 icon 同样也去掉跳跃的绿色，变为和谐的黑色。

这是一个简洁又生动的音乐空间

对标同类产品，进一步找出 QQ 音乐的视觉语言，更新全局的图标，让 UI 呈现出更带特色的气质，搭配输出了底部导航的点击动画效果，带来更生动的音乐体验。

这是一个多彩的音乐空间

在多作品展示时克制，在单个作品展示时，我们应该让作品本身效果更大化。我们从专辑封面中提取的颜色，转化成多彩柔和的光效&频谱，串连和烘托出每一首歌曲的独特氛围。当你点击播放时，从 minibar 到播放页到歌词页，音乐色彩一直陪着你～

为了让简单的界面丰富起来，我们在为你打造、AI 歌单、新歌推荐等内容形态上，使用了简单的几何风格图形装饰+魔法色，让栏目呈现出带有特色的丰富感。

以上是关于 UI 风格的思考和升级，2024 年度版本的设计改版工作，在内容体验层、功能创新层面也做了诸多升级和创新。聚焦在 2 个维度上，找歌维度和听歌维度。

三、找歌体验升级

找歌体验说的是 QQ 音乐默认定位页「推荐页」的内容流设计。设计理念是使用「感知体验模型」来思考内容体验流的设计。好的体验，是将真实世界人们的体验和操作转化成线上产品的，功能逻辑和流程设计并符合用户心智模型，可自然地，无意识地操作。那么，「推荐页」内容流的设计，旨在将真实生活中人们聊音乐推荐歌曲时的交流方式转化成线上产品的功能逻辑、操作流程、设计表达。让用户愿意聊，喜欢聊，下次还来聊!

第 1 步就是分析用户，了解核心用户群 (年轻人) 的行为和心理特征，关键字落到了“情感连接”这个点。Z 世代的年轻人，愿意为自己的喜好花钱花时间，有自己独有的生活方式和在意自己的独特表达，关注情感价值，关注情感连接。

带着这个大前提，用感知体验模型，了解用户找音乐的心智，了解用户具体的情绪、情感和动机都是什么。然后在行为地图中，安排恰当的内容和体验。最终明确了音乐内容流的分阶段设计目标。

「第一印象」阶段：期望轻松地“聊”，能快速找到感兴趣的音乐内容并快速播放。

「继续浏览」阶段：还可以被关怀到，找到情感连接点，用户满足感将得到极大的提升。感受到 app 的温度，可以有爱地“聊”。

「深度浏览」阶段：如果还可以自我控制，自主调节，那么用户的操控感可得以满足，从而认可这个 app，可以继续深度使用这个 app。

「沉淀口味」阶段：最后还可以得到一些有惊喜的有趣味的内容，就可以很大程度的增强用户和 app 之间的粘性。

本次改版重点关注的是「继续浏览」阶段的体验。打造推荐页首屏的核心流量点位「猜你喜欢」的峰值体验。从竞品对比中找差异度，再放大 Q 音自身的功能亮点，最后深度探寻「猜你喜欢」与用户之间的情感连接点，以保证全新的体验能吸引用户，打动用户。三个设计策略：找差异、以小见大、增强情感链接。

找歌策略 1: 找差异

纵观音乐竞品，都有类似「猜你喜欢」的功能模块，都是用一个常规的播放页来承载，都是基于用户喜好，一点就播的私人电台。

找歌策略 2: 以小见大

回看 QQ 音乐「猜你喜欢」发展路程，我们都在不断斟酌和尝试这个模块的尺寸、质感、信息。从数据和口碑中表明，“外露歌曲名”、“加入问候语”等措施，对模块的点击率和留存率会有所帮助。

找歌策略 3: 加强情感连接

从找差异，到总结过往经验，到梳理元素优先级，最后转化生成了一份「猜你喜欢」策略地图。可以发现，过去我们更多的是在功能上、内容上做措施。那么还能做什么呢？我开始从感受侧来思考，开始回想朋友间推荐歌曲、交流歌曲的真实场景。例如，我坐在工位要和我的同事推荐一首好歌，我会说些什么呢？就会说...

"嘿！你今天这么开心，我给你推荐一首好歌吧~"

"嘿！你上次好像就说过你喜欢这个曲风吧？我最近也发现一首，今天要不要试试？"

为了还原这样一个场景，我们需要展示哪些信息呢？

1. 关键的推荐理由
2. 人情味的问候语
3. 和我相关的信息
4. 真实的环境状态

找歌设计方案

尝试去还原交流音乐的三个步骤：

第一步：Say Hi，并直接说出推荐理由；

第二步：聊聊用户此刻的心情，以表达当前推荐和你足够相关；

第三步：聊聊此刻的聊天氛围、环境状态，是阳光明媚，还是浪漫飘雪的...今天降温了，我还能给点贴心问候，这些语言文字，都能拉近和用户间的距离。心情指数有变化时，也能让用户即地看到，让用户觉得这里是有温度的，喜欢这里，多来在这里～最终页面中的设计元素就是文字、标签、水印、背景的天气氛围。

推敲过程中，我们还尝试过外露一个时间线，让用户来这里打卡，来这里追溯过往时段。你能期待未来，也能解锁过去。「猜你喜欢」就是你的 24 小时在线推歌好朋友哦～也尝试过展示多首歌曲，让用户对未来 1 小时内会播放的歌曲有一定预期，提升内容的丰富度。

最终的视觉稿如下，去掉了不重要的频谱元素，把更多的空间留给了背景氛围。用真实的有巧思的天气动画来增强整个页面的氛围感。在雨天，细雨如丝般飘落，落地成珠，如诗如画；在雪夜，雪花纷飞，翩翩起舞，将您带入梦幻的冬季童话。而在雷电交加的时刻，闪电划破天际，点亮了您的音乐旅程。

另一方面，「猜你喜欢」界面的升级，无形中也给内容运营带来了更多空间和可能性。从水印到整体背景，都可以在特定时间点带来用户更多的惊喜。比如，中国的龙年，播放器将为您带来与龙相关的视觉和动画，让您沉浸在中国传统文化的氛围中，感受节日的喜庆与祥和。

总结一下，「找歌体验·猜你喜欢」项目中，我们的设计方法就是「以小见大」，从发现用户“喜欢被关怀”这个点出发，关注更感受测的设计，到转化还原一个更有人情味的音乐交流场景。以小见大，以点及面，有效放大高转化的元素，来吸引用户，提升内容体验。

四、听歌体验升级

这部分是关于音乐播放的体验创新，将真实生活中人们的听歌空间转化成线上的操作方式、设计表达。真实生活中，用户想要简约的、色调和谐、有个人特色的听歌空间。我们线上的播放页，就好比一个个风格各异的空间。但从用户反馈中发现，用户总想微调一下，摆弄一番，这就是本次体验升级的机会点。用「打散重组法」来突破。把播放页想象成自己的家，让用户亲手摆放亲手布局。这就是 2024 年播放器的全新思路「自定义播放器」，绝对的业界首创！

1. 自定义播放器设计策略

设计的难点是，如何拿捏自定义的方式和程度。完全开放的自定义，美观度不可控，我们还是希望用户在欣赏音乐的同时，眼睛里看到的也是美的，所以视觉上，我们应该帮助用户把关，在让用户拥有调控感的同时，也能搭配出一个美观的界面。所以，设计的策略是探索一个更受欢迎的页面样式 & 简单好用的操作流程。

2. 播放器策略 1: 更独特更受欢迎的界面

首先，定义风格，优选线上还未涉及的风格，例如封面类、文字类、海报类这个 3 类。同时预先评估各类别的丰富度、成本和可行性。接着，从数据着手，分层剖析，挑选可组合出更多变化的控件来做自定义。最终选了封面样式，按钮数量，进度条样式，背景色彩，这些元素。

例如，页面布局的变化能让用户有最大的感知差异，但简单的替换不同风格的 icon，也能有不一样的感觉。再看频谱的使用，可以给页面带来完全不一样的气质，旋律感和节奏感让播放界面瞬间生动。

3. 播放器策略 2: 简单好用的操作流程

先排查市面上用户常用的自定义软件中，都会用到哪些自定义的动作。例如小组件中的自由移动；修图软件中的选滤镜调色调；选手表、选汽车中会调整某些零件的具体参数。聚焦一下，自定义动作大概会有换布局、删除、移动、调大小、调滤镜。

接着，将这些动作按照「样式结果好」和「操作感强」这两个维度去打分。用结果的好来提升用户的满意度&成就感。用操作的爽感来提升用户的掌控欲&满足感。让用户觉得这个听歌空间全是自己设定的。这样就能得到一个自定义动作的价值梯度了，「换布局」是我们需要着重考虑的动作，性价比最高。

基于以上的分析与判断，产出了初步的 2 个设计方向「自由移动方向」&「版式微调方向」，并细致推敲各方案利弊，操作流程的繁简，以及开发成本的大小。

「自由移动方向」在操作流程中处处碰壁。我们播放页的元素不同于小组件，小组件的尺寸，都是同一个比例的。我们有图片、文字、大小不一尺寸的按钮。移动按钮的路径中，经常找不到合适位置，也很容易和文字打架。

对比来看，「版式微调方向」的特点是在有限的样式组合中，使用单一操作项 “点击”来完成替换、调大小、调颜色，这些动作。这种流程的学习成本极低，是用户最为熟悉的方式。所以我们的设计方案就敲定为：先选类别，再选版式，最后选按钮数量和按钮样式。让用户轻轻松松，随意搭配～

在视觉阶段，QQ 音乐线上已经有那么多播放器样式了了，自定义播放器要如何做才能呢？首先，肯定需要和线上的这些播放器不一样，需要更加的独特，从版式和布局入手，打破播放器固有的排版和布局。另外，检视非必要信息：直接去掉标签信息，将多个非听歌强相关的按钮都默认隐藏（用户也可通过自定义显示，或是在更多操作里使用）留下自己听歌时必要的操作即可。

4. 播放器策略 3: 用色彩持续提升设计质感

魔法色的使用一直是 QQ 音乐的一大特色和亮点，为了让自定义播放器在简洁但不又不单调，让每首歌会根据歌曲的封面颜色匹配和更换颜色，多变的色彩，在简洁的布局基础上动态纬度提升了丰富度，使得播放界面不是一成不变的，而是随着每一支歌曲变化而变化。用户甚至会为了看更多好看的配色，听更多歌。

最终，自定义播放器在用户中口碑节节高升，持续都会有新的用户来反馈，这个播放器简直绝了！大大的头部封面，搭配我们最近新上线的动态封面，一整个灵动播放，非常有意境。

结语

2024 年度版本，除了在 UI、找歌体验、自定义播放器探索外，在其他功能点上还做了很多创新尝试，比如可 360 度旋转的 3D 播放器，名画播放器、实况播放器、个性专辑墙等等。我们初心不变，还原最简单最舒适的听歌体验，还原更多真实听歌环境，打造最积极向上的音乐生活状态。

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