挖掘營銷背后：《活蒸大粽子》，一個還不錯的H5是怎么產(chǎn)生的?
之前有很多同學(xué)建議我寫一些個人作品或者團隊作品的創(chuàng)作思路之類的文章。所以有了本篇。本篇文章主要講的是該作品的思路和h5網(wǎng)站中需要注意的一些要點和方法。重點在創(chuàng)作思路，制作上就不說了。如果能對大家有些幫助，我也不算白寫了。
來源：被盜的世界（ID：Lost3001）
作者：灰晝
原標題：一個還不錯的H5是怎么產(chǎn)生的
數(shù)英網(wǎng)已獲作者授權(quán)，如需轉(zhuǎn)載請聯(lián)系原作者
電影鬼吹燈之尋龍訣“活蒸大粽子”思路解析
端午節(jié)前的時候，我們 [亞實驗室] 為了尋龍訣電影做了一期線上H5的推廣。借著鬼吹燈尋龍訣即將上映之際，分享下創(chuàng)作思路。希望大家能得到一點小小的啟發(fā)。
看過鬼吹燈的朋友都知道，粽子是一句在盜墓者中流傳的暗語，就像山里的土匪之間談話也不能直接說自己殺人放火，都有一套行業(yè)內(nèi)的術(shù)語，就好比lol中不叫藍buff，叫藍爸爸一樣。粽子呢，即指的是墓里的僵尸。
H5講究借勢營銷，正好端午節(jié)有蒸粽子的風(fēng)俗，而鬼吹燈中又有粽子，正好是一個結(jié)合點，那就做個活蒸大粽子的游戲吧。
一、交互原型
考慮一下產(chǎn)品原型、交互機制，總體原則是：
大家不要被上圖精細的手法所蒙蔽，我們來看下流程。
從一個loading開始到分享出去，這是一個用戶流程（user flow），逗比用戶除外。為了防止用戶流失，把復(fù)雜的留給自己，把簡單的交給用戶。這里采用了1個btn的交互形式，這也就是所謂一巴疼交互方式。（button音譯：巴疼）
二、形象設(shè)定
交互機制有了，新的問題又來了。如何結(jié)合僵尸的形象和粽子的形象？
作為一個國產(chǎn)商業(yè)片的H5，為了不嚇到大多數(shù)的觀影群眾，總不能弄個真的僵尸出來吧？清代米原康正——德藝雙馨的袁枚老先生在《子不語》中對僵尸做了一下分類，分為：紫僵、白僵、綠僵、毛僵、飛僵、游尸、伏尸、不化骨（對老先生有興趣的可以自行百度，就不在這個嚴肅的技術(shù)帖中講述了）?？?，古代人總結(jié)的僵尸的視覺識別系統(tǒng)也有以顏色來分的，別老悶著頭做設(shè)計，多讀點書。
為了簡化執(zhí)行，這里我們采取了五種顏色來區(qū)分粽子的方式。
經(jīng)過一系列的討論，可愛的僵尸粽子形象就出爐了，紅黃藍綠青靛紫，而且這絕對不是葫蘆娃，一個藤上七個瓜。這是為了差異性，考慮到用戶蒸完粽子之后，得到的結(jié)果不同，這才有意思嘛（集齊幾種顏色粽子可以召喚超級大粽子），這也很重要。
三、視覺設(shè)定
粽子形象弄出了之后，下面開始設(shè)計蒸粽子的場景。
這。。。這個原型圖。。?，F(xiàn)在看起來。。。畫的像一坨金山。。。不過不要在乎這些細節(jié)。這里我考驗一下大家，根據(jù)這個原型圖如何來設(shè)計一個酷炫叼炸天的主視覺？比如下面？
是吧？好像看起來也不錯呢！但是，按照原型圖上直接設(shè)計出來，這和按鈕上面加一道光有什么區(qū)別？說好的狂拽酷炫叼炸天呢？也許我們可以自己頭腦風(fēng)暴一下。蒸！蒸！蒸！蒸功夫？杭州小籠包?。吭诖耸÷訬步。
蒸汽朋克風(fēng)格應(yīng)該挺不錯的，找參考看看！好像有戲。感覺端午節(jié)終于可以安心回家吃粽子了，想想還有點小激動呢。
參考也看了，開始構(gòu)思吧。作為一個人們口中所謂的大神中的大神，呵呵呵呵，我是不會告訴你我的十多年浸淫的手繪水平是這樣的。
聽說這種手繪會掉粉，我就呵呵了。我用的可是24b的鉛筆呢，又不是粉筆，怎么會掉粉呢。
構(gòu)思圖都出來了，收集各種素材，放到Photoshop里面各種啪啪啪，主視覺就完成了。
四、成果展示
案例詳情：http://m.hygysj.cn/projects/16067.html
掃描二維碼，立即體驗！
（數(shù)英APP手機用戶，需點擊放大二維碼后，長按識別）
做了一大堆動效，loading的動態(tài)，蒸汽的噴射，燈籠的搖擺，老電影的效果。。。慢著，微信沒辦法直接轉(zhuǎn)發(fā)，還得做個右上角的指示動畫，每個地方都要求細致，導(dǎo)入AE中，繼續(xù)啪啪啪。
動圖展示：
亞實驗室公眾號
技術(shù)創(chuàng)意總監(jiān)：王雪松
創(chuàng)意團隊：小亮、老賈、鄔寧、閃閃、老閃、灰晝
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（3條）