江南大学 设计学院 陈婧娴 吴祐昕
摘要：文章聚焦于基于HTML5的广告设计，分析HTML5在近几年的技术发展以及其具有的优势，不断更新的技术为设计带来了更多可能性，但同时也需要思考技术的实现是否真的是HTML5页面传播量的决定性因素。文章将传统广告与HTML5页面广告进行对比分析，探索哪些因素影响并决定着HTML5页面广告的广泛传播，尝试为更好地设计HTML5广告提供参考。
关键词：HTML5、HTML5广告、广告本质、参与感
中图分类号：F713.8 文献标识码：Ａ
文章编号：1003-0069(2017)08-0136-02
Abstract：This paper focuses advertising design based on HTML5 and analyzes the technical development of HTML5 or its advantages in recent years. The continuous updating of technology brings more and more possibilities for design. But at the same time, we also need to consider it whether the realization of technology is the decisive factor of HTML5 pages enormous capacity. By comparing the traditional advertising and HTML5 pages advertising, this paper explores what factors affect and determine the spread of HTML5 advertising. Trying to provide a reference for the better design of HTML5 advertising.
Keywords：HTML5、Advertisement of HTML5、The essence of advertisement、Sense of participation
引言
随着宽带无线接入技术和移动终端技术的飞速发展，人们不再满足从传统的方式获取服务和信息，迫切希望能够随时随地乃至在移动过程中方便地获得。而HTML5标准的发展与变革，颠覆了PC互联网端的格局，优化了移动互联网的用户体验，同时以HTML5技术为核心的HTML5广告也应运而生，丰富了互联网广告形式。
一、HTML5的革新发展与优势
2008年1月，HTML5标准草案正式颁布，为移动应用开发提供了另外一种技术方案。2010年，苹果宣布今后移动设备不再支持Flash插件，HTML5技术逐渐成为移动互联网网页建设的必备选择之一，直到2015年10月W3C宣布HTML5标准规范最终制定完成并向全世界开放。HTML5标准制定的完成标志着移动互联网进入了新的发展格局。
HTML5是Web标准领域迄今为止最为重大的变革，它设计的目的是为了在移动设备上支持多媒体的播放，改变了用户与文档的交互方式与操作习惯，“重内容、富交互、重体验、跨平台”的要求，HTML5较之HTML4做出了诸多改进。技术的不断革新与发展，使得HTML5可以实现堪比Native App效果的Web App，其突出表现在：
（一）跨平台性
运用HTML5工具搭建的站点与应用可以兼容PC端、移动端、Windows系统等，设计者只需要制作一次，就可以轻易地将其移植到各种不同的开放平台上，强大的兼容性可以显著地降低开发与运营成本。
（二）支持本地储存
基于HTML5开发的Web App比Native App启动时间更短，联网速度更快，这些得益于HTML5支持本地储存功能，用户在使用过程中无需下载软件，同时再次打开网页时可以更快恢复数据，以减少网络流量，特别适合手机等移动媒体。
（三）支持更多的多媒体元素
Audio/Video元素为HTML5应用提供了强大的多媒体支持，使用户可以直接在页面上播放声音和视频文件，无需安装任何插件。设计师在设计诸如新闻类、微博类、社交类应用的信息呈现中更多地会使用文字与多媒体混排，而运用HTML5技术在这点上比原生开发更具有优势。
（四）三维效果
基于SVG、Canvas、WebGL及CSS3技术的3D功能，让开发者非常方便地实现清晰的web页面布局，用户可以更便捷地享受到互动带来的乐趣。
二、基于HTML5的互联网广告与传统广告的特点
基于HTML5的广告其实是利用以HTML5为标准的编码技术来实现的一种数字化广告，不同于传统的广告形式，HTML5广告结合了平面、动画、特效、三维、影视等艺术形式，HTML5广告近几年呈现井喷式发展也是广告行业介入互联网的一次集体爆发，不管是从内容方面还是渠道方面都颠覆了传统的广告模式，为广告行业的发展注入了新的生机与活力。
（一）传统广告及其媒体的特点
相较于HTML5广告的速度快内容丰富的特点，传统广告显然在互联网时代不具优势，传统广告由于在时间和空间上的限制性，也限制了用户在接受广告信息时的自由性。
1. 制作周期长。由于传统广告投放后出现差错不能立即跟进修改，所以广告从策略制订到设计方案讨论都是经过反复的推敲与验证才能最终发布，这一过程往往要持续数月的时间。
2. 反馈时间慢。传统广告发布后，因投放在电视、报纸杂志等媒体，只有等待电视上映或刊物出版后，根据其收视率或销售量获得大概的反馈，反馈时间较慢。而HTML5广告是一种利用热点内容迅速做出反应的表现形式，广告发布后根据后台数据获得相应反馈后较快跟进修改，能够较好地控制时间成本。
3. 传播的局限性。传统广告传播具有一定的局限性，可以覆盖的范围相对狭窄，只能投放到特定大众传媒平台如电视、广播、报纸杂志等。
4. 传播信息具有强迫性。用户只能被动地接收广告信息，无论是否是用户想看的内容。强势信息灌输典型的策略主要传播形式是由发送者经过许多环节推向最终接受者，用户只能被动地接受广告信息。
（二）基于HTML5的互联网广告新特点
HTML5广告其实是以HTML5标准的技术与设计的结合，它作为互联网广告的一种，具备大多数互联网广告所具有的特点。随着移动互联网的发展，显然应用于移动端的HTML5广告比传统的广告更具优势，符合移动互联网用户的使用特点，也能更好地为用户服务。
1. 覆盖范围广，传播性强。从受众角度上说，目前智能手机用户超过6亿人次，其中微信用户超过3亿人次，发布一个HTML5广告从理论上来说，用户都能够看得到，而传统广告是投放在电视或地铁中，是绝对没有这个可能性的。
2. 有针对性地投放广告。在广告的投放上，可以根据特定人群的不同需求投放相应的广告，有明确的市场目标，做到有的放矢。而用户在浏览时可以选择自己需要的广告信息，提高了用户接受广告信息的准确性。
3. 时效性强。HTML5广告大多是结合热点的营销，时效性强，制作周期时间短，需要以最快的速度推出广告以达到快速传播的目的。
4. 具有强大的交互性。HTML5广告打破传统广告静态的传播模式，突破传统广告的单向性和反馈不及时，强调让用户参与其中并有更好的互动体验，良好的交互性可以使用户更好地了解产品的特性，通过触感给予用户更真实的体验。HTML5广告与传统广告相比具有更强的亲和力，它是用户可以触手可及的互动内容，具有丰富的声画传播方式，相较于静态的画面来说，动态且有互动的内容不能不说是一种颠覆。
5. 视听效果一体。HTML5广告结合了平面、动画、声效、三维、影视等艺术形式，它综合了视觉、听觉、触觉等多种感官，在达到传达信息目的的同时，新颖的形式增加了广告的吸引力，从而给予用户全方位的体验。
三、HTML5页面的设计方法
以技术为基础的HTML5广告是目前较为普遍且发展迅速的互联网广告之一，但这并不能代表传统的广告就应该摒弃，广告的本质并没有变，还是通过“创意+文案+设计+情感”的方式打动用户，建立产品与用户的利益与情感上的联系。运用HTML5制作出的广告页面并不一定会在第一时间吸引用户，HTML5广告的本意不在于秀技术上，也不只是简单地把传统的广告内容盲目地移植到HTML5广告页面的设计上。但通晓这一点需要在一定的实践基础上积累沉淀，这个沉淀不完全是前端技术以及动画表现，而是在于是否真正地了解用户的需求，传达给用户有效的信息。《“互联网+”就这么铺天盖地的来了！》一文中曾提到：“一个成功的HTML5页面往往集合了精炼的文字、高品质的设计以及与调性相契合的音频和隐形的技术。”从曾经火爆朋友圈的HTML5广告页面中不难看出，新颖的广告形式更加富有趣味性，赢得了用户更多的关注度，在带给用户良好体验的同时也达到了宣传企业或品牌的目的。
通过研究总结出以下几点运用到HTML5广告设计中，尝试为HTML5广告设计提供参考。
（一）脑洞大开的创意构思
创意是设计的基础，是设计的思想内涵与灵魂。美国广告大师威廉·伯恩巴克说：“我们没有时间也没有金钱允许大量及不断重复的广告内容。我们呼唤我们的战友——创意，要使观众在一瞬间发生惊叹，立即明白产品的优点，而且永不忘记，这就是创意的真正效果。”广告设计的精髓在于通过脑洞大开的创意构思将信息整合再造之后传达给用户，精妙的创意更加容易被用户所接受并记住，从而提高了信息传播的有效性。所以设计必须进行创意，好的创意设计充满灵性与美感，能够表达设计者的所思所想，传达核心信息给用户，引导用户关注并使用产品。从一开始《围住神经猫》在互联网广泛传播开始，到《吴亦凡入伍》《这个陌生电话你敢接吗》等互联网现象级HTML5广告页面进行对比分析，总结得出一个共通的特点是：新奇有趣、创意新颖，针对目标用户的需求在内容上做到创新，才能真正地让用户做到主动打开、主动分享、主动传播。
（二）精准的文案
文案的目的不是欺骗用户使用他们不需要的产品，而是更精确地找到需要你产品的用户，把产品最具竞争力的核心价值内容以浅显易懂的方式传递给用户。HTML5广告《我害怕阅读的人》根据现代人大多急功近利，没有时间静下心来读书，从而引导用户多读书。常规大多使用“追求名利太疲惫，在书里找回自己”等类似的劝服式文案，而《阅读的人》则反其道而行之，理解受众追逐名利，以用户的角度去思考，在工作或应酬交际中看到其他人能够侃侃而谈、充满魅力，自己是否会有一种无力感，这样的引导效果会比劝服式更加深入人心。优秀的文案需要有精准的洞察力，能够清楚地知道用户的需求，引起用户情感上的共鸣，从而真正做到引导用户。
（三）优秀的画面效果
一款优秀的HTML5广告的画面表现不单单只是视觉层面，还包括从听觉、触觉等方面给予用户全方位的体验来吸引用户的注意力，也就是多感官设计，设计师突破传统设计所带来的局限性，多层次刺激用户感官机能，使消费者认识产品更加真实，更有效地引导消费。视觉设计在简洁、美观的基础上，合理运用设计元素进行创意，同时色彩的搭配也会为设计增色，令用户眼前一亮，使创意得到完美的表达，达到传递有效信息的目的；听觉上，通过声效和音乐的气氛渲染，增强广告的吸引力，为突出广告主题起到了辅助作用，同时也丰富了用户的感官体验；触觉上，关注用户与产品之间的物理接触，结合有趣的互动体验带给用户控制感和在场感，使用户沉浸在广告营造的情境之中。综合多种感官设计加强用户体验，同时在不知不觉中也达到了宣传品牌产品的传播目的。
（四）情感的准确表达
在互联网产品设计中一定会涉及到两个词：“用户价值”和“用户体验”。用户价值需要满足用户功能上的需求，而用户体验则是用户在使用产品过程中的感受，情感化设计便是增强用户体验的一种方式之一。心理学理论认为：“情感是人对客观事物是否满足自己的需求而产生的态度体验”。因此产品真正的价值在于满足人们情感上的需求，带给人们内心愉悦的审美体验。设计者在设计时，应从形式只追随功能的思维中跳出，将注意力转移到关注用户的情感需求，将情感化设计理论融入到产品中，达到美感和可用性的统一。
四、HTML5广告页面设计的未来趋势
（一）技术成为创意本身
技术的不断革新同时也为设计带来了更多的可能性，HTML5广告《杜蕾斯美术馆》用全景三维空间技术打造了一个网上美术馆，设计构成的点线面及音乐渲染出的氛围给予用户一种全新的体验。同时AR/VR技术的发展为HTML5广告设计带来了更多的可能性，淘宝双十一的活动邀请函运用了VR技术，数量庞大的设计素材被很好地运用到广告中，无论是在空间感、立体感还是视觉设计方面都给用户带来了惊喜，HTML5广告设计也由此上升到了一个新的高度。
未来的广告发展，技术将成为创意本身，让创意变得更加不可思议。这不仅仅指在技术上追求酷炫的效果，而是通过技术不断产生新的创意，技术与艺术的巧妙融合进而提升体验才能更好地被用户所接受，最终达到满足用户需求的目的。
（二）满足用户“在场介入”的心理需求
今后一段时间的发展除了注重用户需求，参与感这一属性会被越来越多地运用到HTML5广告页面的设计中，加强用户与广告之间的更多交流与互动，无论是制作还是使用HTML5广告时，让用户参与到其中，满足用户“在场介入”的心理需求，激发用户的传播热情，用户既是广告的浏览者，同时也是广告内容的创造者。同时《参与感》1一书中也曾提到：“在设计时根据开放的节点做相应的互动设计，把基于互动产生的内容做成可传播的事件，让口碑产生裂变，既达到了宣传广告的目的同时也扩大了已参与者的成就感。”
在这个快速发展的移动互联网时代，社交传播优势逐渐凸显，用户在使用微信、微博等社交应用时更愿意主动分享自己感兴趣的信息，也更容易参与到其中。参与感这一属性介入到设计中，不仅会对产品起到更好的宣传作用，同时也能够倾听用户的心声，把用户当作朋友，让用户参与进来，建立一个可触碰、可拥有，和用户共同成长的品牌。
结语
总之，以HTML5技术为基础的广告无论以怎样的方式呈现给用户，广告本质并没有变，在设计时还是需要遵从基本的设计方法，同时了解用户的需求，才能真正做到打动用户，实现宣传品牌的意义。
参考文献
[1] Jesse James Garrett . 用户体验要素 [M] . 机械工业出版社，2011 (6)：60-68
[2] 黎万强 . 参与感:小米口碑营销内部手册 [M] . 中信出版社，2014 (8)：90-95
[3] 张余移 . 移动互联网时代HTML5页面的设计与营销 [J] . 东南传播，2015 (9)：87-89
[4] 周瑜嫄 . 移动端HTML5广告的表现形式及优势 [J] . 新媒体研究，2016 (1)：52-53
[5] 刘珩 . 移动富媒体时代的广告情感化设计研究——以HTML5广告为例 [J] . 美术大观，2016 (2)：135-136
[6] 付钟唤 , 王峰 . 从Web技术的发展探究移动端HTML5广告的产生 [J] . 艺术科技，2016 (12)：274-275
[7] 丁玲 . Android应用程序开发中HTML5技术的应用探讨 [J] . 信息与电脑(理论版)，2016 (17)：30-31
[8] 毓鑫 , 黄弘 . 基于移动互联网环境下的H5设计形式探究 [J] . 设计，2016 (23)：133-135