H5广告的创意与表现分析

沈雅兰 （重庆文理学院美术与设计学院 400000）

H5广告的创意与表现分析

沈雅兰 （重庆文理学院美术与设计学院 400000）

本文从H5广告与传统广告的区别入手，以H5广告具体案例为对象进行分析，探索H5广告创意表现方式的基本类别，运用用户体验视角对H5广告进行个案分析。

H5广告；广告创意；广告表现形式；用户体验

本文为重庆文理学院学生科研项目《HTML5广告的创意与视觉表现研究》的阶段性研究成果，编号为：XSKY2016183

H5广告泛指在移动端传播的带有特效、声效、互动体验的web网页。它拥有丰富的视觉效果，更好的交互体验，是移动互联网广告质的创新。

根据百度指数数据显示，移动端对H5的关注度正在逐年增加。iH5出品的《2016年H5年度超强报告》指出，电子/通信/媒体/科技行业是H5数量产出最多的行业，占总体的30.5%；用于活动宣传场景的H5占到45.6%；内容上，游戏类占23.9%，鸡汤类占16.1%。观察我们的生活也可以发现，各种新奇有趣的H5不断在朋友圈引起热潮。

一、H5广告的优势及与传统广告的区别

从单一的短信彩信广告，到APP占据智能手机的屏幕，广告形式越来越丰富。如今移动端广告潜力巨大，H5广告以其众多优势成为互联网广告中倍受追捧的新形式。

（一）跨平台、形式丰富

HTML5技术具有兼容特性，是唯一通用于PC、Mac、iPhone、iPad、Android、Windows Phone等平台的跨平台语言。H5广告可以在移动端展示动画、视频、音效，甚至可以搭建小游戏页面，制造触发效果。这是表现形式、传播途径单一的视频广告和平面广告难以超越的优势。

（二）病毒式传播

H5广告能够直接在移动端转发分享，数据可以实时监控和评估。理论上H5广告可以辐射全球，快速传播，不受时间段和地域的限制，潜在用户量巨大。

（三）开发时间短、制作成本低

传统广告从创意、制作到投放，通常要经历数月，中间一旦出错就不可修改。而H5广告非常灵活，上线即是投放，并且可以随时修改。另外，H5广告可以轻易移植到其他平台，减少广告成本。现在也出现很多带有模板和服务器资源的第三方制作平台，这些平台费用低，易操作，受到大众追捧。

（四）互动性强

H5广告可以利用先进的技术打造流畅的互动体验。在技术上，可以实现双屏互动、重力传感、影像传感、手势识别等效果，还可以利用小游戏增加和用户间的沟通。

二、H5广告的创意表现形式

H5按照功能可分为事件告知类、促进消费类、信息展示类，按照页面形式可以分为长页式、翻页式、360°全景式等，其中还可配合VR眼镜实现身临其境的效果。

内容上，H5广告可以紧跟热点话题，吸引用户关注；可以围绕各大节日，获得用户认同；可以讲述故事、营造氛围，引起用户共鸣。

（一）场景类

制造场景是H5广告常用的表现形式，通过画面和声效营造场景，渲染气氛，吸引用户。可分为现实场景和虚拟场景。现实型场景再现生活，易于和用户沟通情感。例如陌陌APP出品的《陌陌不孤独饭局》，整个策划以单身者的生活为切入点，通过第一视角展示现实生活，加上触发效果，使得互动具有真实感。虚拟型场景以其奇幻的画面风格使用户置身神秘世界，极具吸引力。例如中国银联的《一个不该存在的广告》，画面上，采用手绘蒸汽朋克风，既酷又神秘；加上旁白的讲述，很容易激起用户的探索欲。

（二）小游戏类

小游戏类H5以其趣味性和互动性颇受追捧，各种类型的游戏H5层出不穷。

第一，产品类。这类游戏和产品结合紧密，用户通过游戏可以了解到产品的性能和特点。例如宝马《3.7秒极致挑战》，画面采用黑、蓝的色调营造科技感，游戏采用计时百公里加速的方式，动感十足。

第二，优惠类。通过小游戏获得奖励，提高用户参与积极性。例如1号店的《港不停，港你知》，画面采用俏皮的手绘风，色彩丰富，用户通过录制港式俚语游戏即可随机获得1号店维他港式奶茶。

（三）社交分享类

这类H5在策划上植入了社交属性，能够促进用户主动分享。例如苏泊尔的《我的温暖哲学》，用户可录制语音放入保温杯中，并将保温杯传递给他人。

（四）名人代言类

名人本身自带粉丝流量，利用名人效应能够快速达到传播目的，例如腾讯动漫出品的《薛之谦史上最疯狂的广告》。H5采用视频的形式，模拟薛之谦微博界面，画面采用漫画和现实穿插展现的方式，幽默诙谐。

三、H5广告的用户体验

H5广告基于社交软件传播，需要将创意、策划、设计与用户体验相结合。以腾讯棋牌的《神秘失踪案现场》为例，在创意和策划上，借鉴密室逃脱的方式，要在四个场景中找出线索，寻找失踪的王大妈，碎片找齐后出现腾讯棋牌盛典的广告信息。创意别具一格，前后衔接巧妙。

（一）视觉设计与场景营造

视觉设计是整个H5广告中最直观的部分，不同的画面风格、配色、版式会给人不同的视觉感受。风格上，手绘的风格多体现趣味性，实景照片、视频则体现真实性；色彩上，轻松活泼的场景多采用明亮缤纷的颜色，而科技性、思考性的场景通常选用冷色、深色来展现理性。版式上，尽量简化，多图少字，方便用户提取信息、适应用户习惯。

在《神秘失踪案现场》中，加载页面是在黑暗中摇晃的摇椅，并带有咯吱的声效，一开始就营造了神秘气氛。场景页面选用复古陈旧的风格，制造紧张感和刺激感。色彩上选用明度和纯度较低的颜色，使画面看起来阴暗，迎合了游戏氛围。

（二）技术特效与创意表达

先进的技术可以实现很多意想不到的效果，这也开拓了广告创意思路。《神秘失踪案现场》的解密过程环环相扣，设计巧妙。用户可以通过滑动切换场景，通过点击触发场景中的物件，细节设计到位，引人入胜。

（三）用户参与与互动体验

H5广告能够利用多种互动形式，激发用户参与。《神秘失踪案现场》中有很多有趣的触发事件，例如点击鸟笼可以打开鸟笼放走鸽子；点击煤气灶上的开关可以点火烧水等，每次点击都伴有相应的声效，触发效果非常逼真。结尾的广告信息页面选用喜庆欢快的背景音乐，巨大的反差将紧张感一扫而空。在整个过程中，根据提示找寻线索解密，刺激用户参与的欲望，互动设计精巧。

事实上，从广告、游戏，再到生活方式，H5不断地展现出多元、跨界的应用能力，广泛的触及到我们的生活。一个受欢迎的H5广告，从创意策划到制作执行，再到推广传播，每个环节都要精心设计，做到对用户的深度洞察。

[1]李儒俊，卢维林.HTML5时代移动互联网广告的变革[J]，商，2016（20）.

[2]李青.互动广告新形式——H5广告研究[J].新闻研究导刊，2016（09）.

[3]沈虹，万丽慧，郭嘉.互联网广告创意传播研究——从互联网广告创意人和网络使用者双重角度看互联网广告创意传播的现状[J].广告大观（理论版），2009（01）.

[4]周瑜嫄，王峰.移动端Html5广告的表现形式及优势[J].新媒体研究，2016（01）.