讓技術有溫度,解碼QQ音樂7.0三維閃屏

23 評論 12339 瀏覽 28 收藏 9 分鐘

動感而細膩的畫面,瞬間讓技術擁有溫度。

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

全新版本不僅整體視覺做了全新的設計,以更簡潔、更輕快的理念貫穿,而且向用戶數據挖掘與音樂功能延伸進行了重要更新,帶來了三個強勢功能:主打情懷的那年今日,與運動領域結合的跑步電臺,豐富音樂個性化的歌手寫真!

與全新版本相呼應,QQ音樂在閃屏上也做了全新的嘗試:三維動畫閃屏。

qq

03

一個城市 三個故事

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

04

音樂之城7的完美ENDING

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

05

解碼三維閃屏動畫

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

手繪思路與草圖方向

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

方案A

動畫形式:MOTION GRAPHIC動畫、平面動態圖形

預計使用軟件:PS/AE

思路:以圖形元素為核心進行動畫演進和轉場,突出功能界面演示

06

方案B

動畫形式:三維動畫、卡通平面風格

預計使用軟件:Cinema 4D/AE

思路:以場景化模型營造氣氛,表達界面理念,以鏡頭語言作為轉場和腳本推進,一鏡到底

07

匠心打造手工泥塑布景

草圖逐步明確具象設計方案后,轉入正式制作流程,建模搭建場景。

為了更高效的進行建模,加強對場景表現力的把握,QQ音樂心靈手巧的設計師拿起了黏土,將草稿從2D的畫稿升級為3D黏土模型,快速有效的處理場景的三維構圖、色彩、空間比例關系,每一棵小樹都留有設計師手指的余溫。

QQ截圖20161209141417

建?!P徒ㄔO與核心場景搭建

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

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

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

09

將模型進行組合,進行場景搭建

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

10

制作過程TIPS

1.場景應該優先為鏡頭服務。

先搭建初步場景,在確定鏡頭路徑后,為確定的鏡頭完善細節,從而保證場景在鏡頭下呈現最優表現力,而不用一開始就糾結整個場景的細節。

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

優先刻畫主建筑 — 其次刻畫核心元素 — 最后運用裝飾元素對畫面進行補充。

11

3.非主鏡頭畫面進行裝飾元素的復用,如樹木、山、白云、人物。

把握畫面質感——材質、燈光

材質和燈光構成畫面的質感。更接近平面的效果,色塊為主,盡量避免太真實的質感,燈光滿足整體亮度后,再利用遠光燈制造清晰的投影。

12

主模型動畫

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

13

閃屏設計總結-(14-1)

(第一場景主建筑動畫)

閃屏設計總結-(14-2)

(第三場景主建筑動畫)

界面動畫的處理

在視頻可以看到在主模型動畫后,上面展示的界面也加入了動態的展示,這里的實現方式是材質動畫貼圖。界面的動畫需要先在AE里處理完成,導出幀序列,在材質里選擇貼圖,設置幀起始結束時間。

15

整個場景動畫——鏡頭運用、節奏調整、轉場過渡

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

16

AE剪輯調色配樂 輸出交付

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

17

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

 

本文由 @ Anny 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 真是用心,細節決定高度。

    來自廣東 回復
  2. 很高大上的樣子啊!

    來自河北 回復
  3. 感覺qq音樂在產品迭代更新上一直比較用心

    來自河北 回復
  4. 厲害了word qq音樂。這一版變化還挺大的。

    來自河北 回復
  5. 新版已經在用。 有個那年今日功能挺好玩的

    來自河北 回復
  6. 新版本變化是挺大的,比較和我的眼緣。

    來自河北 回復
  7. 已經忘了何時開始用qq音樂了,只記得它一開始只是qq上的一個播放器而已吧。一路走來,到現在最大眾化的app,我表示服

    來自河北 回復
  8. 重視用戶體驗,才能讓產品更加深入人心。qq音樂走的路是對的。

    來自河北 回復
  9. QQ音樂還是很注重用戶體驗的,很為用戶著想,這也是一直不被淘汰的根本。

    來自河北 回復
  10. qq音樂在用戶體驗上越來越走心了

    來自河北 回復
  11. 感覺到了滿滿的文藝范兒。

    來自北京 回復
  12. 新版跑步電臺本人用過。表示很不錯。挺方便的。

    來自北京 回復
  13. 作為qq音樂老粉?必須支持下~??

    來自北京 回復
  14. 太贊了,好小清新,從此男神霸我屏~ ??

    來自北京 回復
  15. 新界面很簡單,就喜歡簡單易操作的產品

    來自山西 回復
  16. 在用,明星寫真不錯??梢蕴蚱聊猩窳藒

    來自北京 回復
  17. 重視產品才能更長久,qq音樂在產品上用心還是蠻多的。

    來自北京 回復
  18. 如果匹配音樂體驗會好很多 ??

    來自重慶 回復
  19. 做得越來越好了。

    來自廣東 回復
  20. 第三場景主建筑動畫貌似光的照射角度不對吧,

    來自江蘇 回復
  21. UI很走心。。??墒沁@配色冬天看著也太清涼了。。。 ??

    來自廣東 回復
  22. 不錯,越來越走心

    來自廣東 回復
  23. 這個開機動畫做的厲害了,從頁面設計到產品功能,好暖,最愛的就是那年今日!

    來自廣東 回復