HTML5技术的移动端广告设计

摘要：随着移动终端技术和宽带无线接入技术的发展，移动端广告设计不仅能够提升用户体验，而且使得用户上网的使用习惯发生了改变，并推动了基于HTML5技术的移动端广告设计发展，极大地方便了用户与设计者的记忆和认知。HTML5广告打破了各种设计界限，将各种艺术表现形式的广告串联在一起，给用户带来不一样的感官体验。基于此，对HTML5技术的特点和移动端广告设计原则进行了介绍，并探究了基于HTML5技术的移动端广告设计对策，以更好地提高移动端广告设计质量。

关键词：HTML5技术；移动端广告；创意性原则

0引言

传统服务和信息获取方式已无法满足时展的需求；而移动互联网提高了信息获取的便携性、便利性及快速性。HTML5标准在2014年10月正式推出，彻底颠覆了PC端互联网的格局，优化了移动互联网的用户体验，在此基础上诞生了以HTML5技术为主体的移动端广告设计。HTML5广告设计除了视觉效果外，还从触觉、听觉等方面为用户提供不一样的体验和感受。

1HTML5技术特点

相比于NativeAPP而言，以HTML5为核心的Web页面具有轻便化的优势，可以在较短的时间内对新内容做出反应。HTML5标准具有“富交互、富体验、重内容与跨平台”等要求，并对HTML4技术进行了大量的优化，降低了Web页面的开发难度。实际上，HTML5技术特点包括以下几个方面。第一，跨平台性。HTML5技术提供了开放式结构，能够实现应用与数据的有效接入，开发者无需考虑浏览器与设备内部数据联通问题。基于HTML5技术构建的站点与应用可以兼容安卓系统、IOS系统、Windows系统等，只需要设计者编辑一次程序，就能够将HTML5技术移植到不同开放平台上，既能够降低开发和运营成本，又能够给企业营造更多的发展空间。第二，支持更多的多媒体元素。在HTML5技术发展过程中，Audio/Video可以为其提供强大的多媒体支持，降低了Web页面开发对于视频混排、文字与音频的压力，用户无需在页面上安装任何插件，直接播放视频和声音文件。在设计诸如微博类、新闻类、社交类应用等内容时，设计师还可以实现文字使用与多媒体混排，比原生开发更具优势。第三，支持本地储存。与NativeApp相比，基于HTML5技术开发的Web页面所需要的启动时间较短，且联网速度更快，主要是由于HTML5技术支持本地储存功能。在应用过程中，不需要下载软件，而且再次打开网页时能够在短时间内恢复数据，有效降低了网络流量，在手机等移动媒体中得到了广泛应用。第四，三维效果。基于Canvas、WebGL、SVG及CSS3的3D功能，能够使开发者开发出更加清晰的Web页面布局，在浏览器中用户可以体验到更加惊艳的视觉效果。同时，Canvas的应用编程接口可以为用户提供数十个方法，以确保Web绘图功能的实现，在使用Canvas标签的Web应用过程中，用户可以动态生成各种动画和图形图像，借助WebGL技术方案，能够完成对复杂数据的有效处理，使三维的立体效果呈现在页面上。Canvas和WebGL的出现可以确保Web应用独立完成绘图和渲染操作，使页面效果变得更加丰富。

2HTML5广告设计原则

2.1以用户为中心

在基于HTML5技术的移动端广告设计过程中，需要对用户的潜在需求进行分析和研究，通过与用户进行交流和沟通设计者可以及时发现问题，并提出有效的解决对策，以确保HTML5广告设计工作有条不紊的进行。对于HTML5技术而言，可以通过广告宣传加深用户对产品的感受和认知，以期更好地满足用户需求。通常情况下，传统广告存在或多或少的强制性，导致用户只能被动接收信息。如今，随着互联网时代的发展，每一位用户都可以从多种渠道获得自己需要的信息，既可以满足用户的基本需求，又能够推动HTML5广告设计的发展。

2.2以技术为基础的创意性原则

对于HTML5广告设计而言，创意性在整个广告设计过程中扮演着十分重要的角色，任何一种形式的广告都可以借助创意方法进行，以提高广告的趣味性和表现力。实际上，好的创意让人感到意料之外，情理之中，可以在短时间内得到更多用户的关注，并为用户提供不一样的感受。由于移动端网络的用户需求呈现出多元化的发展趋势，导致时间呈现碎片化，在一定程度上分散了用户的注意力；但是，基于HTML5技术的广告设计，具有持续周期短的特点，使有内涵、有创意的广告能够更好地吸引广大观众，进而达到宣传产品的目的。

2.3功能与设计的简洁性原则

HTML5广告设计主要是通过创意文字、图形、文案以及声效等视觉设计要素展现主题内容；因此，需要从单张页面、整体页面及广告元素等方面对移动端广告进行设计。

3HTML5广告设计的标准与方法

3.1创意是移动端广告设计的灵魂

创意是广告设计得以顺利进行的基础，是广告设计的灵魂。威廉•伯恩巴克是美国著名的广告大师，其曾经说“对于大量相同的广告内容我们没有多余的时间与精力进行阅读。所以在进行艺术创作时需要创意，以便观众更多地了解和赞叹产品的内容，这些正是创意的真正目的”。实际上，广告设计的精髓主要是凭借脑洞大开的创意构思来整合信息，并将其传达给用户，通过精妙的创意吸引用户的注意力，以提高信息传播的有效性。因此，在进行移动端广告设计过程中，好的创意能够使广告具有深刻的思想内涵，并为观众带来无限的回味和遐想。

3.2基于HTML5广告设计的创新与实现

3.2.1支持多元化的多媒体元素在颁布HTML5标准之前，需要借助第三方插件在网页上播放视频、音频等内容。例如，自主开发的多媒体插件或Flash。插件的使用不会受到浏览器的安全控制，难免会出现安全隐患。自从颁布HTML5标准后，新增了Audio与Video两个技术元素。Audio元素主要负责播放音频文件；Video元素主要负责播放视频或电影。在播放过程中，由于Audio与Video元素的使用可以使支持HTML5的浏览器直接进行播放，不需要安装其他插件，使广告更加具有趣味性和创意性[1]。3.2.2HTML5广告制作平台分析通常情况下，HTML5技术广告设计平台包括基础工具类、轻营销模板类和功能引擎类三大类。轻营销模板类：与PPT操作界面相似，操作方便简单，能够提供简单的动态效果和相应的模板，动态效果局限于淡出、进入及页面翻页等交互式操作，一般面向于个人用户，只适用于轻度营销，主要面向非设计专业者，仅有少数企业用户。基础工具类：相比模板类，基础工具类可以提供HTML5技术广告设计操作平台，并将许多技术嵌入在网站中以支持一系列的高级功能[2]，在不会代码的情况下使设计者能够设计出优秀的HTML5广告，主要面向企业用户，倾向于营销化，少部分为个人用户。功能引擎类：主要面向于HTML5广告设计的技术爱好者或技术开发人员，该类平台可以为广大提供基于Canvas的技术引擎，能够完成相关的游戏开发。3.2.3基于HTML5技术的3D设计与实现实际上，HTML5动画效果能够借助SVG、Canvas和WebGL等技术实现，而且每一种技术都具有其相对独特的优势，是HTML5广告设计中较为成熟的一项技术。在一般HTML5广告设计时，只需要选择一种开发技术就能达到预期的广告效果。其中SVG技术是文本式矢量图形描述语言，由W3C推出，专门为网络而设计的一种图像表达格式。借助SVG技术可以将品质更好的矢量图形插入到网页中，通过矢量滤镜可以使矢量图像呈现出多元化的视觉效果。Canvas隶属于HTML5新的技术语言，能够被JavaScript代码操作访问，允许脚本语言对位图图像进行动态渲染[3]，通过图形的绘制可以完成复杂的动画处理。HTML5技术在Canvas中嵌入了大量的API，能够完成对2D图像的基本操作。

3.3利用交互元素提高用户粘度

随着移动互联网技术的发展，HTML5技术的应用使广告形式呈现出多元化的发展趋势，不仅可以为用户提供更加丰富的视觉体验，还可以通过与媒介之间的沟通使用户参与其中，为用户提供不一样的感受。移动端广告的用户可以通过听觉、触觉、视觉等感官获得反馈的相应信息，以更好地提高移动端广告设计效果。通常情况下，用户粘度可以作为用户对品牌忠诚度评价的重要依据，一般是指用户基于使用和偏好的承诺，形成对产品重复使用的行为和意愿。在HTML5广告设计过程中，引入交互元素可以有效提高用户粘度，并以用户的留存度和主动参与度进行衡量，与用户转换成本保持正比例关系。对移动端用户而言，交互元素对使用粘性存在较为明显的正向影响[4]。交互环节不仅可以使被动接受信息的广告传播方式得到改变，而且使能够在互动体验中主动传播并接受产品信息。例如，苏泊尔HTML5广告设计过程中，设计的“谁先住进你新房”广告，以粘土动画的形式把人们较为关注的空气质量问题呈现出来，选题符合社会热点话题，不仅可以增加用户粘度，而且还可以通过有趣的互动、直观的数据，使用户产生一种身临其境的感觉，在增加用户粘度的同时，为用户带来满足感，提高广告的设计效果。

3.4精准的文案洞察用户内心

对于HTML5广告设计而言，文案的目的并非欺骗用户选择用户根本不需要的产品，而是为用户提供所需求的产品，以浅显易懂的方式把产品具有的核心价值内容传递给用户。HTML5技术创作出来的广告《我害怕阅读的人》结合了现代人过于急功近利，而很少有时间静下心来读书，以达到引导和鼓励用户多读书的目的[5]。

3.5声效渲染为HTML5广告设计增色

声音主要涉及到音乐和音效两部分，基于HTML5技术的移动端广告设计增添声效，不仅可以营造良好的广告氛围，为广告增加趣味性，而且还可以对广告起到一定的渲染效果。

3.6激励用户参与，进一步强化品牌感知

“强调、引导、提醒”属于传统广告的关键词，而HTML5广告设计选择的关键词是“互动、拉新、留存以及分享”，其尝试着用“参与”取代“只读”，这些是HTML5广告设计与传统广告的核心区别。HTML5广告传播一般是指广告与受众间开展的全程对话，在广告传播中受众可以参与、分享、评论和互动，让用户对产品有全面的了解和掌握，进一步强化品牌感知，提高用户对品牌的印象[6]。

4结语

HTML5技术属于新媒体时展的产物，虽然HTML5广告设计发展还不够成熟；但是，随着移动端互联网技术的发展，有效推动了HTML5广告设计的发展。不仅可以满足广大用户的基本需求，还可以真正的打动用户，达到品牌宣传的目的。

作者:李怡 刘大欣 单位：哈尔滨职业技术学院