挖掘营销背后：《活蒸大粽子》，一个还不错的H5是怎么产生的?
之前有很多同学建议我写一些个人作品或者团队作品的创作思路之类的文章。所以有了本篇。本篇文章主要讲的是该作品的思路和h5网站中需要注意的一些要点和方法。重点在创作思路，制作上就不说了。如果能对大家有些帮助，我也不算白写了。
来源：被盗的世界（ID：Lost3001）
作者：灰昼
原标题：一个还不错的H5是怎么产生的
数英网已获作者授权，如需转载请联系原作者
电影鬼吹灯之寻龙诀“活蒸大粽子”思路解析
端午节前的时候，我们 [亚实验室] 为了寻龙诀电影做了一期线上H5的推广。借着鬼吹灯寻龙诀即将上映之际，分享下创作思路。希望大家能得到一点小小的启发。
看过鬼吹灯的朋友都知道，粽子是一句在盗墓者中流传的暗语，就像山里的土匪之间谈话也不能直接说自己杀人放火，都有一套行业内的术语，就好比lol中不叫蓝buff，叫蓝爸爸一样。粽子呢，即指的是墓里的僵尸。
H5讲究借势营销，正好端午节有蒸粽子的风俗，而鬼吹灯中又有粽子，正好是一个结合点，那就做个活蒸大粽子的游戏吧。
一、交互原型
考虑一下产品原型、交互机制，总体原则是：
大家不要被上图精细的手法所蒙蔽，我们来看下流程。
从一个loading开始到分享出去，这是一个用户流程（user flow），逗比用户除外。为了防止用户流失，把复杂的留给自己，把简单的交给用户。这里采用了1个btn的交互形式，这也就是所谓一巴疼交互方式。（button音译：巴疼）
二、形象设定
交互机制有了，新的问题又来了。如何结合僵尸的形象和粽子的形象？
作为一个国产商业片的H5，为了不吓到大多数的观影群众，总不能弄个真的僵尸出来吧？清代米原康正——德艺双馨的袁枚老先生在《子不语》中对僵尸做了一下分类，分为：紫僵、白僵、绿僵、毛僵、飞僵、游尸、伏尸、不化骨（对老先生有兴趣的可以自行百度，就不在这个严肃的技术帖中讲述了）。看，古代人总结的僵尸的视觉识别系统也有以颜色来分的，别老闷着头做设计，多读点书。
为了简化执行，这里我们采取了五种颜色来区分粽子的方式。
经过一系列的讨论，可爱的僵尸粽子形象就出炉了，红黄蓝绿青靛紫，而且这绝对不是葫芦娃，一个藤上七个瓜。这是为了差异性，考虑到用户蒸完粽子之后，得到的结果不同，这才有意思嘛（集齐几种颜色粽子可以召唤超级大粽子），这也很重要。
三、视觉设定
粽子形象弄出了之后，下面开始设计蒸粽子的场景。
这。。。这个原型图。。。现在看起来。。。画的像一坨金山。。。不过不要在乎这些细节。这里我考验一下大家，根据这个原型图如何来设计一个酷炫叼炸天的主视觉？比如下面？
是吧？好像看起来也不错呢！但是，按照原型图上直接设计出来，这和按钮上面加一道光有什么区别？说好的狂拽酷炫叼炸天呢？也许我们可以自己头脑风暴一下。蒸！蒸！蒸！蒸功夫？杭州小笼包！？在此省略N步。
蒸汽朋克风格应该挺不错的，找参考看看！好像有戏。感觉端午节终于可以安心回家吃粽子了，想想还有点小激动呢。
参考也看了，开始构思吧。作为一个人们口中所谓的大神中的大神，呵呵呵呵，我是不会告诉你我的十多年浸淫的手绘水平是这样的。
听说这种手绘会掉粉，我就呵呵了。我用的可是24b的铅笔呢，又不是粉笔，怎么会掉粉呢。
构思图都出来了，收集各种素材，放到Photoshop里面各种啪啪啪，主视觉就完成了。
四、成果展示
案例详情：http://www.digitaling.com/projects/16067.html
扫描二维码，立即体验！
（数英APP手机用户，需点击放大二维码后，长按识别）
做了一大堆动效，loading的动态，蒸汽的喷射，灯笼的摇摆，老电影的效果。。。慢着，微信没办法直接转发，还得做个右上角的指示动画，每个地方都要求细致，导入AE中，继续啪啪啪。
动图展示：
亚实验室公众号
技术创意总监：王雪松
创意团队：小亮、老贾、邬宁、闪闪、老闪、灰昼
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
参与评论
参与评论
推荐评论
全部评论（3条）