人机交互设计原则在H5广告传播中应用

傅文杰 库小伟

摘要：随着移动互联网的发展，新媒体广告也不断壮大，其中H5广告因其技术的延展性以及视觉多样性在市场中得到不断创新，并快速抢占市场成为新媒体广告的发展趋势。文章基于H5广告的交互性特点，对交互设计通用原则在H5广告中的应用进行了分析，归纳总结出我国H5广告领域目前的分类，并指出了未来可能的发展方向，为H5广告基于交互性的设计发展提供了一定的参考价值与支持，以促进新媒体广告行业的革新与发展。

关键词：新媒体广告；新媒体传播；人机交互

引言

伴随着我国互联网行业的快速发展，移动端新的媒介与渠道不断产生。在此背景下，亟待创新的传统广告行业纷纷进入其中，向互联网进行转型。其中H5广告借助微信、微博等社交媒体的普及以及抖音、快手等短视频平台的发展，不断拓展适用的场景与范围。与此同时，借助H5技术的发展，H5广告的设计与传播表现形式也在不断转变，并随之推进传播和变现力度。

1.  H5新媒体广告的技术基础

H5广告是大众对于在HTML5技术框架下制作的网页广告的简称。随着网页广告技术的迅速运用与迭代，现今已经不止应用于PC网页端，更是在移动APP领域得到了广泛应用。在近年因社交软件的爆发与普及，H5广告的增长也呈现井喷之势，短短几年时间，就被大范围地推广与使用。H5指的是第五代超级文本标记语言，其技术标准规范于2014年发布。HTML5的技术兼容性较好，可以在IOS、安卓、windows等主流操作系统以及目前所有的主流互联网设备平台中使用[1]。与上一代技术相比，H5技术的优点使其逐渐成为主流，其中H5对富媒体的支持，使得现今音频、视频文件无须第三方插件处理与编辑就可以顺利播放。在视频、音频以及图像技术上的进步与拓展，使其更加符合现今的技术潮流。用户习惯的转变也快速助推了H5广告的发展。第四代通信技术（4G）的普及与成熟，进一步推动了我国互联网产品的快速发展。用户接收信息的习惯逐渐被改变。短视频的兴起，使用户所接收的信息呈现碎片化趋势，使人们很难形成长阅读习惯[2]。另外，随着互联网获取信息的成本降低，用户快速养成习惯，加速形成对新媒体的依赖。

2. H5广告的现有形式

目前来说，H5广告形式众多，随着互联网新媒体的发展，H5广告在广告体系中也不断扩充。以传播形式进行分类，主流的H5广告主要有以下三类：

2.1 信息展示类H5广告

信息展示类H5广告，主要指通过图文排版展示信息内容，一般没有过度的故事情节渲染与排版，以简单直白的形式达到强化品牌宣传和产品推广的目的。就其形式来说，广告的指向性与效果十分明显。例如，近年来各种APP在年末与新春发布的各种年度账单与总结，是主流的表现形式，如网易云的年终听歌账单、淘宝生涯账单，就是信息展示类H5广告最热门的形式。这样的形式让用户乐于分享形成社交裂变，在展示品牌与增加用户黏性上效果非常显著。

2.2 互动场景类H5广告

互动场景型H5广告，一般是指营造一个情景或者气氛进行展示的互动广告，以类似互动小品的形式出现。常见的形式有创意清单、DIY海报、趣味问答类等。例如，华为2022年元旦所推出的《开工第一天，新年第一测》，重点在于交互传播、互动体验，以点击触点开始测试，答题完毕生成风格海报。互动场景类的广告形式众多，并随着广告宣传的需求在不断创新，总体来说，是H5广告未来发展的一大方向。

2.3 游戏类H5广告

游戏型H5广告主要有两种形式。第一种是在H5中嵌入游戏，以游戏元素的形式进行展开；第二种是以企业形象元素进行游戏植入强化，主要针对H5广告的游戏情节设计。例如路易威登推出了《麻Jump》，是基于去年的收集类游戏《LOUIS：THE GAME》开发，其目的是寄托于中国的微信社交生态，使本土文化与游戏相结合，达到触及大众用户的广告传播效果。就设计而言，麻将牌、中国符号化元素以及成都的城市形象元素相融合，可以达到品牌形象本土化的目的。现阶段由于开发难度的逐渐降低与爆款案例的增多，越来越多的品牌开始尝试H5游戏领域，可以预见，这一类型也将是未来可能爆发的方向。

3.  H5广告的传播特点与模式

2014年H5广告出现以后，很快就抢占了互联网新媒体的一席之地。H5广告已成为互联网广告中少有的存在。就传播特点而言，H5广告具有碎片化、消费场景与受众空间移动化的特点。在广告传播中“碎片化”早已成为常见现象，主要指通过破碎的形式以及相對应的视听语言进行广告传播，抓住用户的注意力以达到品牌宣传的效果。移动互联网天生有着“即拿即放”的特点，和互联网产品设计与用户习惯之间相互作用，不断被强化。此外，H5广告传播中的消费场景和传统相比，已经发生了巨大的变化，用户由被动接收信息转变为主动寻找品牌内容，这样可以更好地触发对应的体验消费场景，提高广告的消费转化率。

随着新媒体广告的算法不断更新，H5的广告传播场景更加定制化，通过营造对应的消费场景加强互联网广告的传播效果，最终实现广告转化与营收双重丰收效果。苏咏平[3]指出传统广告传播主要有两种模式，即“信息邂逅”与“搜索满足”。前者是指广告传播主要是通过广告主刻意地传播信息，让信息与受众之间有意识无意识地接触。后者指受众主动选择与筛选信息。而H5广告传播则将两者的特点结合，实现了特有的广告信息传播。不仅如此，现今受众掌握了传播途径，他们还拥有了选择是否进行二次传播的主动权。在H5广告传播中，首先，引导与促成用户二次传播是重要的研究内容；其次，受众的信息接收方式发生改变，传统纸媒与电视媒体逐渐被替代为用户PC+互联网的背景下，广告形式也随着互联网的发展而进行转变。广告的形式不断发展变化，广告效果与收益也在逐步提高，因此现今的H5广告开始针对用户获取信息的过程进行设计；最后，信息源与传播媒介变得模糊，H5广告打破了广告主、创意公司与受众的三方模式，集合互联网的特点将提出、制作、推广在不同媒介中进行穿插，而在这个过程中广告创意的重要性也被不断提高。

4.  H5广告中的交互设计原则

自20世纪80年代比尔·莫格里奇提出交互设计这一概念以来[4]，交互设计原则就在被不断地讨论与发展。其研究的目的是为交互设计提供一系列设计参考，以提高用户体验。就H5广告而言，其媒介主要为PC+移动端，因此，主要针对移动端、网页端的交互设计原则在H5广告中依然适用。但与之前的APP界面不同，H5界面主要用于广告宣传，因此为了达到更好的视觉效果，在交互的容操作性与视觉感染力中的侧重有所不同。我们将从三个方面对H5广告传播中的交互设计原则进行探讨：

4.1 以用户为中心的原则

以用户为中心的设计原則即UCD（User Centered Design），是交互设计中最基本的原则，其核心是把用户需求放在设计首位，设计目标都是为提高用户的使用体验[5]。UCD原则在不断地演化过程中形成了很多明确的设计指导，其中与H5广告相关的有两条：一是尊重用户习惯。随着H5广告的不断演化，形式早已由最开始的长图转变为具有丰富交互功能的短作品。由于传统新媒体广告从平面广告演变而来，对于用户交互习惯的关注不够。在H5广告设计制作过程中容易习惯臆断与猜测用户的行为习惯，缺少对用户行为的深入关注。二是在H5广告中越来越多的品牌开始制作互动与游戏类的作品，提高用户的操作效率。现今生活节奏越来越快，用户对于信息传递速度的要求越来越高。因此，配合用户的使用习惯，可以促使用户主动进行分享推广。对于用户而言，如在短时间内无法吸引用户进行使用继续观看，则失去了H5广告传播的机会，因此提高用户的操作效率也是推进H5广告传播的一条重要原则。

4.2 统一性原则

对于用户体验而言，在同一系统下相同含义的元素使用相同的设计语言，可以大大降低用户的学习成本。统一性原则可以让用户快速地把自己已有的认知，用于新作品的学习。由此，可以在H5广告中大大降低用户的探索成本，缩短浏览内容的时间。在H5广告设计中主要有两条原则：首先是视觉风格统一。在H5广告传播中更快地裂变与传播，建立在用户快速观看阅读信息的前提下。视觉风格的统一可以保证，在同一个H5广告中用户不用多次学习不同的作品界面降低学习成本。其次是交互方式统一。H5广告发展到现在，越来越多的作品需要用户进行简单的交互操作以增加互动性。但在传播过程中可以发现，过多过于复杂的交互形式会阻碍用户的H5广告的播放。因此在H5广告的设计中，应该避免交互环节过于复杂，并且在交互行为的设计上也应该尽力保持统一，以促使整体操作过程平滑流畅。

4.3 易用性原则

在交互设计中易用性原则是非常重要的一个设计原则。作品在使用过程中拥有更好的宽容度是近年来交互设计重点研究方向之一，比如适老化设计就是易用性原则下的一个设计趋势。而在H5广告领域中追求的视觉效果丰富、表现形式多样化的大背景下，易用性原则的重要度需要进一步提高。易用性原则有两大要求：一是页面的简洁性。在H5广告中直接的效果往往可以直接高效地传达广告的信息与目的，主动减轻用户的视觉与记忆负担，在优化用户使用体验的同时，还可以加强广告信息的传递；二是操作的易用性。这也是需要重点注意的方向。在H5广告中最后促成传播与裂变的就是分享传播，在促使分享的过程中操作链路越短，用户流失的可能性就越小，越容易达到广告传播效果。

5.  交互设计原则下H5广告设计建议

在H5广告创作时，设计原则只能指导我们对于设计方向的判断，而具体的设计建议就是在设计实践中具体的方法论指导。如图1是依据设计建议所完成的设计实践，而对应的设计建议主要有三点：

5.1 尊重用户习惯，强化关键信息

现今用户的阅读习惯越来越碎片化，在此背景下应尊重用户习惯。H5广告页面设计的页面信息的主次应富有条理，对页面中的版面信息流进行梳理，保证传递给用户的是关键信息，防止用户因出现阅读障碍而阻碍传播。设计师还应掌握基本的心理认知规律，避免出现简单的页面认知障碍，比如，设计中可以将交互按键放置在页面最为显眼的位置，也可以将页面风格进行简单化处理，通过视觉强调视觉重点，以明确传递给用户的关键信息，最终达到尊重用户习惯而提升用户使用体验、强化H5广告传播的目的。在图1的设计实践中将设计流程设置得很短，就是为了便于用户习惯的碎片化传播，而交互方式与流程单一是避免不必要的用户认知负担。

5.2 缩小操作区域，方便单手操作

移动设备的屏幕逐渐变大，类型也比较繁多。为保证在不同屏幕设备中H5页面的统一性，交互按钮需考虑单手操作的普遍性、页面信息在浏览过程中的完整性。在设计中慎用右滑的操作方式，尽量不使用过多交互层级，避免因调整转化页面造成误操作。在按钮设计上，需注意不要过于靠近底部区域，以保证信息的完整性提高用户体验。

5.3 信息清晰易读，简化视觉风格

易用性原则在H5广告设计与传播中最重要的体现就是信息简单直接的表达，由此可以提升用户使用体验，加快H5广告的传播效率。在设计上，信息扁平化是其中的关键，轻量化的表达不仅可以突出重点，还可以加快受众信息的接收，缩短广告传播的链路，避免用户的流失。在设计风格上，易用性体现在H5页面大量使用扁平化进行设计创意。设计实践的插画风格就以扁平插画为主配合背景凸显信息主题。

结语

本文以H5广告传播为切入点，分析了人机交互原则在H5广告设计中的指导与建议，但对于人机交互技术在H5广告中的应用并无详细分析说明。随着新媒体载体与技术的发展，H5广告未来会更加重视相互性、游戏性。新媒体广告也会随着H5技术与硬件的发展，更加重视交互体验与交互设计。

参考文献：

[1]徐磊.受众视角下H5广告传播策略研究[D].南昌大学，2019.

[2]杜蔚苗.移动终端H5广告互动页面设计研究[D].湖北工业大学，2017.

[3]舒咏平.“信息邂逅”与“搜索满足”——广告传播模式的嬗变与实践自觉[J].新闻大学，2011（2）：79-83，102.

[4]陈诗怡，吕燕茹.人机交互设计原则在可视化数据新闻中的应用[J].新媒体研究，2022， 8（14）：12-16.

[5]谭坤，吕悦宁.基于微信平台的H5广告设计策略分析[J].包装工程，2016， 37（20）：198-202.

作者简介：傅文杰，硕士研究生，助教，研究方向：互动媒体设计、交互设计。