2016年度H5行业最全报告(含数据分析)

原创文章 分类: 经验/观点 版权:
8923 99 82 6
2017-01-10
51.9
首页推荐

Image title


2016年是H5占领国内互联网广告的一年,令人捧腹大笑的腾讯《穿越故宫来看你》、狂拽炫酷的天猫《穿越宇宙的邀请函》、亮瞎双眼的《该新闻已被BMW快速删除》、在朋友圈大肆糊弄人的《我和宋仲基结婚照》……数都数不过来。

 

为了挖掘这些H5的精华所在,探寻2017年创作趋势,这次我们看了5000多个优质H5,历时一月呕心沥血整理出以下数据报告,包含五个方面:


(1)行业十大年度创意H5(代码开发)

(2)行业四大H5数据分析

(3)十大年度创意H5(工具制作)

(4)H5制作工具三大H5数据分析

(5)年度H5创作团队与设计师


本文涉及庞大的数据分析,字数较多,建议阅读时间五分钟

没这耐心又想看?

特地准备了一个精简版的H5,先扫描下方入口一睹为快吧!

文章最后还附有PDF版的网盘下载链接哦!


Image title


来看看你的大作或者名字有没有上榜?


一、行业十大年度创意H5

 

因为2016年H5广告太火了,以至于10个行业年度大作实在耳熟能详,在这里就不一一罗列了。如果你猜不出是哪10个广告,可以跳到最后下载完整报告。


Image title


二、行业四大H5数据分析


根据哇呸网2016年收录的近3000个H5行业案例,可以观察到国内H5广告的整体应用情况。


由于这些案例主要通过开发实现,仅包含少量工具案例,分析结果适用于开发者案例。


[注]:数据将用于H5行业专项研究,不用于任何商业用途,第三方媒体或平台引用时请明确注明出处(iH5.cn & 华南师范大学 & 哇呸网)。

该部分数据需要人工查看每个案例,逐一进行内容类型、交互类型的标记,耗时极长,在此特别感谢华南师范大学“五次方”研究小组、iH5.cn的支持。


1、行业H5产出量概览

互联网行业最热衷H5传播,汽车交通行业H5崛起,电子商务也不甘落后。


Image title


2016年H5产出量最多的行业是电子/通信/媒体/科技行业,其中占据最大份额的是互联网公司。互联网平台和产品可以在广告中直接实现落地,而H5以其跨平台、开发简单、推广成本低、传播效果好的优势,吸引腾讯网易百度等各大互联网公司纷纷砸钱。

 

汽车行业出品的H5广告,一般用于新款汽车的上市或发布会。作为“高奢”行业的汽车行业,面向人群相对高端一些,受众购买力也强,因此产出的H5广告质量也很高。


电子商务相关行业,也属于H5广告业的中军力量,他们一般会在各种各样的购物节中利用H5发起活动,通过发放大量优惠券、或者发红包等促销行为来鼓励用户进行购买。


2、H5应用场景分布

一半被活动宣传承包,另一半被品牌宣传和产品宣传平分。


Image title


如上图所示,将近一半的H5都是用于活动宣传。

 

相比静态广告(如传单、海报、地铁横幅等),H5具有强互动、可监测、跨平台、易传播等优势,非常有利于社交传播。

 

广告的重要目标就是增加品牌曝光度,而利用H5这种新的广告形式,可以让产品或品牌增加曝光的同时,通过优惠券的便捷领取与使用直接促进消费,对于企业提高知名度、开展促销活动增进转化极其便利。


3、H5内容分布

小游戏独领风骚,鸡汤长期占领朋友圈。


Image title


你绝对猜不到每4个H5里,就有1个是游戏!

 

简易操作、有趣好玩、排名设定、二次传播,让小游戏成为众多品牌的法宝。这些H5一般只做目的是促销活动、新品发布,本质上采取的是游戏化营销战略。

 

“游戏化”(Gamification)指的是以乐趣为核心,重新组合游戏元素——及时反馈、设置目标、内在激励、协同合作。比如以僵尸为题材的健身应用《Zombies, Run!(有僵尸,快跑!)》,就把枯燥的跑步过程变为躲僵尸游戏,多任务多模式的玩法深受用户好评。

 

位列其次的鸡汤类H5打的是情感牌,不一定讲什么让人受用的大道理,却凭借细腻、走心等特点,引起用户情感共鸣,长期占领微信朋友圈、微博、微信公众号等渠道。

 

紧接着的是展示类H5,大多采取简单的翻页效果,属于H5入门必备,品牌们几乎人手一个,所以份额挤到第三。

 

除此之外,对热门IP、节日进行借势,也是常用的玩法。


4、H5互动类型分布

动效应用占领半壁江山,全屏视频高爆发。


Image title


动效是H5最基础的交互,占据一半的份额不足为奇。

 

不过,全屏视频能够占领五分之一的份额,实在是值得注意的现象。究其原因,2016年的爆款H5——同样采用短视频形式的故宫、宝马、薛之谦H5是“罪魁祸首”。全屏视频能让用户全神贯注,不受打扰,引起很多品牌的纷纷效法。

 

也有品牌热衷于研究数据的应用与上传,如游戏、测试、照片合成等,交互性强,又能打造沉浸式体验,颇受用户喜爱。

 

此外就是各种新兴的交互技术,比如全景、VR、3D、跨屏互动、重力感应等等,特别是全景和VR打造体验式H5,是2016年兴起的新趋势。


三、iH5十大年度创意H5

[注]:综合评分=各项指数得分之和/5


Image title

>>《你,有什么资格睡觉》


“买不起房子、养不起车子,论睡觉,你,够格吗?”

 

这或许是今年公益广告中创意最独特的H5了,内容看似在嘲讽,实质是以测试题敦促大家关心睡眠健康,普及罕见病“发作性睡病”,真是意料之外。

 

15年滴滴和搜狗地图联合出的《春节回家有多难》测试H5风靡朋友圈,迸发出了很多现象级的爆款测试H5。在2016年看来,测试类H5依然受欢迎,其中有两类特别容易形成刷屏现象:


①方言测试类

以地域特色测试为主,如《湖南方言神级大考》《海南话四级考试》

 

②反常理类

以不合常理、奇葩的内容为主,如《中国式英文高考摸底测试》


如果有意发起病毒营销,可以一试。  



Image title

>>《你知道另一个世界,还有一个你吗?》


你猜这个H5动画里面有多少个GIF?一个都没有!里面小人行走、弯腰等动作全是设计师小牙用时间轴一帧一帧勾勒出来的。

 

同时H5巧妙地用黑白色画面代表了不文明现象,用彩色画面代表文明现象,处处在唤醒观者心里的公益意识。这类H5,确实是原创者小牙的拿手好戏,他的典型作品都以动画为主,比如:


(1)《一只单身狗的圣诞愿望》

(2)《顺丰同城“即刻送”》

(3)《哈森鞋柜》

(4)《寻》


 

能把动画玩得这么溜的人,真不多!



Image title

>>《致胜之道:致炫勇士冒险战记》


这个H5一眼看过去,还以为是打开了美国队长系列的漫画!


据原创者悟脚叔叔称,为了参考美漫的风格,特地查阅了很多相关的书,从剧情、画风拟定到成品落地,大概耗时一个月。

 

即使顶着商业压力,H5还是完美结合了品牌价值和漫画剧情故事,极易产生沉溺效应。这种带剧情的长篇幅漫画H5广告,似乎是史无前例的。


从悟脚叔叔的主页上可以看到,2016年他出品了不少优质作品,其中很多都是匠心级的H5,比如:


(1)《匠心传承》

(2)《画出属于你的夏日座驾》

(3)《颖宝主题馆》



Image title

>>《快到ELLOWORLD怀里来》


总有一些招聘广告看起来比商业广告做得还用心,这个H5就是。

 

因为是自家公司的招聘广告,不存在商业压力,所以艾洛互动的设计师将创意发挥得淋漓尽致,甚至是把其公司的全部成员形象画到了H5上。别出心裁的插画,搭配上用心的交互细节,给观者带来了别致的广告体验,也给公司招来了更多牛X的应聘者。

 

说到这类H5,不得不提网龙华渔K12多媒体一部的《一战封神,等你来约!》,甚至大肆秀文案功底RAP起来了,还能不能好好做招聘?

 

别小瞧招聘H5,分分钟比商业广告还牛。



Image title

>>《7.19 魅族 MX6 这样玩陌陌真的好吗》


眼看VIVO、华为涉足社交圈相继在微信投放广告,魅族终于行动了,与之合作的不是微信,而是陌陌。

 

“给你一条路,这条路不是套路~”,这支视频H5还原陌陌原生界面,有美女、恶作剧、套路、歌手。在铺开渠道后,取得的宣传效果还不赖,不禁感叹这跨界合作相见恨晚。

 

2016年视频类H5佳作许多,最典型的套路就是设幌子还原朋友圈、微信推文等原生界面,弱化交互强调内容。


除此之外,颜面APP的《今年我最喜欢的H5广告》尝试用了动静结合的视频脚本,让人眼前一亮,这或许是创意的又一分岔口。



Image title

>>《海信点球大战丨赢欧洲杯门票》


海信上线的这个点球H5游戏,可以说是玩物理引擎的经典之作:滑动屏幕控制方向踢球,球会有一定的重力,被左/右边吹来的水平风影响,当球碰到守门员时还会做出物体碰撞的弹开动作..


完全是手机上的高仿真物理世界!除了用物理世界这种相对高级的,2016年还诞生过很多轻型的H5小游戏——


①摇手机

——《摇摆!摇摆!老司机又有新姿势!》

②照片合成

——《「我和宋仲基结婚照」在线生成器》

③吃豆人

——《拯救传统 | 从未想过腊八节还能这么玩!》

④重力感应

——《百事·夺罐就现在》


还有砸金蛋、拼图、小球迷宫等,也是较为受欢迎的轻型H5游戏。



Image title

>>《嗨少祖传小故事(三)》


其实在这个H5前,早有两则竖屏“前传”,可能因为这属于为公众号导流的作品,不存在较大的商业压力,所以原创者大胆转型玩起横屏。

 

玩横屏是需要勇气的,首先和手机设置有关,也有点挑战用户习惯。2016年腾讯就玩了好几次横屏,比如:《你和95后隔了多少条沟?》、《放开那个姑娘,让我来!》、《北上广故事》...传播较好的,则有滴滴的《童年阴影故事》。

 

但横屏制造的美感也是竖屏难以取代的,比如悟脚叔叔TM的《匠心传承》就给大家秀了一把横屏美学,“用不一样的视角看一样的故事”,在横屏上完美地展示出东方的工匠精神。



Image title

>>《来一斤母爱》


“母爱无微不至、无以为报

母爱恩重如山

可又有几个人真的知道母爱的重量?

快拿母亲手机一起扫描二维码

揭晓母爱的重量... ”

 

当你看完这段文字,拿母亲的手机扫描二维码时,会惊奇发现两个屏幕拼在一起,会合成一个完整的画面。用双屏互动来传达母爱,这广告的鸡汤,我干了!

 

双屏互动可以复用在多种场景,比如投票/点赞的双屏实时数据对接显示,可以模仿出当时肯德基的“谁能代表肯德基”活动投票H5:手机扫描PC的二维码后,投票会统一汇集到PC屏幕上。


Image title



Image title

>>《吉利博越上市媒体邀请函》


企业会议、活动、产品推广等场景,大多需用到邀请函,但用传统的纸质邀请函有三个弊端——派发周期长、形式老套、传播力度小,用户转化率有一定瓶颈,难以突破。

如果是邀请函H5,恰是用户转化的一剂救命良药——

(1)跨平台性,在最短时间内影响更多目标用户
(2)交互性,让邀请函间接“活过来”


那么,用H5来辅助甚至取代传统邀请函真的有效果吗?不一定,但从现在能看到的现象来说,大多有效。吉利博越上市媒体邀请函H5,用上iH5.cn的录音、时间轴等高级交互功能,PV突破3.6W;

前面上榜多次的原创者悟脚叔叔为全球INS大会启幕做的《全球INS大会,这会有意思!》H5,用30秒的动画为INS大会预热交出了满意的答卷。

同类型的H5还有——


(1)《真男即将收官,歌手黄子韬要来啦》

(2)《“WE’’ART100》    




Image title

>>《2017 一起澎湃》


还记得苹果推出的i7发布会快闪视频吗?在亮瞎眼的同时,冒出了不少H5广告者效仿,一时涌出不少快闪H5。


澎湃新闻的这个H5也属于快闪,用此形式做年终盘点,足够新颖。

 

当然其他新闻媒体也没落下年终盘点任务,像看看新闻、浙江新闻、国际在线等新闻媒体纷纷推出年终报告H5。每家媒体的形式都不一样——


(1)看看新闻搬出最近网易的画中画梗

(2)浙江新闻走严谨路来个全球盘点

(3)国际在线做出了1024px宽度的PC端网站


不禁给各大新闻媒体人点个赞!


四、iH5三大H5数据分析


根据iH5.cn首页收录的2016年发布的3000多个H5行业案例,可以观察到国内H5广告工具化领域的整体应用情况。


由于这些案例都使用iH5提供可视化编辑器实现,分析结果适用于专业工具生产案例,具备借鉴价值。


1、PV分布

万级以上作品3000+,2个破千万。


Image title


2016年,iH5平台PV破万的作品达3300多个,90%是PV10万以下, 其中1万级的作品达1600多个。

 

H5的PV想破10万是个难关,破百万的是少数,破千万的更是个中龙凤。去年破千万的案例中,一个是春节期间吉利汽车做的让用户吐槽春节遭遇的H5,一个是中国电信办的送流量活动。

 

两个案例的高流量推广,前者和他们投放的渠道本身自带流量有关,后者主要是因为能让用户得到实质性的优惠。


2、时间分布

9月10月迎来H5创作高峰。


Image title


纵观2016一年,9月和10月是H5创作的高峰,这跟俗语“金九银十”有关。

 

9月10月是秋收时节,大家手头充裕(还没受到双十一的洗礼),但也因为秋冬交接,家庭消费(伙食、衣物等)也容易增加。不管是商业、房地产、汽车业还是金融行业,都是销售旺季,传播需求的增加导致H5数量上升。

 

其次,刚好有中秋、国庆、教师节、重阳节等重要节日(外加黄金周),品牌们也会纷纷蹭热点。另外加上是秋招高峰期,招聘类H5也急剧增加。


3、应用场景分布

平台推广和品牌推广争霸。


Image title


企业开展活动推广,一般会申请到较高的经费,可以找三方广告团队进行创作;另外,活动的准备时间比较长,常常也可以“耗”着等开发。

 

所以与行业H5普遍用于活动推广的情况不一样,iH5平台反而有60% 的H5应用于平台推广和品牌推广,原因有二:

 

(1)iH5的特点是交互功能丰富(比如720°全景重力感应、多帧交互动画、画小人等)

(2)制作快捷。对于很多企业来说正是预算不高、又要保质的平台或品牌推广上的绝佳选择。

 

除了大量的互动创意公司外,iH5的主要客户还有国内的各大知名媒体,有一定数量的H5用于媒体宣传、资讯传播,因此在比例上会产生较大差异。


五、年度创作团队与设计师


出品优质H5的有两大巨头,一是广告公司/团队,二是媒体。

 

2016年新兴的广告公司很多都做H5甚至变成专职做H5,这是倒退两年很难想象的场面。由于市场需求的井喷,现在很多做广告的团队都在名字上加上互动二字,实际上一般互动的入口就是指H5。

 

而媒体行业由于逐步向网络媒体进行转型,很多都把H5当作一种新的载体,创作出很多集知识、体验于一身的优质案例。


1、行业年度广告公司

TGideas当红,W享誉度最高。


Image title

[注]:综合指数=精品指数×5+产量指数


根据数英网精选H5项目入选情况,统计项目质量与数量后进行排名,产量与精品数量齐高的是TGideas,紧跟其后的包括WMY、W、VML、LPI等广告公司。

 

TGideas(腾讯游戏官方设计团队)是腾讯御用的内部创意团队,出产H5多采用短视频的方式,设计上走的是动漫画风,制作过《穿越故宫来看你》、《薛之谦史上最疯狂的广告》等口碑与热度双高的作品。但需要注意的是,TGideas主要负责创意策划,具体实现上有时也会和国内的UID Works、Treedom等团队合作。

 

此外,从行业影响力来看,W享誉最高——2016 One Show 中华创意节年度代理公司、2016中国4A金印奖营销组全场大奖、2016中国广告长城奖文案奖金奖等等,他们年初推出的《我的精神角落》更是里程碑式的杰作。

 

从交互创新来看,VML用两套全景(720度全景加重力感应、一镜到底)让无数人惊艳,成为行业广告致敬的标杆。

 

而从互动传播的角度来看,创作出《百度种太阳》的WMY、《活口》的Dopemine则交出了让很多广告公司望尘莫及的答卷。


2、iH5年度创作团队(工具制作)


(1)互动团队篇


Image title


根据入选iH5首页的作品情况,统计数量与质量后进行排名,产出优质H5最多的是互动创意团队是道里创意、腾讯智慧,紧跟其后的包括智讯互动、万有引力、矩阵互动、weihelp和前锦网络等广告创意或文化传播公司。

 

道里创意(全名“深圳道里全生态链创意平台”),专注于旅游度假及商业地产品牌建设的平台公司,擅长事件营销,曾多次斩获长城奖、时报华文、艾菲奖、金属标等大奖。道里创意出品的H5广告以走心闻名,在创作上一直探索创新的形式。

 

腾讯智慧,腾讯全平台营销的创意团队,在2016年充分利用H5强互动、新视觉、获取便捷、易于传播等特点,通过官方网站、公众号(腾讯智慧、企业营销三分钟)、会议等渠道,发布了超过30期对外或对内的营销报告。在2016年9月举行的第九届腾讯智慧峰会上,他们还开创式地用H5颁布电子书《2016腾讯智慧赢销白皮书》,属于利用H5优化企业工作流的典型。

 

此外,从行业影响力来看,艾洛互动因为它的HTML5游戏平台ElloGame,在行业享誉度较高。

 

从作品影响力来看,万有引力互动曾经打造出PV超过500万的病毒传播案例《如果可以,让我们一起回家》,成为社交广告争相效仿的典型。

 

从交互形式来看,weihelp、小漾互动、itrax、盈策文化传播等团队比较敢于采取新的互动方法提高广告新意。


(2)媒体篇


Image title


根据入选iH5首页的作品收录情况,统计数量与质量后进行排名,产出优质H5最多的是媒体是看看新闻,紧跟其后的包括中国互联网新闻中心、交汇点新闻、澎湃新闻、中国日报网、南方报业等媒体。

 

看看新闻,隶属东方卫视和上海广播电视台(SMG),是今日头条媒体榜TOP 10的常客。H5创作团队以高质、高效著名,2016年紧跟东京审判、神州十一号登天、唐山大地震40周年、上海迪士尼开园等新闻热点,设计出两个百万级传播的H5。期间还利用H5推出“终极问答”,为口碑超高的纪录片《人间世》预热。

 

此外,作品影响力很高的还有今日头条、澎湃新闻,在平台影响力的帮助下,今日头条发布一个邀请函就有150万的点击量,澎湃的年终报告《2017一起澎湃》也有近40万的流量成就。

 

行业影响力较高的有浙江新闻、澎湃和新京报,其中浙江新闻凭借《小菜年画动起来》、《“东方之星”12个日日夜夜》荣获第37届世界最佳新闻设计大赛两项铜奖。

 

从交互形式来看,新京报、中国日报、南方报业、荆楚网、21世纪经济报道等媒体比较敢于采取新的互动方法提高广告新意。


3、iH5年度设计师排行


Image title


根据入选iH5首页的作品情况,统计数量与质量后进行排名,产出优质H5最多的是独立设计师是悟脚叔叔,紧跟其后的包括造物者(又名“小牙”)、江.txt、海贼王、wingz等创作者。

 

悟脚叔叔,一名产量和优品率惊人的80后设计师,接手一个H5广告价格1万5起步。因为他插画设计、互动创作了得,作品观赏度强、视觉冲击力高,加上他工作勤奋,在H5广告兴起的这两三年里已经与丰田、滴滴快车、QQ音乐、海尔、阿斯顿·马丁等知名企业合作过。

 

此外,造物者由于精于设计、交互、开发三个领域,也是平台的热门设计师。

 

从交互复杂程度来看,江.txt、海贼王、矛与盾、大蛇设计的H5互动形式相对丰富。

 

从设计来看,wingz、JIXIANG、谢东胜的作品具有较强的个人风格。


完整PDF版报告网盘下载地址:http://pan.baidu.com/s/1miz42hU(iH5.cn提供)




回顾2016,虽然对于H5广告来说,仍存在手机机型适配、流畅度等短期内不可解决的问题,但HTML5行业形势仍一片大好。


过去两年里总有人在高呼“H5广告会死等言论”,呼声甚至跟“4A会死”持平,但从2016年腾讯、淘宝、网易等互联网巨头持续产出的优质H5广告来看,似乎是给这些“会死论者”最完美的无声重拳。


最新小程序被推上了风口,H5也一同成为了大家争论的焦点。有人甚至说小程序跟H5是互斥关系,恰好相反,小程序的导流只能靠搜索或者扫描二维码,导流的重任自然而然还得回归到H5广告身上,你说这还互斥吗?


“电灯被发明后,蜡烛仍没死,反而在停电时,照得更亮了,H5广告也是如此。”


期待2017年HTML5行业给我们带来的惊喜。


2017.01.09

完。


数据收集、分析与排版: 种子 &  尼姑拉丝赵四 & Tianxx

数据可视化:阿瓜

封面图设计:猴猴

特别鸣谢:华南师范大学研究团队“五次方”小组 、iH5.cn的大力支持



尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,转载注明UI中国。

1422粉丝/7关注

原创小生
腾讯真假朋友质检H5,全案教程来啦!!腾讯爸爸的H5告诉你,他们都是假朋友!

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,转载注明UI中国。

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by © 2008-2017 UI.CN