動感而細(xì)膩的畫面，瞬間讓技術(shù)擁有溫度。

QQ音樂2016年度版本7.0，于11月30日全新上線。

全新版本不僅整體視覺做了全新的設(shè)計，以更簡潔、更輕快的理念貫穿，而且向用戶數(shù)據(jù)挖掘與音樂功能延伸進(jìn)行了重要更新，帶來了三個強(qiáng)勢功能：主打情懷的那年今日，與運(yùn)動領(lǐng)域結(jié)合的跑步電臺，豐富音樂個性化的歌手寫真！

與全新版本相呼應(yīng)，QQ音樂在閃屏上也做了全新的嘗試：三維動畫閃屏。

一個城市 三個故事

這次QQ音樂的開機(jī)閃屏打造了一個7的音樂城市，在這個城市里搭建了三個場景，分三個篇章講述三個關(guān)于新版本的故事。

音樂之城7的完美ENDING

三個場景故事介紹給用戶新功能，最后過渡到7.0新版本的ending，通過鏡頭移動，拍到對整個城市的俯視效果，呈現(xiàn)一個 7字完成點(diǎn)睛。

解碼三維閃屏動畫

QQ音樂本次更新誠意十足，新理念新界面新功能，可以看到是幕后整個團(tuán)隊辛勤耕耘累積的成果，作為應(yīng)用第一印象的閃屏，既要承載功能更新展示，同時要詮釋出視覺上的全新感受，既要有獨(dú)特感，又不能晦澀難懂，整個制作過程的每一步都精雕細(xì)琢。

手繪思路與草圖方向

確定了三維動畫的表現(xiàn)形式后，圍繞著功能表現(xiàn)和設(shè)計理念，在動畫腳本思路和草圖上便開始豐富動畫的多處細(xì)節(jié)，并篩選擬定出AB兩個大致方向。

方案A

動畫形式：MOTION GRAPHIC動畫、平面動態(tài)圖形

預(yù)計使用軟件：PS/AE

思路：以圖形元素為核心進(jìn)行動畫演進(jìn)和轉(zhuǎn)場，突出功能界面演示

方案B

動畫形式：三維動畫、卡通平面風(fēng)格

預(yù)計使用軟件：Cinema 4D/AE

思路：以場景化模型營造氣氛，表達(dá)界面理念，以鏡頭語言作為轉(zhuǎn)場和腳本推進(jìn)，一鏡到底

匠心打造手工泥塑布景

草圖逐步明確具象設(shè)計方案后，轉(zhuǎn)入正式制作流程，建模搭建場景。

為了更高效的進(jìn)行建模，加強(qiáng)對場景表現(xiàn)力的把握，QQ音樂心靈手巧的設(shè)計師拿起了黏土，將草稿從2D的畫稿升級為3D黏土模型，快速有效的處理場景的三維構(gòu)圖、色彩、空間比例關(guān)系，每一棵小樹都留有設(shè)計師手指的余溫。

建?！Ｐ徒ㄔO(shè)與核心場景搭建

使用C4D先后進(jìn)行核心元素、裝飾元素模型的建造。

核心元素包括主建筑、場景主題元素（如第二場景的跑步小人、第三場景的起重機(jī)等）；

裝飾元素包括人物模型、裝飾建筑、樹木、云、道路等。

將模型進(jìn)行組合，進(jìn)行場景搭建

「那年今日」、「跑步電臺」、「全新界面」作為鏡頭主要停留的三個核心場景，需要重點(diǎn)雕琢，優(yōu)先保證其在畫面上的表現(xiàn)力和豐富度。其次利用裝飾元素完成對主場景的點(diǎn)綴，對整個城市進(jìn)行充實。

制作過程TIPS

1.場景應(yīng)該優(yōu)先為鏡頭服務(wù)。

先搭建初步場景，在確定鏡頭路徑后，為確定的鏡頭完善細(xì)節(jié)，從而保證場景在鏡頭下呈現(xiàn)最優(yōu)表現(xiàn)力，而不用一開始就糾結(jié)整個場景的細(xì)節(jié)。

2.正確的建模順序能提高整體完成的效率。

優(yōu)先刻畫主建筑 — 其次刻畫核心元素 — 最后運(yùn)用裝飾元素對畫面進(jìn)行補(bǔ)充。

3.非主鏡頭畫面進(jìn)行裝飾元素的復(fù)用，如樹木、山、白云、人物。

把握畫面質(zhì)感——材質(zhì)、燈光

材質(zhì)和燈光構(gòu)成畫面的質(zhì)感。更接近平面的效果，色塊為主，盡量避免太真實的質(zhì)感，燈光滿足整體亮度后，再利用遠(yuǎn)光燈制造清晰的投影。

主模型動畫

利用C4D進(jìn)行模型的動畫設(shè)計，在「時間線」窗口對模型進(jìn)行動畫設(shè)計，這一步需要耐心，每個模型的出現(xiàn)順序，運(yùn)動曲線，都需要挨個處理，可以提前將模型組件按出現(xiàn)順序進(jìn)行排序，這樣在做動畫時可以幫助自己理清思路，也是對模型圖層整理的考驗。

（第一場景主建筑動畫）

（第三場景主建筑動畫）

界面動畫的處理

在視頻可以看到在主模型動畫后，上面展示的界面也加入了動態(tài)的展示，這里的實現(xiàn)方式是材質(zhì)動畫貼圖。界面的動畫需要先在AE里處理完成，導(dǎo)出幀序列，在材質(zhì)里選擇貼圖，設(shè)置幀起始結(jié)束時間。

整個場景動畫——鏡頭運(yùn)用、節(jié)奏調(diào)整、轉(zhuǎn)場過渡

整體動畫采用一個鏡頭貫穿的方式，先局部聚焦三個主場景，再整體拉遠(yuǎn)到最后7的ENDING。節(jié)奏上，有界面的地方停留時間更長，鏡頭慢移，交待清楚界面信息；轉(zhuǎn)場要快，控制整體時間。

AE剪輯調(diào)色配樂 輸出交付

C4D里雖然進(jìn)行了整體節(jié)奏快慢上的控制，但不能一蹴而就，具體的細(xì)節(jié)還需要AE進(jìn)行后期的修正和剪輯，同時進(jìn)行潤色和配樂，加入文案，達(dá)到最終的交付。

這次三維動畫閃屏，是QQ音樂對視覺表達(dá)方式進(jìn)行的一次全新探索和嘗試，也帶給用戶全新的視覺體驗，塑造和提升了QQ音樂的整體品牌感。

本文由 @ Anny 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。