2016年惊艳朋友圈的十大H5，你被几个刷过屏？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

无酱：在这个日新月异的时代，想要立于不败之地，摆脱被淘汰的命运，只有迎头赶上，不断创新。在过去两年的时间内，H5经历了从全民兴起 - 爆发 - 沉淀到再爆发式增长的过程，以层出不穷的新面孔一次又一次展现了惊人的生命力。

2016年即将呼啸而过，让我们抓住今年的尾巴来细数一下这一年那些扭转衰势给我们带来惊艳感受的十大H5，哪些曾经刷过你的屏呢？

往期回顾：《人气超高的HTML5特效排行榜TOP 10（附经典案例）》

注：以下仅代表个人观点，项目按照上线时间顺序排列。

1. 微信：我和微信的故事

查看案例详情：http://www.digitaling.com/projects/20080.html

（该活动已下线）

一句话点评：大数据的暖心运用版“回忆杀”

2016微信公开课PRO版在开年就丢出了一个引爆朋友圈的轻H5，寥寥几页，几乎不需要互动，几条与“我”息息相关的数据统计，就能让用户分享得不亦乐乎。微信虽然不倡导诱导转发，但是这样大数据的暖心运用，恰到好处地唤醒用户记忆，引发情感共鸣，不刷屏才奇怪吧？

2. 豆瓣：我们的精神角落

扫描二维码，立即体验！

一句话点评：戏很足的文青解谜系列H5

坚持11年不打广告的豆瓣终于在今年年初放出了一个超级大招，以“我们的精神角落”为主题推出了一系列海报、品牌宣传片和H5。 H5分为眼、鼻、耳、口、大脑五个章节，从画面到文案再到交互整合了多种表现形式，只为向用户传达一个观点：我内心丰富、生而不凡，这是我的秘密。由内而外散发满满的豆瓣文艺气息，细节处理堪称完美。

3. 宝马：全新BMW M2游刃锋芒间

扫描二维码，立即体验！

一句话点评：狂炫酷拽破屏而出的速度与激情

宝马官方微信先是用一个“该新闻已被BMW快速删除”的标题迅速吸睛无数，再用阅读原文中的H5彻底点燃了用户的速度与激情：一辆BMW M家族全新车型M2从虚拟的新闻内页呼啸而出，在多个平台任性跨越横冲直撞，实现虚拟与现实的无缝切换，视觉冲击应接不暇，声效配合酣畅淋漓。在77分钟内便获得了10万+的阅读量，还得到了各行业意见领袖刷屏式的分享。

4. 侠隐江湖：一个翻滚的H5——只要功夫深 撩妹100分

扫描二维码，立即体验！

一句话点评：翻转手机扭转人生一圆武侠梦的H5

银汉集团为旗下的《侠隐江湖》游戏做了一个名叫《只要功夫深 撩妹100分》的H5，只要通过翻转手机就能即刻扭转人生，从事事无可奈何的“凡人模式”切换为开挂的“大侠模式”，一圆一众为现实所累的现代人的武侠梦。它采用简单好玩的翻转形式和逗趣浮夸的故事情节，向世人传达了“天生武侠，本色江湖”的游戏理念。

5. NEXT IDEA×故宫：大明皇帝除了会唱 Rap，还能有多魔性？

扫描二维码，立即体验！

一句话点评：大明皇帝穿越故宫玩Rap成新晋网红的神邀请函

故宫淘宝的萌版皇帝们早已深入人心，然而万万没想到这次大明皇帝变身rapper席卷朋友圈的H5，却是腾讯与故宫跨界合作举办“Next Idea × 故宫” 腾讯创新大赛的邀请函。该H5将古今多种元素相互穿插，让原本遥远的古人重新焕发生机，充满现代感的幽默演绎，让人眼前一亮，大大刺激了用户的分享欲。短时间内访问量就突破了300W。

6. 361°：我给你画了个动画，看完可别哭啊！

扫描二维码，立即体验！

一句话点评：用自己画的小人去创造属于你的热爱故事

相对于单纯通过点击进行互动，引导用户亲自画出小人去完成一系列动作着实新鲜，这种形式也许不是首创，但也阻挡不了它的刷屏之势。361°从自身品牌调性出发，迎合奥运主题，用画画的方式鼓励用户勇敢面对挑战，在人生这场比赛中赢到最后。H5情节设定完整，动画效果生动可爱，轻松为品牌收获满满好感。

7. 墨迹天气：#天气改变命运#H5，每天都有新改变，每天都能玩一遍

扫描二维码，立即体验！

一句话点评：奥运最强借势H5

今年正逢里约奥运会，墨迹天气以#天气决定命运#为主题，推出了一个在奥运期间每天更新的H5。整整持续了17个日夜，一天一个H5热点追击，原创动画+原创词曲+音乐互动，在奥运会闭幕当天更是放出了《月球运动会》这个大招视频。W将这款行业内领先、人尽皆知的天气App，系统性地实现了从“工具化”到“品牌化”的价值转换，借势时事热点，用一个最平常不过的道理触及人心，从而引发思考。

8. 天猫：尽情尽兴！天猫穿越宇宙向你发来了一封双11邀请函

查看案例详情：http://www.digitaling.com/projects/19272.html

（该活动已下线）

一句话点评：穿越宇宙级的一镜到底沉浸式体验

众所周知，淘宝是出了名的“爱搞事情”，而且逼格没有最高只有更高。这次天猫双11的宣传H5又实现了一次自我超越。H5融入时下最流行的VR技术，用户通过手指轻滑屏幕，就可以感受到由225张素材图精心构建的“一镜到底”的天猫世界。其中不拘泥于形式具有兼容特点的巴洛克式风格与双11“不设限，尽情狂欢”的理念巧妙结合，相得益彰。充满未来感的沉浸式体验让人啧啧称奇，也似乎已远远超出了H5原来的定义。

9. Dopemine：THE SAVE - 活口：不留活口的H5尝试

扫描二维码，立即体验！

一句话点评：交互式密室逃脱微电影H5

相信大家对密室逃脱游戏并不陌生，但融影视、游戏、支付于一体的H5却前所未有。Dopemine借助微信支付及 H5 强大的表现平台，将游戏演给我们看，将电影放给我们玩儿。通过将产品线索与游戏情节融为一体，故事情节环环相扣，用“色彩”引导用户层层深入，最后引导用户支付1元钱来下载“性格色彩APP”以解开谜团。相当于用一个H5完成了一部微电影和一个小游戏的工程量，怎一个酷字了得？

10. TGideas：为什么腾讯动漫选了薛之谦当代言人？

扫描二维码，立即体验！

一句话点评：当薛式搞笑遇上燃情国漫

提到薛之谦，很多人的第一反应就是“段子手”。当薛式段子遇上热血二次元，产生的化学反应真心不小。有段子，有表演，还有剧情的各种反转，薛之谦都完美消化，最终完成了“共同的信仰，由我来守护”的品牌理念的有效传递，不得不说腾讯动漫app代言人选得非常到位。据悉，该 H5 从上线后2小时便获得了百万级的 PV，平均停留时间也达到了 1 分 49 秒，将近故宫 H5（56.8 秒）的两倍啊！

「HTML 5 好文合集」

1. 营销指南丨《不得不看的流行趋势！品牌H5营销完全实战指南》
2. 实战案例丨《亲历者说！火爆的“吴亦凡入伍”HTML5背后有哪些设计故事？》
3. 实战方法丨《腾讯精品文！六大奇招带你优化HTML5移动页面》

原文地址：数英网

【木子设计网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于木子设计网================
"木子设计网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：https://www.muzisucai.com/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/