大廠實戰(zhàn)！QQ音樂2023年度聽歌報告設(shè)計總結(jié)

音樂作為一種跨越時空的藝術(shù)形式，音樂回憶是每個人內(nèi)心深處最珍貴的財富，承載著情感、故事和經(jīng)歷。我們通過藝術(shù)館的方式，向用戶展示自己獨特的音樂回憶，每個音樂回憶都是一件寶藏藝術(shù)品。2023 年的年度音樂報告將匯聚這些藝術(shù)品，給用戶呈現(xiàn)一個全方位沉浸的看展體驗。

一、整體體驗結(jié)構(gòu)設(shè)計

這次音樂年度盤活動分為看展前、看展時和看展后三個階段。在看展前，通過用戶全年數(shù)據(jù)打造了展覽陣容海報，提前預(yù)告并積累用戶數(shù)據(jù)。看展時，展覽按照四大主題場館呈現(xiàn)年度數(shù)據(jù)，加強(qiáng)用戶沉浸感，設(shè)計了沉浸式的展覽體驗。看展后，邀請年度藝人錄制感謝視頻，提供了專屬 BGM 和留言區(qū)，使用戶分享回顧展覽。整體活動為觀眾提供了豐富的音樂數(shù)據(jù)體驗。

1. 看展前：預(yù)熱邀請函

在展覽開幕前，通常會發(fā)展覽邀請函。這次活動也采用了這一理念，將邀請函移至線上。我們結(jié)合了用戶數(shù)據(jù)，打造了用戶的展覽陣容。今年，根據(jù)用戶喜好的歌手，我們生成了陣容海報，海報上顯示用戶昵稱、參展歌手和上線時間。提前預(yù)告激發(fā)用戶對年度聽歌報告的期待，并提醒和激勵數(shù)據(jù)較少的用戶在這段時間內(nèi)多聽歌，積累數(shù)據(jù)。

2. 看展時：沉浸的音樂藝術(shù)展

① 分場館展示主題內(nèi)容

將年度數(shù)據(jù)分為四大主題場館：獨家珍藏、音樂色彩、音樂空間和音樂回憶。這四大主題分別對應(yīng)最喜愛的歌曲、四季心情、歌曲排行榜和歷年數(shù)據(jù)。這種精心分類不僅豐富了主題形式，更使得數(shù)據(jù)展示精確清晰，為觀眾呈現(xiàn)出更高層次的音樂數(shù)據(jù)體驗。

② 一鏡到底

打造沉浸式用戶體驗需要加強(qiáng)畫面之間的銜接，增加動畫轉(zhuǎn)場，以及有關(guān)聯(lián)的元素。在年度盤點設(shè)計之初，我們有意構(gòu)想了一個仿佛真實展覽場館的概念，旨在將用戶帶入真實場景，還原真實的觀展體驗。我們精心設(shè)計了入場和出場動畫，使用了相同的元素來呼應(yīng)彼此，從而完美閉合整個年盤的循環(huán)。

3. 看展后：分享與回顧

① 總結(jié)分享

設(shè)計選用了與主題相符的紀(jì)念票根形式，使得加載頁面轉(zhuǎn)變?yōu)橐粓龃蛴C(jī)制作紀(jì)念票的過程，增添了細(xì)節(jié)豐富度，并且使內(nèi)容前后銜接更加連貫。

② 感謝信

年度盤活動上線后，我們邀請了你的年度藝人錄制了感謝視頻。頁面延續(xù)了門票設(shè)計的風(fēng)格，視頻包框沿用了整體色調(diào)和質(zhì)感。此外，我們還為本次年度盤活動專屬的 BGM《記憶博物館》制作了封面。這首歌的評論區(qū)也成為用戶們相互交流和留念的熱門地。

二、方案選型設(shè)定

為了給用戶還原身臨其境的看展體驗，讓用戶感受到在參觀真實藝術(shù)館，我們也嘗試了全新的技術(shù)：一鏡到底、全畫幅處理、陀螺儀交互。在小小的移動端手機(jī)中，不斷探索設(shè)計和科技的交互上限，讓用戶沉浸其中，體驗無限可能。

1. 一鏡到底的體驗，利用看展的動線策劃整體的設(shè)計

開頭的入場動畫固然重要，但是內(nèi)頁的體驗更是需要在設(shè)計之初需要思考的問題。本次設(shè)計的整體動線參考了真實的觀展路徑，目前大部分 H5 活動所使用的翻頁或者漸隱過渡方式不適合當(dāng)前主題。因為展覽的體驗通常是安靜而平緩的，視角和透視是固定的。為了滿足這一需求，我們采用了左右畫面相拼接的方式來減少鏡頭變化，以此營造更加恰當(dāng)?shù)捏w驗。

2. 全橫幅處理

我們借鑒了中國傳統(tǒng)的卷軸畫，將左右畫面相互拼接，以呈現(xiàn)一步一景的觀賞方式，這種設(shè)計手法至關(guān)重要，使得觀賞者能夠逐一品味每一小節(jié)。我們精心設(shè)計了左右相接的畫面，留出了足夠的空間，仿若展廳中藝術(shù)品之間的錯落有致，讓整個體驗松弛有度。

3. 陀螺儀加入增強(qiáng)空間真實感

為了增強(qiáng)空間感的真實性，本次年度盤首次融入陀螺儀技術(shù)，并結(jié)合最新的人工智能技術(shù)對畫面進(jìn)行擴(kuò)展，隨后將其分層為前、中、后三個圖層。通過微調(diào)三個圖層的運動系數(shù)，實現(xiàn)視角輕微變化的效果，進(jìn)一步提升設(shè)計的豐富度。

三、視覺整體設(shè)定

在視覺設(shè)計中，我們致力于呈現(xiàn)真實的博物館場景。通過建模還原場館、在光影、材質(zhì)以及場景動線布局中融入實景元素，力求為觀眾營造最佳的視覺體驗。

1. 前期 AI 介入

在前期設(shè)定階段，利用 Midjourney 的能力，將腦海中的圖像，關(guān)鍵詞，批量生成圖片，并從中挑選出結(jié)構(gòu)合理、構(gòu)圖完整的畫面進(jìn)行初步修改，同時為文案預(yù)留足夠的空間。最后進(jìn)行建模渲染精細(xì)處理。

2. 選取建模的視覺表達(dá)

為了突出展館的質(zhì)感和空間氛圍，我們選擇了黑白灰等低飽和度的顏色為基礎(chǔ)， 并在此之上增加了五彩亮色營造出更豐富的空間氛圍，表達(dá)音樂的情緒和溫度，為展館增添層次感。考慮到展廳的設(shè)計風(fēng)格，在材質(zhì)上主要以大理石、玻璃、金屬三類材質(zhì)為主。讓畫面更富有層次和品質(zhì)感。

3. 銜接處理

運用 AI 技術(shù)在數(shù)據(jù)頁之間，補(bǔ)充連續(xù)完整的空間過渡頁，配合動畫鏡頭移動，打造無縫的空間場景體驗，增加用戶沉浸感和真實感。同時，在過渡場景中融入了豐富的展覽內(nèi)容，包括介紹文案、場館指引和品牌形象等小彩蛋，豐富內(nèi)容的同時增強(qiáng)真實感。此外，針對場館的分割頁，我們設(shè)計了另一種動畫過場，讓用戶仿佛置身于場館中穿梭。通過門的處理，使轉(zhuǎn)場更加流暢自然。

四、分場景打磨

在每一個分場景中，我們努力將數(shù)據(jù)與環(huán)境無縫融合，用心打磨每一個場景。讓用戶能直觀地了解一年聽歌數(shù)據(jù)的同時，也享受到美的視覺體驗。這種呈現(xiàn)方式旨在為用戶創(chuàng)造更加豐富和吸引人的互動體驗。

1. 場館設(shè)定與建模呈現(xiàn)

2. 動態(tài)設(shè)計巧思

① 動態(tài)風(fēng)格的思路

基于整體視覺風(fēng)格走的是博物館的陳列風(fēng)，整體動作需要干凈利索，希望能讓用戶在體驗時有身臨其境的視覺動態(tài)體驗。

② 方式與形態(tài)

橫滑一鏡到底的沉浸觀展方式，結(jié)合前、中、后三景的錯位差，讓用戶在靜態(tài)的圖片上也能體驗到空間感和真實感。

③ 怎樣實現(xiàn)&工具的選擇

AE 中導(dǎo)出的 PAG、Lottie 動畫在兼容和素材替換上都不夠方便，骨骼動畫成為了最優(yōu)解。骨骼動畫可以通過骨骼綁定讓游戲角色活靈活現(xiàn)地動起來，看上去并不適用于場景動畫。但我們驚喜地發(fā)現(xiàn)，如果把場景綁上骨骼和權(quán)重，動起來的動勢和空間感出奇地好，于是一拍即合選擇了骨骼動畫。

3. 動態(tài)設(shè)計落地關(guān)鍵

無縫銜接轉(zhuǎn)場并一鏡到底，保證全程沉浸式體驗

微動、微轉(zhuǎn)面、微動畫細(xì)節(jié)表達(dá)動畫質(zhì)感

前中后三景錯位，表達(dá)空間感

我們著重進(jìn)行了動畫性能優(yōu)化。通過使用骨骼動畫壓縮和級別細(xì)分技術(shù)，我們成功地減少了動畫文件的大小，并提高了運行時的效率。這使得我們能夠在不犧牲質(zhì)量的前提下，實現(xiàn)更好的性能表現(xiàn)。

五、結(jié)果分享頁

1. 結(jié)果頁主 KV 設(shè)定

基于數(shù)字藝術(shù)館這個“高逼格”的視覺，怎么讓結(jié)果頁視覺頁符合這個設(shè)定？設(shè)計獨一無二的“數(shù)字藝術(shù)品”讓結(jié)果頁的主題呼應(yīng)數(shù)字藝術(shù)館，形成閉環(huán)。

設(shè)計難點主要在：

1. 用圖形化高度概括抽象的結(jié)果頁關(guān)鍵詞；
2. 在暗調(diào)環(huán)境下保證玻璃質(zhì)感的通透；
3. 在三維軟件中還原細(xì)膩的噪點質(zhì)感。接下來會從形、色、質(zhì)三個方面分別介紹一下思考與實踐的過程。

① 造型/構(gòu)成探索

有一個結(jié)果頁的主題是[千萬個 音符中的蒙太奇]。首先去搜索了一下蒙太奇手法的解釋和它在平面作品中的表現(xiàn)手法。注釋說明蒙太奇手法其實可以概括成:裝配構(gòu)成兩個方面。在這個是視覺中，用音符的圖形來構(gòu)成主視覺，再用幾種不同材質(zhì)的幾何圖形去把這個音符圖形”裝配”起來，其實在這個設(shè)計中也運用了一種“蒙太奇的手法”。

左邊的設(shè)計主題是[生活永遠(yuǎn) ROCK AND LIVE]對應(yīng)曲風(fēng)是搖滾，搖滾很容易讓人聯(lián)想到燈球，我們用莫比烏斯環(huán)像“∞”無窮符號來代表“永遠(yuǎn)”，燈球和永遠(yuǎn)沒用盡頭的莫比烏斯環(huán)合在一起意為“永遠(yuǎn)年輕 永遠(yuǎn)ROCK”來呼應(yīng)主題。

② 顏色探索

在黑暗環(huán)境下讓玻璃質(zhì)感顏色更加通透，主要是通過巨大的漸變的有色燈片實現(xiàn)的，發(fā)漸變光的燈片，可以給物體增加除自身顏色之外更豐富的顏色信息。后期再通過 PS 增加色散、強(qiáng)光效疊加圖層樣式，整個圖就會非常絢麗。

③ 材質(zhì)探索

基礎(chǔ)材質(zhì)是玻璃或者金屬這兩個基礎(chǔ)材質(zhì)。材質(zhì)的難點主要在噪點材質(zhì)的實現(xiàn)，嘗試的時候發(fā)現(xiàn) C4D 雖然可以直接實現(xiàn)，但是噪點位置、形狀和顏色不太可控，最后決定直接 PS 筆刷大法！

2. 效果合集

六、總結(jié)

本次 QQ 音樂年度報告呈現(xiàn)了全新的視覺風(fēng)格，探索了創(chuàng)新的設(shè)計手法，同時引入了 AI 輔助我們前期設(shè)定視覺方向。未來，我們將持續(xù)改進(jìn)，致力于為大家提供更加優(yōu)質(zhì)和沉浸式的體驗。我們期待在未來的活動中進(jìn)一步發(fā)掘設(shè)計的可能性，為用戶帶來更加豐富多彩的音樂體驗，并不斷創(chuàng)新以提升用戶參與感和愉悅度。這次的嘗試是我們不斷進(jìn)步的開始，我們將繼續(xù)努力，為觀眾帶來更多驚喜和樂趣。

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