大廠實戰(zhàn)案例！QQ MUSIC 2024年度版本總結(jié)

一、前言

從 2005 年的一款音樂播放器開始，QQ 音樂不知不覺中 18 歲了。我們始終以不斷推陳出新的態(tài)度，引領著音樂流媒體領域的變革。但不變的是，不忘初心地去還原最簡單最舒適的聽歌體驗，去打造最積極向上的音樂生活狀態(tài)。

QQMUSIC 2024 年度版本升級，從我們的核心用戶群，年輕人的需求出發(fā)，在 UI 畫布的風格、音樂內(nèi)容的瀏覽路線、音樂播放的沉浸空間等觸點上做體驗升級。旨在為用戶打造一個簡約有序、有柔和光影、能有愛看、能自由聽的音樂美術館。

二、UI 風格升級

美術館是為展覽服務的，需要包容各種風格的藝術作品。為更好地突出藝術品本身，美術館需要先把自己“隱藏”起來，讓觀展者注意力都在藝術品本身上，我們的 UI 設計也是如此。要如何做好“隱藏”的設計呢？我們從頁面信息的疏密度著手，來梳理核心信息的層級，挖掘標簽價值。來搭建一個純粹的，克制的，能更好的包容多彩音樂的 UI 界面。

這是一個純粹的音樂空間

我們調(diào)整了作為展架的宮格體系，較大的圖片可以更好的展示音樂內(nèi)容，提升內(nèi)容吸引力。同時，相同屏幕內(nèi)顯示的內(nèi)容減少，內(nèi)容之間的相互干擾也就減少了，視覺感受上會更簡潔、更純粹。我們減小了圓角，讓圖片展示更完整，讓負空間的圖形更規(guī)整，讓頁面排版更整潔。從情感上來看，恰到好處的圓角能讓頁面看起來更親和。

這是一個克制的音樂空間

顏色上，用高對比度的黑白作為文字和背景，盡可能地減少多余的色彩干擾，把色彩留給圖片、封面等內(nèi)容本身，只用少量的品牌綠色來作為點綴和強調(diào)。

「推薦」里把輔助判斷功能的標簽從綠色減弱為灰黑色；

「我的音樂」收藏那一排 icon 同樣也去掉跳躍的綠色，變?yōu)楹椭C的黑色。

這是一個簡潔又生動的音樂空間

對標同類產(chǎn)品，進一步找出 QQ 音樂的視覺語言，更新全局的圖標，讓 UI 呈現(xiàn)出更帶特色的氣質(zhì)，搭配輸出了底部導航的點擊動畫效果，帶來更生動的音樂體驗。

這是一個多彩的音樂空間

在多作品展示時克制，在單個作品展示時，我們應該讓作品本身效果更大化。我們從專輯封面中提取的顏色，轉(zhuǎn)化成多彩柔和的光效&頻譜，串連和烘托出每一首歌曲的獨特氛圍。當你點擊播放時，從 minibar 到播放頁到歌詞頁，音樂色彩一直陪著你～

為了讓簡單的界面豐富起來，我們在為你打造、AI 歌單、新歌推薦等內(nèi)容形態(tài)上，使用了簡單的幾何風格圖形裝飾+魔法色，讓欄目呈現(xiàn)出帶有特色的豐富感。

以上是關于 UI 風格的思考和升級，2024 年度版本的設計改版工作，在內(nèi)容體驗層、功能創(chuàng)新層面也做了諸多升級和創(chuàng)新。聚焦在 2 個維度上，找歌維度和聽歌維度。

三、找歌體驗升級

找歌體驗說的是 QQ 音樂默認定位頁「推薦頁」的內(nèi)容流設計。設計理念是使用「感知體驗模型」來思考內(nèi)容體驗流的設計。好的體驗，是將真實世界人們的體驗和操作轉(zhuǎn)化成線上產(chǎn)品的，功能邏輯和流程設計并符合用戶心智模型，可自然地，無意識地操作。那么，「推薦頁」內(nèi)容流的設計，旨在將真實生活中人們聊音樂推薦歌曲時的交流方式轉(zhuǎn)化成線上產(chǎn)品的功能邏輯、操作流程、設計表達。讓用戶愿意聊，喜歡聊，下次還來聊!

第 1 步就是分析用戶，了解核心用戶群 (年輕人) 的行為和心理特征，關鍵字落到了“情感連接”這個點。Z 世代的年輕人，愿意為自己的喜好花錢花時間，有自己獨有的生活方式和在意自己的獨特表達，關注情感價值，關注情感連接。

帶著這個大前提，用感知體驗模型，了解用戶找音樂的心智，了解用戶具體的情緒、情感和動機都是什么。然后在行為地圖中，安排恰當?shù)膬?nèi)容和體驗。最終明確了音樂內(nèi)容流的分階段設計目標。

「第一印象」階段：期望輕松地“聊”，能快速找到感興趣的音樂內(nèi)容并快速播放。

「繼續(xù)瀏覽」階段：還可以被關懷到，找到情感連接點，用戶滿足感將得到極大的提升。感受到 app 的溫度，可以有愛地“聊”。

「深度瀏覽」階段：如果還可以自我控制，自主調(diào)節(jié)，那么用戶的操控感可得以滿足，從而認可這個 app，可以繼續(xù)深度使用這個 app。

「沉淀口味」階段：最后還可以得到一些有驚喜的有趣味的內(nèi)容，就可以很大程度的增強用戶和 app 之間的粘性。

本次改版重點關注的是「繼續(xù)瀏覽」階段的體驗。打造推薦頁首屏的核心流量點位「猜你喜歡」的峰值體驗。從競品對比中找差異度，再放大 Q 音自身的功能亮點，最后深度探尋「猜你喜歡」與用戶之間的情感連接點，以保證全新的體驗能吸引用戶，打動用戶。三個設計策略：找差異、以小見大、增強情感鏈接。

找歌策略 1: 找差異

縱觀音樂競品，都有類似「猜你喜歡」的功能模塊，都是用一個常規(guī)的播放頁來承載，都是基于用戶喜好，一點就播的私人電臺。

找歌策略 2: 以小見大

回看 QQ 音樂「猜你喜歡」發(fā)展路程，我們都在不斷斟酌和嘗試這個模塊的尺寸、質(zhì)感、信息。從數(shù)據(jù)和口碑中表明，“外露歌曲名”、“加入問候語”等措施，對模塊的點擊率和留存率會有所幫助。

找歌策略 3: 加強情感連接

從找差異，到總結(jié)過往經(jīng)驗，到梳理元素優(yōu)先級，最后轉(zhuǎn)化生成了一份「猜你喜歡」策略地圖。可以發(fā)現(xiàn)，過去我們更多的是在功能上、內(nèi)容上做措施。那么還能做什么呢？我開始從感受側(cè)來思考，開始回想朋友間推薦歌曲、交流歌曲的真實場景。例如，我坐在工位要和我的同事推薦一首好歌，我會說些什么呢？就會說...

"嘿！你今天這么開心，我給你推薦一首好歌吧~"

"嘿！你上次好像就說過你喜歡這個曲風吧？我最近也發(fā)現(xiàn)一首，今天要不要試試？"

為了還原這樣一個場景，我們需要展示哪些信息呢？

1. 關鍵的推薦理由
2. 人情味的問候語
3. 和我相關的信息
4. 真實的環(huán)境狀態(tài)

找歌設計方案

嘗試去還原交流音樂的三個步驟：

第一步：Say Hi，并直接說出推薦理由；

第二步：聊聊用戶此刻的心情，以表達當前推薦和你足夠相關；

第三步：聊聊此刻的聊天氛圍、環(huán)境狀態(tài)，是陽光明媚，還是浪漫飄雪的...今天降溫了，我還能給點貼心問候，這些語言文字，都能拉近和用戶間的距離。心情指數(shù)有變化時，也能讓用戶即地看到，讓用戶覺得這里是有溫度的，喜歡這里，多來在這里～最終頁面中的設計元素就是文字、標簽、水印、背景的天氣氛圍。

推敲過程中，我們還嘗試過外露一個時間線，讓用戶來這里打卡，來這里追溯過往時段。你能期待未來，也能解鎖過去。「猜你喜歡」就是你的 24 小時在線推歌好朋友哦～也嘗試過展示多首歌曲，讓用戶對未來 1 小時內(nèi)會播放的歌曲有一定預期，提升內(nèi)容的豐富度。

最終的視覺稿如下，去掉了不重要的頻譜元素，把更多的空間留給了背景氛圍。用真實的有巧思的天氣動畫來增強整個頁面的氛圍感。在雨天，細雨如絲般飄落，落地成珠，如詩如畫；在雪夜，雪花紛飛，翩翩起舞，將您帶入夢幻的冬季童話。而在雷電交加的時刻，閃電劃破天際，點亮了您的音樂旅程。

另一方面，「猜你喜歡」界面的升級，無形中也給內(nèi)容運營帶來了更多空間和可能性。從水印到整體背景，都可以在特定時間點帶來用戶更多的驚喜。比如，中國的龍年，播放器將為您帶來與龍相關的視覺和動畫，讓您沉浸在中國傳統(tǒng)文化的氛圍中，感受節(jié)日的喜慶與祥和。

總結(jié)一下，「找歌體驗·猜你喜歡」項目中，我們的設計方法就是「以小見大」，從發(fā)現(xiàn)用戶“喜歡被關懷”這個點出發(fā)，關注更感受測的設計，到轉(zhuǎn)化還原一個更有人情味的音樂交流場景。以小見大，以點及面，有效放大高轉(zhuǎn)化的元素，來吸引用戶，提升內(nèi)容體驗。

四、聽歌體驗升級

這部分是關于音樂播放的體驗創(chuàng)新，將真實生活中人們的聽歌空間轉(zhuǎn)化成線上的操作方式、設計表達。真實生活中，用戶想要簡約的、色調(diào)和諧、有個人特色的聽歌空間。我們線上的播放頁，就好比一個個風格各異的空間。但從用戶反饋中發(fā)現(xiàn)，用戶總想微調(diào)一下，擺弄一番，這就是本次體驗升級的機會點。用「打散重組法」來突破。把播放頁想象成自己的家，讓用戶親手擺放親手布局。這就是 2024 年播放器的全新思路「自定義播放器」，絕對的業(yè)界首創(chuàng)！

1. 自定義播放器設計策略

設計的難點是，如何拿捏自定義的方式和程度。完全開放的自定義，美觀度不可控，我們還是希望用戶在欣賞音樂的同時，眼睛里看到的也是美的，所以視覺上，我們應該幫助用戶把關，在讓用戶擁有調(diào)控感的同時，也能搭配出一個美觀的界面。所以，設計的策略是探索一個更受歡迎的頁面樣式 & 簡單好用的操作流程。

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

首先，定義風格，優(yōu)選線上還未涉及的風格，例如封面類、文字類、海報類這個 3 類。同時預先評估各類別的豐富度、成本和可行性。接著，從數(shù)據(jù)著手，分層剖析，挑選可組合出更多變化的控件來做自定義。最終選了封面樣式，按鈕數(shù)量，進度條樣式，背景色彩，這些元素。

例如，頁面布局的變化能讓用戶有最大的感知差異，但簡單的替換不同風格的 icon，也能有不一樣的感覺。再看頻譜的使用，可以給頁面帶來完全不一樣的氣質(zhì)，旋律感和節(jié)奏感讓播放界面瞬間生動。

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

先排查市面上用戶常用的自定義軟件中，都會用到哪些自定義的動作。例如小組件中的自由移動；修圖軟件中的選濾鏡調(diào)色調(diào)；選手表、選汽車中會調(diào)整某些零件的具體參數(shù)。聚焦一下，自定義動作大概會有換布局、刪除、移動、調(diào)大小、調(diào)濾鏡。

接著，將這些動作按照「樣式結(jié)果好」和「操作感強」這兩個維度去打分。用結(jié)果的好來提升用戶的滿意度&成就感。用操作的爽感來提升用戶的掌控欲&滿足感。讓用戶覺得這個聽歌空間全是自己設定的。這樣就能得到一個自定義動作的價值梯度了，「換布局」是我們需要著重考慮的動作，性價比最高。

基于以上的分析與判斷，產(chǎn)出了初步的 2 個設計方向「自由移動方向」&「版式微調(diào)方向」，并細致推敲各方案利弊，操作流程的繁簡，以及開發(fā)成本的大小。

「自由移動方向」在操作流程中處處碰壁。我們播放頁的元素不同于小組件，小組件的尺寸，都是同一個比例的。我們有圖片、文字、大小不一尺寸的按鈕。移動按鈕的路徑中，經(jīng)常找不到合適位置，也很容易和文字打架。

對比來看，「版式微調(diào)方向」的特點是在有限的樣式組合中，使用單一操作項 “點擊”來完成替換、調(diào)大小、調(diào)顏色，這些動作。這種流程的學習成本極低，是用戶最為熟悉的方式。所以我們的設計方案就敲定為：先選類別，再選版式，最后選按鈕數(shù)量和按鈕樣式。讓用戶輕輕松松，隨意搭配～

在視覺階段，QQ 音樂線上已經(jīng)有那么多播放器樣式了了，自定義播放器要如何做才能呢？首先，肯定需要和線上的這些播放器不一樣，需要更加的獨特，從版式和布局入手，打破播放器固有的排版和布局。另外，檢視非必要信息：直接去掉標簽信息，將多個非聽歌強相關的按鈕都默認隱藏（用戶也可通過自定義顯示，或是在更多操作里使用）留下自己聽歌時必要的操作即可。

4. 播放器策略 3: 用色彩持續(xù)提升設計質(zhì)感

魔法色的使用一直是 QQ 音樂的一大特色和亮點，為了讓自定義播放器在簡潔但不又不單調(diào)，讓每首歌會根據(jù)歌曲的封面顏色匹配和更換顏色，多變的色彩，在簡潔的布局基礎上動態(tài)緯度提升了豐富度，使得播放界面不是一成不變的，而是隨著每一支歌曲變化而變化。用戶甚至會為了看更多好看的配色，聽更多歌。

最終，自定義播放器在用戶中口碑節(jié)節(jié)高升，持續(xù)都會有新的用戶來反饋，這個播放器簡直絕了！大大的頭部封面，搭配我們最近新上線的動態(tài)封面，一整個靈動播放，非常有意境。

結(jié)語

2024 年度版本，除了在 UI、找歌體驗、自定義播放器探索外，在其他功能點上還做了很多創(chuàng)新嘗試，比如可 360 度旋轉(zhuǎn)的 3D 播放器，名畫播放器、實況播放器、個性專輯墻等等。我們初心不變，還原最簡單最舒適的聽歌體驗，還原更多真實聽歌環(huán)境，打造最積極向上的音樂生活狀態(tài)。

歡迎關注作者微信公眾號：「騰訊音樂娛樂MUX」