产吐月科技幺2019年第18卷第4期
基于H5广告的五大设计要素的互动性研究
□孟岩陈明婷
【内容摘要］分析H5广告作为一种综合性的艺术表现形式，依靠强大技术支持的互动力在网络广告中展现其独特的魅力和鲜明的优势；从图形、文字、音频、视频和动画五个方面对H5广告的互动性进行了详细的论述；提出了H5广告作为一种新的广告传播形式，越来越受到企业和用户的喜爱，并且在用户互动性这一点上优于其它传统广告形式，其重要性和显著价值日益突出。
【关键词】H5广告；设计要素；互动性
【基金项目】本文为国家级大学生创新创业训练计划项目（编号:201710363062）研究成果。
【作者单位】孟岩，陈明婷；安徽工程大学
H5在国内是指第5代HTML，也指用H5语言制作的一
切数字产品，所谓HTML（HyperText Mark-upLanguage）即超文本标记语言或超文本链接标示语言，
是由万维网（W3C）发明并逐渐成为网页标记语言的行业规范，它是构成网页的一种标记编写语言⑴。HTML5所具有的高度灵活性和控制性、能有效地降低开发成本和提高用户体验等皆成为它当下风靡一时的重要原因，如今行业内常常提到的H5广告更多
的是泛指社交媒体中具有互动体验特效的广告网页。因为HTML5平台的发展空间广阔，从而衍生了各种多样的游戏、应用、广告、OA、VR甚至是操作系统，而H5广告就是它所应用和涉及的领域之一,H5广告是由网页语言代码实现的一个数字广告形式，它依然使用图像、文字、音频、视频、动画等各种多媒体元素来表现广告创意，但用有趣的交互设计和沉浸式的用户体验来打动广告受众，一方面能够以趣味互动吸引受众视线关注、诱导转发，另一方面能够使受众沉浸于H5广告中渲染出的氛围，感受品牌情怀。
-、H5广告的特征
对比传统广告,H5广告具有更多的技术优势：成本投入
低、可跨平台打开、免插件零占存等。对于用户来说,H5广告的操作简单、新颖有趣⑵。对于普通设计师来说，不需要
掌握深度的编写代码能力就能制作出互动方式多样的H5广告；而对于企业来说，定制化的H5广告能更好地展示企业风格和品牌特征，为H5广告大军注入无限的新鲜血液。
（一）互动多样。H5广告能够实现的互动类型可谓是丰富多彩，从基础的视听互动、触感互动，到更有趣的重力互动、多屏互动，再到充满科技感的VR互动⑶。也正是因为这些多样的“互动”，H5广告拥有了传统广告难以企及的优势和特点。H5广告的互动形式不仅是简单地实现用户和平台或企业之间的双向传播，更是为了打造更加便捷的“多向传播”，使用户与用户之间，甚至是用户与多个平台之间能畅通无阻地进行交流分享。一个H5广告的内容游离于多平台多用户之中并受到互动影响不断产生变化再继续传播，许多病毒式传播的H5广告便是如此。
（二）媒体融合。传统媒体广告通常是由图形、文字、视
频、音频、动画等几种广告形式的单一或组合，而有着强大技
术支持的H5广告能够轻易将图形、文字、视频、音频、动画等多种媒体形式融合辅以多样的互动方式表现出来⑷。此外,
HTML5还能实现3D效果、虚拟现实场景搭建等，在未来,H5广告在越来越先进的技术支持下将会有更广阔的发展空间，它将会为广告行业带来多大的冲击和变革。
（三）个性定制。随着时代不断发展，消费者的购买欲望
和消费观念跟以往相比产生了巨大的变化，消费者开始追求
自我特点，个性展示，消费人更加追求独特新颖，与众不同
的产品与服务，为了迎合消费者的喜好，越来越多的企业也
逐渐推出个性化和定制化的产品和服务，而相应的推广广告也要变得更加引人注目与众不同才是。H5广告能够通过设置，使用户接收到专属自己的特定画面。
二、H5广告中图形的互动性
图形是一种语言，是一种跨地区跨文化的语言，能让所有人轻松解读的语言⑼。
图形作为信息的载体，它的作用就是要在最短暂的时间内将信息输入消费者的眼里和脑中！而H5广告中的图形较之传统平面广告的图形，最大的优势就是会动：变静态为动态，变化着的画面有速度感，比静态图形更容易引人注意，就像户外的霓虹灯广告比普通广告牌更容易引人注目的重要原因就是其颜的变化富有动感。
如聚划算推出的H5“超级聚享日”，是一个长图类H5广告，广告内容就是一张长图，但用户在下滑观看长图内容时，图片并不是完全静止的，图形中的侍女、衣服旁翻飞的蝴蝶、图形旁的文字注释等都是随着手指的滑动而逐渐显现。消费者在时刻注视着图形变化时，也就是在吸收广告内容。
三、H5广告中文字的互动性
文字是网络广告中承载信息的重要载体，它记录信息也传播信息，在广告中也承担着重要的信息传播任务⑷。现代广告中的文字越来越图形化，同一个文字，字体风格不同，所蕴含的情绪便不同。制作一则广告时，根据广告的接受对象的不同，选择使用不同个性的字体来配合特定语言艺术的文字，最终完成一句成功的广告文案。
•220•Industrial&Science Tribune2019(18)4
辛业与科技iM云2019年第18卷第4期
如百度手机助手推出的“古人中秋赏月”，因为中秋节是中国的传统节日，因此用中国风和中国古典元素来进行表现，呈现出古风风韵，所以在此H5广告中使用的字体便是与中华文化相呼应的中国传统书法字体，页面整体和谐统一。
四、H5广告中音频的互动性
音频作为一种单独的广告媒介存在于传统媒体和广告形式中，即有声媒介，它具有传播范围广、成本低、目标受众针对性强和互动性强等优势。随着新的传播方式的涌起和传播媒介的发展，音频在网络广告中优势越来越突出，不断发挥着更重要的作用。
作为网络广告中构成听觉要素之一的音频，在H5广告中它也扮演着极其重要的核心要素。它在H5广告
中的互动性体现在对用户的引导上以及使用户产生情感共鸣两个方面，是用户获得信息的一个重要途径。此外，音频与文字、图片等要素结合可以制作出吸引消费者眼球的交互式网络广告，使H5的内容和形式更加丰富饱满。
现今最为火热的短视频平台“抖音”出品的以中秋节为依托的H5十分出彩，该H5以“中秋吉时将之，朕要翻你牌”为主题，策划上以弘历观月图为岀发点，通过两分钟的视频，讲述皇室贵胄在赏月时各自献艺，祝福中秋。整个H5以画面和音频为主要的元素，利用音频讲解，穿插流行音乐和抖音的火热元素，使人更容易理解H5的主题，增强了互动性和趣味性。
五、H5广告中视频的互动性
在网络广告快速发展和因特网不断优化的今天，广告传播越来越重视传播速度和对受众的吸引度。在H5广告中视频的应用则是对音频、文字、图片以及动画等要素的综合和优化。
在H5广告中，视频元素具有很强的优势，其故事性强、传播速度快、传播范围广而且易于使受众理解并产生共鸣进行二次传播，而且视频的应用为H5广告的互动性提供了强有力的依托，使得H5广告的互动性和趣味性有了强有力的载体，利用视频的故事性，可以使事件更加完整、时间线更加清晰，受众更容易被吸引也更容易理解广告传播的目的。因此.视频要素在H5广告中具有不可或缺举重若轻的作用。
百度出品的视频类H5广告“’那个’真的重要吗”，利用第一视角拍摄的手法，推广中国移动百度卡。通过视频传达出“一元”很重要，因为移动百度卡“一元八百兆”的信息，前后反转吸引了受众的眼球，也抓住了受众的心理，使得该H5广告一出品就得到了广泛的传播。体现出视频在H5广告中可发挥的重要作用和影响。
六、H5广告中动画的互动性
说起现如今网络广告中最常见的动画形式，不得不提到的就是GIF动画和FLASH动画。
GIF动画是做网站广告、log。广告和POP广告必不可少的元素，它可以使呆板的画面变的生动活泼，使其更加具有趣味性和互动性。与此同时，其自身所具有的压缩比高、传播速度快和制作方便快捷等特点，使其在应用上更加普遍，深受各类广告制作的喜爱。而FLASH动画作为一种交互式动画设计工具，能够将各类设计要素重新进行整合、排列和
优化，以制作出优质的网页动画效果。FLASH格式的网络动画具有的良好的媒体表现手段，而且传播速度快，表现效果好，因此FLASH动画成为各种形式的广告制作的优先之选⑺。
在传播工具和手段不断发展进化的今天，GIF动画和FLASH动画凭借着自身的优势得以保留和发展，且与其他的传播方式相互结合，互相依存，尤其是在与H5广告的结合和连接的过程中，更是体现出了
现代传播方式的不断融合交错所带来的便捷和吸引力。H5广告在使用各要素时，为了加强与用户的互动，与用户产生情感交互，给用户留下深刻的印象使其被打动被情感氛围所感染，多会选择使用GIF动画或FLASH动画的形式，或者将两者与其他形式内容相结合以达到更好的效果。
无论是GIF动画还是FLASH动画，都是网络广告的重要元素，而在H5广告中，两者的作用也更加的明显和重要。通过技术的应用，传达出自己的思想和情感，与用户进行互动和交流，使H5广告发挥出最大限度的传播作用。
有趣的广告
腾讯游戏在“双十一”出品的H5广告“一份有温度的狗粮”，就是采用FLASH动画的形式，利用粘土风格，展现了十分的温馨和趣味性，使受众能更好地了解和接受该H5所表达的感情和目的，以达到更好的广告效果，实现以情感共鸣为前提的双方的交互和互动。
七、结语
H5广告突破了以往传统广告的形式，以技术的创新和情感交互和互动取得胜利，用互动的形式进行广告的传播，具有得天独厚的优势。而其互动性优势则是体现在了文字、图片、视频、音频和动画等各个要素的各个方面，是各个要素之间相互协作和优化的结果。利用多感官的传递，使得用户获得身临其境的产品和服务的体验。随着技术和网络的不断进步和发展,H5广告日趋成熟，其意义在于它是整个互联网数码时代设计浪潮的先行军，是超媒体表现社会化的开始。它将深入人们生活的方方面面，成
为新时代广告传播的重要方式之一，为网络传播的发展和完善添砖加瓦。
【参考文献】
[1]谭利.从H5的流行看广告互动设计[JJ.科技视界,2017, 25：62~63
[2]孟凡璐.基于HTML5技术的广告优势与设计研究[D].河北大学,2017
[3]杜蔚苗.移动终端H5广告互动页面设计研究[D].湖北工业大学,2017
[4]丁怡然.中H5广告的传播效果研究[D].辽宁大学，2016
[5]郭蕾.浅谈平面广告中的图形[J].艺术品鉴,2018,2:166 -167
[6]王韵.文字在平面广告设计中的应用[J].城市地理，2015,18:145
[7]石岩.探析网络广告中的设计要素[J].包装工程,2013, 34(14)：88~91
Industrial&Science Tribune2019(18)4•221•