浅析H5产品在互联网传播中的运用

开篇：润墨网以专业的文秘视角，为您筛选了一篇浅析H5产品在互联网传播中的运用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘 要：h5指的是利用HTML5的编码技术来实现的一种数字产品。其跨平台、成本低、开发周期短等特点，使其近年来在以微信为代表的互联网营销中扮演了重要角色。本文通过具体的案例梳理了这类产品的表现形式，并归纳总结了产品成功的要点，以期为更好地运用H5进行传播提供参考。

关键词：互联网；HTML5；交互；传播

H5是一种高级网页技术，确切的说应该叫HTML5。在国外目前并没有H5这种叫法，而在国内，H5更多的时候指的是利用HTML5的编码技术来实现的一种数字产品。

目前被我们大众普遍接受的网页技术版本是HTM4，然而近十年来互联网行业发生了翻天覆地的变化，人们逐渐意识到原有的HTML已经不能适应互联网的发展了。在2006年，WHATWG（Web超文本应用技术工作组）和W3C（万维网联盟）决定进行合作，来创建新一代的HTML，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容，这就是HTML5。

H5的产品具有五大特征，其中包括：能轻松实现跨平台；无需下载即可体验；多入口，方便营销推广；及时更新内容；开发周期短，试错成本低。但同时它也有易抄袭、技术上不够成熟等缺点，和原生App相比，性能和用户体验上仍然有一定的差距。所以在很长的时间里H5始终处于一个不温不火的状态里。

2014年7月22日，H5游戏“围住神经猫”上线微信朋友圈，仅用3天的时间便创造了用户500万，访问量超1亿的神话。神经病猫的动画表情、服饰、背包开始流行，甚至有网店开始售卖围住这只猫的攻略。随后各种H5游戏和专题页呈爆发式进入人们的视野。如今，各类为活动运营、品牌营销而设计的H5产品已经屡见不鲜了。

一、H5产品的形式

为了达到不同的功能目标，迎合不同的受众人群，H5产品通常有如下几种表现形式：

（一）图文幻灯式

图文幻灯是早期最典型的H5专题页形式。它杂糅了图片、文字和视音频等多媒体元素。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。目前，通过一些在线编辑器如：快海报、初页、易企秀等，可以进行可视化编辑，用户不需要懂编程语言也能制作自己的H5专题页。它考验的是高质量的内容本身和讲故事的能力。

特斯拉汽车的案例就是典型的图文幻灯式H5专题页，通过几张简单的图文组合加上背景解说串起了整套页面。视觉简洁有力，采用黑色和红色作为主要色彩，没有过多的互动形式，让观众专注于内容，通过手指的划动去将特斯拉的秘密一层层揭开。

（二）交互式动画

交互式动画是一种比较高级的动画形式，动画作品在播放时能够实现事件响应和交互功能。也就是说，动画播放时可以接受来自动画播放者的划动、点击等控制，并产生相应的反馈。这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。

AKQA创意营销公司在圣诞节献上的作品《梦幻水晶球》就是一个典型案例。观众通过移动手机，镜头从水晶球外不断推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，观众可以欣赏水晶球里360度的全景，摇一摇手机，雪花便漫天飘洒。观众还能写下祝福并分享给朋友，一定会给对方不小的惊喜。这个H5页面使用了重力感应、3D等技术，文字与背景音乐的使用也十分讲究，给用户带来了完美的互动体验。

（三）问答测试形式

问答测试形式的H5页面也屡见不鲜了，例如一些性格测试类的页面，一直都在社交网络中很流行。它利用的是用户的求知欲和探索欲，通过一题题选择，最后获得一个合理的结果，并传播分享。这类产品的问答主题是吸引人的关键，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就成功了。

知乎为其出版的书籍《金钱有术》的推广，设计制作了一款问答类小游戏――财务包子铺。这是一个关于创业的小游戏，玩家以创业老板的身份，对自己的包子铺的日常经营做出决策，挑战题目中也会有一些基础的财务知识。根据用户的不同选择，会产生不同的结局，比较常见的好结局是可以上市，如果决策错误，就会导致破产倒闭。结局的页面提供了购买图书的接口，通过这种互动问答能让用户参与进来，收获更好的推广效果。

（四）游戏

目前H5游戏大多还是以轻度的休闲游戏为主，从“围住神经猫”、“2048”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏。H5游戏因为操作简单、竞技性强，而且可以分享自己的游戏成绩，所以一度风靡朋友圈。但是玩家对这类游戏的粘性较低，通常仅为一周时间左右，所以品牌要借助游戏成功传播，需要将重点放在玩法和设计上。

2015年春节期间，知名游戏《海岛奇兵》推出了一款H5游戏，游戏后还能领取红包。《海岛奇兵》的H5游戏设计了与原生游戏高度一致的策略性关卡，在游戏体验上甚至媲美原生游戏。通过良好体验，借助红包互动活动之后，再跳转到原生游戏的下载，能够让在体验中抱有好感的玩家，迅速成为原生游戏的用户。同时，H5版本的游戏点开即玩，几乎没有任何准入门槛，更强化了游戏产品，以及抢红包活动的信息扩散和传播，使其能在微信等社交App上大规模传播。

二、优秀H5产品的要点

一个H5是否能起到良好的传播效果，和其用户体验是分不开的。一个H5页面的设计甚至能影响到用户对品牌形象的认知。在这里总结出以下的设计要点：

（一）优秀的视觉风格

H5本身就是一种具有互动性的平面媒体，其设计也需要符合平面设计和动画设计的一般规律。要获得良好的用户体验，必须考虑整体风格的统一和对设计细节的把握。色彩、排版、字体等视觉要素都要符合产品的主题风格。

大众点评为推广电影《复仇者联盟2》所设计H5专题页牢牢把握住了电影影的戏剧效果和画面冲击感，可以迅速将体验者带入到特定场景中。整个H5设计风格简洁有力度，融入“双语字幕”的电影式元素，连大众点评的LOGO都被打造成了复联的风格。最后的购票页面，也配合了IMAX电影的宣传语。大众点评利用H5技术，已为多部电影做社交平台推广，获得了不俗的传播效果。

（二）紧跟舆论热点

如果把握到大众舆论的风向可能会使H5产品一夜爆红，2014年，在那次明星吸毒事件后，某H5爱好者及时制作出了《全民找祖名》的小游戏，从游戏的制作上乏善可陈，玩法也很低幼。然而并不影响它在朋友圈里的风靡程度。所以第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。

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

（三）优秀的文案

拥有优秀的文案是广告行业里的黄金法则，不论H5的形式如何多变，有价值的内容始终是第一位的。能够在有限的篇幅里，用文字去打动人，引发用户的情感共鸣，更容易推动内容的广泛传播。

中国著名养生品牌首草推出的H5专题页《首草先生的情书》中，设计师并没有选择使用过多的互动技巧，只是静静地用大段文案和黑白影像配合淡雅的音乐向你诉说一段男人的心路。他追忆往昔，又追想来日，字里行间，都是真心爱过的话。爱情是人类永恒的话题，最容易激起人们的共鸣。

（四）合理运用交互技术

随着技术的发展，如今的HTML5拥有众多出彩的特性，能轻松实现如绘图、擦除、摇一摇、重力感应、3D视图等互动效果。适当的运用这些效果可以让作品的互动体验更优秀，但要注意与内容的恰当结合，否则过多不合理的炫技可能会适得其反。

著名英国奢侈品牌博柏利推出的《“从伦敦到上海”的旅程》集合了多种互动方式。要进入这个散发着浓浓文艺气息的H5作品，第一步，得先“摇一摇”开始；第二步，点击屏幕进入油画般的伦敦清晨；第三步，摩擦屏幕使晨雾散去；第四步，点击“河面”，河水泛起涟漪；最后点击屏幕上的白点，达到终点站上海。面对目前中国巨大的市场，拥有更多的年轻目标受众群，微营销正在成为越来越多的高端奢侈品牌来拉近用户之间的距离的形式，通过增加互动和交流的机会，扩大其品牌影响力，并得到消费者的认可达成宣传推广的目的。

三、结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、成本低、开发周期短等优势被进一步凸显，尤其是一些提供H5在线可视化编辑器的出现大大降低了用户的使用门槛。这对身处于移动互联网大潮的企业、品牌、设计师和开发者来说，都将是一个最好的时代。未来必将会涌现更多优秀的H5页面，让我们拭目以待。（作者单位：南京艺术学院）

参考文献：

[1] Whales《关于HTML5，营销人应该知道的概念、方法和推广完全实战指南》，于微信公众号SocialTalent

[2] 鱼小干《那些过目不忘的H5页面》，于腾讯ISUX

[3] 张余.移动互联网时代H5页面的设计与营销[J].东南传播.2015年第9期