中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

1.?給QQ音樂加點顏色

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

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

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

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

這是我們這次盤點的最終確立的交互模型圖：

那么大家梳理好了交互模型圖，重擔就全部交給視覺設計師了，各路神仙那段時間每天說的最多的話就是：“”就靠你們視覺了“，我們表示壓力山大啊。為了這次的視覺效果好，響應老板的大號召，一定要讓視覺出彩新穎的出街，也充分的融入音樂的元素，我們在不斷的腦暴手繪和參考形式、色彩、細節的優化。

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

首頁是進入整個APP的重中之重，包括形式、載體、字體我們都是反復琢磨嘗試無數次，無限次打磨出來的結果。

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

呈現給用戶看到的是這樣一個視覺效果：

2.?關于360度三維立體空間

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

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

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

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

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

為了這次360全景的異次元空間的效果，我們設計師妹子們都是現學現賣的C4D功力，還算不錯的都完成了任務。

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

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

4. 關于這次的重磅魔性圖——DIY自己的個性海報

這次H5的主要好玩之處就在于我們有一個很強大的互動社交環節，可以在盤點完自己的音樂數據之余，創作屬于自己的音樂海報，這次的魔性圖這個功能希望用戶自主創作完成社交傳播的主動力，讓更多的人參與進來，使得這個傳播效應最大化。

確認目標后，輸出視覺魔性圖DEMO:

我們秉著魔性的原則，為了適應各種人群，又收到開發內存的影響所以忍痛割愛只能做四款魔性圖模板。讓大家簡單改變自己，制作屬于自己的動態GIF音樂海報，塑造自己的音樂標簽。

1. 有適合復古懷舊用戶的——魔性復古大轉盤
2. 有適合前衛時尚用戶的——藍色星際大嘴唇
3. 有適合美式波普文化的——插畫彩虹波點風
4. 有適合簡潔文藝清新的——漫畫吉米素雅風

然后根據整體H5設計的風格，將魔性圖模塊的UI風格繼續延續和統一，讓用戶感覺在整個音樂的異次元空間遨游并且制作出屬于自己標簽的音樂動態海報。

5. 上線反饋總結

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

（1）數據

日訪問峰值PV達336萬；單日訪問PV高達400W，二次傳播后客態訪問PV占12%；

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

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

（2）反饋

微博多為截取手機屏幕進行分享，好評居多，主要反饋集中點：

1. 好評，感慨最愛的是誰誰誰；表示會一直支持QQ音樂；驚喜找到口味相同的好友；總結很好
2. 中性態度，順便說比較少用QQ音樂，專門安裝QQ音樂看盤點
3. 差評，沒有競品好，諸如沒有歌曲/數據不準（這次盤點只統計了移動端）

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

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