2016年10大年度H5盘点|微互动

微互动(wihudong)精选了2016年出现的H5的精彩案例，为大家分享。根据H5的交互方式，我们把所有的H5分成三大类：互动-展示型、游戏型和功能型。

1)互动-展示型H5的内容都是固定的，以画面和文字的展示为主，很少与用户产生互动，或者只有上下左右的滑动那样简单互动；

2)游戏型H5以游戏为主要内容，还可以直接代入自己的头像、昵称等，生成专属的结果；

3)功能型H5能提供类似产品的功能或服务。

互动-展示型

展示型的H5让用户不需要花注意力去互动，从而能够把关注点放在H5的内容上。

在需要传达的内容极为丰富的情况下，展示型的H5的优势在于：可以用视频或自动播放的方式在用户不需要频繁互动下就可以完成观看，达到传播的目的。相反，那些需要翻十几页才能看完的，很多人不会看到最后。这种类型的H5优点是往往视觉效果比较好，缺点是互动性低。

01薛之谦史上最疯狂的广告

腾讯动漫App

案例描述

这款H5中，薛之谦穿越到了二次元世界，进入了腾讯动漫的几个故事，结果发现有的故事竟然要两个男主角在一起，真是槽点满满；还有吃下一块巧克力就能让全世界女生喜欢你的奇葩设定。最后薛之谦从二次元世界中清醒过来的时候，表示愿意守护这个世界。

....

分析

1)这支广告的成功之处主要在于吃透了二次元受众的口味，找对了薛之谦这个代言人。薛之谦幽默搞笑，鬼畜化之后也毫无违和感，气质和二次元群体比较接近。他在微博上的经典台词“我的愿望是——世界和平”带有浓厚的中二气质，非常符合二次元文化的格调；

2)打开H5之后会进入一个真实的薛之谦微博界面，在你滑动阅读的时候突然画面一闪，薛之谦真人居然出现了，会让你感觉非常意外。因为剧情是靠滑动推进的，所以用户学习成本非常低，几乎看到了就知道怎么操作，学习成本低带来的好处就是转化率很好。

3)非常有趣。薛之谦对情节里脑洞大开的地方进行了精彩的演绎，夸张的身体语言收到了非常戏剧性的效果。

评分：★★★★★

02韩寒最新微博：我说的比唱的好

腾讯游戏

案例描述

打开这款H5，我们看见的是韩寒的微博。不过所有的微博配图都被改成了动图，用搞笑的方式呈现出来，比如表现韩寒嘴巴一张一合的样子，被炸弹炸过之后满脸灰黑的样子。配曲采用说+唱的形式。韩寒在旁白中自夸游戏技术很不一般，并邀请其他玩家在游戏里和他比拼。最后以“我说的比唱的好”总结全文。

分析这款H5利用代言人韩寒，通过符合他经历、性格和身份的阐释，巧妙地向玩家发出了公测邀请。韩寒很配这款游戏，这款H5很配韩寒，所以能让受众顺理成章地接受邀请。1)采用微博时间流的形式。微博时间流的浏览方式是我们所熟悉的，把微博的所有配图改成了动图，在熟悉里面加上了一点意外，就收到了强烈的搞笑效果。2)韩寒和这款游戏匹配度很好。用搞笑的方式配合歌词，把韩寒喜欢自黑的性格演绎得淋漓尽致。他本人是资深玩家，而他在各个领域的杰出表现，都符合游戏的气质。3)灵活处理意外情况。比如韩寒没时间唱歌，策划团队就把“我说的比唱的好”这句台词让韩寒念出来，完全符合韩寒自黑的性格，反而因此收到了意外的效果。评分：★★★★☆03出来种太阳，迟早要还的百度钱包市场部案例描述这款H5开头，用户点一下瞄准太阳的弓箭，就播放一段配乐视频。视频采用了把漫画做成动图的形式，画风仿照了80、90后的小学课本，还把太阳的形象和最近很火的emoji结合起来。配曲借用了段子手重新混音的80、90后童年神曲《种太阳》这首歌。这首歌开头吐槽天上的太阳太多，然后提到想把这些讨厌的太阳统统送给朋友，但是无论如何天气还是这么热。最后结尾出现了百度外卖的logo。

分析

这款H5利用代言人韩寒，通过符合他经历、性格和身份的阐释，巧妙地向玩家发出了公测邀请。韩寒很配这款游戏，这款H5很配韩寒，所以能让受众顺理成章地接受邀请。

1)采用微博时间流的形式。微博时间流的浏览方式是我们所熟悉的，把微博的所有配图改成了动图，在熟悉里面加上了一点意外，就收到了强烈的搞笑效果。

2)韩寒和这款游戏匹配度很好。用搞笑的方式配合歌词，把韩寒喜欢自黑的性格演绎得淋漓尽致。他本人是资深玩家，而他在各个领域的杰出表现，都符合游戏的气质。

3)灵活处理意外情况。比如韩寒没时间唱歌，策划团队就把“我说的比唱的好”这句台词让韩寒念出来，完全符合韩寒自黑的性格，反而因此收到了意外的效果。

评分：★★★★☆

03出来种太阳，迟早要还的

百度钱包市场部

案例描述

这款H5开头，用户点一下瞄准太阳的弓箭，就播放一段配乐视频。视频采用了把漫画做成动图的形式，画风仿照了80、90后的小学课本，还把太阳的形象和最近很火的emoji结合起来。配曲借用了段子手重新混音的80、90后童年神曲《种太阳》这首歌。这首歌开头吐槽天上的太阳太多，然后提到想把这些讨厌的太阳统统送给朋友，但是无论如何天气还是这么热。最后结尾出现了百度外卖的logo。

....分析这款H5最大的亮点在于，把人们吐槽的心情和卖点结合得非常好。1)《种太阳》这首歌的remix版本，从今年六、七月份的时候，就开始在网上流传。百度外卖敏锐地从中捕捉到了能加以利用的地方，制作了这款H5。2)从吐槽天气热，到推断人们热天不愿意出门，到推荐人们使用百度外卖，这条叙事逻辑非常流畅自然。3)对流行元素的有效利用。葛优瘫是当季的流行元素。百度外卖针对人们热天不想出门的心理，非常恰当地使用了这个流行元素。复古童年风，也唤醒了小伙伴们暑假在家的记忆。百度外卖越是把“夏天”和“出门”对立起来，就越有可能成功推送自己的服务。评分：★★★★☆04穿越宇宙的邀请函天猫双十一案例描述天猫的双十一H5邀请函，打开之后就看到很多礼物、俊男靓女涌现出来，中间让开一条大道，让用户体验到了从购物节直奔星际、穿越宇宙的快感。这一H5的场景基本左右对称，有大片般的视觉效果，营造了欢快的节日气氛。此外，双十一的商品页面也和场景很好地融合在一起，把广告信息巧妙传递给了观众。

....

分析

这款H5最大的亮点在于，把人们吐槽的心情和卖点结合得非常好。

1)《种太阳》这首歌的remix版本，从今年六、七月份的时候，就开始在网上流传。百度外卖敏锐地从中捕捉到了能加以利用的地方，制作了这款H5。

2)从吐槽天气热，到推断人们热天不愿意出门，到推荐人们使用百度外卖，这条叙事逻辑非常流畅自然。

3)对流行元素的有效利用。葛优瘫是当季的流行元素。百度外卖针对人们热天不想出门的心理，非常恰当地使用了这个流行元素。复古童年风，也唤醒了小伙伴们暑假在家的记忆。百度外卖越是把“夏天”和“出门”对立起来，就越有可能成功推送自己的服务。

评分：★★★★☆

04穿越宇宙的邀请函

天猫双十一

案例描述

天猫的双十一H5邀请函，打开之后就看到很多礼物、俊男靓女涌现出来，中间让开一条大道，让用户体验到了从购物节直奔星际、穿越宇宙的快感。这一H5的场景基本左右对称，有大片般的视觉效果，营造了欢快的节日气氛。此外，双十一的商品页面也和场景很好地融合在一起，把广告信息巧妙传递给了观众。

(图片来源：网络)分析在这款H5炫酷的视觉效果背后，有技术人员辛勤汗水的结晶。1)这款H5实现了一镜到底的视觉效果，在功能方面，这种手法减少用户频繁翻页的痛苦；在审美方面，保证了场景在时间和空间上的连续性，给人气势宏大的感觉。2)虽然这款H5画面复杂，实现了3D效果，但观看却极为流畅，这是因为天猫没有采用传统的H5的制作手法，而是在threejs+webGL的支持下，使用了多种不同的图片格式。3)邀请函采用了当前流行的VR技术，观众可佩戴VR眼镜获得更好的视觉体验。这款H5总共有200多个图层，据说花费超过150万元人民币制作，也确实非常华丽。用这种炫酷的视觉效果，这款H5成功凸显了天猫想要表现的主题：天猫不再是中国的天猫，更是走出国门之后的世界的天猫。评分：★★★★★05和吴秀波对视5秒神州专车案例描述打开H5以后，出现了一个倒计时5秒的视频，期间吴秀波就直愣愣地看着你。5秒结束之后，他说了一句“像您这么有调调的人，应该坐神州专车”，接着说“没坐过？拿去用，我请客”，然后从兜里掏出一张卡。点击这张卡，输入手机号就可以获得一张神州专车的打车券。

(图片来源：网络)

分析

在这款H5炫酷的视觉效果背后，有技术人员辛勤汗水的结晶。

1)这款H5实现了一镜到底的视觉效果，在功能方面，这种手法减少用户频繁翻页的痛苦；在审美方面，保证了场景在时间和空间上的连续性，给人气势宏大的感觉。

2)虽然这款H5画面复杂，实现了3D效果，但观看却极为流畅，这是因为天猫没有采用传统的H5的制作手法，而是在threejs+webGL的支持下，使用了多种不同的图片格式。

3)邀请函采用了当前流行的VR技术，观众可佩戴VR眼镜获得更好的视觉体验。

这款H5总共有200多个图层，据说花费超过150万元人民币制作，也确实非常华丽。用这种炫酷的视觉效果，这款H5成功凸显了天猫想要表现的主题：天猫不再是中国的天猫，更是走出国门之后的世界的天猫。

评分：★★★★★

05

和吴秀波对视5秒

神州专车

案例描述

打开H5以后，出现了一个倒计时5秒的视频，期间吴秀波就直愣愣地看着你。5秒结束之后，他说了一句“像您这么有调调的人，应该坐神州专车”，接着说“没坐过？拿去用，我请客”，然后从兜里掏出一张卡。点击这张卡，输入手机号就可以获得一张神州专车的打车券。

....分析这款H5虽然短小，但是非常精悍，全程无尿点，每个阶段、每句台词都经过了精心的安排。1)在视频开头，采用对视这种新鲜好玩形式，让大家来挑战这一过程。2)随后，借用吴秀波之口，用恭维的方式讨用户喜欢，同时抬高了神州专车的身价。3)最后，用吴秀波发奖的形式来诱惑用户。用户是从吴秀波手中接过这张卡的，因此这使得这张卡上附带了一定的人情内涵，显得比从公司手里取到的卡更加可贵，也就更容易实现转化。4)和很多占用用户很多时间精力的H5相比，这款H5只需要用户和吴秀波对视五秒，时间很短，不花用户什么精力，但体验却非常新鲜，采用了吴秀波发奖这样富有人情味的方式。因此这款H5更容易获得用户转发。评分：★★★★★游戏型游戏型H5的主体部分是一个小游戏。游戏型H5的优点是，容易让用户产生代入感，能够生成针对用户的个性化内容。还有的H5能生成排行榜，让用户相互PK。在用户在攀比和社交中，游戏型H5就能获得更多的流量。06请你用洪荒之力，画一个小人网易案例描述H5开头先是邀请用户画一个小人，接着让用户画绳子和降落伞，帮助小人从女人的胸部逃脱。降落伞缓缓飘进里约各国的朋友圈，此时可以看到和里约奥运会有关的朋友圈内容进行评论、点赞之类，突然，有个人的朋友圈里一只美洲豹活过来了，要追杀小人，这个时候要滑动屏幕帮小人逃离。

....

分析

这款H5虽然短小，但是非常精悍，全程无尿点，每个阶段、每句台词都经过了精心的安排。

1)在视频开头，采用对视这种新鲜好玩形式，让大家来挑战这一过程。

2)随后，借用吴秀波之口，用恭维的方式讨用户喜欢，同时抬高了神州专车的身价。

3)最后，用吴秀波发奖的形式来诱惑用户。用户是从吴秀波手中接过这张卡的，因此这使得这张卡上附带了一定的人情内涵，显得比从公司手里取到的卡更加可贵，也就更容易实现转化。

4)和很多占用用户很多时间精力的H5相比，这款H5只需要用户和吴秀波对视五秒，时间很短，不花用户什么精力，但体验却非常新鲜，采用了吴秀波发奖这样富有人情味的方式。因此这款H5更容易获得用户转发。

评分：★★★★★

游戏型

游戏型H5的主体部分是一个小游戏。

游戏型H5的优点是，容易让用户产生代入感，能够生成针对用户的个性化内容。还有的H5能生成排行榜，让用户相互PK。在用户在攀比和社交中，游戏型H5就能获得更多的流量。

06请你用洪荒之力，画一个小人

网易

案例描述

H5开头先是邀请用户画一个小人，接着让用户画绳子和降落伞，帮助小人从女人的胸部逃脱。降落伞缓缓飘进里约各国的朋友圈，此时可以看到和里约奥运会有关的朋友圈内容进行评论、点赞之类，突然，有个人的朋友圈里一只美洲豹活过来了，要追杀小人，这个时候要滑动屏幕帮小人逃离。

....分析比起其他H5游戏，这款游戏的创意之处就在于这个我们亲手绘制的小人。1)我们关心小人的命运，是因为这个小人是我们亲手画的，是属于我们的。也就是说网易为用户打造了一个性化独一无二的场景，这时候我们就会感到这个个性化的场景中包含了我们难以割舍的元素。2)有些时候，由于H5时间太长，用户没看完就关闭了。但是网易的这款H5能把用户的注意力牢牢绑定，直至完成信息的传递。这是因为我们的情绪和“利益”都捆绑在了这个我们亲手勾勒的小人身上。3)但是这款H5也有一些缺点。最重要的问题是，想要推广的品牌和广告没有有机结合起来，因此用户玩完游戏之后记不住网易哒哒。另外，H5的画面也不够精美。评分：★★★★☆07请选出你的2016关键词网易新闻&网易哒哒案例描述打开H5，界面是日历风格。长按屏幕下方的“长按换词”按钮，可以抽出不同的签，代表着2016一年运气的一个词，例如“扯”、“胖”、“初心”等。选中这个词之后，就进入了另一个界面，可以和这个词进行有趣的互动，象征在来年获得好运。比如在“咸鱼”这个词的界面上，用手指戳动“咸鱼”就可以让它翻身。

....

分析

比起其他H5游戏，这款游戏的创意之处就在于这个我们亲手绘制的小人。

1)我们关心小人的命运，是因为这个小人是我们亲手画的，是属于我们的。也就是说网易为用户打造了一个性化独一无二的场景，这时候我们就会感到这个个性化的场景中包含了我们难以割舍的元素。

2)有些时候，由于H5时间太长，用户没看完就关闭了。但是网易的这款H5能把用户的注意力牢牢绑定，直至完成信息的传递。这是因为我们的情绪和“利益”都捆绑在了这个我们亲手勾勒的小人身上。

3)但是这款H5也有一些缺点。最重要的问题是，想要推广的品牌和广告没有有机结合起来，因此用户玩完游戏之后记不住网易哒哒。另外，H5的画面也不够精美。

评分：★★★★☆

07请选出你的2016关键词

网易新闻&网易哒哒

案例描述

打开H5，界面是日历风格。长按屏幕下方的“长按换词”按钮，可以抽出不同的签，代表着2016一年运气的一个词，例如“扯”、“胖”、“初心”等。选中这个词之后，就进入了另一个界面，可以和这个词进行有趣的互动，象征在来年获得好运。比如在“咸鱼”这个词的界面上，用手指戳动“咸鱼”就可以让它翻身。

....分析1)这款H5的本质是去年很火的新年签。新年签由于有一定的随机成分，仿佛象征着运气，在新年之际很受大众欢迎。2)相比去年的新年签，做出了很大的改进。不是抽取静态的签，而是滑动页面，和抽到的字进行有趣的互动，玩法非常多样化。3)一些无节操的页面，比如“扯”这个字里面坐了一个裸男，用户要扯掉他最后的蔽体之物，这种风格贴近网络人群的爱好。4)页面加载非常流畅，体量轻而效果好。评分：★★★★★功能型能够实现广告推广之外的另一个明确目的的H5就是功能型H5。功能型H5的优点是制作简单，相对App可以在比较短的时间内上线。不过，制作者一定要能把握住用户的需求，并为用户的需求提供好的解决方案，才能让这类H5流行起来。08假结婚证生成器爱分享团队案例描述假结婚证生成器的功能非常简单，在界面里输入任何人的姓名，即可生成以假乱真的结婚证，并分享到朋友圈。这是一款在情人节上线的应景H5。

....

分析

1)这款H5的本质是去年很火的新年签。新年签由于有一定的随机成分，仿佛象征着运气，在新年之际很受大众欢迎。

2)相比去年的新年签，做出了很大的改进。不是抽取静态的签，而是滑动页面，和抽到的字进行有趣的互动，玩法非常多样化。

3)一些无节操的页面，比如“扯”这个字里面坐了一个裸男，用户要扯掉他最后的蔽体之物，这种风格贴近网络人群的爱好。

4)页面加载非常流畅，体量轻而效果好。

评分：★★★★★

功能型

能够实现广告推广之外的另一个明确目的的H5就是功能型H5。

功能型H5的优点是制作简单，相对App可以在比较短的时间内上线。不过，制作者一定要能把握住用户的需求，并为用户的需求提供好的解决方案，才能让这类H5流行起来。

08假结婚证生成器

爱分享团队

案例描述

假结婚证生成器的功能非常简单，在界面里输入任何人的姓名，即可生成以假乱真的结婚证，并分享到朋友圈。这是一款在情人节上线的应景H5。

(图片来源：网络)分析这款H5的效果非常好。仅情人节当天就生成了超过1000万张结婚证书，公众号账号涨粉超过100万，微博搜索量400万，排名热搜榜第二名。取得如此优异的成果，是因为抓准了用户需求。1)情人节那天原本是情侣秀恩爱，虐单身狗的日子，可单身狗招谁惹谁了，他们非要在家啃狗粮吗？这些单身人士产生了强烈的怒气，为发泄和传播创造了契机；2)情人节的时候，情侣们无非就是吃个饭、逛个街、送个花、看个电影，而这款H5的用户可以直接晒出结婚证，保证他们在惊吓之余还得默默送上祝福和点赞，整蛊效果非常好；3)解决用户需求的办法够简单够直接。用户不需要花很多时间精力，一秒上传照片分享朋友圈，就可以达到发泄情绪的目的。因此，这款H5后来出现了很多模仿者，例如晒豪宅、晒豪车、名人合影之类的。评分：★★★★☆09我的小学生证件照天天p图案例描述用户只要把自己的照片上传到这款H5中，就可以生成自己的童年照片。网上还产生了一些恶搞的玩法，比如把男演员的照片转换成女童的照片，再比如把古代皇帝的肖像转换成现代男童的照片。这是一款在儿童节上线的应景H5。

(图片来源：网络)

分析

这款H5的效果非常好。仅情人节当天就生成了超过1000万张结婚证书，公众号账号涨粉超过100万，微博搜索量400万，排名热搜榜第二名。取得如此优异的成果，是因为抓准了用户需求。

1)情人节那天原本是情侣秀恩爱，虐单身狗的日子，可单身狗招谁惹谁了，他们非要在家啃狗粮吗？这些单身人士产生了强烈的怒气，为发泄和传播创造了契机；

2)情人节的时候，情侣们无非就是吃个饭、逛个街、送个花、看个电影，而这款H5的用户可以直接晒出结婚证，保证他们在惊吓之余还得默默送上祝福和点赞，整蛊效果非常好；

3)解决用户需求的办法够简单够直接。用户不需要花很多时间精力，一秒上传照片分享朋友圈，就可以达到发泄情绪的目的。因此，这款H5后来出现了很多模仿者，例如晒豪宅、晒豪车、名人合影之类的。

评分：★★★★☆

09我的小学生证件照

天天p图

案例描述

用户只要把自己的照片上传到这款H5中，就可以生成自己的童年照片。网上还产生了一些恶搞的玩法，比如把男演员的照片转换成女童的照片，再比如把古代皇帝的肖像转换成现代男童的照片。这是一款在儿童节上线的应景H5。

(图片来源：网络)分析这款H5抓住了80、90后逐渐长大，开始怀念童年的心理。1)谁都喜欢过节，然而看着自己一天天老去，离无忧无虑的儿童节越来越远，很多人难免感到非常遗憾。这款H5抓住了这种心理，在儿童节当天把你“还原”成儿童，这样80、90后和儿童节又重新产生了关系，这满足了他们爱热闹、装嫩的需求。2)在使用H5的过程中，出现了很多创造性的玩法。比如生成名人童年照之后让其他小伙伴们去猜；比如恶搞名人照片之后吐槽调侃；再比如故意卖关子让其他人猜这是谁的童年照。这些玩法都很容易产生话题点，制造自来水的效果。评分：★★★★☆10查莆田系医院凤凰资讯案例描述这款H5的功能也很简单，选择你所在的城市，就可以看到这座城市中所有莆田系医院的列表。这款H5产生的背景是：滑膜肉瘤患者魏则西因在百度查到的莆田系医院中耽误了病情，于今年4月去世。这件事曝光之后，引起了大众针对莆田系医院和百度的愤慨。

(图片来源：网络)

分析

这款H5抓住了80、90后逐渐长大，开始怀念童年的心理。

1)谁都喜欢过节，然而看着自己一天天老去，离无忧无虑的儿童节越来越远，很多人难免感到非常遗憾。这款H5抓住了这种心理，在儿童节当天把你“还原”成儿童，这样80、90后和儿童节又重新产生了关系，这满足了他们爱热闹、装嫩的需求。

2)在使用H5的过程中，出现了很多创造性的玩法。比如生成名人童年照之后让其他小伙伴们去猜；比如恶搞名人照片之后吐槽调侃；再比如故意卖关子让其他人猜这是谁的童年照。这些玩法都很容易产生话题点，制造自来水的效果。

评分：★★★★☆

10查莆田系医院

凤凰资讯

案例描述

这款H5的功能也很简单，选择你所在的城市，就可以看到这座城市中所有莆田系医院的列表。这款H5产生的背景是：滑膜肉瘤患者魏则西因在百度查到的莆田系医院中耽误了病情，于今年4月去世。这件事曝光之后，引起了大众针对莆田系医院和百度的愤慨。

....

分析

1)以非常简单的方式，解决了大众最急切的需求，省去了全国人民在一份长长的名单里找所在城市医院的麻烦。

2)莆田系医院这件事不仅和年轻人有关，和中老年人更有关系，所有年龄层的人都会很关心。这款H5的操作界面非常简单，即使是手机技术一般的中老年人也能很快上手。

3)有凤凰新闻的权威保证，和健康有关，又覆盖了全国每个省份的人民，因此有很好的传播量。

评分：★★★★☆

总结

今年H5呈现出如下趋势

1)越来越多的H5用视频呈现出来，减少了上下左右滑动或者点击，让用户可以偷懒。

2)在设计和开发上投入的更多。例如，天猫的技术非常先进，几百个人物和图层，却能将大小控制在5M以内。

3)制作成本都比较高。我们看到的不错的案例基本上都是大公司制作，花费的巨额费用进行推广才达到效果的，小公司的非常少。

4)场景很重要，要结合场景里的需求，才能完成转化和传播。

5)有名人代言的往往能取得不错的效果；找对名人很关键。

我们可以从这些H5中学到如下几条经验

1)找准场景，把握用户的情绪。今年的几款功能型H5都是因为找准了场景，吃透了用户在特定场景下产生的情绪才流行起来的。

2)精准定位风格。像一些展示型H5，找对了自己的代言人，也设计出了非常适合他们性格的H5。

3)要给用户一个或有趣、或有用的解决方式。

4)要让用户可以偷懒。用户精力有限，会比较青睐可以省时省力的展示型H5。

5)互动型H5和游戏型H5，要用巧妙的设计让用户有更强的参与感。