音樂作為一種跨越時空的藝術形式，音樂回憶是每個人內心深處最珍貴的財富，承載著情感、故事和經歷。我們通過藝術館的方式，向用戶展示自己獨特的音樂回憶，每個音樂回憶都是一件寶藏藝術品。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」