资讯详情在之前的时候，我们iebook超级精灵为了寻龙诀电影做了一期线上免费H5模板的推广。借着鬼吹灯寻龙诀即将上映之际，分享下创作思路。希望大家能得到一点小小的启发。
看过鬼吹灯的朋友都还知道，粽子是一句在盗墓者中流传的暗语，就像山里的土匪之间谈话也不能直接说自己杀人放火，都有一套行业内的术语，就好比lol中不叫蓝buff，叫蓝爸爸一样。粽子呢，即指的是墓里的僵尸。
H5讲究借势营销，国内h5游戏正好端午节有蒸粽子的风俗，而鬼吹灯中又有粽子，正好是一个结合点，那就做个活蒸大粽子的游戏吧。
考虑一下产品原型、交互机制，总体原则是：
大家不要被上图精细的手法所蒙蔽，我们来看下流程。
从一个H5网页开始到分享出去，这是一个用户流程(user flow)，逗比用户除外。为了防止用户流失，把复杂的留给自己，把简单的交给用户。这里采用了1个btn的交互形式，这也就是所谓一巴疼交互方式。(button音译：巴疼)
交互机制有了，新的问题又来了。如何结合僵尸的形象和粽子的形象?
作为一个国产商业片的H5页面制作，为了不吓到大多数的观影群众，总不能弄个真的僵尸出来吧?清代米原康正——德艺双馨的袁枚老先生在《子不语》中对僵尸做了一下分类，分为：紫僵、白僵、绿僵、毛僵、飞僵、游尸、伏尸、不化骨(对老先生有兴趣的可以自行百度，就不在这个严肃的技术帖中讲述了)。看，古代人总结的僵尸的视觉识别系统也有以颜色来分的，别老闷着头做设计，多读点书h5网站开发。
为了简化执行，这里我们采取了五种颜色来区分粽子的方式。
经过一系列的讨论，可爱的僵尸粽子形象就出炉了，红黄蓝绿青靛紫，而且这绝对不是葫芦娃，一个藤上七个瓜。这是为了差异性，考虑到用户蒸完粽子之后，得到的结果不同，这才有意思嘛(集齐几种颜色粽子可以召唤超级大粽子)，这也很重要。
粽子形象弄出了之后，下面开始设计蒸粽子的场景。
这。。。这个原型图。。。现在看起来。。。画的像一坨金山。。。不过不要在乎这些细节。这里我考验一下大家，根据这个原型图如何来设计一个酷炫叼炸天的主视觉?比如下面?
是吧?好像看起来也不错呢!但是，按照原型的H5模板上直接设计出来，这和按钮上面加一道光有什么区别?说好的狂拽酷炫叼炸天呢?也许我们可以自己头脑风暴一下。蒸!蒸!蒸!蒸功夫?杭州小笼包!?在此省略N步。
蒸汽朋克风格应该挺不错的，找参考看看!好像有戏。感觉端午节终于可以安心回家吃粽子了，想想还有点小激动呢。
参考也看了，开始构思吧。作为一个人们口中所谓的大神中的大神，呵呵呵呵，我是不会告诉你我的十多年浸淫的手绘水平是这样的。
听说这种手绘会掉粉，我就呵呵了。我用的可是24b的铅笔呢，又不是粉笔，怎么会掉粉呢。
构思图都出来了，收集各种素材，放到Photoshop里面各种啪啪啪，主视觉就完成了。
做了一大堆动效，loading的动态，蒸汽的喷射，灯笼的摇摆，老电影的效果。。。慢着，微信没办法直接转发，还得做个右上角的指示动画，每个地方都要求细致，导入AE中，继续啪啪啪。
动图展示：
看完之后是不是觉得很神奇昵?没错，就是这样简单的一个H5模板制作好了。
"
