基于功能的H5广告研究

王帝豪

摘 要：随着智能手机的迅速普及、更快速的数字传输技术的发展以及HTML5的跨平台适用，搭载着微信这辆顺风车的H5广告迅速成为炙手可热的一种广告形式。通过功能这一要点，对市面上的H5广告进行了分类，对H5广告的设计提供了帮助。

关键词：H5；广告；文本；HTML

中图分类号：TP311.56 文献标识码：A DOI：10.15913/j.cnki.kjycx.2017.08.057

1 HTML5与H5广告

1.1 HTML5

HTML为Hyper TextMarkup Language的缩写，中文译为“超级文本标记语言”，是一种基于互联网的网页编程语言，从1994年由万维网发明至今，已逐渐成为了网页编程的行业规范。HTML目前已历经了5次重大修改，HTML5的设计目的是为了在移动设备上支持多媒体。

1.2 H5广告

多数人认为H5是HTML5的缩写，其实H5是我国范围内独创的一个概念，泛指在移动端中传播的带有特效、互动体验与声效的Web网页，与HTML5的概念已经不同。H5广告基本特指集合文字、动效、音频、视频、图片、图表等各种媒体表现方式于一体，利用微信朋友圈进行传播的营销媒介。因为HTML5的跨平台特性，受到了PC、Mac、iPhone、iPad、Android等主流平台的支持，随着网络速度和用户设备性能的提升，使H5广告这一广告形式快速发展和传播。

2 基于功能的H5广告设计

对于H5在广告行业的应用，因为丰富的交互形式与沉浸式体现，给人们带来了更好的体验，但广告的本质没有改变，还是用“创意+文案+设计+情感”打动用户，进而建立产品与用户的利益和感情上的联系，以促进销售或提高使用率。所以，广告的目的也没有变化。

一款H5广告的产生，要明确其目的，即H5广告的功能是什么，是为了品牌推广、活动推广，还是平台引流等，并选择风格基调、选择内容和处理细节等。

从功能和设计目标来看，H5广告主要有以下6类。

2.1 品牌推广类

品牌推广类的H5广告等同于一个品牌的宣传册，更倾向于品牌形象的塑造，向用户传递品牌文化。在设计上需运用符合品牌形象的视觉语言，让用户对品牌留下深刻印象。比如，天猫推出的《首个手机话剧团开张了》采用了第一人称视角，使用户进入一个梦境般的马戏团，开头的眨眼载入与第一部分视频无缝连接，十分巧妙，接着通过一个穿越门的效果，使观众来到一个很大的人形木偶前。此时，提示用户点击一个器官部位，来观看对应“话剧”。目前，有3个部位，即大脑、心脏、眼睛，演出场地就在对应的器官内。不同器官里有不同的故事，但剧情都结合了“天猫无忧购”的“上门取退”“极速退款”等服务，结尾页可以通过点击“无忧通道”跳转外链，设计风格十分魔幻，整个剧情都一直在贯穿天猫的品牌服务，达到了意想不到的宣传效果。

2.2 产品推广类

利用H5，通过互动、3D等展现产品外观、功能的技术吸引用户购买，达到流量的转化，表现形式多为微信图文模拟、产品3D模型和剧情游戏。

比如《金立S6 Pro 就耀快发布会》H5广告，其利用产品3D模型，精准地展现了新产品的外观、配置信息，通过人物与手机应用界面之间的应用场景穿插，直观地说明了新产品的功能，利用微信朋友圈的图文模拟，增加了用户使用场景的熟悉感，还更充分地说明了新产品在拍照功能上的特点。整个H5广告很好地介绍了新产品的功能。

2.3 活动推广类

为了推广运营而设计的H5广告是最常见的类型，内容形式多变，包括邀请函、游戏、贺卡、测试题等形式。通过有趣的互动、更具话题性或可以给受众带来优惠的设计来促成用户的分享与传播。连续性的画面能让用户集中精力，这类活动推广类H5广告具有很强的时效性，与企业的近期活動相互结合，以达到推广策划的目的。

异常火爆的《淘宝造物节邀请函》利用VR和重力感应技术，围绕“T…A…O”三个主题板块，展示淘宝上前卫的科技、炫酷的潮流时尚文化以及奇思妙想的原创思想。在重力感应支持下的VR全景、为此专门编曲的音乐、精美的插画，无不与淘宝造物节针对年轻消费者群体的策略相吻合。

2.4 企业招聘类

企业招聘经常用到此类形式，优点在于宣传成本低、传播高效，在设计上，开门见山，目的明确，在有限的篇幅内，高效地介绍企业文化和招聘信息，切勿让其他因素干扰。优秀的排版是信息表达的基础，在表现形式上，根据企业文化选择合适的形式，比如插画、交互的动画或虚拟场馆等。

《快到ELLOWORLD怀里来》是艾洛互动的招聘H5广告，明亮的黑白黄配色，动感、调皮的音乐，包含团队每个成员特点的插画形象，简单的交互方式，充分表现了公司的人员配置情况和充满创意的团队文化；明了的排版方式，清晰地展现了公司的基本信息、服务对象和招聘情况，使应聘者一目了然。

2.5 数据展示类

内容至上，排版清晰、规整，一切为了数据展示服务，根据展示内容，可在图文展示的基础上加入小的交互动画，从而避免数据、文字或图表变得枯燥。

TGideas出品的《移动页面用户行为报告第二期》配色明亮，关键词或数字的字号加大，配以直观的图表和立体图标，突出了主要信息。

2.6 平台引流类

通过H5广告的传播，为APP或游戏等平台获取更多的流量，经常利用明星、热点事件、小游戏或恶搞DIY等内容来表现。比如《薛之谦史上最疯狂的广告》利用薛之谦一个喜感又敬业的人物IP，借由薛之谦与漫画中的主角互动的场景，调侃腾讯动漫的热门二次元人物，大大深化了“宅、基、腐、有理想、无节操”的品牌形象。H5中直接添加了APP下载链接，为腾讯动漫APP带来了巨大的流量。

3 结束语

H5广告作为一种出现不久、备受瞩目的广告形式，本文以其与传统广告的目的性一致为出发点，以功能为要点，对H5广告进行分类，并结合案例进行了说明。在H5广告的制作中，明确目的及功能后，选择合适的风格基调，再寻找合适的内容，结合合理的交互与音乐等，才能完成一款有的放矢的H5广告。所以，清楚认知功能这个出发点显得尤为重要。

参考文献

[1]张铭珊.H5广告发展趋势和困境[J].视听，2016（06）.

[2]张余.移动互联网时代H5页面的设计与营销[J].东南传播，2015（09）.

[3]李三水.H5还能流行多久？[J].现代广告，2015（11）.

〔编辑：张思楠〕