一個測試類H5的誕生-測一測你的孤獨指數
甲方爸爸喜馬拉雅市場部,希望做一個H5推廣新課程,《范景中講西方藝術史》,于是有了這個H5需求。
正趕上網易的人格測試H5刷了一波,于是決定做一個在博物館答題測試的H5,
致敬網易,把刷屏H5做出了新高度。
網易測人格,咱測一測孤獨指數。
策劃先行,設計跟上。
團隊討論后,希望能夠造出一種沉浸式的氛圍,讓用戶更加有帶入感。
一個好的視覺體驗需要有一個雙重人格的設計,不斷的自我否定。
附上頭圖進化史,說實話擺出來一看,第一版是有點辣眼睛的。最終給到客戶爸爸的版本,無論是高級感還是精細度都要高很多。
市面上測試類的H5同質化還是很嚴重的,都說畫面不夠動效來湊。為了做出些區別,后期大哥花心思做了很多動效。
這里用到的動畫制作工具,flash和ae。
loading動畫
看魔法小櫻長大的孩子
答題頁的觸發小動畫
結果…
技術復現后資源巨大…
不得不佩服,技術妹子刪減動畫的能力。
刪減多余幀數,合并雪碧圖,再加上分段加載終于(偷偷跑你流量),控制住了loading時間。
技術部分主要使用白鷺引擎,H5開發萬用神器。
最后整個方案糾結最多的就是生成海報了,改了n版,附上我最喜歡的一版本,最終效果如何,客官自己掃描體驗一下吧。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)