現在能引起大家共鳴，促動分享的活動形式莫過于H5、小程序、海報等。H5應該又是分享最多的形式，為什么會趨向于H5呢？其實也好理解，H5可以承載的內容相當豐富，可以是帶音樂視頻的動畫、好玩的小游戲、答題知識類競賽等等。相比小程序的好處就是沒有任何門檻，分享方便不受任何平臺限制。相比單圖的海報來說，H5的形式可以豐富很多，好處也是顯而易見。所以H5成為備受歡迎的設計開發形式，這也是為什么會做H5的原因。

設計背景

選定了孩子們喜歡的兒童節，那么大人們為啥都喜歡呢？因為這個節日特別容易勾起大人童年的回憶，誰都喜歡童年的感覺，想想都能變得年輕一點。還有這畢竟是大人的世界嗎？大人玩才能玩轉分享起來嗎？之所以想設計這樣一個活動，主要還是想帶一波用戶回流，完善節日情感化設計的形式，擴大品牌傳播的聲浪。

設計過程

抓取娃娃機給人帶來的那種樂趣好像早已超越了年齡的界限，誰都覺得自己的是幸運兒，總能玩的樂此不疲。所以選用抓娃娃機作為渲染節日氣氛的開頭，很容易觸發用戶的代入感，引導用戶轉動遙感抓取自己的幸運球。如下圖開始游戲的設計。

搖取出隨機的幸運球落地后，帶著幸運開啟幻想旅程，游戲會隨機推送給試駕人一輛車，這可能是你人生的第一輛搖籃車，定義隨機性帶給用戶額外驚喜，選好人生的第一輛豪車，策劃根據不同的車還配上了相應的文案。如下圖呈現出來的設計。

車1（嬰兒車）：人生中的第一輛豪車

車2（學步車）：邁出了如同登月的一大步

車3（投幣車）：再投一個幣吧，我還想再玩一次

車4（挖掘機）：學挖掘機，要從娃娃抓起

車5（敞篷車）：這條gai上最靚的崽

車6（購物車）：除了這個不要，其他我都要了

車7（小自行車）：還記得當年后座的那個TA嗎？

車8（滑板車）：我的滑板車，時尚時尚最時尚

車9（南瓜車）：童話里不是騙人的

就可以選取試駕人的角色了，設計師創意了很多可以互換角色。有書生氣的眼鏡哥、羞答答嬪妃娘娘、胡子拉碴的程序員、萌寵可愛的少女、玩世不恭的潮男、穿著紙尿褲的宅女、愛健身的型男、時尚的單車美眉、穿越古今的管家等，疫情期間還配合他們戴口罩的情形。如下圖各個形象結合豪車的行為。

角色選好后，根據自己的喜好可以換豪車了，策劃還為每輛豪車定制了默認的彈幕文案，結合彈幕更能渲染氛圍，用戶覺得好玩才可能觸發互動的行為。用戶的趣味性被激發了，才會有接下來的分享玩轉行為。如下圖的彈幕、互動、分享頁面。

車1（嬰兒車）：1、年紀輕輕就開上了豪車！我酸了；2、你可真skr小機靈鬼

車2（學步車）：剎車全靠腳

車3（投幣車）：一看就是個老司機

車4（挖掘機）：1、這個必須安排；2、xswl

車5（敞篷車）：騎上我心愛的小摩托

車6（購物車）：1、皮這一下很開心；2、今天可以買買買

車7（小自行車）：要啥自行車啊

車8（滑板車）：1、是時候表演真正的技術了；2、不接受任何diss

車9（南瓜車）：貧窮限制了我的想象

實現方法

H5的設計可以天馬行空，但最后都要落到實現層面，設計的再好，實現不了也是全白搭。團隊的前端開發沒有用我們傳統的DIV+CSS結構來寫，這樣寫太復雜了，而且嵌套的層級比較多。而是采用PixiJS框架來繪制整個頁面，包括畫面里面的動效都是一幀幀動效都是繪制出來，這樣可以保證動畫質量和運行效率。比如下面每個人物的動效，當然你會說沒有動效不行嗎？肯定是可以的，但就會顯得單調很多，層次不夠豐富。