起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識如何才能設計出霸屏的H5？
如何設計霸屏級的H5？本文作者從自己的實踐經(jīng)驗出發(fā)，結合具體案例，分享了 H5設計、推廣等方面非常有用的知識，供大家一同參考和學習。
現(xiàn)在能引起大家共鳴，促動分享的活動形式莫過于H5、小程序、海報等。
H5應該又是分享最多的形式，為什么會趨向于H5呢？其實也好理解，H5可以承載的內(nèi)容相當豐富，可以是帶音樂視頻的動畫、好玩的小游戲、答題知識類競賽等等。
相比小程序的好處就是沒有任何門檻，分享方便不受任何平臺限制。相比單圖的海報來說，H5的形式可以豐富很多，好處也是顯而易見。所以H5成為備受歡迎的設計開發(fā)形式，這也是為什么會做H5的原因。
01 設計背景
選定了孩子們喜歡的兒童節(jié)，那么大人們?yōu)樯抖枷矚g呢？因為這個節(jié)日特別容易勾起大人童年的回憶，誰都喜歡童年的感覺，想想都能變得年輕一點。還有這畢竟是大人的世界嗎？大人玩才能玩轉分享起來嗎？
之所以想設計這樣一個活動，主要還是想帶一波用戶回流，完善節(jié)日情感化設計的形式，擴大品牌傳播的聲浪。
02 設計過程
抓取娃娃機給人帶來的那種樂趣好像早已超越了年齡的界限，誰都覺得自己的是幸運兒，總能玩的樂此不疲。所以選用抓娃娃機作為渲染節(jié)日氣氛的開頭，很容易觸發(fā)用戶的代入感，引導用戶轉動遙感抓取自己的幸運球。如下圖開始游戲的設計。
搖取出隨機的幸運球落地后，帶著幸運開啟幻想旅程，游戲會隨機推送給試駕人一輛車，這可能是你人生的第一輛搖籃車，定義隨機性帶給用戶額外驚喜，選好人生的第一輛豪車，策劃根據(jù)不同的車還配上了相應的文案。
如下圖呈現(xiàn)出來的設計：
- 車1（嬰兒車）：人生中的第一輛豪車
- 車2（學步車）：邁出了如同登月的一大步
- 車3（投幣車）：再投一個幣吧，我還想再玩一次
- 車4（挖掘機）：學挖掘機，要從娃娃抓起
- 車5（敞篷車）：這條gai上最靚的崽
- 車6（購物車）：除了這個不要，其他我都要了
- 車7（小自行車）：還記得當年后座的那個TA嗎？
- 車8（滑板車）：我的滑板車，時尚時尚最時尚
- 車9（南瓜車）：童話里不是騙人的
就可以選取試駕人的角色了，設計師創(chuàng)意了很多可以互換角色。有書生氣的眼鏡哥、羞答答嬪妃娘娘、胡子拉碴的程序員、萌寵可愛的少女、玩世不恭的潮男、穿著紙尿褲的宅女、愛健身的型男、時尚的單車美眉、穿越古今的管家等，疫情期間還配合他們戴口罩的情形。如下圖各個形象結合豪車的行為。
角色選好后，根據(jù)自己的喜好可以換豪車了，策劃還為每輛豪車定制了默認的彈幕文案，結合彈幕更能渲染氛圍，用戶覺得好玩才可能觸發(fā)互動的行為。用戶的趣味性被激發(fā)了，才會有接下來的分享玩轉行為。如下圖的彈幕、互動、分享頁面。
- 車1（嬰兒車）：1、年紀輕輕就開上了豪車！我酸了；2、你可真skr小機靈鬼
- 車2（學步車）：剎車全靠腳
- 車3（投幣車）：一看就是個老司機
- 車4（挖掘機）：1、這個必須安排；2、xswl
- 車5（敞篷車）：騎上我心愛的小摩托
- 車6（購物車）：1、皮這一下很開心；2、今天可以買買買
- 車7（小自行車）：要啥自行車啊
- 車8（滑板車）：1、是時候表演真正的技術了；2、不接受任何diss
- 車9（南瓜車）：貧窮限制了我的想象
03 實現(xiàn)方法
H5的設計可以天馬行空，但最后都要落到實現(xiàn)層面，設計的再好，實現(xiàn)不了也是全白搭。
團隊的前端開發(fā)沒有用我們傳統(tǒng)的DIV+CSS結構來寫，這樣寫太復雜了，而且嵌套的層級比較多。而是采用PixiJS框架來繪制整個頁面，包括畫面里面的動效都是一幀幀動效都是繪制出來，這樣可以保證動畫質量和運行效率。
比如下面每個人物的動效，當然你會說沒有動效不行嗎？肯定是可以的，但就會顯得單調很多，層次不夠豐富。
▲靦腆有書生氣的眼鏡哥
▲一身運動天賦的肌肉男
▲風中飄著早已失守發(fā)際線的程序員
▲收房租時尚包租婆
▲拋媚眼的后宮娘娘
▲暗送香波的美女
▲敞開心扉的女生
▲事無巨細的管家
▲天天宅在家里的女作家
▲酷的一筆的潮男
寫在最后
做個簡單的海報略顯淺顯，承載不了那么內(nèi)容；策劃個大型活動，動用的人力和財力太高；不妨嘗試設計個霸屏的H5可以給用戶傳遞不一樣的視角。
落地的品牌價值絲毫不遜色于其它形式， 這也是情感化設計的范疇，設計的聲浪觸發(fā)用戶的心智模型，才能產(chǎn)生互動分享的行為，變相地要求設計師做出創(chuàng)新的層級。
#專欄作家#
VV體驗，微信公眾號：VV體驗，人人都是產(chǎn)品經(jīng)理專欄作家?！逗迷O計，有方法》作者。混跡于互聯(lián)網(wǎng)圈，致力于研究用戶體驗設計，著力打造極致的體驗設計，主導和參與設計過多款熱門的互聯(lián)網(wǎng)產(chǎn)品，遍及多個領域。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來自Unsplash， 基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
