如何制作刷爆朋友圈的H5
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，操作简单，内容精致的H5页面越来越频繁的出现在朋友圈，H5页面几乎已成为所有品牌推广的标配。
目标：国庆节上线，3天制作H5
为了给祖国妈妈庆生，国庆3天前，我们决定做个国庆阅兵同框。要求操作简单。上传图片即可。1天设计，1天代码，1天测试修改bug，终于如期上线～
结果：148万人参与
先看一下结果，国庆节 10.1日开始发布朋友圈和微信群，连锁反应，最终148万人参与，67%的流量在70年国庆阅兵当天产生，在中午阅兵过后集中爆发。25岁以上人士占84%，中老年人比较喜爱。流量75%来自图片扫描二维码，15%来自群发链接，6%来自分享给朋友的链接，5%来自朋友圈的分享链接，说明大家还是很乐于分享自己的阅兵同框照片，喜欢群发，众乐乐。每个人平均生成同框照片4.3张。
扫码体验
示例原图：
扫码，可以体验一下：
设计全解析
-
为了增加可玩性，按照电视新闻采访的布局设计。
-
左上角是CCTV1的台标，右上角直播凸显真实性。地点和时间当然是北京，10月1日，星期二，不要弄错了：）
-
黄色大字：今天举行国庆70周年阅兵仪式
-
14套台词，文字也是下了很大功夫：）
现场有来自全国各地的爱国人士
现场观众的激动之情溢于言表
观众脸上只有两个字：骄傲！
现场观众：七十春秋过，江山万里红
现场观众：我们就是中国，中国就是我们
现场观众：当方队走过，我心潮澎湃
现场观众：作为中国人，我骄傲，我自豪
现场观众：我感受到了祖国的蓬勃发展
现场观众：我激动得快哭了，我爱你中国
现场观众：我也要努力，为祖国添砖加瓦
现场观众：祖国给了我无比的自信
现场观众：祖国就像我心中的灯塔
现场观众：我愿把青春和赤诚都献给祖国
现场观众：愿中国成为最强大的国家 -
图片合成分3层，上层为电视框，中间层放去除背景/抠图后的用户上传照片，最下面一层放背景图。上层/中间层，都是PNG半透明图层。
-
17个阅兵背景，来自之前的阅兵仪式。 照片角度要找好，不能是俯拍的，需要正面，或者稍微仰拍。因为大部分人的自拍都是正面或者低角度，很少仰面拍摄。这样合成的效果最好。
-
随机功能，台词搭配背景，14 X 17 = 238个组合，增加可玩性。
-
拍照引导，在用户没上传前放置，作为默认照片，提示内容：横拍的效果可以宽度满屏，不会出现身体边缘切掉的感觉。大笑符合国庆欢乐激动的气氛。多人拍摄有氛围，容易分享。
-
保存图片放置二维码，可以扫描进入
-
分享链接，需要设计链接小图和分享文字
代码重点简析：
- H5页面，无需登录，打开就能使用
- 上传图片，后端调用PicUP.AI 的人像抠图API接口，返回抠图去背景后的人像
- 前端按设计分层后，人像下对齐，并按宽度进行拉伸
- 随机前景和背景，random取随机数