一個(gè)爆款的H5頁(yè)面是如何設(shè)計(jì)的

隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，現(xiàn)如今能引起大家共鳴，促動(dòng)分享的活動(dòng)形式莫過(guò)于H5頁(yè)面、微信小程序、海報(bào)等。其中，H5應(yīng)該是分享最多的形式，為什么會(huì)有這么多更偏向H5頁(yè)面呢？其實(shí)也好理解，H5頁(yè)面可以承載的內(nèi)容十分的豐富，可以是帶音樂(lè)視頻的動(dòng)畫(huà)、好玩的小游戲、答題知識(shí)類競(jìng)賽等等。所以一個(gè)H5頁(yè)面承載了許多能滿足用戶需求的東西。那么該如何設(shè)計(jì)出這樣的H5頁(yè)面呢？

1、設(shè)計(jì)背景

選定了孩子們喜歡的兒童節(jié)，那么大人們?yōu)樯抖枷矚g呢？因?yàn)檫@個(gè)節(jié)日特別容易勾起大人童年的回憶，誰(shuí)都喜歡童年的感覺(jué)，想想都能變得年輕一點(diǎn)。還有這畢竟是大人的世界嗎？大人玩才能玩轉(zhuǎn)分享起來(lái)嗎？

之所以想設(shè)計(jì)這樣一個(gè)活動(dòng)，主要還是想帶一波用戶回流，完善節(jié)日情感化設(shè)計(jì)的形式，擴(kuò)大品牌傳播的聲浪。

2、 設(shè)計(jì)過(guò)程

抓取娃娃機(jī)給人帶來(lái)的那種樂(lè)趣好像早已超越了年齡的界限，誰(shuí)都覺(jué)得自己的是幸運(yùn)兒，總能玩的樂(lè)此不疲。所以選用抓娃娃機(jī)作為渲染節(jié)日氣氛的開(kāi)頭，很容易觸發(fā)用戶的代入感，引導(dǎo)用戶轉(zhuǎn)動(dòng)遙感抓取自己的幸運(yùn)球。搖取出隨機(jī)的幸運(yùn)球落地后，帶著幸運(yùn)開(kāi)啟幻想旅程，游戲會(huì)隨機(jī)推送給試駕人一輛車，這可能是你人生的第一輛搖籃車，定義隨機(jī)性帶給用戶額外驚喜，選好人生的第一輛豪車，策劃根據(jù)不同的車還配上了相應(yīng)的文案。角色選好后，根據(jù)自己的喜好可以換豪車了，策劃還為每輛豪車定制了默認(rèn)的彈幕文案，結(jié)合彈幕更能渲染氛圍，用戶覺(jué)得好玩才可能觸發(fā)互動(dòng)的行為。用戶的趣味性被激發(fā)了，才會(huì)有接下來(lái)的分享玩轉(zhuǎn)行為。如下圖的彈幕、互動(dòng)、分享頁(yè)面。

3、實(shí)現(xiàn)方法

H5的設(shè)計(jì)可以天馬行空，但最后都要落到實(shí)現(xiàn)層面，設(shè)計(jì)的再好，實(shí)現(xiàn)不了也是全白搭。團(tuán)隊(duì)的前端開(kāi)發(fā)沒(méi)有用我們傳統(tǒng)的DIV+CSS結(jié)構(gòu)來(lái)寫(xiě)，這樣寫(xiě)太復(fù)雜了，而且嵌套的層級(jí)比較多。而是采用PixiJS框架來(lái)繪制整個(gè)頁(yè)面，包括畫(huà)面里面的動(dòng)效都是一幀幀動(dòng)效都是繪制出來(lái)，這樣可以保證動(dòng)畫(huà)質(zhì)量和運(yùn)行效率。比如下面每個(gè)人物的動(dòng)效，當(dāng)然你會(huì)說(shuō)沒(méi)有動(dòng)效不行嗎？肯定是可以的，但就會(huì)顯得單調(diào)很多，層次不夠豐富。

綜上所述，企業(yè)或商家在設(shè)計(jì)H5頁(yè)面上，如果滿足了以上幾點(diǎn)的話，那么制作出的H5頁(yè)面是非常受用戶歡迎的，而且?guī)Ыo你的盈利將是無(wú)法估量的。如果你在H5制作中有任何需求，可以咨詢?cè)诰€藍(lán)橙互動(dòng)客服，了解價(jià)格和工期等相關(guān)信息。