讓技術有溫度,解碼QQ音樂7.0三維閃屏
動感而細膩的畫面,瞬間讓技術擁有溫度。
QQ音樂2016年度版本7.0,于11月30日全新上線。
全新版本不僅整體視覺做了全新的設計,以更簡潔、更輕快的理念貫穿,而且向用戶數據挖掘與音樂功能延伸進行了重要更新,帶來了三個強勢功能:主打情懷的那年今日,與運動領域結合的跑步電臺,豐富音樂個性化的歌手寫真!
與全新版本相呼應,QQ音樂在閃屏上也做了全新的嘗試:三維動畫閃屏。
一個城市 三個故事
這次QQ音樂的開機閃屏打造了一個7的音樂城市,在這個城市里搭建了三個場景,分三個篇章講述三個關于新版本的故事。
音樂之城7的完美ENDING
三個場景故事介紹給用戶新功能,最后過渡到7.0新版本的ending,通過鏡頭移動,拍到對整個城市的俯視效果,呈現一個 7字完成點睛。
解碼三維閃屏動畫
QQ音樂本次更新誠意十足,新理念新界面新功能,可以看到是幕后整個團隊辛勤耕耘累積的成果,作為應用第一印象的閃屏,既要承載功能更新展示,同時要詮釋出視覺上的全新感受,既要有獨特感,又不能晦澀難懂,整個制作過程的每一步都精雕細琢。
手繪思路與草圖方向
確定了三維動畫的表現形式后,圍繞著功能表現和設計理念,在動畫腳本思路和草圖上便開始豐富動畫的多處細節,并篩選擬定出AB兩個大致方向。
方案A
動畫形式:MOTION GRAPHIC動畫、平面動態圖形
預計使用軟件:PS/AE
思路:以圖形元素為核心進行動畫演進和轉場,突出功能界面演示
方案B
動畫形式:三維動畫、卡通平面風格
預計使用軟件:Cinema 4D/AE
思路:以場景化模型營造氣氛,表達界面理念,以鏡頭語言作為轉場和腳本推進,一鏡到底
匠心打造手工泥塑布景
草圖逐步明確具象設計方案后,轉入正式制作流程,建模搭建場景。
為了更高效的進行建模,加強對場景表現力的把握,QQ音樂心靈手巧的設計師拿起了黏土,將草稿從2D的畫稿升級為3D黏土模型,快速有效的處理場景的三維構圖、色彩、空間比例關系,每一棵小樹都留有設計師手指的余溫。
建?!P徒ㄔO與核心場景搭建
使用C4D先后進行核心元素、裝飾元素模型的建造。
核心元素包括主建筑、場景主題元素(如第二場景的跑步小人、第三場景的起重機等);
裝飾元素包括人物模型、裝飾建筑、樹木、云、道路等。
將模型進行組合,進行場景搭建
「那年今日」、「跑步電臺」、「全新界面」作為鏡頭主要停留的三個核心場景,需要重點雕琢,優先保證其在畫面上的表現力和豐富度。其次利用裝飾元素完成對主場景的點綴,對整個城市進行充實。
制作過程TIPS
1.場景應該優先為鏡頭服務。
先搭建初步場景,在確定鏡頭路徑后,為確定的鏡頭完善細節,從而保證場景在鏡頭下呈現最優表現力,而不用一開始就糾結整個場景的細節。
2.正確的建模順序能提高整體完成的效率。
優先刻畫主建筑 — 其次刻畫核心元素 — 最后運用裝飾元素對畫面進行補充。
3.非主鏡頭畫面進行裝飾元素的復用,如樹木、山、白云、人物。
把握畫面質感——材質、燈光
材質和燈光構成畫面的質感。更接近平面的效果,色塊為主,盡量避免太真實的質感,燈光滿足整體亮度后,再利用遠光燈制造清晰的投影。
主模型動畫
利用C4D進行模型的動畫設計,在「時間線」窗口對模型進行動畫設計,這一步需要耐心,每個模型的出現順序,運動曲線,都需要挨個處理,可以提前將模型組件按出現順序進行排序,這樣在做動畫時可以幫助自己理清思路,也是對模型圖層整理的考驗。
(第一場景主建筑動畫)
(第三場景主建筑動畫)
界面動畫的處理
在視頻可以看到在主模型動畫后,上面展示的界面也加入了動態的展示,這里的實現方式是材質動畫貼圖。界面的動畫需要先在AE里處理完成,導出幀序列,在材質里選擇貼圖,設置幀起始結束時間。
整個場景動畫——鏡頭運用、節奏調整、轉場過渡
整體動畫采用一個鏡頭貫穿的方式,先局部聚焦三個主場景,再整體拉遠到最后7的ENDING。節奏上,有界面的地方停留時間更長,鏡頭慢移,交待清楚界面信息;轉場要快,控制整體時間。
AE剪輯調色配樂 輸出交付
C4D里雖然進行了整體節奏快慢上的控制,但不能一蹴而就,具體的細節還需要AE進行后期的修正和剪輯,同時進行潤色和配樂,加入文案,達到最終的交付。
這次三維動畫閃屏,是QQ音樂對視覺表達方式進行的一次全新探索和嘗試,也帶給用戶全新的視覺體驗,塑造和提升了QQ音樂的整體品牌感。
本文由 @ Anny 原創發布于人人都是產品經理。未經許可,禁止轉載。
真是用心,細節決定高度。
很高大上的樣子啊!
感覺qq音樂在產品迭代更新上一直比較用心
厲害了word qq音樂。這一版變化還挺大的。
新版已經在用。 有個那年今日功能挺好玩的
新版本變化是挺大的,比較和我的眼緣。
已經忘了何時開始用qq音樂了,只記得它一開始只是qq上的一個播放器而已吧。一路走來,到現在最大眾化的app,我表示服
重視用戶體驗,才能讓產品更加深入人心。qq音樂走的路是對的。
QQ音樂還是很注重用戶體驗的,很為用戶著想,這也是一直不被淘汰的根本。
qq音樂在用戶體驗上越來越走心了
感覺到了滿滿的文藝范兒。
新版跑步電臺本人用過。表示很不錯。挺方便的。
作為qq音樂老粉?必須支持下~??
太贊了,好小清新,從此男神霸我屏~ ??
新界面很簡單,就喜歡簡單易操作的產品
在用,明星寫真不錯??梢蕴蚱聊猩窳藒
重視產品才能更長久,qq音樂在產品上用心還是蠻多的。
如果匹配音樂體驗會好很多 ??
做得越來越好了。
第三場景主建筑動畫貌似光的照射角度不對吧,
UI很走心。。??墒沁@配色冬天看著也太清涼了。。。 ??
不錯,越來越走心
這個開機動畫做的厲害了,從頁面設計到產品功能,好暖,最愛的就是那年今日!