从H5的流行看广告互动设计

谭利

【摘 要】H5广告用丰富的交互形式和沉浸式的体验打动用户，利用情景式的代入感，感应式的参与、交互式的互动实现广告创意的延伸，从而让用户建立良好的印象以促进销售或加深观念。

【关键词】H5；广告；互动

1 H5广告

H5是HTML5缩写，HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是万维网的核心语言。H5是HTML的第五个版本，相对于HTML4，基于H5开发的网页APP启动时间更短，联网速度更快；能使外部应用直接与浏览器内部的数据直接相连；支持网页端的Audio、Video等多媒体功能，视觉效果增强；能够做出更多的风格和更强的效果，同时提供了更高的灵活性和控制性。

H5有着极大的发展和想象空间，基于这个平台可以做的东西很多，广告、游戏、应用、OA、VR、乃至于操作系统。H5广告，是利用 HTML5的编码技术来实现的一种数字广告形式，它集合了图片、图表、文字动效、音频、视频和互动调查等各种元素为一体的新的媒介形式。H5广告支持所有的移动平台，但主要在手机和平板上传播，能让用户很好的体验及在用户中实现快速的分享，并迅速风靡微信朋友圈。

2 H5广告中的互动设计

互动，即“共同参与，互相推动”，基本特点是互相作用、互相影响、交互感应，可分为心理互动和行为互动。广告中的互动创意可以是一种设计观念，也可以作为一种设计手段，能给广告带来意想不到的效果。传统的广告形式注重信息的有效传递和良好的视觉效果，由于受制于媒介形态和传播模式的局限，在互动性方面存在着比较明显的不足。H5广告作为一种新媒体广告形式，在尊重视觉规律发展的同时，更注重用户的体验，它用丰富的交互形式和沉浸式的体验打动用户，从而让用户建立良好的印象以促进销售或加深观念。

1）情景式的互动设计

不少户外广告的设计创意运用了情景互动设计，在广告中运用了画面以外的物体来参与其中，这种新颖而独特的广告表现形式很吸引眼球。例如IWC的飞行员手表广告，该广告主在前往飞机场或离开飞机场的大巴上投放了一些特殊的拉手，这也可以说是广告，因为这些拉手被做成手表的样式，当乘客使用这个拉手的时候就像是佩戴了IWC的飞行员手表。这些拉手作为一个很常见的广告载体，却能够让上面的广告与受众产生互动，受益与情景互动设计的创意。

2）感应式的互动设计

感应互动设计广告是以计算机视觉和虚拟现实等技术为基础，使普通广告能够根据人体动作而产生相应变化，仰仗感应式互动效果来吸引受众眼球。例如奥美为了宣传Netflix在法国上线，给他们制作了100多个Gif动态图片，投放在城市的不同环境中，这些动态图片匹配了当地的情景，与周围环境融为一体，当路人走过这则广告时，广告牌中的男主角会摘下墨镜，或流露出闻到某种香水味的表情，通过感应实现了广告与人的互动。

3）交互式的互动设计

网络广告区别于其他广告的最大特点就是它的交互性。它利用图像、声音、视频和动画等多媒体元素的融合丰富了广告的交互形式，让用户更加主动地参入到广告中，与广告主体产生交流，实现互动，以达到广告的目的。Flash广告是最具代表的网络广告形式之一，曾经是网络广告中最为时尚，最流行的广告形式。随着数字移动终端通信技术的发展与普及，H5广告迅速成为广告市场的宠儿。由于Html5通用于 PC、Mac、i Phone、Android、Windows Phone 等主流平台，使得H5广告取代Flash成为为网页动画广告的首选，同时在微信的社交平台上大放异彩。

H5广告中的互动创意让用户在广告面前更加主动，不仅可以自主地选择感兴趣的主题，在观看时与广告进行互动体验，还可自主的分享和传播，用户不再是被动的接受广告，而是主动沉浸在广告的创意里，享受着广告给我们带来的乐趣。

《从伦敦到上海的旅程》是Burberry的一款具有浓浓文艺气息的H5广告，打开广告，第一步，得先“摇一摇”；第二步，点击屏幕进入油画般的伦敦清晨；第三步，摩擦屏幕使晨雾散去；第四步，点击“河面”，河水泛起涟漪；最后点击屏幕上的白点，达到终点站上海。在用户以不同的方式与屏幕接触中，完成了一次从伦敦到上海的旅程，文艺而走心，这支广告有趣好玩，很吸引眼球。

3 H5广告的交互创意

H5广告的功能性极大的开发了广告的交互式互动创意，让人与机，消费者与品牌之间时刻进行着碰撞。一则优秀的互动广告，除了独特的创意和良好的感官表达之外，还离不开恰当的媒介载体和技术实现。H5广告作为时下流行且能快速传播的广告形式，其主要应用的技术点有：页面素材预加载技术、滑动页面设计、音乐加载播放技术、动态文字图片、三维立体效果、填表报名设计、涂抹擦除设计和自定义分享设计，除此以外还包括一些交互手段，如：触点控制、文字输入、语音控制、摄像头拍摄功能、二维码链接等，这些交互手段更能提高广告的趣味性和吸引力。依据上述技术特征，H5广告的交互创意可分为以下几种：

1）动作互动

动作互动主要体现在用户与屏幕之间的交互，常用的动作手势有点击、滑动、拖拽、放大、旋转、画图，这些动作设定为用户提供流畅的互动体验。

苏泊尔有一支空气净化器除怪味的H5广告，广告页面里的场景设计得像真正的净化器工作环境一样，使用户有一种身临其境的感觉，用户按下画面里的长按可触发页面动画效果——净化器开始工作，这种互动创意设计很有代入感，让用户马上建立起对广告产品的兴趣和好感。

今年的中秋前夕，各大商家抓住了这个营销的绝佳时机，借“中秋”这个热点，做了不少好的互动性很强的H5广告，里面就用了不少的手勢操作来实现互动，如：移动工厂的《比比谁画的月亮圆》，这属于画图类的H5广告，画面中黑色的夜空背景，用户被要求用手指来画月亮，根据与圆形的偏离程度计算用户所画月亮所得分数，趣味性和参入性极强，同时用户还可以将H5分享给好友，让大家都来比一比谁画的月亮圆。endprint

哈根达斯有一支H5广告《脑洞大过天，月饼究竟能做啥》，最大的亮点在互动上，广告让用户通过点选和拖拽的方式进入游戏，在玩游戏的同时了解各种特色月饼。

2）特效互动

特效互动是指在H5广告里加入了重力感应、3D视图、双屏互动等特效技术，利用特效来吸引用户的注意。

《淘宝造物节邀请函》是今年最火爆的H5广告之一。它发布后，就在朋友圈上演了刷爆狂潮，淘宝造物节的三大主题是“T、 A、O”，代表淘宝上前卫的科技、炫酷的时尚文化和奇特的原创思想。这支H5广告以劲爆的音乐和唯美绚酷的插画，体现着以年轻消费群体为主体的广告策略，特别是广告运用了3D旋转特效、VR 和重力感应技术，与用户之间展开交互，使用户感受到了强大的震撼力和应用体验，特别适应年轻人的审美喜好和特点。

梅赛德斯-奔驰B级运动旅行车在临近中国情人节推出了一则H5 广告《七夕鹊桥会，爱更多》，广告利用H5里摇一摇功能和双屏互动技术，让两个手机配合在一起，使得广告画面里的一只喜鹊从一个手机飞到另一个手机上，当两个手机并列摆放时，一座鹊桥从一个手机跨越到另一个手机上，瞬间搭建而成，同时背景还出现了一个大大的爱心。梅赛德斯的这则H5广告里的浪漫双屏互动创意，让用户在轻轻的摆弄手机时收到满满的爱意。

3）页面互动

页面互动是指H5广告内部的页面交互和外部链接。

在H5广告中用户可以翻页交互，翻页的形式也灵活新颖，图片和文字都可以作为链接对象，让用户随时可以体验不一样的视觉感受。H5广告在微信这个社交空间里传播特别便利，一个分享链接就能让广告迅速扩散到交际圈里的各个角落。

4 结语

广告从响亮的叫卖声到视觉系的印刷品，再到呈现多媒体的屏幕，无不体现着从静到动，从被动到主动，从观看到参入的转变。情感的接受，情景式的代入感，感应式参与到交互式的互动可看出广告的创意不仅根植于思维与感官层面，而且逐步利用各种媒介特点延伸人类的创造性，同时合理利用现代科技手段服务于广告创意的实现。

【参考文献】

[1]郭庆光.传播学教程[M].北京：中国人民大学出版社，1999： 52-53.

[2]B·約瑟夫·派恩二世，詹姆斯·H·吉尔默.体验经济[M].北京：机械工业出版社，2002.endprint