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