2017年開年，QQ音樂團隊帶用戶在幻彩繽紛的奇妙空間里完成了一年的音樂大數(shù)據(jù)盤點，這個形式獨特的盤點H5，用炫麗的色彩和3D立體空間來展現(xiàn)奇妙的異次元音樂空間，且融入了較多的互動式觸發(fā)要盤點的用戶個人信息，在盤點完自己的音樂數(shù)據(jù)之余塑造自己的音樂標(biāo)簽。有人被色彩絢麗的設(shè)計所吸引，有人被極具共鳴的內(nèi)容打動而分享，刷屏就是這么的情不自禁！上線發(fā)布后，日訪問峰值PV達336萬；單日訪問PV高達400W，二次傳播后客態(tài)訪問PV占12%。

　　H5刷屏期間也出現(xiàn)過眾多分析的文章，但大多從傳播和營銷的角度進行解密。這一次則是與QQ音樂團隊進行了一次對話，就本次H5的設(shè)計構(gòu)思以及用戶體驗進行交流，以滿足用戶對音樂與色彩的次元幻想，并給予不一樣的視角，本篇文章全部是干貨……

　　1.給QQ音樂加點顏色

　　音樂給人什么感覺，在QQ音樂團隊的眼中，它其實是一個潮流，活潑，熱情，趣味，個性化的一個泛娛樂典范。那么這樣一個APP的年終盤點大數(shù)據(jù)應(yīng)該用什么形式來詮釋才可以博眼球，取悅于用戶，強化朋友圈社交，微博不停的轉(zhuǎn)發(fā)傳播呢？QQ音樂團隊花了很多時間去腦暴去思考，想各種載體去傳承詮釋這個音樂的世界是什么樣子的。

　　圍繞著個人數(shù)據(jù)，溫馨，小文藝，回憶，個性化，強社交等等關(guān)鍵詞，團隊腦暴了各種方案。有溫馨浪漫的音樂CD小屋，有互動性超強的配對小游戲.....各種形式的腦暴方案，創(chuàng)意百出。最后經(jīng)過重重篩選，確定了這套色彩方案：以一個高飽和度、colorful的極艷麗的色彩語言來作為這次年終盤點的主要創(chuàng)意表達。在其看來，音樂給人們的感覺是流動的，是活潑的，是具有當(dāng)代潮流色彩的一個情感符號。然而光是有炫麗的色彩表現(xiàn)已經(jīng)滿足不了設(shè)計者對有趣的設(shè)計追求，所以在這次創(chuàng)意表達中還融入了3D立體空間來展現(xiàn)這個奇妙的音樂空間。

　　這是他們找的一些色彩方向性圖片作為參考；

　　經(jīng)討論，設(shè)計者確定了這個異次元音樂空間作為載體，帶用戶在這個次元幻想里完成這一年的音樂大數(shù)據(jù)盤點，還融入了較多的互動式觸發(fā)以及朋友圈的社交傳播，使得整個H5顯得更加有趣味性。

　　這是此次盤點的最終確立的交互模型圖

　　那么經(jīng)過團隊頭腦風(fēng)暴，梳理好了交互模型圖，重擔(dān)就全部交給視覺設(shè)計師了，各路神仙那段時間每天說的最多的話就是：“就靠你們視覺了”，視覺設(shè)計師表示壓力山大啊。為了這次的視覺效果好，響應(yīng)老板的大號召，一定要讓視覺設(shè)計出彩，也充分的融入音樂的元素，視覺設(shè)計師在不斷地腦暴手繪和參考形式中將色彩和細節(jié)進一步優(yōu)化。

　　他們將與音樂相關(guān)的單品元素和氣氛感覺都以手繪的形式羅列出來，進行一個拆散組合。在造型、色彩、材質(zhì)里面找了很多的變化和誠意小細節(jié)。這是首頁的異次元空間呈現(xiàn)：

　　首頁是進入整個APP的重中之重，包括形式、載體、字體都是設(shè)計師反復(fù)琢磨嘗試無數(shù)次，無限次打磨出來的結(jié)果。

　　改了無數(shù)次的首頁視覺表現(xiàn)，總覺的怎么都不高大上，字體用哪個樣式好呢？怎樣才可以配得起音樂異次元幻想這樣一樣的定位，于是首頁就這樣了......

　　呈現(xiàn)給用戶看到的是這樣一個視覺效果：

　　2.關(guān)于360度三維立體空間

　　今年設(shè)計師和產(chǎn)品一直推動希望可以看到一個和往年不一樣的年終盤點，所以在形式獨特新穎上面下了不少功夫。采用了C4D的渲染建模來詮釋整個三維立體空間，并且以卷軸形式360推進翻看進行視覺展示。

　　在這個三維的色彩空間中，他們這次做了一個很大的突破，將這次需要盤點的文字信息都以圖形化的視覺元素穿插在這個奇幻的三維空間內(nèi)了，使得整個自定義專輯和文字都融會貫通的穿插在圖形中，也以很順暢的互動式動畫觸發(fā)了要盤點的用戶個人信息。

　　在3D技術(shù)實現(xiàn)方面，設(shè)計師們也針對性能和適配的問題上面做了很多的設(shè)計取舍。爭取做到資源的重復(fù)利用，減少內(nèi)存的占有量以及瀏覽速度的保證。

　　為了可以更好的資源重復(fù)利用，設(shè)計師將原本背景多變幻彩的 球體裝飾做了整合與刪減，全部做成了200X140大小的透明底PNG圖片進行資源重復(fù)組合，這樣按組劃分的背景裝飾物就可以在資源量最小的情況在不斷重復(fù)的利用多次來實現(xiàn)目前大家所看到的幻彩繽紛的奇妙空間了。這里也幫助整個H5文件大小減少了大約80%，使得H5在運行速度上面順暢了不少。

　　3.這里再說說C4D建模的血淚史

　　為了這次360全景的異次元空間的效果，團隊的設(shè)計師妹子們都是現(xiàn)學(xué)現(xiàn)賣的C4D功力，還算不錯的都完成了任務(wù)。

　　首先，整個三維空間都以草圖的形式畫好，并且規(guī)劃好需要擺放的元件和位置，還有設(shè)定好他們的互動式觸發(fā)，再一步步進行配色和C4D的模型渲染。包括質(zhì)感的幾何元素的組合、材質(zhì)球的參數(shù)、整個畫面的配色都是經(jīng)過反復(fù)調(diào)試斟酌修改，對視覺來說是這次H5的主要創(chuàng)意設(shè)計點。從白膜到勾線綁定材質(zhì)，最后渲染耗時和精力都是非常巨大的工作量。因為時間緊迫，找個盤點一定要趕在2016年底前出街上線，為團隊的女設(shè)計師們點贊，不辭辛苦加班加點的完成這次精彩的年終盤點H5設(shè)計。

　　首頁是一個至關(guān)重要的設(shè)計點,團隊在配色和造型的設(shè)計上面一直覺得不夠完美，精益求精一遍遍的優(yōu)化，最后呈現(xiàn)給大家看到的是一個從遠遞進的異次元浮島，帶領(lǐng)用戶進入一個全新的音樂幻想空間。繽紛時尚的色彩也剛好吻合了這次主題，魔性復(fù)古的音樂潮流地帶，時尚又不過時的配色，配以周邊星球隕動的懸浮空間感，讓整個畫面靜中有動，栩栩如生。

　　4.關(guān)于重磅魔性圖—DIY個性海報

　　這次H5的主要好玩之處就在于其中有一個很強大的互動社交環(huán)節(jié)，可以在盤點完自己的音樂數(shù)據(jù)之余，創(chuàng)作屬于自己的音樂海報，這次的魔性圖這個功能希望用戶自主創(chuàng)作完成社交傳播的主動力，讓更多的人參與進來，使得這個傳播效應(yīng)最大化。

　　確認目標(biāo)后，輸出視覺魔性圖DEMO:

　　設(shè)計團隊秉著魔性的原則，為了適應(yīng)各種人群，又收到開發(fā)內(nèi)存的影響所以忍痛割愛只能做四款魔性圖模板。讓大家簡單改變自己，制作屬于自己的動態(tài)GIF音樂海報，塑造自己的音樂標(biāo)簽。

　　A.有適合復(fù)古懷舊用戶的——魔性復(fù)古大轉(zhuǎn)盤

　　B.有適合前衛(wèi)時尚用戶的——藍色星際大嘴唇

　　C.有適合美式波普文化的——插畫彩虹波點風(fēng)

　　D.有適合簡潔文藝清新的——漫畫吉米素雅風(fēng)

　　然后根據(jù)整體H5設(shè)計的風(fēng)格，將魔性圖模塊的UI風(fēng)格繼續(xù)延續(xù)和統(tǒng)一，讓用戶感覺在整個音樂的異次元空間遨游并且制作出屬于自己標(biāo)簽的音樂動態(tài)海報。以上都是圍繞音樂場景和用戶互動所展開，為了增加用戶粘性，還需要用更加多樣化的功能，豐富用戶的使用體驗。未來，QQ 音樂將通過全新的交互體驗實用性的功能以及個性化的音樂場景吸引更多的用戶入駐，逐漸形成用戶與音樂的強關(guān)系鏈。