2017年開年,QQ音樂團(tuán)隊(duì)帶用戶在幻彩繽紛的奇妙空間里完成了一年的音樂大數(shù)據(jù)盤點(diǎn),這個(gè)形式獨(dú)特的盤點(diǎn)H5,用炫麗的色彩和3D立體空間來展現(xiàn)奇妙的異次元音樂空間,且融入了較多的互動(dòng)式觸發(fā)要盤點(diǎn)的用戶個(gè)人信息,在盤點(diǎn)完自己的音樂數(shù)據(jù)之余塑造自己的音樂標(biāo)簽。有人被色彩絢麗的設(shè)計(jì)所吸引,有人被極具共鳴的內(nèi)容打動(dòng)而分享,刷屏就是這么的情不自禁!上線發(fā)布后,日訪問峰值PV達(dá)336萬;單日訪問PV高達(dá)400W,二次傳播后客態(tài)訪問PV占12%。
H5刷屏期間也出現(xiàn)過眾多分析的文章,但大多從傳播和營銷的角度進(jìn)行解密。這一次則是與QQ音樂團(tuán)隊(duì)進(jìn)行了一次對(duì)話,就本次H5的設(shè)計(jì)構(gòu)思以及用戶體驗(yàn)進(jìn)行交流,以滿足用戶對(duì)音樂與色彩的次元幻想,并給予不一樣的視角,本篇文章全部是干貨……
1.給QQ音樂加點(diǎn)顏色
音樂給人什么感覺,在QQ音樂團(tuán)隊(duì)的眼中,它其實(shí)是一個(gè)潮流,活潑,熱情,趣味,個(gè)性化的一個(gè)泛娛樂典范。那么這樣一個(gè)APP的年終盤點(diǎn)大數(shù)據(jù)應(yīng)該用什么形式來詮釋才可以博眼球,取悅于用戶,強(qiáng)化朋友圈社交,微博不停的轉(zhuǎn)發(fā)傳播呢?QQ音樂團(tuán)隊(duì)花了很多時(shí)間去腦暴去思考,想各種載體去傳承詮釋這個(gè)音樂的世界是什么樣子的。
圍繞著個(gè)人數(shù)據(jù),溫馨,小文藝,回憶,個(gè)性化,強(qiáng)社交等等關(guān)鍵詞,團(tuán)隊(duì)腦暴了各種方案。有溫馨浪漫的音樂CD小屋,有互動(dòng)性超強(qiáng)的配對(duì)小游戲.....各種形式的腦暴方案,創(chuàng)意百出。最后經(jīng)過重重篩選,確定了這套色彩方案:以一個(gè)高飽和度、colorful的極艷麗的色彩語言來作為這次年終盤點(diǎn)的主要?jiǎng)?chuàng)意表達(dá)。在其看來,音樂給人們的感覺是流動(dòng)的,是活潑的,是具有當(dāng)代潮流色彩的一個(gè)情感符號(hào)。然而光是有炫麗的色彩表現(xiàn)已經(jīng)滿足不了設(shè)計(jì)者對(duì)有趣的設(shè)計(jì)追求,所以在這次創(chuàng)意表達(dá)中還融入了3D立體空間來展現(xiàn)這個(gè)奇妙的音樂空間。
這是他們找的一些色彩方向性圖片作為參考;
經(jīng)討論,設(shè)計(jì)者確定了這個(gè)異次元音樂空間作為載體,帶用戶在這個(gè)次元幻想里完成這一年的音樂大數(shù)據(jù)盤點(diǎn),還融入了較多的互動(dòng)式觸發(fā)以及朋友圈的社交傳播,使得整個(gè)H5顯得更加有趣味性。
這是此次盤點(diǎn)的最終確立的交互模型圖
那么經(jīng)過團(tuán)隊(duì)頭腦風(fēng)暴,梳理好了交互模型圖,重?fù)?dān)就全部交給視覺設(shè)計(jì)師了,各路神仙那段時(shí)間每天說的最多的話就是:“就靠你們視覺了”,視覺設(shè)計(jì)師表示壓力山大啊。為了這次的視覺效果好,響應(yīng)老板的大號(hào)召,一定要讓視覺設(shè)計(jì)出彩,也充分的融入音樂的元素,視覺設(shè)計(jì)師在不斷地腦暴手繪和參考形式中將色彩和細(xì)節(jié)進(jìn)一步優(yōu)化。
他們將與音樂相關(guān)的單品元素和氣氛感覺都以手繪的形式羅列出來,進(jìn)行一個(gè)拆散組合。在造型、色彩、材質(zhì)里面找了很多的變化和誠意小細(xì)節(jié)。這是首頁的異次元空間呈現(xiàn):
首頁是進(jìn)入整個(gè)APP的重中之重,包括形式、載體、字體都是設(shè)計(jì)師反復(fù)琢磨嘗試無數(shù)次,無限次打磨出來的結(jié)果。
改了無數(shù)次的首頁視覺表現(xiàn),總覺的怎么都不高大上,字體用哪個(gè)樣式好呢?怎樣才可以配得起音樂異次元幻想這樣一樣的定位,于是首頁就這樣了......
呈現(xiàn)給用戶看到的是這樣一個(gè)視覺效果:
2.關(guān)于360度三維立體空間
今年設(shè)計(jì)師和產(chǎn)品一直推動(dòng)希望可以看到一個(gè)和往年不一樣的年終盤點(diǎn),所以在形式獨(dú)特新穎上面下了不少功夫。采用了C4D的渲染建模來詮釋整個(gè)三維立體空間,并且以卷軸形式360推進(jìn)翻看進(jìn)行視覺展示。
在這個(gè)三維的色彩空間中,他們這次做了一個(gè)很大的突破,將這次需要盤點(diǎn)的文字信息都以圖形化的視覺元素穿插在這個(gè)奇幻的三維空間內(nèi)了,使得整個(gè)自定義專輯和文字都融會(huì)貫通的穿插在圖形中,也以很順暢的互動(dòng)式動(dòng)畫觸發(fā)了要盤點(diǎn)的用戶個(gè)人信息。
在3D技術(shù)實(shí)現(xiàn)方面,設(shè)計(jì)師們也針對(duì)性能和適配的問題上面做了很多的設(shè)計(jì)取舍。爭(zhēng)取做到資源的重復(fù)利用,減少內(nèi)存的占有量以及瀏覽速度的保證。
為了可以更好的資源重復(fù)利用,設(shè)計(jì)師將原本背景多變幻彩的 球體裝飾做了整合與刪減,全部做成了200X140大小的透明底PNG圖片進(jìn)行資源重復(fù)組合,這樣按組劃分的背景裝飾物就可以在資源量最小的情況在不斷重復(fù)的利用多次來實(shí)現(xiàn)目前大家所看到的幻彩繽紛的奇妙空間了。這里也幫助整個(gè)H5文件大小減少了大約80%,使得H5在運(yùn)行速度上面順暢了不少。
3.這里再說說C4D建模的血淚史
為了這次360全景的異次元空間的效果,團(tuán)隊(duì)的設(shè)計(jì)師妹子們都是現(xiàn)學(xué)現(xiàn)賣的C4D功力,還算不錯(cuò)的都完成了任務(wù)。
首先,整個(gè)三維空間都以草圖的形式畫好,并且規(guī)劃好需要擺放的元件和位置,還有設(shè)定好他們的互動(dòng)式觸發(fā),再一步步進(jìn)行配色和C4D的模型渲染。包括質(zhì)感的幾何元素的組合、材質(zhì)球的參數(shù)、整個(gè)畫面的配色都是經(jīng)過反復(fù)調(diào)試斟酌修改,對(duì)視覺來說是這次H5的主要?jiǎng)?chuàng)意設(shè)計(jì)點(diǎn)。從白膜到勾線綁定材質(zhì),最后渲染耗時(shí)和精力都是非常巨大的工作量。因?yàn)闀r(shí)間緊迫,找個(gè)盤點(diǎn)一定要趕在2016年底前出街上線,為團(tuán)隊(duì)的女設(shè)計(jì)師們點(diǎn)贊,不辭辛苦加班加點(diǎn)的完成這次精彩的年終盤點(diǎn)H5設(shè)計(jì)。
首頁是一個(gè)至關(guān)重要的設(shè)計(jì)點(diǎn),團(tuán)隊(duì)在配色和造型的設(shè)計(jì)上面一直覺得不夠完美,精益求精一遍遍的優(yōu)化,最后呈現(xiàn)給大家看到的是一個(gè)從遠(yuǎn)遞進(jìn)的異次元浮島,帶領(lǐng)用戶進(jìn)入一個(gè)全新的音樂幻想空間。繽紛時(shí)尚的色彩也剛好吻合了這次主題,魔性復(fù)古的音樂潮流地帶,時(shí)尚又不過時(shí)的配色,配以周邊星球隕動(dòng)的懸浮空間感,讓整個(gè)畫面靜中有動(dòng),栩栩如生。
4.關(guān)于重磅魔性圖—DIY個(gè)性海報(bào)
這次H5的主要好玩之處就在于其中有一個(gè)很強(qiáng)大的互動(dòng)社交環(huán)節(jié),可以在盤點(diǎn)完自己的音樂數(shù)據(jù)之余,創(chuàng)作屬于自己的音樂海報(bào),這次的魔性圖這個(gè)功能希望用戶自主創(chuàng)作完成社交傳播的主動(dòng)力,讓更多的人參與進(jìn)來,使得這個(gè)傳播效應(yīng)最大化。
確認(rèn)目標(biāo)后,輸出視覺魔性圖DEMO:
設(shè)計(jì)團(tuán)隊(duì)秉著魔性的原則,為了適應(yīng)各種人群,又收到開發(fā)內(nèi)存的影響所以忍痛割愛只能做四款魔性圖模板。讓大家簡單改變自己,制作屬于自己的動(dòng)態(tài)GIF音樂海報(bào),塑造自己的音樂標(biāo)簽。
A.有適合復(fù)古懷舊用戶的——魔性復(fù)古大轉(zhuǎn)盤
B.有適合前衛(wèi)時(shí)尚用戶的——藍(lán)色星際大嘴唇
C.有適合美式波普文化的——插畫彩虹波點(diǎn)風(fēng)
D.有適合簡潔文藝清新的——漫畫吉米素雅風(fēng)
然后根據(jù)整體H5設(shè)計(jì)的風(fēng)格,將魔性圖模塊的UI風(fēng)格繼續(xù)延續(xù)和統(tǒng)一,讓用戶感覺在整個(gè)音樂的異次元空間遨游并且制作出屬于自己標(biāo)簽的音樂動(dòng)態(tài)海報(bào)。以上都是圍繞音樂場(chǎng)景和用戶互動(dòng)所展開,為了增加用戶粘性,還需要用更加多樣化的功能,豐富用戶的使用體驗(yàn)。未來,QQ 音樂將通過全新的交互體驗(yàn)實(shí)用性的功能以及個(gè)性化的音樂場(chǎng)景吸引更多的用戶入駐,逐漸形成用戶與音樂的強(qiáng)關(guān)系鏈。
全部評(píng)論