软件开发与应用信息与电脑China Computer & Communication2019年第1期基于HTML5技术的移动端广告设计李 怡 刘大欣（哈尔滨职业技术学院，黑龙江 哈尔滨 150081）摘 要：随着移动终端技术和宽带无线接入技术的发展，移动端广告设计不仅能够提升用户体验，而且使得用户上网的使用习惯发生了改变，并推动了基于HTML5技术的移动端广告设计发展，极大地方便了用户与设计者的记忆和认知。HTML5广告打破了各种设计界限，将各种艺术表现形式的广告串联在一起，给用户带来不一样的感官体验。基于此，对HTML5技术的特点和移动端广告设计原则进行了介绍，并探究了基于HTML5技术的移动端广告设计对策，以更好地提高移动端广告设计质量。关键词：HTML5技术；移动端广告；创意性原则中图分类号：J524.3 文献标识码：A 文章编号：1003-9767（2019）01-128-03Mobile Advertising Design Based on HTML5 TechnologyLi Yi, Liu DaxinAbstract: With the development of mobile terminal technology and broadband wireless access technology, mobile advertising (Harbin Vocational and Technical College, Harbin Heilongjiang 150081, China)design not only improves the user experience, but also changes the user's Internet usage habits, and promotes the development of mobile advertising design based on HTML5 technology, which greatly facilitates the memory and recognition of users and designers. At the same time, HTML5 advertising has effectively broken all kinds of design boundaries, linking all kinds of art forms of advertising together, bringing different sensory experience to users. This paper will introduce the characteristics of HTML5 technology and mobile better improve the quality of mobile advertising design.advertising design principles, and explore the mobile advertising design countermeasures based on HTML5 technology, in order to Key words: HTML5 technology; mobile advertising; creative principles０ 引言第一，跨平台性。HTML5技术提供了开放式结构，能够实传统服务和信息获取方式已无法满足时代发展的需求；现应用与数据的有效接入，开发者无需考虑浏览器与设备内而移动互联网提高了信息获取的便携性、便利性及快速性。部数据联通问题。基于HTML5技术构建的站点与应用可以HTML5标准在2014年10月正式推出，彻底颠覆了PC端互兼容安卓系统、IOS系统、Windows系统等，只需要设计者联网的格局，优化了移动互联网的用户体验，在此基础上诞编辑一次程序，就能够将HTML5技术移植到不同开放平台生了以HTML5技术为主体的移动端广告设计。HTML5广告上，既能够降低开发和运营成本，又能够给企业营造更多的设计除了视觉效果外，还从触觉、听觉等方面为用户提供不发展空间。第二，支持更多的多媒体元素。在HTML5技术一样的体验和感受。发展过程中，Audio/Video可以为其提供强大的多媒体支持，１ ＨＴＭＬ５技术特点降低了Web页面开发对于视频混排、文字与音频的压力，用户无需在页面上安装任何插件，直接播放视频和声音文件。相比于Native APP而言，以HTML5为核心的Web页面在设计诸如微博类、新闻类、社交类应用等内容时，设计师具有轻便化的优势，可以在较短的时间内对新内容做出反应。还可以实现文字使用与多媒体混排，比原生开发更具优势。HTML5标准具有“富交互、富体验、重内容与跨平台”等第三，支持本地储存。与Native App相比，基于HTML5技要求，并对HTML4技术进行了大量的优化，降低了Web页术开发的Web页面所需要的启动时间较短，且联网速度更面的开发难度。实际上，HTML5技术特点包括以下几个方面。快，主要是由于HTML5技术支持本地储存功能。在应用过作者简介：李怡(1977—)，女，黑龙江哈尔滨人，本科，副教授。研究方向：网页制作、前端开发。— １２８ —信息与电脑2019年第1期China Computer & Communication软件开发与应用程中，不需要下载软件，而且再次打开网页时能够在短时间大量相同的广告内容我们没有多余的时间与精力进行阅读。内恢复数据，有效降低了网络流量，在手机等移动媒体中得所以在进行艺术创作时需要创意，以便观众更多地了解和赞到了广泛应用。第四，三维效果。基于Canvas、Web GL、叹产品的内容，这些正是创意的真正目的”。实际上，广告SVG及CSS3的3D功能，能够使开发者开发出更加清晰的设计的精髓主要是凭借脑洞大开的创意构思来整合信息，并Web页面布局，在浏览器中用户可以体验到更加惊艳的视觉将其传达给用户，通过精妙的创意吸引用户的注意力，以提效果。同时，Canvas的应用编程接口可以为用户提供数十个高信息传播的有效性。因此，在进行移动端广告设计过程中，方法，以确保Web绘图功能的实现，在使用Canvas标签的好的创意能够使广告具有深刻的思想内涵，并为观众带来无Web应用过程中，用户可以动态生成各种动画和图形图像，限的回味和遐想。借助Web GL技术方案，能够完成对复杂数据的有效处理，使三维的立体效果呈现在页面上。Canvas 和Web GL的出现3.2 基于HTML5广告设计的创新与实现可以确保Web应用独立完成绘图和渲染操作，使页面效果变3.2.1 支持多元化的多媒体元素得更加丰富。在颁布HTML5标准之前，需要借助第三方插件在网页上播放视频、音频等内容。例如，自主开发的多媒体插件２ ＨＴＭＬ５广告设计原则或Flash。插件的使用不会受到浏览器的安全控制，难免会2.1 以用户为中心出现安全隐患。自从颁布HTML5标准后，新增了Audio与在基于HTML5技术的移动端广告设计过程中，需要对Video两个技术元素。Audio元素主要负责播放音频文件；用户的潜在需求进行分析和研究，通过与用户进行交流和沟Video元素主要负责播放视频或电影。在播放过程中，由于通设计者可以及时发现问题，并提出有效的解决对策，以确Audio与Video元素的使用可以使支持HTML5的浏览器直保HTML5广告设计工作有条不紊的进行。对于HTML5技接进行播放，不需要安装其他插件，使广告更加具有趣味性术而言，可以通过广告宣传加深用户对产品的感受和认知，和创意性[1]。以期更好地满足用户需求。通常情况下，传统广告发布存在3.2.2 HTML5广告制作平台分析或多或少的强制性，导致用户只能被动接收信息。如今，随通常情况下，HTML5技术广告设计平台包括基础工具着互联网时代的发展，每一位用户都可以从多种渠道获得自类、轻营销模板类和功能引擎类三大类。轻营销模板类：与己需要的信息，既可以满足用户的基本需求，又能够推动PPT操作界面相似，操作方便简单，能够提供简单的动态效HTML5广告设计的发展。果和相应的模板，动态效果局限于淡出、进入及页面翻页等2.2 以技术为基础的创意性原则交互式操作，一般面向于个人用户，只适用于轻度营销，主要面向非设计专业者，仅有少数企业用户。基础工具类：相对于HTML5广告设计而言，创意性在整个广告设计过比模板类，基础工具类可以提供HTML5技术广告设计操作程中扮演着十分重要的角色，任何一种形式的广告都可以借平台，并将许多技术嵌入在网站中以支持一系列的高级功能助创意方法进行，以提高广告的趣味性和表现力。实际上，[2]，在不会代码的情况下使设计者能够设计出优秀的HTML5好的创意让人感到意料之外，情理之中，可以在短时间内广告，主要面向企业用户，倾向于营销化，少部分为个人用户。得到更多用户的关注，并为用户提供不一样的感受。由于移功能引擎类：主要面向于HTML5广告设计的技术爱好者或动端网络的用户需求呈现出多元化的发展趋势，导致时间呈技术开发人员，该类平台可以为广大提供基于Canvas的技术现碎片化，在一定程度上分散了用户的注意力；但是，基于引擎，能够完成相关的游戏开发。HTML5技术的广告设计，具有持续周期短的特点，使有内涵、3.2.3 基于HTML5技术的3D设计与实现有创意的广告能够更好地吸引广大观众，进而达到宣传产品实际上，HTML5动画效果能够借助SVG、Canvas和的目的。Web GL等技术实现，而且每一种技术都具有其相对独特的2.3 功能与设计的简洁性原则优势，是HTML5广告设计中较为成熟的一项技术。在一般HTML5广告设计主要是通过创意文字、图形、文案以HTML5广告设计时，只需要选择一种开发技术就能达到预期的广告效果。其中SVG技术是文本式矢量图形描述语言，及声效等视觉设计要素展现主题内容；因此，需要从单张页由W3C推出，专门为网络而设计的一种图像表达格式。借面、整体页面及广告元素等方面对移动端广告进行设计。助SVG技术可以将品质更好的矢量图形插入到网页中，通过３ ＨＴＭＬ５广告设计的标准与方法矢量滤镜可以使矢量图像呈现出多元化的视觉效果。Canvas3.1 创意是移动端广告设计的灵魂隶属于HTML5新的技术语言，能够被Java Script代码操作访问，允许脚本语言对位图图像进行动态渲染[3]，通过图形创意是广告设计得以顺利进行的基础，是广告设计的灵的绘制可以完成复杂的动画处理。HTML5技术在Canvas中魂。威廉·伯恩巴克是美国著名的广告大师，其曾经说“对于嵌入了大量的API，能够完成对2D图像的基本操作。— １２９ —软件开发与应用信息与电脑China Computer & Communication2019年第1期3.3 利用交互元素提高用户粘度为广告增加趣味性，而且还可以对广告起到一定的渲染效果。随着移动互联网技术的发展，HTML5技术的应用使广3.6 激励用户参与，进一步强化品牌感知告形式呈现出多元化的发展趋势，不仅可以为用户提供更加丰富的视觉体验，还可以通过与媒介之间的沟通使用户参“强调、引导、提醒”属于传统广告的关键词，而与其中，为用户提供不一样的感受。移动端广告的用户可以HTML5广告设计选择的关键词是“互动、拉新、留存以通过听觉、触觉、视觉等感官获得反馈的相应信息，以更好及分享”，其尝试着用“参与”取代“只读”，这些是地提高移动端广告设计效果。通常情况下，用户粘度可以作HTML5广告设计与传统广告的核心区别。HTML5广告传播为用户对品牌忠诚度评价的重要依据，一般是指用户基于使一般是指广告与受众间开展的全程对话，在广告传播中受众用和偏好的承诺，形成对产品重复使用的行为和意愿。在可以参与、分享、评论和互动，让用户对产品有全面的了解HTML5广告设计过程中，引入交互元素可以有效提高用户和掌握，进一步强化品牌感知，提高用户对品牌的印象[6]。粘度，并以用户的留存度和主动参与度进行衡量，与用户转４ 结 语换成本保持正比例关系。对移动端用户而言，交互元素对使HTML5技术属于新媒体时代发展的产物，虽然HTML5用粘性存在较为明显的正向影响[4]。交互环节不仅可以使被广告设计发展还不够成熟；但是，随着移动端互联网技术的动接受信息的广告传播方式得到改变，而且使能够在互动体验发展，有效推动了HTML5广告设计的发展。不仅可以满足中主动传播并接受产品信息。例如，苏泊尔HTML5广告设计广大用户的基本需求，还可以真正的打动用户，达到品牌宣过程中，设计的“谁先住进你新房”广告，以粘土动画的形式传的目的。把人们较为关注的空气质量问题呈现出来，选题符合社会热点话题，不仅可以增加用户粘度，而且还可以通过有趣的互参考文献动、直观的数据，使用户产生一种身临其境的感觉，在增加用户粘度的同时，为用户带来满足感，提高广告的设计效果。[1]陈婧娴,吴祐昕.基于HTML5的广告设计研究[J].设计,2017,5(15):57-58.3.4 精准的文案洞察用户内心[2]陈瑞.基于HTML5技术的移动学习平台设计与实现[J].对于HTML5广告设计而言，文案的目的并非欺骗用户信息技术与信息化,2018,11(6):149-150.选择用户根本不需要的产品，而是为用户提供所需求的产品，[3]张长春.HTML5技术在移动互联网中的运用[J].电脑编以浅显易懂的方式把产品具有的核心价值内容传递给用户。程技巧与维护,2017,11(8):161-162.HTML5技术创作出来的广告《我害怕阅读的人》结合了现[4]邓展鹰,韩浩浩.谈谈PC端流量转移至移动端趋势下代人过于急功近利，而很少有时间静下心来读书，以达到引广告投放的模式创新——以惠锁屏等手机广告软件为引入[J].导和鼓励用户多读书的目的[5]。商,2016(34):234.3.5 声效渲染为HTML5广告设计增色[5]周瑜嫄,王峰.移动端Html5广告的表现形式及优势[J].新媒体研究,2016(1):52-53.声音主要涉及到音乐和音效两部分，基于HTML5技术[6]郑闵谦,郝珊,朱华.移动端HTML5场景型广告设计研的移动端广告设计增添声效，不仅可以营造良好的广告氛围，究[J].设计,2017(23):144-145.（上接第127页）商务上有也新的改进。在考虑平台应用性的前提下，可更多宁德师范学院学报(哲学社会科学版),2014(3):42-45.融合新的信息手段和新型营销策略方式，从商务角度、技术[2]杜伟.我国生鲜农产品电子商务发展中的用户体验问题层面开发，真正克服短板问题，设计出被用户关注和认可的研究[D].武汉:华中师范大学,2015:64.信息平台。[3]何德华.生鲜农产品电子商务消费者购买意愿研究[J].西北农林科技大学学报,2014(4):85-91.参考文献[4]李洪双.社区生鲜O2O模式顾客满意度影响因素实证[1]欧伟强,沈庆琼.我国生鲜电商O2O发展模式探析[J].研究[D].贵阳:贵州师范大学,2017:627.— １３０ —