基于HTML5技术的广告交互设计研究

陈芳

摘 要 文章从HTML5的特点和应用出发，通过对比的形式将HTML5技术中所含有的优势和特点进行总结，并且在个案分析中将HTML5广告在交互性方面的设计进行展现。经过对案例的分析，找出设计中所存在的问题，根据问题所在找出案例中所存在的问题，然后找出解决的措施和对策。

关键词 HTML5；广告设计；交互性

中图分类号 TP3 文献标识码 A 文章编号 1674-6708（2019）231-0101-02

1 HTML5广告的优势及其设计

1.1 基于HTML5技術的广告优势

1）互动类型丰富。HTML5广告同时需要内置感应器进行协助，来完成有趣的人机互动行为。此外，设备还能够实现地址导航的互动行为，从而带给用户不同的娱乐效用，增加用户的使用感受和效果。而互动恰好也是HTML5广告最吸引人的地方[1]。

2）多媒体形式。传统广告所实现的广告也包括多媒体形式，但是对于受众来说，吸引力太小，虽然加入了小型Flash的动画，但是仍然无法将所有设计集中起来进行处理。而HTML5技术很好地解决了这一问题，在无安装插件的条件下便可以实现3D影院版效果的广告[2]。

3）个性化实现。当前，人们用来获取信息和资源的形式十分丰富，但是消费者却拒绝广告带来的有关信息。因此，面多这种情况，大多数商业广告最具有竞争力的方式便是获取用户的注意力[3]。而HTML5广告则在很大程度上解决了用户注意力短缺的现象。该技术可以通过上传照片或者小游戏的方式，来使用户进行分享和转发，符合当前人们的使用习惯[4]。

1.2 交互与交互性设计

1）交互性设计的方式。互动主要包括人机互动以及人际互动。本文中主要指的是前者，通过互联网进行指令的传递，可以在短时间内使用户得到及时的反馈[5]。在互联网的背景下，与用户进行互动的形式有很多，在Web2.0时代，主要包括以下几种：

（1）触屏互动。HTML5广告利用智能手机的触屏技术，增加了用户手指的互动，同时使视觉和触觉共同参与，加深了对品牌以及广告的印象。（2）表单互动。此类互动方式经常出现在节日祝福以及邀请函中。目的使收集相关信息，大多数出现在结尾页，能够区别于传统广告的形式，便于与客户之间进行交流。（3）影像上传互动。大多数的活动上会出现上传照片等类型的形式，用户通过上传招聘，通过手机App客户端将手机内的照片上传到服务器端，在既定的框架下对照片进行剪辑或加工，从而得到搞笑的效果。一个典型的应用是在《黄小厨一周岁生快》中，则出现了黄磊对于该活动的宣传视频，而点击“我想要吃”按钮后，便将应用跳转到拍照或者上传照片的页面中，从而进行图片的分享。（4）重力传感互动。在目前比较流行的智能手机中，HTML5广告配合重力传感器可以实现更加复杂的互动效果。2015年圣诞期间，AKQA公司就推出了梦幻水晶球，通过手机便可以360度无死角的欣赏水晶球中的景象，还可通过摇晃手机欣赏雪花飞舞的景象。

2）交互性呈现的优势。在设计的广告内容中，HTML5广告主要有以下设计优势[6]：用户在进行互动的过程中可以集中精力投入到广告设计的场景中，在理解广告主旨、提高广告产品功能的理解性方面具有明显优势，也为进一步分享提供了心理？基础。

2 HTML5广告设计中的问题以及对策

2.1 交互性设计中的问题

1）交互设计趋同。双屏互动的方式增加了受众的游戏娱乐化体验，并且能够在潜移默化地过程中介绍产品的性能，在一定程度上提升了用户的参与互动性。但越来越多的广告都使用此类方式，便使用户感觉没有新意，时间久了就不愿体验了，用户的黏性也降低了。

2）交互方式受众不易接受。HTML5广告互动的方式无法更好的传递给受众就会失去体验的快感。新华网上市制作的HTML5广告，通过寻找屋子中带数字的物品，这些数字构成了新华网上市的股票代码。虽然这一游戏较为新颖，但内容过于简单，与新华网并不匹配，最终的互动没有达到相应的效果，没有提高用户的黏性。

2.2 交互性设计对策

1）创新交互性设计形式。如今，广告的交互性设计为了能够吸引手中的注意力，使用更加新颖的交互方式来进行设计。别克出品的《一指之力逃亡记》广告，不再是普通的赛车游戏，而是设置了特工逃亡路线，并由手中安排故事发展情节和鉴于逃亡路线。只有通过正确的方式，才能够最终获得别克汽车的援助进行逃亡，如图1。

2）紧贴目标受众真实需求。互动需要更加贴近用户的需求，因此，需要根据用户的习惯，尤其是在微信中进行传播时，更要符合受众的习惯，只有满足了受众的需求，才能够达到让受众乐于分享和转发的目的。

3 HTML5广告设计总体思路

3.1 广告目标设定

广告目标在广告计划中十分重要，能够为其定性。主要针对广告对象和类型进行确定，用来宣传品牌，进行预热和推广。

3.2 受众调研分析

通过问卷调查等方式来得出有关信息，HTML5广告需要与受众之间产生联系，但是也要确定目标群以及平台受众的整体情况，根据手中的整体形象和行为习惯进行展开，以便日后活动的开展。

3.3 创意构思

广告的构思需要让产品与用户之间建立一定的关联，通过这种关联让受众产生情感层面的接触。在经过众多优秀的想法提炼过后，形成超凡的创意构思，并围绕受众的需求习惯进行开展。

3.4 设计制作

作为广告设计的中心环节，需要通过相关的创意元素对此进行表达，并通过与传统互联网广告进行对比，此类广告的设计形式比较特别，更为符合受众的习惯。还要通过情感来打动受众，使其与产品之间产生感应，从整体效果上满足受众的要求。

4 HTML5广告设计思路实践

4.1 广告目标

广告目标主要为起宣传和引导的作用。在2017年全国两会期间，根据人们关心的热点和民生事件设计了两会热点调查界面，如图2。

4.2 受众分析

根据受众的基础来分析其具体的传播内容，然后达到用户处。该群体具有一定的知识背景，能够对前瞻信息进行表达和分享。

4.3 创意构思

在与受众建立关联后，更加优秀的设计思路转变为受众容易接受的广告，可以实现意想不到的效果。在本案例中，利用碗里小球的“+1”操作实现投票，能够增加趣味性的通知，让用户完成广告的意图。

4.4 设计制作

通过参与触动小球的游戏，奠定了基调。设计动画节奏适中又不失趣味性。通过游戏的方式进行选票征集。结果页通过对投票数的统计而制作的20个词汇的汇总。

4.5 技术实现

该广告是基于HTML5广告设计平台易企秀而制作，技术支持来源于易企秀，无需更多技术支撑。

5 结论

本文通过对HTML5技术下的广告进行研究，得出了只有集中用户注意力，才能提高广告作品的关注度，促进用户分享才能有利于广告的宣传。本文中所提出的问题主要是交互创新形式与受众的黏性问题，并且需要针对广告的设计思路和设计目标，对受众进行中体调研，来实现创新构思。并且为了验证思路是否正确，笔者进行了实践设计进行研究。

参考文献

[1]邓威.基于HTML5的Web界面设计模式初探[J].电脑知识与技术，2018，14（33）：184-186.

[2]张扬扬.Html5互动广告在移动终端的用户体验探究[J].藝术与设计（理论），2018，2（11）：64-66.

[3]盘俊春.一款专业的HTML5课件制作工具：炫课[J].中国信息技术教育，2018（Z3）：116-117.

[4]刘晓茵.浅谈LED大屏手机交互系统解决方案[J].机电工程技术，2018（S1）：57-59.

[5]易家玉.HTML5动画“用户体验”的审美特性[J].当代动画，2018（1）：104-107.

[6]李颖超，张宏涛，伍超君，等.基于HTML5的交互式移动学习平台探析[J].电脑编程技巧与维护，2018（6）：85-86，98.