澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

你该知道的一些事儿,聊聊年度最热门的那些H

H5推广:你该知道的一些事儿

2017/03/11 · HTML5 · 2 评论 · HTML5

原文出处: 携程设计委员会   

一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

=

相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上升,而且,在所有渠道预算中移动技术的投入增长最快,远远高于其他渠道的增长。

本文的亮点是结合了今年最热的H5案例,且附上微信号供扫描体验,腾讯ISUX将微信案例分门别类,通过它们深入浅出谈谈设计思路与方法。

1. H5已死?

经过几年H5的混战,大家对H5的感觉越来越习以为常,曾经名噪一时的套路当下也难故伎重演。于是“H5已死”的论调一时间甚嚣尘上。

如今到了2017年,H5究竟死不死?在这里先和大家分享一份2017年初H5在线创作平台MAKA发布的《2016年度H5数据报告》[1]。

报告中指出,2016年带商业转化功能的H5从2015年的15%左右攀升至45.5%,翻了三倍之多;2015年的H5以纯内容展示为主,通过H5的趣味性传播带来品牌曝光,而2016年的H5正从单一的展示传播转变为更实际的商业用途。

在H5商业转化方面,最常用功能是报名表单(15.6%)、地图功能(4.3%)、接力功能(2.7%)、投票功能(1.1%)、抽奖功能(0.6%)。

澳门新浦京娱乐场网站 1

同时,在MAKA上,H5平均页面浏览量1208,高于去年的954,同比增26.6%。这个数据和微信30%月活跃用户增长速度相近似。
从以上数据来看,“H5已死”的论调可能还为时过早。

澳门新浦京娱乐场网站 2

你该知道的一些事儿,聊聊年度最热门的那些Html5案例分析。企业服务

前段时间,美团点评餐饮平台总裁王慧文在一次内部讲话中阐述了对于TOB业务的看法,他认为,当市场红利枯竭,依靠市场红利驱动发展的中国企业在未来的日子里,将会如同美国企业一样,寻求更多技术上的改革,尝试新工具,新方案的改革。ToB服务就有可能成为互联网回暖的方向。

H5从某个层面来说就是一种企业服务。它作为互联网广告的生力军,企业用户已经能够越来越青睐H5了,H5在商业价值方面依旧可以持续挖掘。

MAKA的PC端用户以企业用户为主,针对企业用户为主的H5产品服务是依旧未来MAKA和其他H5在线制作工具发展和努力的主要方向。

澳门新浦京娱乐场网站 3

澳门新浦京娱乐场网站 4

上图出自网友整理的《2016年度H5最全报告》(下面简称《H5》),下图出自MAKA发布的《2016年度H5数据报告》(简称《MAKA》)。

从上面可以看出无论是《H5》还是《MAKA》,都表明除了互联网和新闻媒体行业外,传统行业在H5的使用意愿也越来越强烈,其中汽车行业占据了头名,说明一向比较依赖线下营销和电视广告的汽车企业已经开始把更多的目光转向了互联网广告。比较《H5》和《MAKA》,我们还可以发现,MAKA在金融用户上有不错的占比。随着大数据和云计算的持续发展,很多人预测互联网金融会成为未来IT发展的重要方向。通过这些对比,我的理解是MAKA在产品掌控方向走在了一条正确的方向上。

对于使用H5的企业用户来说,针对商业价值转化的服务是他们考虑的首要因素。我们从使用场景、内容制作、展示推广、数据统计几个方面进行分析。

移动营销已是大势所趋。

从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。H5,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨。

2. 2016:H5的活法

既然H5还没死,那么现在的H5的传播数据到底怎样呢?我们继续看MAKA的这份报告。

  1. H5已死?

使用场景

澳门新浦京娱乐场网站 5

澳门新浦京娱乐场网站 6

从《H5》、《MAKA》可以看出,H5多用于活动宣传、产品和品牌推广上。这与H5产品价值定位的初衷契合。与传统的传单、纸质媒介相比,它具有互动性强的优势,与电视广告相比,它又有轻便的长处。

H5突然火了

功能与目标

1- 受众地域分布

从数据来看,受众多数来自一线城市,北上广深四个城市是H5访问的主要来源地,这与H5想要接触的目标人群是一致的。其中北京遥遥领先,重庆、成都紧随北上广深。

澳门新浦京娱乐场网站 7

经过几年H5的混战,大家对H5的感觉越来越习以为常,曾经名噪一时的套路当下也难故伎重演。于是“H5已死”的论调一时间甚嚣尘上。

内容制作与获取

(1)内容是一款H5制作产品的内核,对于企业和具有一定设计功底的用户来说,编辑功能是他们比较在意的模块,针对编辑的功能开发是H5产品应该加大力度的方面。

澳门新浦京娱乐场网站 8

截自https://zhuanlan.zhihu.com/p/25007797

可以看出,MAKA还有一段路要走。

(2)随着短视频的异军突起,全景、VR、3D、跨屏互动、重力感应等技术的兴起,除了H5的动画特效这个基本功能外,产品内容和形式的拓宽是MAKA需要考虑的方向,这不仅是保持产品竞争力和延续生命周期的方法,也是未来MAKA产品转型的一根杆杠。

通过微信和朋友圈的快速发展,H5靠着无需下载、即点即用的属性迅速上位,一跃变成炙手可热的小鲜肉。

首先从功能与设计目标来看, H5专题页主要有以下4大类型:

2- H5访问时间

用户访问高峰集中在午休11:00-14:00和晚上20:00-23:00,与微信公众号的阅读时间分布曲线相近似。具体的推广时间需要结合具体场景,而H5发布的最佳时机由此可见一斑。

澳门新浦京娱乐场网站 9

如今到了2017年,H5究竟死不死?在这里先和大家分享一份2017年初H5在线创作平台MAKA发布的《2016年度H5数据报告》[1]。

展示推广

H5制作完成后进行展示推广是用户实现产品价值的重要一环,也是MAKA产品变现的重要途径。

澳门新浦京娱乐场网站 10

我们可以看到,各大H5产品都置入了一些常用的实用功能来帮助用户推广自己的品牌。

澳门新浦京娱乐场网站 11

MAKA虽然在推广功能上与其他产品相比,有自己的不足,但是针对自身产品的使用场景分析而制定的功能却堪称优秀。比如它的表单,全面多样,深受欢迎,以及针对邀请函的地图功能和各大平台出类拔萃的投票功能等都展现了MAKA的竞争力。

那么,H5是什么?

一、活动运营型

3- H5渠道排行

从MAKA平台H5的阅读来源分析,59.6%的用户通过朋友圈进入H5,与2015年相比下降了6个百分点,这个转变可能与微信限制诱导分享有关。此消彼长,从微信公众号浏览量增加7.9%,公众号来源逐渐成为成为一次传播的主要战场。

澳门新浦京娱乐场网站 12

报告中指出,2016年带商业转化功能的H5从2015年的15%左右攀升至45.5%,翻了三倍之多;2015年的H5以纯内容展示为主,通过H5的趣味性传播带来品牌曝光,而2016年的H5正从单一的展示传播转变为更实际的商业用途。

数据统计

对于企业用户来说,数据是进行运营策略制定的重要依据,对于MAKA这样的产品来说,用户数据同样是进行精准投放,分析需求的法宝。

澳门新浦京娱乐场网站 13

MAKA的数据统计相对全面,与易企秀相比,欠缺的是对用户信息的收集,可以在加强引导用户登录的同时对用户信息进行采集,或者尝试利用算法向用户推荐内容。


H5,是HTML5的简称,它就是一种高级网页技术。

为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。

4- H5阅读页数分析

通过对访问量最高的1000个H5分析,发现高访问量的H5页数多集中在6-10页,其中9页最多,占比高达21.0%。用户向来是非常挑剔的,太过复杂或者异常的操作会导致用户流失。早在2015年就有分析指出[2],H5层级越深流失率也越大。既要保证传播的内容,也要减少用户流失,6-10页的H5是比较合适的。

澳门新浦京娱乐场网站 14

在H5商业转化方面,最常用功能是报名表单(15.6%)、地图功能(4.3%)、接力功能(2.7%)、投票功能(1.1%)、抽奖功能(0.6%)。

个人用户

MAKA在企业服务上是一款相对成熟的产品了,而在个人用户上还可以继续拓宽自己的渠道。移动端是个人用户的主要聚集地。私以为,如果一款产品想永久地保持其生命力,就必须要抓住时机,经历转型,工具类产品可以尝试向平台类产品或者社区类产品转变。移动互联网的人口红利时代虽然已渐渐远去,但是好的产品不会离去,移动端依旧是流量进入和获取用户的重要渠道。

(1)从各大平台的数据来看,微信朋友圈和公众号依旧是H5传播的最有力渠道。微信作为一款极为伟大的产品,自有其伟大之处。而在如今根植于微信的朋友圈和公众号大行其道的时候,同为内容型产品(从某个层面来说)的MAKA又怎么能放弃这块土壤?

(2)内容为王。在产品设计上,MAKA移动端足够优秀,也可以吸引很多用户。

当我们在朋友圈看到一些逗人发笑,趣味无穷的H5时总是会感到心情舒畅,对于产品就会有一种亲切感。趣味性是MAKA在移动端可以适当加强的部分。《H5》揭示,H5类型的小游戏简单有趣,在内容百分比上占据主要位置,甚至比鸡汤型的H5还要高出不少。对企业用户来说,小游戏还是品牌推广的重要法宝。短视频亦如此。

(3)对于个人用户来说,除了内容,是否免费也是他们考虑是否使用一款产品的要素。我不否定MAKA在移动端大量采用付费模板,但是可以在优先级方面稍微突出免费板块,引导用户创作和分享H5,这样对用户来说显得更加友好。

(4)MAKA是否可以增加社区,或者增加一些用户奖励制度?

产品新人,以上都是我的片面之见,如有错误,敬请包涵。MAKA是我个人比较喜爱的产品,我期待它未来能够迈向伟大!

只不过大家普遍接受的那个网页技术版本是HTML4,而这个版本是在1997年发布的。相比H4,H5有更多的交互和功能,最大的优点之一是在移动设备上支持多媒体。

大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配以幽默的动画与音效,恨不得每个选项都点一遍。围绕选择这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择,选到最后一题引出大众点评选座看电影,一键直达App购票页面。即使明知是软文也忍不住带着矮油不错,这个页面有点diao噢的心情点击了分享。

5- 最受欢迎的H5形式

H5小游戏曾在朋友圈风靡一时。而2016年刷屏的H5小游戏就没有那么多了,这与微信对诱导分享H5严控有直接关系。1000个高访问量的H5中,以故事营销为主题的H5作品最受用户亲睐,其中包括品牌故事、人生哲学等鸡汤软文的形式展现。内容仍是王道,好的内容更容易被用户接受。

澳门新浦京娱乐场网站 15

澳门新浦京娱乐场网站 16

还是没听懂?

澳门新浦京娱乐场网站 17

3. 运营目标与受众需求

在设计一个H5之前,首先要明确的是我们的运营目标和受众需求。运营目标会依据最终目的有所不同,针对的受众也有可能因为运营目标不同而发生变化。成功的运营应当是通过满足受众的某种需求,最终实现运营目的。过多倾向于用户,会导致PV上升而CV低迷;过多倾向于运营推广而忽略受众需求,会失去流量最终也达不到目标。

澳门新浦京娱乐场网站 18

举一个反例,曾一度刷爆朋友圈的著名H5《吴亦凡要入伍》,其通过视频展示的方式很有创意,吴亦凡的帅气形象也深得很多粉丝的心。然而这真的是一支成功的H5吗?如果没有特别注意,很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外,H5的宣传目标“全民突击”游戏名只出现在了结束页的左上角,以及吴亦凡视频的口头描述中。虽然满足了受众(粉丝们)欣赏偶像的需求,可是宣传推广“全民突击”的运营需求却没有真正完成。

澳门新浦京娱乐场网站 19

长按下方二维码打开H5

澳门新浦京娱乐场网站 20

总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

 

同时,在MAKA上,H5平均页面浏览量1208,高于去年的954,同比增26.6%。这个数据和微信30%月活跃用户增长速度相近似。

这么说吧,我们平时看到那些邀请函、幻灯片、小游戏……都是H5网页,它跟我们平时上网看到的那些网页本质上没有任何区别。

二、品牌宣传型

4. 怎样设计一个好的H5?

综合考虑运营目标和受众目标,并结合之前的数据,想要设计一个好的H5需要考虑以下三个方面:

内容创意 诱发传播 优质渠道

从以上数据来看,“H5已死”的论调可能还为时过早。

H5能做什么?

不同于讲究时效性的活动运营页,品牌宣传型H5页面等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。

1-  内容创意

创意。还是创意。一个好的创意可以把运营需求和受众痛点很好的结合在一起,在安慰或激励用户的同时推广了自身活动、产品或品牌。

案例:Next Idea x 故宫-腾讯

这个H5是腾讯创新大赛报名通知。明朝永乐皇帝朱棣从故宫的画中穿越到现在,戴上太阳镜、唱着rap、跳着骑马舞、玩自拍、发朋友圈……想法很有新意,迎合了创新大赛的主题。

澳门新浦京娱乐场网站 21

  1. 2016:H5的活法

这边我大致做了三个分类:

伴随着浪漫的钢琴旋律,《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚,最后引出首草——滋阴圣品,爱妻首选的宣传语。设计上采用回忆般的黑白色调,简单的照片加文字,配以花瓣掉落、水面涟漪等轻动画,渲染出唯美优雅的气氛。首草这个全新的高端养生草药品牌,用H5打出了一副走心的情感牌,让用户记住了半生只为你的爱妻品牌形象。

2- 诱发传播

H5内容的触发点,同时也必须是吸引用户的点。在第一时间引诱用户过来点击很重要,否则再好的H5也不会转化成流量。触发点要有诱惑性,提供用户不得不点的理由。这个诱因可以是奖励,可以是触到痛点的文案,可以是美食美色,可以用以下方式:标题吸睛——利用人们的好奇心;悬念营销——制造悬念,引人猜想;红包利诱——“送送送“、“发发发”,受众从来不会拒绝这一套。同时,为了获得需要的宣传效果或者品牌影响力,需要选择合适的传播机制。例如集赞或接力方式,一人发布可以换来可持续的病毒式传播,可以在短时间内造成病毒式影响。

案例:七夕开撕 最美新娘打PK,Baby倪妮你会支持谁?
这个H5是为宣传电影《新娘大作战》制作的。作为剧中的主角,Baby与倪妮是敌对关系。那么谁会赢得最终的胜利呢?投票权在用户的手里,点击花球,抛给两位女神,她们会争抢花球,谁抢到了花球就为自己的获胜机会增加了一票。想要为自己的女神增加更多花球?那就转发给朋友们,为心爱的女神积攒花球吧。

澳门新浦京娱乐场网站 22

既然H5还没死,那么现在的H5的传播数据到底怎样呢?我们继续看MAKA的这份报告。

1、品牌传播:形式一般为品牌发布、总结报告、公益传递、人事招聘;

澳门新浦京娱乐场网站 23

3- 优质渠道

以上三点确立,需要的就是合适的发放渠道了。尽你所能利用所有能推广H5的渠道。目前比较常用的方式:通过公众号的图文群发推广、微信群推广、线下二维码推广,以及前面提到的KOL转发和投稿等。APP和自身公众号的推广算是比较保守的形式,前提是自身APP有足够大的用户群体或者自身公众号有足够多的活跃受众。否则的话,KOL营销,或者找到热衷于创造与转发内容的种子用户,是最有效的方式。

 

1- 受众地域分布

2、活动推广:形式一般为贺卡邀请、游戏互动、答题有奖;

三、产品介绍型

5. H5交互形式案例

目前就交互形式来说,H5在移动端的交互形式无外乎常见的几种:点击,滑动,擦除,长按等等,还有一些产品本身就是H5制作的,这里略去不谈。按照交互轻重程度的区别,H5推广可以分为以下三大类:

1 – 展示型交互
2 – 引导型交互
3 – 游戏型交互

从数据来看,受众多数来自一线城市,北上广深四个城市是H5访问的主要来源地,这与H5想要接触的目标人群是一致的。其中北京遥遥领先,重庆、成都紧随北上广深。

3、产品展示:形式一般为故事讲述、性能展示。

聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。

1 – 展示型

对展示型的定义,就是非常简单的,打开H5页面或者几个简单的滑动或点击操作就开始展示内容,对交互的要求最少,对内容的要求最高。这种H5一般就一小段H5视频或者动画,要求在开始展示的一瞬间就抓住受众的注意力。

优缺点
优点:易于流畅地呈现一个完整的品牌故事或品牌形象;技术难度较低,交互层级较少。
缺点:对内容的要求非常高,而且必须完整观看完整个展示才能达到传播作用。交互形式简单乏味,容易引起受众流失。
展示型交互的常见的表现形式有以下几种。

澳门新浦京娱乐场网站 24

下面跟大家谈谈这3种类型的H5页面

这一类型的H5页面多见于汽车品牌,LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性,宏观和微观都照顾周全。

1-1 视频式

视频式H5最为简单,打开H5就开始播放视频,一直到H5结束。这种H5对于视频内容的要求极高,能不能达到运营目的,就要看视频给不给力了。
案例:薛之谦史上最疯狂的广告-腾讯动漫

澳门新浦京娱乐场网站 25

 

 

2- H5访问时间

品牌传播型H5——等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在内容上倡导一种态度、一个主旨,在设计上则需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。比如,品牌传播之品牌发布型、品牌传播之总结报告型、品牌传播之公益传递型、品牌传播之人事招募型等

澳门新浦京娱乐场网站 26

1-2 幻灯片式

传统的幻灯片式的播放也属于展示型交互。通过触发切换不同页面内容,一页一页地观看,利用图文和音乐播放来讲故事。比较近的案例如网易云音乐的2016年度总结,通过呈现几组简单数据来记录你与网易云音乐在2016年的过往,既煽情也有趣。
应用场景——由于制作简单,周期短,这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话,不需要任何开发,你只需要要配备一名设计和文案。因此,幻灯片式特别适应定期发布或者结合热点的营销。

幻灯片式的常见玩法可以罗列如下:
(1)话题法,追踪热点事件,发表三观极正或者反弹琵琶的观点;
(2)数据法,用数据说故事,比如每年支付宝微信年末都要做的事情;
(3)科普法,介绍有趣有用或者极其重要却鲜为人知的小知识(想起来我们爸妈的朋友圈了嘛???);
(4)温情法,一个节日的问候,一个对母校的祝福,骗来了数以百万计的转发;
(5)产品介绍法。几页幻灯片切换,介绍一个美好的新产品。
案例:2017春节和家人怎么过?- Airbnb

澳门新浦京娱乐场网站 27

 

用户访问高峰集中在午休11:00-14:00和晚上20:00-23:00,与微信公众号的阅读时间分布曲线相近似。具体的推广时间需要结合具体场景,而H5发布的最佳时机由此可见一斑。

如何设计品牌传播型H5页面

四、总结报告型

1-3 空间展示

空间展示指的是讲移动端屏幕当做一个展示窗口,打开后可以通过简单交互(移动或触控)看到很多信息。常见的形式包括全景交互以及一镜到底。
一镜到底算是2016年下半年炒热的一个概念,但是采用这种形式的并不多,因为一般加载的内容多,技术实现复杂。但是用得好的话效果酷炫,展示内容丰富,造成的传播力也强大。2016年天猫双11一镜到底也属于这种播放式的H5,只需要一步操作,就可以看到一个宇宙,让人赞不绝口。类似的,别的厂也做了炫酷的一镜到底展示。

案例:一镜到底、一刀未剪的大剧发布-优酷
这是一个一镜到底 万花筒得设计。进入页面,动画自动播放,镜头从远慢慢拉近,以一镜到底的形式展现youku网站上收录的电视剧、综艺等各类节目,按住屏幕不滑动时,展现方式会变成万花筒,松开则恢复。最后一页到达YOUKU会员推广页面,点击“拉上伙伴一起酷”分享给小伙伴,也可点击“加入会员”跳转到外部链接。
这个H5在整体设计上丰富艳丽,配合动感的音乐,效果炫酷,震撼人心。

澳门新浦京娱乐场网站 28

 

澳门新浦京娱乐场网站 29

关于内容

自从支付宝的十年账单引发热议后,各大企业的年终总结现也热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告有趣生动了起来。

2 – 引导型

其实引导型和展示型很像,非常注重内容。之所以将其分开,是因为在这里需要强调一下H5中互动的重要性。毕竟大部分受众是很难坚持静静看完一段视频或者动画的(要不然优酷土豆bilibili的存在就没意义了)。H5和视频相对不同的是它可以加入互动。当我们说一个故事的时候,通过有一定引导的交互让受众和故事有一点点互动,会提升受众的参与感,激励受众继续看下去。因此引导式交互更适用于讲故事。要强调的是,在推广用的H5中,默认界面和故事对用户来说都是新的,所以所有的交互都要有一定程度的引导,否则会让用户不小心迷失在界面中。

优缺点:
优点:丰富了用户与H5之间的交互,让用户在阅读过程中始终对故事保持沉浸感。同时安插得好的交互触点可以增强宣传推广作用。
缺点:用户依然是在观看中被动地接受故事,参与感并没有实质的提升。

根据内容形式不同,引导式交互的H5可以细分为以下几种交互方式:

 

3- H5渠道排行

适当借力——寻找共鸣

《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就,视觉设计上采用简洁的扁平风插画,加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果,最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。

2-1 互动视频式

缺乏交互的展示型视频很难长时间吸引注意力,如果是有一定互动性的视频就有意思地多了。这种案例需要精心选择触发时机,配合故事的结构,烘托整个故事的气氛。

案例:首个手机话剧团开张了 – 天猫
这支H5最近很火,一方面它的话剧部分非常魔性,演员很有表现力,视觉冲击感很强,另一方面又结合上恰到好处的交互触点,把控住受众观看的节奏,将“天猫无忧购”这几个字牢牢地印在了人的脑海里。

澳门新浦京娱乐场网站 30

 

 

从MAKA平台H5的阅读来源分析,59.6%的用户通过朋友圈进入H5,与2015年相比下降了6个百分点,这个转变可能与微信限制诱导分享有关。此消彼长,从微信公众号浏览量增加7.9%,公众号来源逐渐成为成为一次传播的主要战场。

热点结合——业务板块完美融合

澳门新浦京娱乐场网站 31

2-2 小场景式

用户在幻灯片切换这种沉闷无聊的交互中坚持不了几页,所以当下的切换往往会采用小场景方式,每一页是一个场景,在当前场景中制造一个有趣的热点,让用户触发热点切换到下一个场景;或者有多个场景可以选择,每一个场景会有一个互动性的小故事。

案例:妈妈再打我一次-京东母亲节
采用回到小时候挨妈妈打,结合小游戏的形式,引起回忆,带来欢乐。先选择妈妈打你的理由,之后,演绎这个场景,之后随机出现四种打击方法:如来神掌、打狗棍、无影脚、召唤术,每种妈妈打你的方式都配着搞笑夸张的动画,打完还问舒不舒服,认不认错~如果认错就进入主题页,妈妈老了,再也打不动你了,母亲节了,你想妈妈了么?如果不认错,就挨次体验各种被虐招式吧~

澳门新浦京娱乐场网站 32

长按下方识别二维码

澳门新浦京娱乐场网站 33

 

 

澳门新浦京娱乐场网站 34

关于视觉

形式为功能服务

2-3 页面探索

设计一个大场景,通过让受众在场景内主动探索来达到运营目的。在探索过程中,受众一边体验着浏览的乐趣,一边接受着H5推广宣传的故事或概念。在探索的最终,受众会被引导到相关的app或者活动页。
案例:杜蕾斯美术馆-杜蕾斯

澳门新浦京娱乐场网站 35

长按下方识别二维码

澳门新浦京娱乐场网站 36

 

 

4- H5阅读页数分析

整体——氛围渲染

在确定了专题页的功能目标之后,接下来就是关键的设计阶段了。如何有的放矢地进行设计,需要考虑到具体的应用场景和传播对象,从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的H5专题页表现形式:

3 – 游戏式交互

游戏型H5相比于展示型和引导型来说,最注重交互。设计一个简单的小游戏,通过有趣的游戏交互来达到吸引受众的目的,可以满足受众获得感官刺激、打发无聊时间或者炫耀自己的目的。当年神经猫之类的游戏忽然间风靡一时,传播魔力之大令人乍舌。
然而H5游戏在朋友圈的推广作用也有限,一方面H5游戏因为操作简单、竞技性强,一度风靡朋友圈,但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。另一方面受制于《微信外部链接内容相关管理规范》[3]对H5游戏的限制,微信中传播的小游戏只能是纯游戏,不能含有诱导式的宣传推广内容,否则活不过半天。
不过好的创意依然不缺乏受众,一款设计良好的小游戏也可以间接的将自己的品牌价值或是活动目标推广给广大受众。在这里列举一些常见的类型。

通过对访问量最高的1000个H5分析,发现高访问量的H5页数多集中在6-10页,其中9页最多,占比高达21.0%。用户向来是非常挑剔的,太过复杂或者异常的操作会导致用户流失。早在2015年就有分析指出[2],H5层级越深流失率也越大。既要保证传播的内容,也要减少用户流失,6-10页的H5是比较合适的。

细节刻画——人物、元素配合

一、简单图文

3-1 图片合成

案例:我的小学生照片 – 天天P图
想要炫耀自我吗?想要体验新奇吗?给你机会。通过一键生成图片,让你秒变小学生。

澳门新浦京娱乐场网站 37

澳门新浦京娱乐场网站 38

举例:

简单图文是早期最典型的H5专题页形式。图的形式千变万化,可以是照片、插画、GIF等。通过翻页等简单的交互操作,起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

3-2 做测试

一般是比较简单的几步问答选择,就给出一个有意思的测试结果。硬广营销的测试已经基本被封杀了,目前更多的是一些带有预测、恶搞、科普或者祝福意义的测试,然后博取关注公众号或下载APP。

案例:没想到你是这样的安全带 – 滴滴出行
你知道多少关于安全带的知识呢?“汽车安全带雏形是哪个国家呢?”“最先使用三点式安全带是哪个汽车厂商?”“安全带的克星是什么”“乘坐出租车不系安全带可能发生什么”“安全带的织带主要组成成分是什么?”这些问题你知道么?通过一系列测试,案例最终将滴滴的安全出行理念传输给受众。

澳门新浦京娱乐场网站 39

5- 最受欢迎的H5形式

品牌传播之品牌发布型

滴滴打车这个案例就是典型的简单图文型H5专题页,用几张照片故事串起了整套页面。视觉简洁有力,采用整屏黑白照片,点缀以滴滴的品牌橙色。每切换一张图片,文字就渐隐浮现,没有其他互动形式,让观众聚焦于内容,通过陌生人之间的真情联系来塑造品牌的正能量形象。

3-3 抽签

案例:2017年,猎鱼达人给你一个嘚瑟的理由 – 腾讯游戏
腾讯猎鱼达人游戏节日推,通过摇一摇抽福签的形式展开,随后对抽到的福签进行解签,可以进行多次摇取,最后可以跳转app store进行游戏下载赢取红包,还可进行分享。

澳门新浦京娱乐场网站 40

H5小游戏曾在朋友圈风靡一时。而2016年刷屏的H5小游戏就没有那么多了,这与微信对诱导分享H5严控有直接关系。1000个高访问量的H5中,以故事营销为主题的H5作品最受用户亲睐,其中包括品牌故事、人生哲学等鸡汤软文的形式展现。内容仍是王道,好的内容更容易被用户接受。

腾讯——生命之下,想象之上

澳门新浦京娱乐场网站 41

3-4 原创/移植小游戏

案例:2017年鸡鸡向上- Sigma
加载进入后,进入首页介绍主题“鸡鸡向上”,随后介绍游戏的玩法进入游戏,点击屏幕可以使小鸡跳动起来,左右晃动手机可以控制小鸡的坠落方向,除了灯笼外里面还有各种小道具,跳到小道具上可以使小鸡变身哦。想要不停向上,那么就来挑战吧。

澳门新浦京娱乐场网站 42
当下H5游戏也有了很多新玩法,例如双屏互动、地理定位、声音识别、面部识别,就不一一详细列举了。。

以上就是2017年关于H5的一些基础知识。挂一漏万说了很多,总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

 

参考资料:
[1]  马东尼. MAKA发布《2016年度H5数据报告》:H5上升趋势明显. .
[2]  一只耳大王. h5产品失败的的常见原因解析. .
[3]  微信外部链接内容相关管理规范. .

2 赞 2 收藏 2 评论

澳门新浦京娱乐场网站 43

澳门新浦京娱乐场网站 44

澳门新浦京娱乐场网站 45

也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻,微信推出了《从此看尽中国人的名与利》这样一个专题页。第一眼就被镇住了,好亲切的RMB~每个页面都是一张人民币风景局部放大图,创作者加入巧妙的创意元素与微动态进行细腻刻画,带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案,在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。

  1. 运营目标与受众需求

活动推广型H5——活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播,行成爆炸式的传播效应。活动推广之贺卡邀请型、活动推广之游戏互动型、活动推广之答题有礼型等

澳门新浦京娱乐场网站 46

在设计一个H5之前,首先要明确的是我们的运营目标和受众需求。运营目标会依据最终目的有所不同,针对的受众也有可能因为运营目标不同而发生变化。成功的运营应当是通过满足受众的某种需求,最终实现运营目的。过多倾向于用户,会导致PV上升而CV低迷;过多倾向于运营推广而忽略受众需求,会失去流量最终也达不到目标。

如何设计活动推广型H5页面?

二、礼物/贺卡/邀请函

澳门新浦京娱乐场网站 47

关于内容

每个人都喜欢收到礼物的感觉,抓住这一心理,品牌推出了各种H5形式的礼物、贺卡、邀请函,通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物,那创意和制作便是重要的加分项。

举一个反例,曾一度刷爆朋友圈的著名H5《吴亦凡要入伍》,其通过视频展示的方式很有创意,吴亦凡的帅气形象也深得很多粉丝的心。然而这真的是一支成功的H5吗?如果没有特别注意,很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外,H5的宣传目标“全民突击”游戏名只出现在了结束页的左上角,以及吴亦凡视频的口头描述中。虽然满足了受众(粉丝们)欣赏偶像的需求,可是宣传推广“全民突击”的运营需求却没有真正完成。

标题党——做个妥妥的标题党,先到碗里来再说

AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机,镜头从水晶球外不断摇晃推近,渐渐走进水晶球的微观世界里。通过手机环顾四周,可以360度欣赏水晶球里的全景,摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友,相信一定会惊艳到对方。这个H5页面使用了重力感应、3D等技术,文字与BGM的使用也十分讲究,给用户带来了完美的互动体验,值得细细品味。

澳门新浦京娱乐场网站 48

参与感——门槛低易参与,内容引发共鸣,利益驱使转发

澳门新浦京娱乐场网站 49

总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

关于视觉

Evernote在过年期间也别出心裁地推出语音贺卡,通过公众号引导用户对其发送一条语音消息,然后把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以Evernote品牌色为主,同时蕴含着一丝优雅的年味,十分讨巧。

  1. 怎样设计一个好的H5?

细节与统一——复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。

澳门新浦京娱乐场网站 50

综合考虑运营目标和受众目标,并结合之前的数据,想要设计一个好的H5需要考虑以下三个方面:

冲击性——最好闪瞎你的钛金狗眼,让用户忍不住带着“矮油不错,这个页面有点diao噢”的心情点击分享

三、问答/评分/测试

内容创意 诱发传播 优质渠道

举例:

问答形式的H5页面也屡见不鲜了,利用用户的求知欲和探索欲,一路选选选,看最后到底是什么成绩。一条清晰的线索是必要的,最后到达的结果页也需要合理不突兀,如果能辅以出彩的视觉和文案,弱化答题的枯燥感那就再好不过了。

1-  内容创意

活动推广之答题有礼型

与本文开头一样也是大众点评的项目,这次是为姜文的电影《一步之遥》做持续推广,让用户为姜文的代表作评分。视觉设计依旧出彩,开脑洞的创意和动画设计令人叫绝(一定要扫一扫体验下!)。延续了怀旧大字报风格,字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。

创意。还是创意。一个好的创意可以把运营需求和受众痛点很好的结合在一起,在安慰或激励用户的同时推广了自身活动、产品或品牌。

途风旅游网:时光倒回9年,你会选择怎样人生?

澳门新浦京娱乐场网站 51

案例:Next Idea x 故宫-腾讯

澳门新浦京娱乐场网站 52

四、游戏

这个H5是腾讯创新大赛报名通知。明朝永乐皇帝朱棣从故宫的画中穿越到现在,戴上太阳镜、唱着rap、跳着骑马舞、玩自拍、发朋友圈……想法很有新意,迎合了创新大赛的主题。

产品展示型H5——聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。比如,产品展示之故事讲述型、产品展示之性能展示型等

从 围住神经猫、看你有多色等单纯小游戏再到杜蕾斯一夜N次郎(即山寨版别踩白块儿)等品牌植入式小游戏,H5游戏因为操作简单、竞技性强,一度风靡朋友圈,但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播,需要在玩法和设计上多下点功夫。

澳门新浦京娱乐场网站 53

如何设计**产品展示型H5页面**?

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

2- 诱发传播

关于内容

澳门新浦京娱乐场网站 54

H5内容的触发点,同时也必须是吸引用户的点。在第一时间引诱用户过来点击很重要,否则再好的H5也不会转化成流量。触发点要有诱惑性,提供用户不得不点的理由。这个诱因可以是奖励,可以是触到痛点的文案,可以是美食美色,可以用以下方式:标题吸睛——利用人们的好奇心;悬念营销——制造悬念,引人猜想;红包利诱——“送送送“、“发发发”,受众从来不会拒绝这一套。同时,为了获得需要的宣传效果或者品牌影响力,需要选择合适的传播机制。例如集赞或接力方式,一人发布可以换来可持续的病毒式传播,可以在短时间内造成病毒式影响。

讲个好故事——引起共鸣

为设计加分的4个要点

案例:七夕开撕 最美新娘打PK,Baby倪妮你会支持谁?

差异化展示——寻找产品个性和调性

一个H5页面设计品质的出众与否,会直接影响其传播效果,甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点:

这个H5是为宣传电影《新娘大作战》制作的。作为剧中的主角,Baby与倪妮是敌对关系。那么谁会赢得最终的胜利呢?投票权在用户的手里,点击花球,抛给两位女神,她们会争抢花球,谁抢到了花球就为自己的获胜机会增加了一票。想要为自己的女神增加更多花球?那就转发给朋友们,为心爱的女神积攒花球吧。

关于视觉

一、细节与统一

澳门新浦京娱乐场网站 55

整体——清晰、简洁

要成就高品质的用户体验,必须考虑到细节与整体的统一性。复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。

3- 优质渠道

细节刻画——产品为主,性能刻画

大众点评姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。从二维码入口到性感的loading页,再到最后分享提示的设计,包括文案措辞和背景音效,无不与整体的戏虐风保持一致,给到用户一个完整统一的互动体验。

以上三点确立,需要的就是合适的发放渠道了。尽你所能利用所有能推广H5的渠道。目前比较常用的方式:通过公众号的图文群发推广、微信群推广、线下二维码推广,以及前面提到的KOL转发和投稿等。APP和自身公众号的推广算是比较保守的形式,前提是自身APP有足够大的用户群体或者自身公众号有足够多的活跃受众。否则的话,KOL营销,或者找到热衷于创造与转发内容的种子用户,是最有效的方式。

举例:

澳门新浦京娱乐场网站 56

  1. H5交互形式案例

产品展示之故事讲述型

尤其关注分享提示这个细节设计,比起一个简单的箭头和一句冷冰冰的点这里分享,用心的细节设计带来的高品质和好感度是显而易见的。再贴几个精彩案例:

目前就交互形式来说,H5在移动端的交互形式无外乎常见的几种:点击,滑动,擦除,长按等等,还有一些产品本身就是H5制作的,这里略去不谈。按照交互轻重程度的区别,H5推广可以分为以下三大类:

一封来自1947年的明信片

澳门新浦京娱乐场网站 57

1 – 展示型交互

澳门新浦京娱乐场网站 58

二、紧跟热点,利用话题效应

2 – 引导型交互

H5页面从形式上和内容上如何设计走入人心?

想要你的H5专题页一夜爆红,第一时间抓住热点并火速上线,借机进行品牌宣传也不失为一条捷径。

3 – 游戏型交互

形式上——

天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆,同时《全民COS武媚娘》的H5互动页也第一时间上线,操作简单易上手,一键上传照片就能立刻完成媚娘妆,与万千媚娘们进行PK,娱乐了大众又推广了产品。

1 – 展示型

1、幻灯片式:适用于频繁、小型的需求。 例如:定期发布的内容,几乎零预算;结合热点的营销,周期极短。

澳门新浦京娱乐场网站 59

对展示型的定义,就是非常简单的,打开H5页面或者几个简单的滑动或点击操作就开始展示内容,对交互的要求最少,对内容的要求最高。这种H5一般就一小段H5视频或者动画,要求在开始展示的一瞬间就抓住受众的注意力。

2、交互式动画:制作周期和成本比较高,需要提前规划。优质的H5大约在两周到4周左右,也有可能更长。适用于例如: 中小型活动/品牌事件的传播;大型活动/品牌事件的传播。

网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页,放下节操用极富想象力的粗旷草图风向广大观众还原了真相。一时间被疯狂转发,网易娱乐也算是顺势自我宣传了一把。

优缺点

3、功能型:轻交互重功能的功能型H5制作周期较短、成本也不高,成功的关键不在于酷炫的交互,而在于用户需求的把握以及后续的运营。适用于例如: 品牌账号的粉丝运营。

澳门新浦京娱乐场网站 60

优点:易于流畅地呈现一个完整的品牌故事或品牌形象;技术难度较低,交互层级较少。

4、H5能在你心中留多久?

三、讲个好故事,引发情感共鸣

缺点:对内容的要求非常高,而且必须完整观看完整个展示才能达到传播作用。交互形式简单乏味,容易引起受众流失。

根据腾讯今年发布的《移动页面用户行为报告》提出的几个数据,可以给到大家一些参考:

不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。

展示型交互的常见的表现形式有以下几种。

H5页面热度一般只能持续两天 ;

LEVIS新年优惠活动专题页以第一人称的口吻,用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比,用手绘风渲染出亲切的怀旧氛围。最后引出这个新年,把压力和束缚打包扔掉,用新鲜的眼光感受生活,一起活出趣的品牌推广slogan,代入感极强的故事无疑是驱动分享的源动力。

1-1 视频式

加载超过5秒就会有74%的用户离开页面;

澳门新浦京娱乐场网站 61

视频式H5最为简单,打开H5就开始播放视频,一直到H5结束。这种H5对于视频内容的要求极高,能不能达到运营目的,就要看视频给不给力了。

中午12点和晚上10点是页面访问的高峰期;

四、合理运用技术,打造流畅的互动体验

案例:薛之谦史上最疯狂的广告-腾讯动漫

用户大部分(89.9%)喜欢上下滑动或右点击,只有10.1%会左点击;

随着技术的发展,如今的HTML5拥有众多出彩的特性,让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。(有兴趣的话可以点击这个网站:

澳门新浦京娱乐场网站 62

层级越深流失越多,在第五页的时候只剩下一半不到(48.2%);

典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑动的手势,而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合,在滑动过程中营造出一种丰富的视差滚动效果,单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。

1-2 幻灯片式

平均分享率12.68%。

澳门新浦京娱乐场网站 63

传统的幻灯片式的播放也属于展示型交互。通过触发切换不同页面内容,一页一页地观看,利用图文和音乐播放来讲故事。比较近的案例如网易云音乐的2016年度总结,通过呈现几组简单数据来记录你与网易云音乐在2016年的过往,既煽情也有趣。

怎样和H5保持热恋关系?

结语

应用场景——由于制作简单,周期短,这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话,不需要任何开发,你只需要要配备一名设计和文案。因此,幻灯片式特别适应定期发布或者结合热点的营销。

内容上——

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放,HTML5的跨平台、低成本、快迭代等优势被进一步凸显,这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说,都将是一个最好的时代。未来必将涌现更多优秀的H5页面,让我们拭目以待。

幻灯片式的常见玩法可以罗列如下:

1、故事化:不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。

话题法,追踪热点事件,发表三观极正或者反弹琵琶的观点;

2、场景化:H5的设置中,融入如写字楼、地铁站这些场景,一是让用户能在参与中,找到熟悉感以更容易的接受里面的信息,二是也是最重要的,场景承载的品牌信息,能在用户过后在某个特定场所里,唤起他们的认知,从而加深用户对品牌的印象。

数据法,用数据说故事,比如每年支付宝微信年末都要做的事情;

3、强互动:加入互动机制,能让用户进一步感知体验H5宣传的品牌产品,提高对产品的购买欲望。

科普法,介绍有趣有用或者极其重要却鲜为人知的小知识(想起来我们爸妈的朋友圈了嘛???);

4、参与感:结合产品本身的特性以及用户的喜好进行参与机制的设置。

温情法,一个节日的问候,一个对母校的祝福,骗来了数以百万计的转发;

5、社交性:要让品牌能传播得更远还需在H5上融入社交性,借助用户的社交关系链传播。社交需求是用户存在社交媒体的核心,通常用户会通过谈资、帮助、比 较、炫耀、窥视.....

产品介绍法。几页幻灯片切换,介绍一个美好的新产品。

与好友维持或促进社交关系。因此,在H5设计中,应融入了这些能让用户分享的动机。

案例:2017春节和家人怎么过?- Airbnb

说了这么多H5页面种类,那么怎样制作H5页面

澳门新浦京娱乐场网站 64

现在制作H5页面其实已经很简单了,不懂技术的也能制作,可以利用在线的H5制作网站,比如应用之星网站。

1-3 空间展示

在制作之前,先要确认一下H5页面的主题目标,你是想制作活动运营型H5页面?还是想制作品牌宣传型H5页面?是想制作产品介绍型H5页面?还是想制作总结报告型H5页面?

空间展示指的是讲移动端屏幕当做一个展示窗口,打开后可以通过简单交互(移动或触控)看到很多信息。常见的形式包括全景交互以及一镜到底。

当确认好主题后,就是准备素材,包括图片,音乐,文案等。当素材准备好后,就可以开始制作H5页面了。

一镜到底算是2016年下半年炒热的一个概念,但是采用这种形式的并不多,因为一般加载的内容多,技术实现复杂。但是用得好的话效果酷炫,展示内容丰富,造成的传播力也强大。2016年天猫双11一镜到底也属于这种播放式的H5,只需要一步操作,就可以看到一个宇宙,让人赞不绝口。类似的,别的厂也做了炫酷的一镜到底展示。

然而一个H5页面设计品质的出众与否,会直接影响其传播效果,甚至影响到用户对品牌形象的认知。

案例:一镜到底、一刀未剪的大剧发布-优酷

在这里总结出以下的设计要点:

这是一个一镜到底 万花筒得设计。进入页面,动画自动播放,镜头从远慢慢拉近,以一镜到底的形式展现youku网站上收录的电视剧、综艺等各类节目,按住屏幕不滑动时,展现方式会变成万花筒,松开则恢复。最后一页到达YOUKU会员推广页面,点击“拉上伙伴一起酷”分享给小伙伴,也可点击“加入会员”跳转到外部链接。

1、紧跟热点,利用话题效应

这个H5在整体设计上丰富艳丽,配合动感的音乐,效果炫酷,震撼人心。

想要你的H5专题页一夜爆红,第一时间抓住热点并火速上线,借机进行品牌宣传也不失为一条捷径。

澳门新浦京娱乐场网站 65

2、讲个好故事,引发情感共鸣

2 – 引导型

不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。

其实引导型和展示型很像,非常注重内容。之所以将其分开,是因为在这里需要强调一下H5中互动的重要性。毕竟大部分受众是很难坚持静静看完一段视频或者动画的(要不然优酷土豆bilibili的存在就没意义了)。H5和视频相对不同的是它可以加入互动。当我们说一个故事的时候,通过有一定引导的交互让受众和故事有一点点互动,会提升受众的参与感,激励受众继续看下去。因此引导式交互更适用于讲故事。要强调的是,在推广用的H5中,默认界面和故事对用户来说都是新的,所以所有的交互都要有一定程度的引导,否则会让用户不小心迷失在界面中。

3、细节与统一

优缺点:

要成就高品质的用户体验,必须考虑到细节与整体的统一性。复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。

优点:丰富了用户与H5之间的交互,让用户在阅读过程中始终对故事保持沉浸感。同时安插得好的交互触点可以增强宣传推广作用。

4、合理运用技术,打造流畅的互动体验

缺点:用户依然是在观看中被动地接受故事,参与感并没有实质的提升。

随着技术的发展,如今的HTML5拥有众多出彩的特性,让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。(有兴趣的话可以点击这个网站 H5 动态效果的展示)。相较于塞入各种不同种类的动效导致页面混乱臃肿,我们更提倡的是合理运用技术 ,用心专注于为用户提供流畅的互动体验。具体的制作教程,请看:最好用的H5制作平台-H5页面制作教程分享。

根据内容形式不同,引导式交互的H5可以细分为以下几种交互方式:

结语

2-1 互动视频式

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放,HTML5的跨平台、低成本、快迭代等优势被进一步凸显,这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说,都将是一个最好的时代。未来必将涌现更多优秀的H5页面,让我们拭目以待。

缺乏交互的展示型视频很难长时间吸引注意力,如果是有一定互动性的视频就有意思地多了。这种案例需要精心选择触发时机,配合故事的结构,烘托整个故事的气氛。

案例:首个手机话剧团开张了 – 天猫

这支H5最近很火,一方面它的话剧部分非常魔性,演员很有表现力,视觉冲击感很强,另一方面又结合上恰到好处的交互触点,把控住受众观看的节奏,将“天猫无忧购”这几个字牢牢地印在了人的脑海里。

澳门新浦京娱乐场网站 66

2-2 小场景式

用户在幻灯片切换这种沉闷无聊的交互中坚持不了几页,所以当下的切换往往会采用小场景方式,每一页是一个场景,在当前场景中制造一个有趣的热点,让用户触发热点切换到下一个场景;或者有多个场景可以选择,每一个场景会有一个互动性的小故事。

案例:妈妈再打我一次-京东母亲节

采用回到小时候挨妈妈打,结合小游戏的形式,引起回忆,带来欢乐。先选择妈妈打你的理由,之后,演绎这个场景,之后随机出现四种打击方法:如来神掌、打狗棍、无影脚、召唤术,每种妈妈打你的方式都配着搞笑夸张的动画,打完还问舒不舒服,认不认错~如果认错就进入主题页,妈妈老了,再也打不动你了,母亲节了,你想妈妈了么?如果不认错,就挨次体验各种被虐招式吧~

澳门新浦京娱乐场网站 67

2-3 页面探索

设计一个大场景,通过让受众在场景内主动探索来达到运营目的。在探索过程中,受众一边体验着浏览的乐趣,一边接受着H5推广宣传的故事或概念。在探索的最终,受众会被引导到相关的app或者活动页。

案例:杜蕾斯美术馆-杜蕾斯

澳门新浦京娱乐场网站 68

3 – 游戏式交互

游戏型H5相比于展示型和引导型来说,最注重交互。设计一个简单的小游戏,通过有趣的游戏交互来达到吸引受众的目的,可以满足受众获得感官刺激、打发无聊时间或者炫耀自己的目的。当年神经猫之类的游戏忽然间风靡一时,传播魔力之大令人乍舌。

然而H5游戏在朋友圈的推广作用也有限,一方面H5游戏因为操作简单、竞技性强,一度风靡朋友圈,但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。另一方面受制于《微信外部链接内容相关管理规范》[3]对H5游戏的限制,微信中传播的小游戏只能是纯游戏,不能含有诱导式的宣传推广内容,否则活不过半天。

不过好的创意依然不缺乏受众,一款设计良好的小游戏也可以间接的将自己的品牌价值或是活动目标推广给广大受众。在这里列举一些常见的类型。

3-1 图片合成

案例:我的小学生照片 – 天天P图

想要炫耀自我吗?想要体验新奇吗?给你机会。通过一键生成图片,让你秒变小学生。

澳门新浦京娱乐场网站 69

3-2 做测试

一般是比较简单的几步问答选择,就给出一个有意思的测试结果。硬广营销的测试已经基本被封杀了,目前更多的是一些带有预测、恶搞、科普或者祝福意义的测试,然后博取关注公众号或下载APP。

案例:没想到你是这样的安全带 – 滴滴出行

你知道多少关于安全带的知识呢?“汽车安全带雏形是哪个国家呢?”“最先使用三点式安全带是哪个汽车厂商?”“安全带的克星是什么”“乘坐出租车不系安全带可能发生什么”“安全带的织带主要组成成分是什么?”这些问题你知道么?通过一系列测试,案例最终将滴滴的安全出行理念传输给受众。

澳门新浦京娱乐场网站 70

3-3 抽签

2017年,猎鱼达人给你一个嘚瑟的理由 – 腾讯游戏

腾讯猎鱼达人游戏节日推,通过摇一摇抽福签的形式展开,随后对抽到的福签进行解签,可以进行多次摇取,最后可以跳转app store进行游戏下载赢取红包,还可进行分享。

澳门新浦京娱乐场网站 71

3-4 原创/移植小游戏

案例:2017年鸡鸡向上- Sigma

加载进入后,进入首页介绍主题“鸡鸡向上”,随后介绍游戏的玩法进入游戏,点击屏幕可以使小鸡跳动起来,左右晃动手机可以控制小鸡的坠落方向,除了灯笼外里面还有各种小道具,跳到小道具上可以使小鸡变身哦。想要不停向上,那么就来挑战吧。

澳门新浦京娱乐场网站 72

当下H5游戏也有了很多新玩法,例如双屏互动、地理定位、声音识别、面部识别,就不一一详细列举了。。

以上就是2017年关于H5的一些基础知识。挂一漏万说了很多,总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

参考资料:

[1]澳门新浦京娱乐场网站,  马东尼. MAKA发布《2016年度H5数据报告》:H5上升趋势明显..

[2]  一只耳大王. h5产品失败的的常见原因解析. .

[3]  微信外部链接内容相关管理规范. .

部分案例来自于H5分享网站:www.h5-share.com。

作者:程望舒

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:你该知道的一些事儿,聊聊年度最热门的那些H