基于H5技术的移动端广告设计表现形式研究

摘 要：H5移动端广告是一种基于Html5技术实现的移动端网页广告形式，打破了传统广告设计界限，融合了视觉、听觉和触觉，具备更丰富的交互方式，给用户带来更优质的感官体验。本文聚焦基于H5技术的移动端广告设计的主流表现形式，有利于深入研究这种以技术为支撑，设计为主导的新型广告设计形式，探索不断更新的技术为新媒体设计带来的更多可能性。

关键词：H5技术;移动端;广告设计

1 H5技术及特点概述

H5是Html5的简称，Html全称为Hyper Text Mark-up Language，中文译为“超文本标记语言”。Html是一种创建网页的方式，是网页的开发端和接收端约定如何标记标题、正文、图片、文字样式等页面内容的一整套规范。数字5则是指Html的第5次重大技术修改，其标准规范于2014年10月最终制定并在全球推行。H5页面是利用Html5编码技术实现的一种数字应用，其表现形式为游戏、广告、邀请函、测试页等。

H5不仅指代利用Html5技术实现的web广告，还涵盖了CSS3，Java Script等基于Html5相关技术的社交媒体互动广告应用集合。Html5 标准的发展与变革，颠覆了PC互联网端的格局，优化了移动互联网的用户体验。以 Html5为核心的Web页面有轻便化的优势，能快速对新内容做出反应，开发时间也更短，同时Html5标准有“重内容、富交互、富体验、跨平台”的要求，较Html4有大幅改良，支持更多的多媒体元素。同时Canvas和Web GL的出现使Web应用能够独立完成出色的绘图和渲染，呈现更丰富的页面效果，从而具有高安全性、跨平台性及良好的操作体验。

2 H5移动端广告的表现形式

H5移动端广告（以下简称H5广告）是一种基于Html5技术实现的移动端网页广告形式，融合了视觉、交互、动画、声效、视频等多维度的设计表现形式，通过微信、微博等社交公众平台发布信息与产品宣传活动，结合有趣的交互方式，带动用户感知和参与品牌宣传的活动中。其表现形式有如下方面。

2.1 简单图文

简单图文是 H5 广告最早出现的表现形式，通过图片、插画、GIF 动画等简单方式，配合情感化或趣味化文案表达广告的主题内涵。交互方式非常简单，与幻灯片翻页效果类似。简单图文类的 H5 广告虽没有高端的技术与丰富的交互作支撑，但画面元素的精心布置与文案情感化的叙述方式同样能打动用户，带给用户更好的体验。

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

2.2 虚拟场景

虚拟场景就是通常所说的场景设计，场景设计一般以用户生活中熟悉的家、公司、娱乐、公共场所等作为设计的出发点，以带给用户更熟悉和真实的体验。基于场景的H5广告设计是将产品置身于现实场景中或设计与用户生活场景相类似的场景，通过场景将用户与广告相连接，用户通过与基于场景的广告设计互动，带给用户沉浸式的体验。

央视广播出品的H5《王小艺的朋友圈》切入的用户场景就是每个人每天都在刷新、点赞的朋友圈，是一种有代表性的社交形式，更是一种日常生活状态。它是被做成了一个全屏，全景，浸入式的场景，就是用户打开朋友圈映入眼帘的样子。因此这部集合广播的声效、视频和图片的可视特点及虚拟现实的场景特点的作品立即抓住了用户的眼球和心理感觉。虚拟场景的设计与现实空间接轨也成了 H5 广告设计发展新的转折点。

2.3 创意视频

创意视频往往运用视频与图文结合的方式，加上极具创意的脚本设计带给用户新奇感。随着技术的进步，H5 广告视频的播放的流畅度也逐渐提升。

《吴亦凡入伍》H5 广告极具创意地将明星效应与军事题材游戏相结合。明星参军是颇受关注的话题，所以吴亦凡参军入伍这一创意构想带给了用户意料之外的惊喜。H5广告通过新闻的形式，用户点击进入广告会认为是真实新闻而认真阅读，但浏览的过程中画面突然动起来跳出吴亦凡，在一定程度上会超出用户的预期，从而激发用户的兴趣。与明星面对面视频这一创意方式对于粉丝来说极具吸引力。整支广告以两段视频自动播放为主要内容，开篇以新闻引起用户注意，成功带给用户新奇的体验。

2.4 互动小游戏

互联网时代任何形式的媒体发展都离不开娱乐要素，用户已不再满足H5 广告功能上的需求，更需要通过故事化、游戏化的方式得到情感上的满足。而将产品与轻量化的小游戏相结合，通过更加有趣的形式潜移默化的突出广告主题，可使用户对产品产生更深刻的认知。目前由于技术的限制及对体量的要求，H5广告游戏的形式相对较简单，用户通过与画面元素的简单互动完成游戏任务，获得相应的奖励，从而达到广告宣传的目的。

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

2.5 技术型

H5技术的运用使广告的表现形式更加丰富。技术型H5广告主要分为虚拟现实VR类效果、重力感应、双屏互动三大类。VR类场景是利用计算机软件制作出模拟现实的场景，如双十一天猫H5广告《穿越宇宙的邀请函》，画面立体感强，滑动拖拽可控制环视方向，可左可右可近可远，是典型的VR类H5广告。

重力感应是指通过对力敏感的传感器，感受手机在变换姿势时重心的变化，使手机光标变化位置从而实现选择的功能。应用重力感应的手机游戏很多，常见的赛车类游戏可通过左右倾斜手机实现方向改变。现在也有不少H5广告结合这一技术功能，在广告中加入重力感应互动，使其可玩性和趣味性大大提高。Juice Up的“你敢在办公室瘦吗？”是拿着手机跟着H5画面做相应运动即能点亮图标，实现了用手机倒一杯果汁分享给好友的有趣情境。

双屏互动H5广告，即两部手机通过扫码等方式实现一起互动。典型案例有啤酒类H5 广告，打开页面后是两瓶啤酒，同時互动可模拟出将一个手机内的啤酒倒入另一个手机杯中的效果。

3 结语

H5广告是一种以Html5技术为支撑，设计为主导的新型广告设计形式，融合了视觉、交互、技术、文案、动画、声效、视频等多维度的设计表现形式，通过微信，微博等大众社交公众平台发布品牌相关活动，是新媒体的重要发展方向。在确定功能目标，考虑到具体应用场景和传播对象后，通过研究常见的H5移动端广告表现形式，结合创新的交互方式，方能以用户角度思考什么样的页面是用户最想看到的和最乐于去分享的，给予用户更优质的体验。

参考文献：

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

[2] 杨光.中国社交媒体广告发展研究[D].河南大学，2014.

作者简介：陈梦冉（1987—），女，江苏南京人，艺术设计学硕士，江苏海事职业技术学院教师，主要研究方向：数字媒体艺术。