時隔一年半，QQ 音樂迎來了煥然一新的 11.0 版本，本次升級沿續“年輕、新鮮、活力”的設計理念，在視覺語言和玩法探索上，圍繞“聽”的樂趣，對看、陪伴、互動、律動等方向展開探索，讓音樂不僅通過聲音表達，還拓寬音樂帶來的其他感受，爭取給用戶呈現更多維度更豐富的體驗。

本次 11.0 版本，QQ 音樂把 slogan 從“讓生活充滿音樂”更新為了「聽我想聽」，視覺升級則圍繞著這句新的 slogan 展開，力圖讓新視覺能展現出一種年輕、包容、自我、個性的態度。

一、開屏頁——包羅萬象，聽我想聽

「聽我想聽」，一方面是轉化為用戶視角，我有我的選擇，我有我想聽的歌，是篤定的態度。另外一方面，聽我想聽的什么，好像還沒有說完，正好是留給用戶和我們自己去定義。概念中包含浩瀚的宇宙（UNIVERSE）、黑膠、音符、頻譜（MUSIC）、用戶自己的想象（DIMENSION）組成的 QQ 音樂次元星球開屏畫面，聽我想聽。

二、UI 設計——輕盈通透，抓住核心

隨著扁平風的流行，多數 APP 的視覺風格趨于雷同，我們也在設計中尋找 QQ 音樂獨特的個性。圍繞“年輕、新鮮、活力”的關鍵詞，我們嘗試了近期流行的輕盈、通透的設計語言和風格，輕擬物化質感表達。同時為了讓變化感知強烈，聚焦重點界面和顯著部位，如：我的、音樂館、播放頁、APP 底 tab、品牌綠色等，最大化表現出輕盈、通透的設計亮點和特點。

1. 我的頁面

我的頁面的改動最大的兩個區域是用戶信息卡片和資產沉淀區域。

個人信息卡的設計目標是提升通透性和易用性，對原有信息重新布局，使得元素與元素之間不再粘連，每個元素區塊明顯，區域間用適當的留白使得整個卡片空間感強，層次清晰。

用戶資產沉淀區域，常規做法都是以 icon 作為入口，而本次最大的嘗試是用通透的魔法色漸變+專輯封面圖，視覺效果好似有一層硫酸紙包裝效果的黑膠唱片一樣。同時用戶行為上增加了快捷播放暫停，縮短了用戶聽歌的核心路徑。

2. icon 更新

icon 是除文字外的另一種圖形語言，我們在本次更新中，對 icon 進行了以下幾個方向的處理：

1. 圖形上，對表意不清楚的進行了優化，整體造型上讓 icon 的形體更加輕盈、圓潤；
2. 色彩上，將原有 UI 高亮暗綠色往象征著更年輕、活力的熒光綠上調整；
3. 質感上，打破原有的平面單一質感，加入熒光綠和灰色搭配的雙色表現，通透的半透明漸變表現，以及在底 tab 使用了微漸變質感+陰影，讓 icon 更豐富，更立體，更多細節，更多亮點。

同時，我們還對播放頁和 Actionsheet 的 icon 一起進行了優化，統一風格。

三、播放頁——多感官視聽體驗

在之前的 10.0 版本，播放頁引入了視頻背景。為了繼續拓寬和豐富用戶「看」+「聽」的多感官體驗，提升用戶聽歌的沉浸感。11.0 版本我們在播放頁背景上進行了更多動效探索。

1. 看到音樂的色彩——多彩漸變

歌曲封面是音樂人在視覺層面的音樂表達，封面和歌曲之間存在跨越感官的聯系。我們對播放頁背景魔法色進行了動態化升級，賦予音樂更多的層次和含義。

漸變色色彩豐富、順滑，可以營造氛圍，也可以傳遞情感。

多彩漸變光效采用了兩層結構，來保證清晰且豐富的色彩層次效果：

1. 上層 - 所有信息操控為亮色魔法色
2. 底層 - 多彩漸變動效

這些多色漸變效果是通過對歌曲封面的算法生成的，我們運用全新的色彩抓取技術，通過對封面的色彩計算，提取封面的主色，接著再通過設定顏色干預規則，對主色進行二次加工，生成兩個相關的魔法色，得到最終的漸變色彩。

魔法色映射到動態素材中，讓每一張專輯的色彩都與音樂流動、融合。

2. 看到音樂的節奏——動感光效

舒緩的多彩漸變，讓用戶看到了歌曲多變的色彩。除此之外，「節奏」也是感知音樂的重要因素。為了拓展用戶對節奏的感知，我們對歌曲節奏進行了可視化設計。針對節奏強弱，設計與之匹配的動感光效。

動感光效采用了四層結構，在不影響信息傳達的情況下，增強歌曲在視覺上的力量：

1. 上層 - 所有信息操控為亮色魔法色
2. 第二層 - 深色魔法色遮罩層
3. 第三層 - 動感光效視頻
4. 底層 - 深色魔法色背景

通過多層疊加，我們得到了極具沖擊力且豐富的動感光效。

3. minibar

同時，我們將多彩漸變和動感光效延續到了 minibar，給整體頁面改版帶去活力與年輕，是視覺上的一次大膽嘗試。

四、歌詞動效——沉浸式的視聽體驗

音樂通過聲音的規律傳達情感，而歌詞在音樂表達過程中起到輔助的作用。歌詞是語言，幫助用戶去體會和理解音樂的美感和創作者的意圖。

動效歌詞采用視頻+歌詞相結合的方式，為用戶打造更為沉浸的歌詞閱讀體驗。

全新的 QQ 音樂 11.0 版本，用戶可以在 5 款歌詞動效中自由選擇，分別是折疊水波、嘻哈公園、紫色夢囈、時光隧道、黑夜光點。

五、黑科技——AI智能曲譜

QQ 音樂 11.0 推出了業內首家智能和弦吉他曲譜功能，將 AI 技術智能生成曲譜的基礎能力可視化和賦予交互能力，滿足用戶吉他跟彈和曲譜進階編輯的操作需求。

六、偏好設置——音樂喜好的矯正器

直觀看到自己的音樂偏好，同時可以調整自己的偏好，增加或者減少某個維度的音樂推薦，達到真正意義上的「聽我想聽」。

七、互動樂趣

1. 一起聽——跨越距離，在共同頻率中滋養情感

音樂可以獨自享受，也可以用以交流和陪伴。一起聽歌的背后，核心是情感的維系。一方面，要滿足實時的情感表達，另一方面，通過情感的見證物來見證和維持關系。針對這二者，我們分別設計了表情互動以及心動字符。

① 實時的情感表達 —— 表情互動

想要一起聽的用戶大多數都是具有親密關系的兩個人，如閨蜜、基友、情侶等。
我們針對親密的人之間相互回應的場景，設計了表情彩蛋，強化了這種情感的表達，也增加了互動的樂趣。

表達喜愛的場景，期待收到對方回應，看到甜蜜的畫面。

打趣對方的場景，收到反擊，有打情罵俏的味道。

上線后，我們也從數據中發現，用戶更青睞使用有彩蛋的表情。

② 情感的見證物 —— 心動字符

作為二人情感的見證物，它需要能夠承載專屬的情感回憶，同時也能體現出情感伴隨時間而深化的過程。因此我們選擇了“字符”來作為見證物。

字符的本身可以表意，喜歡搖滾的潮酷搭檔可能會選擇類似 rock、swag 的潮語，而文藝青年之間則可能選取 shinning、cheers 之類的用詞，同時，每個字母的點亮和熄滅也隱喻了陪伴的過程，隨著一起聽歌時長的累計，字母會依次點亮，而二者陪伴的頻率低于一定程度，則字母也會逐步熄滅。當字符全部點亮時，會伴隨著光效和動態效果，讓平靜的字符多幾分生動和俏皮。

2. 樂心

音樂，總能引發一些心情感觸。也許是喚起了心底珍藏的回憶，也許是貼合了此刻的心境，也許是對歌手或作品抒發感受。

“樂心”意為音樂的內容，也代表愉悅身心。這也詮釋了這個功能，用戶在這里分享自己在聽的音樂及心情感觸，并在互動交流里收獲關懷、鼓舞和共鳴。

八、M-PETS——寵物聽歌陪伴記

M-PETS 作為 QQ 音樂游戲化、社交化的一次嘗試，圍繞寵物陪伴和出門看演出兩個核心玩法，設計了豐富的人寵互動機制，希望能為用戶帶來新奇有趣的音樂體驗。

更多寵物細節，敬請期待后續文章

后記

我們希望 QQ 音樂不止是用來聽歌和沉淀音樂資產的工具，更是用戶無論是聽著音樂激動昂揚還是 emo 低沉時，always be there 的存在。因此，我們在 11.0 的設計中，圍繞陪伴、科技、律動、社交等新思路新方向在探索。希望能成為陪你聽歌、懂你的品味、伴你探索音樂和世界的好伙伴。

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