从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，操作简单，内容精致的H5页面越来越频繁的出现在朋友圈，H5页面几乎已成为所有品牌推广的标配。

目标：2019年国庆节上线，3天制作H5

为了给祖国妈妈庆生，2019年国庆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取随机数
• 用户上传的图片都是带方向标记的，记得转到正确的方向，不然就横着出现了
• 点赞过百就开放源代码～～～

刷爆朋友圈H5总结

• 迎合大家的心情，让大家乐于使用和分享
• 界面使用简单，用户教育成本低
• 设计要针对用户的多种可能性使用，兼容性要做到最佳
• AI人工智能是个好东西，调用API就可以抠图了，发丝都抠好，效果非常不错，速度超快
• 设计好传播路径，图片分享为主的，一定要加二维码

还有什么点子

• 1024程序员节，是不是可以弄个程序员自拍表白，放一点随机土味情话
• 一键旅拍，想去哪拍就去哪拍，背景换成巴厘岛沙滩，土耳其热气球，巴黎铁塔；

• 两个人同框，朋友、女神、明星，全部抠下来，放到一起
• 和动画人物同框，机器猫、阿童木、哪吒
• 证件照换背景色，去掉背景换成白色、蓝色、红色，满足各种证件照需求