有什么经典的微信HTML5营销案例推荐吗？-H5教程

回复内容：

谢邀。列举几个大家都知道的吧

1）第一当属《感觉萌萌哒~围住神经猫》的H5游戏。
突然刷爆朋友圈，短短几天创下了上亿访问量的同时，可谓带动了整个H5游戏的再度火热。

2）万达的微信书《万达微信书》。
只用了一天时间，《万达工作法》的阅读量已破百万

3）告诉全世界，《我的深圳下雪了》
邓祖云及其团队制作，1小时实现28万的浏览量，一夜之间火遍全球160多个国家和地区。

4）《愚公移山》h5游戏
这是一个挣到钱的H5案例，月流水突破100万大关。

此外还有：

2048:在4x4的棋盘上,用方向键选择数字移动的方向,遇到相同的数字就会合并,每次移动会增加一个数字,合并出2048就算通关.简单粗暴,被誉为"根本停不下来的游戏".

全民找祖名:去年8月份,柯震东、房祖名相继跳入毒坑,html5的技术男们也不甘落后,推出了"全民寻找房祖名".

看你有多色:"看你有多色"是一款基于html5技术的小游戏,上线仅仅一天单日注册用户就突破千万.

支付宝"十年账单":2014年12月8日,支付宝发布十年对账单,网购族可以查询十年来个人通过支付宝支付的金额.一时之间,微信朋友圈就立马被各种"触目惊心"、"不忍直视"的截图占据了.

分享一个收集优秀H5的3G站：社交移动风云榜 07.11
分享一些好玩的H5游戏：白鹭微游戏 1.员工招聘类：
东华禅寺招聘启事

2.活动宣传：
（1）AKQA创意营销公司的圣诞节推出的梦幻水晶球
这个页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，体验相当好~~

（2）大众点评：60秒，帮你摆脱朋友圈

（3）特斯拉中国试驾宣传

3.游戏类：
（1）杜蕾斯一夜N次郎
引入积分和排名机制，利用用户攀比心理，激励用户不断挑战游戏和主动传播

（2）圣诞老人拯救计划
（3）围住神经猫

4.测试类：
最强大脑训练营
将品牌内容植入题目中，以抽奖为利益驱动驱使用户完成测试，在测试过程中将产品内涵传递给用户

5.故事引入类
（1）《首草先生的情书》
首草是一个高端养生草药品牌

（2）LEVI’S新年优惠活动

W公司为大众点评做的很多我都很喜欢，所以有时间单独列一个专题丢上来好了

（内容来自网络，如侵删~）把H5这个概念弄得人人提起来都当是一门高新技术，这就是很成功的推销…不过始作俑者是谁呢… w公司几乎所有案例 1）陈坤打电话的那个H5，「行走的力量」
2）互联网加班排行榜那个也不错，「拉勾」
3）武媚娘剪胸的那个H5也过目难忘，「网易」
4）《全民COS武媚娘》的H5互动页，「天天P图」
5）618那个我变了？我没变，「京东」
6）其实我们15个也还挺好的，「腾讯视频」
7）不几道还记不记得姜文电影推广系列的《九步之遥》H5，「大众点评」
8）我们之前就一个字，依然「大众点评」
9）。。。

以上排列不按大小，全靠想起来的速度小时代那个网页
锁屏+微信对话+朋友圈

感觉做的还不错。

还有就是一些经典的大公司案例了
杜蕾斯之类的

再有就是H5游戏
围住神经猫

网上有总结的帖子
直接搜14/15年X大微信HTML5案例都能找到转一篇前段时间刷爆互联网及投资圈的一个活动，至今见过最好的 HTML5 与产品结合的案例，没有之一。原帖在这里：我是如何让 10000 人掏钱为 Ping++ 代言的

＝＝＝＝＝＝＝＝＝＝＝＝＝＝

很多营销活动在外人看来是充满策划的，而我们自己心里清楚，或许它只是一次不小心的意外。7 月份，超过 10000 人自发付钱为 Ping++ 代言，超过 500 万人在朋友圈看到了 Ping++，而这一切都不过源于一个 HTML5 的 Demo。

一个无心插柳的铺垫

2015 年 6 月 8 日，Ping++ 开始支持 HTML5，为了在线下活动中宣传这一功能，我们做了一个 HTML5 的 Demo 应用。任何人都可以扫码付 1 分钱，来体验 Ping++ 支付。

2015 年 6 月底，我们为 Demo 增加了一个累加计数，数字的累加对应交易笔数，这样做的最初目的，只是为了单纯记录每场活动的体验人数，评估活动效果。

2015 年 7 月初，为了展示目前为止体验 Ping++ 支付的总人数，我们把转发朋友圈的分享语改成了「我是第 *** 个为 Ping++ 支付代言的人」。

一场有心栽花的活动

2015 年 7 月 16 日下午 16:24，Ping++ CEO 金亦冶在朋友圈分享了「Ping++ 支付」，有了之前活动的累积，此时，他是第 719 个代言人。

朋友圈里陆续有些好友也开始分享，大家一方面表示支付体验很流畅，另一方面很想刷出自己期待的那个数字，比如希望是第 1111 个为 Ping++ 代言的人。截至晚上 20:00，已经有 1000 多人为我们代言。

当越来越多的人截图告诉我们他们的朋友圈开始被 Ping++ 刷屏的时候，我们意识到这可能是一个很好的营销机会，只是问题来了：如何能够鼓励大家参与？

引起传播的主要因素是分享到朋友圈后代言的那个数字，于是我们在 HTML5 中添加了几个规则：凡是分享出来后是 100 的倍数、1024 的倍数、或者任何他觉得可以谐音成特殊含义的数字， Ping++ 都愿意赠送一份礼物。

如果说前 2 个规则让大家开始像着了魔一样的付钱来凑成 100 的倍数，那最后一个谐音数字就把这场活动完全变成了一个游戏。我印象最深刻的是第 5482 个代言人，他截图找我们要礼物，我们问这个数字有什么创意，他说：我是爸啊（5482）。

到 7 月 19 日，为 Ping++ 代言的总人数超过 10000 人。

一个事后诸葛的回顾

从最初的一个为了演示产品的 Demo，到最后变成了一场 10000 多人参与的营销刷屏事件，很多东西的确是事先无法估计的。但我们任然愿意事后诸葛地分析一下这次营销事件，并看看它是如何满足病毒传播的黄金三点的：UGC（用户生成内容），差异化，顶层传播。

1. UGC （用户生成内容）。所有的「我是第 *** 个为 Ping++ 支付代言的人」的宣传语里，每一个人的数字都不一样，所以说明这个链接是个人自己产生的。而且只有分享出来才能看到自己的数字，所以也间接鼓励了大家分享传播的意愿。

2. 差异化。一般的传播都是付钱才推广的，像微信群里经常发生的红包求转发一样。但在这次 Demo 活动里，大家是需要付钱（虽然只有一分钱）才可以为 Ping++ 代言的。这是一个非常不一样的体验，差异化就这样出现了。

3.顶层传播。由于最早开始转发的人都是从 Ping++ CEO 的朋友圈看到的，他们中大多数人又都是创业圈和投资圈的，属于有一定影响力的人群。社交属性里越是来自于社交中心的信息越容易持续传播，从而产生病毒效应。

而从这个 HTML5 Demo 本身来看，它也在很多细节上也为这次传播起到了非常关键的作用：

1. 一目了然的 HTML5 首页，你打开的这个 HTML5 页面是 Ping++ 支付，它让你七行代码接入支付。并且在「体验 Ping++ 支付」按钮上做了呼吸灯效果的设计，让你非常有好奇心进入下一步。

2. 进入到订单页面时，页面只有商品和金额，我们的诉求很简单，只是希望你能体验下而已，所以我们把金额只设成了一分钱。

3. 支付的过程一定要流畅，所以我们没有做页面跳转，所有的渠道以一种柔和的方式从页面底部滑上来，这里，就是 Ping++ 集成的你熟悉的所有渠道。

4. 为了让支付完成后带来最大限度客户转化，我们根据 IP 地址来显示不同地域的 BD 负责人微信二维码。只希望让用户感知到，整个体验背后，我们的团队会随时出现为你提供服务。

5. 我们相信每个人都不愿意自己分享到朋友圈的文字都是无趣的，所以我们把分享语都变得有使命感且有趣。大家用代言人的身份向朋友保证，Ping++ 是一个好产品。

如果说这次活动我们做了什么真正值得自己骄傲的，那就是将支付过程做的顺畅柔和，才会有第 1 个，第 100 个，第 10000 个用户自费为我们代言。而这也是我们写下这篇文章的初衷：让大家看到，支付就应该是这样，只要需要支付，随时随地都可以，就像大厦接入电力一样简单、方便和温暖。

正好以前做过3期介绍H5案例的微信公号文章，当时介绍了大概30个，现在关注公号的话还可以看到这些案例。
下面是我认为还不错的案例：

1，一封来自1947年的明信片——潘婷
这是很早的一个H5案例，由一封穿越时空的老明信片说起，诉说着品牌的历史，传达着时光的韵味。早起的H5代表之一，没有现在繁复的特效，仅在用心的讲故事，让用户在故事中感受品牌诉求，给后来的制作者无限启发。

2，分享快乐128年——可口可乐
这也是一个给后来者带来很多启发的案例。用类似简笔画的线性体及详实的数字勾勒出可口可乐每一个标志性事件，让用户随着花卷的展开与可口可乐一起贯穿历史，见证荣耀。略显童趣的风格也证实着可口可乐永远在分享快乐。

3，爸爸我想你了——大众点评
“对了，上一次你和老爸合影是多久了？”由这个问题开始，文案紧扣“父爱”主题，摒弃传统的鸡汤煽情，选择用父亲和自己的生肖，冲洗出你们的父子合影。即宣传了电影《失孤》，又可以一键团购，可谓达到一石二鸟的效果。

4，你妈逼你结婚了吗——指尖兰州
及时抓住流行热点，文案又句句直戳痛点，难以让用户对分享说“不”。明亮的黄色和经典的漫画形象，处处体现了青春的叛逆及对“逼婚”的不耐。与众屌丝关注热点结合的非常紧密，看后让人感同身受。

5，广告人你的明天在哪里——百度
以“一分钟看懂广告大咖的营销秘籍”为噱头，以火柴人形象贯穿始末，十分抓人眼球。案例从拆掉墙壁开始，就给人一种小游戏的感觉，然后一改以往纵向滑屏的作法，开创性的采用横向向左滑屏，带来更多新意。

6，进取之路与你同行——奥迪
滑屏、连线、拖拽、点击。。。各种不同的手势应用，不再单一的向上推动页面切换，结合实际，让体验感更强。启动、油门、加速……互动变得更有趣更吸引。内容+互动=产品诉求，将用户代入到近乎真实的体验。

7，从此看尽中国人的情与利——微信
巧妙的创意元素加上细节的刻画，带用户全面领略RMB的独到风光。由细节发起，在火热的抢红包活动中的横空出世，重新审视红包背后的人际关系，礼尚往来等传统习俗。创意、设计、文案均属上乘，如果文案再精炼一些就更好了。

8，新年活出趣—— Levi‘s
通过对比一系列小时候过年的快乐场景与现在过年的『无奈』写照，以引发年轻人的共鸣。“亲身”讲述的故事驱动了用户的回忆之情。互动浏览结束后，参与者还有机会获赠Levi’s精心准备的新年好礼。 “小海洋·我的深圳下雪了”
在那些写给这座城市的文案里，我印象很深的还有蒲石的两句。

一句，人在深圳，心在听海。

一句，这座城市不是我的故乡，但有我的主场。

在这个H5的最后，小海洋的创作团队说这是献给深圳的第一份新年礼物。

这份新年礼物，轻轻地，就撩动了那些独在异乡为异客的心扉。

“kindle·爱上读来读往”

Kindle这个H5洞察到了那些忠于阅读的人最常有的一个场景：因为某本书里的某一句话，神思良久。

有一组调查数据说，中国人年均读书0.7本。

与韩国人的人均7本，日本的40本，俄罗斯的55本相比，中国人的阅读量少得可怜。

其实大可不必杞人忧天，因为阅读，不是一件别人能唤醒的事，是一件自我觉醒的事。

而自我觉醒，交给时间好了。

“首草先生的情书”

在这个H5里，首草没有选择呈现过多的互动技巧，只是静静地用大段文案和黑白影像向你诉说一段男人的心路。

他追忆往昔，又追想来日，字里行间，都是真心爱过的话。

你可以试着一字一句抄录这个H5的文案，有种很奇妙的体验。

就像坐在田野里，那些蛙鸣和钟声，在身边，又像在天边。

“阿里巴巴·明星电商影响力盘点”

其实，真正的娱乐精神，背后隐藏的都是一颗严肃专业的心。

就好比写这样的文案，你得善于转换身份，切换自己的代入角色。

时而扮演八卦狗仔，时而装成鲜肉花痴，时而表演萌系星人，时而闯入二次元空间，还得让自己看上去是一个CP爱好者，那些亚文化的词，随手拈来……

反正一句话，你得脑洞大开，开出一片脑浆花来。

圣诞老人拯救计划

Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。

自从神经猫疯狂地转发后，H5就受到了众多营销人的关注，从此H5也被更多人所知晓，并且市面上不断涌现出各种各样的H5，有些则被广泛地转发与传播，而另外一些却只能无声无息地静默了，虽然大家在研发阶段都付出了不少的投入。说到底低成本、高回报的h5营销案例才是好案例！

可以参考体验以下由各个品牌与联众互动合作开发的h5案例：

滑屏类（康佳腾讯之夜）