国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

如何設(shè)計(jì)霸屏級(jí)的H5？本文作者從自己的實(shí)踐經(jīng)驗(yàn)出發(fā)，結(jié)合具體案例，分享了 H5設(shè)計(jì)、推廣等方面非常有用的知識(shí)，供大家一同參考和學(xué)習(xí)。

現(xiàn)在能引起大家共鳴，促動(dòng)分享的活動(dòng)形式莫過(guò)于H5、小程序、海報(bào)等。

H5應(yīng)該又是分享最多的形式，為什么會(huì)趨向于H5呢？其實(shí)也好理解，H5可以承載的內(nèi)容相當(dāng)豐富，可以是帶音樂(lè)視頻的動(dòng)畫(huà)、好玩的小游戲、答題知識(shí)類競(jìng)賽等等。

相比小程序的好處就是沒(méi)有任何門(mén)檻，分享方便不受任何平臺(tái)限制。相比單圖的海報(bào)來(lái)說(shuō)，H5的形式可以豐富很多，好處也是顯而易見(jiàn)。所以H5成為備受歡迎的設(shè)計(jì)開(kāi)發(fā)形式，這也是為什么會(huì)做H5的原因。

01 設(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ò)大品牌傳播的聲浪。

02 設(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)球。如下圖開(kāi)始游戲的設(shè)計(jì)。

搖取出隨機(jī)的幸運(yùn)球落地后，帶著幸運(yùn)開(kāi)啟幻想旅程，游戲會(huì)隨機(jī)推送給試駕人一輛車，這可能是你人生的第一輛搖籃車，定義隨機(jī)性帶給用戶額外驚喜，選好人生的第一輛豪車，策劃根據(jù)不同的車還配上了相應(yīng)的文案。

如下圖呈現(xiàn)出來(lái)的設(shè)計(jì)：

• 車1（嬰兒車）：人生中的第一輛豪車
• 車2（學(xué)步車）：邁出了如同登月的一大步
• 車3（投幣車）：再投一個(gè)幣吧，我還想再玩一次
• 車4（挖掘機(jī)）：學(xué)挖掘機(jī)，要從娃娃抓起
• 車5（敞篷車）：這條gai上最靚的崽
• 車6（購(gòu)物車）：除了這個(gè)不要，其他我都要了
• 車7（小自行車）：還記得當(dāng)年后座的那個(gè)TA嗎？
• 車8（滑板車）：我的滑板車，時(shí)尚時(shí)尚最時(shí)尚
• 車9（南瓜車）：童話里不是騙人的

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

角色選好后，根據(jù)自己的喜好可以換豪車了，策劃還為每輛豪車定制了默認(rèn)的彈幕文案，結(jié)合彈幕更能渲染氛圍，用戶覺(jué)得好玩才可能觸發(fā)互動(dòng)的行為。用戶的趣味性被激發(fā)了，才會(huì)有接下來(lái)的分享玩轉(zhuǎn)行為。如下圖的彈幕、互動(dòng)、分享頁(yè)面。

• 車1（嬰兒車）：1、年紀(jì)輕輕就開(kāi)上了豪車！我酸了；2、你可真skr小機(jī)靈鬼
• 車2（學(xué)步車）：剎車全靠腳
• 車3（投幣車）：一看就是個(gè)老司機(jī)
• 車4（挖掘機(jī)）：1、這個(gè)必須安排；2、xswl
• 車5（敞篷車）：騎上我心愛(ài)的小摩托
• 車6（購(gòu)物車）：1、皮這一下很開(kāi)心；2、今天可以買(mǎi)買(mǎi)買(mǎi)
• 車7（小自行車）：要啥自行車啊
• 車8（滑板車）：1、是時(shí)候表演真正的技術(shù)了；2、不接受任何diss
• 車9（南瓜車）：貧窮限制了我的想象

03 實(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)很多，層次不夠豐富。

▲靦腆有書(shū)生氣的眼鏡哥

▲一身運(yùn)動(dòng)天賦的肌肉男

▲風(fēng)中飄著早已失守發(fā)際線的程序員

▲收房租時(shí)尚包租婆

▲拋媚眼的后宮娘娘

▲暗送香波的美女

▲敞開(kāi)心扉的女生

▲事無(wú)巨細(xì)的管家

▲天天宅在家里的女作家

▲酷的一筆的潮男

寫(xiě)在最后

做個(gè)簡(jiǎn)單的海報(bào)略顯淺顯，承載不了那么內(nèi)容；策劃個(gè)大型活動(dòng)，動(dòng)用的人力和財(cái)力太高；不妨嘗試設(shè)計(jì)個(gè)霸屏的H5可以給用戶傳遞不一樣的視角。

落地的品牌價(jià)值絲毫不遜色于其它形式， 這也是情感化設(shè)計(jì)的范疇，設(shè)計(jì)的聲浪觸發(fā)用戶的心智模型，才能產(chǎn)生互動(dòng)分享的行為，變相地要求設(shè)計(jì)師做出創(chuàng)新的層級(jí)。

#專欄作家#

VV體驗(yàn)，微信公眾號(hào)：VV體驗(yàn)，人人都是產(chǎn)品經(jīng)理專欄作家?！逗迷O(shè)計(jì)，有方法》作者?；燠E于互聯(lián)網(wǎng)圈，致力于研究用戶體驗(yàn)設(shè)計(jì)，著力打造極致的體驗(yàn)設(shè)計(jì)，主導(dǎo)和參與設(shè)計(jì)過(guò)多款熱門(mén)的互聯(lián)網(wǎng)產(chǎn)品，遍及多個(gè)領(lǐng)域。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash， 基于CC0協(xié)議