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