2016年是一個(gè)H5滿天飛的年代，如何在眾多牛氣的H5中脫穎而出，留住用戶關(guān)注和讓朋友圈永無休止的不停傳播呢？這也是一枚騷氣且不隱忍的運(yùn)營(yíng)設(shè)計(jì)師一直研究琢磨的課題。這里拿QQ音樂年終盤點(diǎn)H5為例來解析下我對(duì)H5的次元幻想。

1.?給QQ音樂加點(diǎn)顏色

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

圍繞著，個(gè)人數(shù)據(jù)，溫馨，小文藝，回憶，個(gè)性化，強(qiáng)社交等等關(guān)鍵詞，我們腦暴了各種方案。有溫馨浪漫的音樂CD小屋，有互動(dòng)性超強(qiáng)的配對(duì)小游戲…..各種形式的腦暴方案，創(chuàng)意百出。最后我們重重塞選，確定了我們的色彩方案。想以一個(gè)高飽和度、colorful的極艷麗的色彩語言來作為這次年終盤點(diǎn)的主要?jiǎng)?chuàng)意表達(dá)。因?yàn)樵谖覀兛磥恚魳方o人們的感覺是流動(dòng)的，是活潑的，是具有當(dāng)代潮流色彩的一個(gè)情感符號(hào)。然而光是有炫麗的色彩表現(xiàn)已經(jīng)滿足不了我們對(duì)有趣的設(shè)計(jì)追求，所以我們?cè)谶@次創(chuàng)意表達(dá)中還融入了3D立體空間來展現(xiàn)這個(gè)奇妙的音樂空間。

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

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

這是我們這次盤點(diǎn)的最終確立的交互模型圖：

那么大家梳理好了交互模型圖，重?fù)?dān)就全部交給視覺設(shè)計(jì)師了，各路神仙那段時(shí)間每天說的最多的話就是：“”就靠你們視覺了“，我們表示壓力山大啊。為了這次的視覺效果好，響應(yīng)老板的大號(hào)召，一定要讓視覺出彩新穎的出街，也充分的融入音樂的元素，我們?cè)诓粩嗟哪X暴手繪和參考形式、色彩、細(xì)節(jié)的優(yōu)化。

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

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

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

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

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

今年設(shè)計(jì)師和產(chǎn)品一直推動(dòng)希望可以看到一個(gè)和往年不一樣的年終盤點(diǎn)，所以作為設(shè)計(jì)師的我們都在形式獨(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)方面，我們也針對(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全景的異次元空間的效果，我們?cè)O(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),我們?cè)谂渖驮煨偷脑O(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:

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

1. 有適合復(fù)古懷舊用戶的——魔性復(fù)古大轉(zhuǎn)盤
2. 有適合前衛(wèi)時(shí)尚用戶的——藍(lán)色星際大嘴唇
3. 有適合美式波普文化的——插畫彩虹波點(diǎn)風(fēng)
4. 有適合簡(jiǎn)潔文藝清新的——漫畫吉米素雅風(fēng)

然后根據(jù)整體H5設(shè)計(jì)的風(fēng)格，將魔性圖模塊的UI風(fēng)格繼續(xù)延續(xù)和統(tǒng)一，讓用戶感覺在整個(gè)音樂的異次元空間遨游并且制作出屬于自己標(biāo)簽的音樂動(dòng)態(tài)海報(bào)。

5. 上線反饋總結(jié)

在設(shè)計(jì)師和開發(fā)GG們連續(xù)修改五天五夜的各種大大小小的BUG，我們這次的寵兒終于在2017/1/9正式出街了，從這次的設(shè)計(jì)——上線——反饋來看，截止11.15，個(gè)人年終盤點(diǎn)（年度音樂秀）上線4.5天的數(shù)據(jù)來看：

（1）數(shù)據(jù)

日訪問峰值PV達(dá)336萬；單日訪問PV高達(dá)400W，二次傳播后客態(tài)訪問PV占12%；

進(jìn)入頁面的用戶，39%的訪問PV會(huì)發(fā)起播放行為，即使年度歌單在最后一頁才出現(xiàn)，仍有14.2%的PV會(huì)查看歌單，保存歌單的PV比例占3.2% 進(jìn)入首頁開始瀏覽過程中，觸發(fā)分享的轉(zhuǎn)化率為3.4%（僅統(tǒng)計(jì)點(diǎn)擊頁面分享按鈕，不含截圖分享）

主態(tài)訪問的用戶，有意愿制作封面的PV占比高達(dá)70%；75%是從封面頁進(jìn)入，進(jìn)入制作封面之后，更換圖片率為61%，保存圖片率29%。

（2）反饋

微博多為截取手機(jī)屏幕進(jìn)行分享，好評(píng)居多，主要反饋集中點(diǎn)：

1. 好評(píng)，感慨最愛的是誰誰誰；表示會(huì)一直支持QQ音樂；驚喜找到口味相同的好友；總結(jié)很好
2. 中性態(tài)度，順便說比較少用QQ音樂，專門安裝QQ音樂看盤點(diǎn)
3. 差評(píng)，沒有競(jìng)品好，諸如沒有歌曲/數(shù)據(jù)不準(zhǔn)（這次盤點(diǎn)只統(tǒng)計(jì)了移動(dòng)端）

這次的音樂年終盤點(diǎn)的H5對(duì)開發(fā)、設(shè)計(jì)、前端、后臺(tái)都是一個(gè)全新突破性的嘗試，雖然在制作修復(fù)BUG中遇到了很多小插曲，但是大家都是堅(jiān)持最終的信念走到了最后，在大家共同的努力下我們一起完成了這次音樂年終盤點(diǎn)的H5制作，在這里我真心感謝一起奮戰(zhàn)一個(gè)月的隊(duì)友們，感謝你們！讓我們共同努力并迎接2017更多更難的挑戰(zhàn)！

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