如何制作刷爆朋友圈的H5

从引爆朋友圈的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程序员节,是不是可以弄个程序员自拍表白,放一点随机土味情话
  • 一键旅拍,想去哪拍就去哪拍,背景换成巴厘岛沙滩,土耳其热气球,巴黎铁塔;
一键抠图,人像抠图
  • 两个人同框,朋友、女神、明星,全部抠下来,放到一起
  • 和动画人物同框,机器猫、阿童木、哪吒
  • 证件照换背景色,去掉背景换成白色、蓝色、红色,满足各种证件照需求

发表评论

邮箱地址不会被公开。 必填项已用*标注