浅谈移动终端H5广告互动页面设计的思考

蒋飞燕

摘要：近年来，随着科学技术的不断发展，移动终端的功能得到了大幅度的优化，手机已经从原始的通讯工具转变为移动新媒体。作为最新版超文本标记语言，H5通过移动终端以及自身独有的技术，逐渐成为现阶段广告传播的重要方式之一。因此，本文结合H5的相关概念，对H5广告互动页面的设计以及H5广告互动页面设计的应用进行研究。

关键词：H5广告互动页面;媒体融合;移动终端

在移动终端新媒体蓬勃发展的影响下，由于传统媒体具备很大的局限性，以至于传统广告受到了一定程度上的冲击，导致其传播效果大幅度下降。同时，移动终端H5广告应运而生，开启了移动终端广告的新时代。与传统的广告相比，移动终端H5广播通过其独特的互动方式使用户产生了全新的体验，获得了广泛用户的高度好评。因此，本文结合H5广告的优势，对H5广告如何进一步提升用户体验进行探讨。

1.H5与H5广告的相关概念界定

1.1H5技术的特点和优势

H5指的是Hyper Text Markup Language第五代版本，用中文翻译的大致意思是“超文本标记语言”。它能够将互联网的表现进行语义化，以此为人们的解读提供方便，并且能够提高移动设备多媒体应用的兼容性。与APP相比，H5的投入成本较低，其具有跨平台打开、存储的功能，并且操作十分简单。设计师可以结合用户的行为或者移动设备的型号，适当的调整页面。这样一来，用户在任何型号设备上操作页面的分辨率、相关脚本功能都会进行自动切换。简而言之，H5具有三点优势：

①跨平台。即H5能够在移动端、PC端、安卓或者IOS等任何具有兼容性的系统当中打开，并且任何信息内容都可以传输。

②本地存储。受手机内存限制，用户下载的软件、视频、音乐等都会占据较大的空间。H5的本地存储功能能够实现在移动端的零负担运行，其本地存储空间能够容纳H5页面当中的所有元素，从而缓解手机存储的压力。

③免插件。用户在使用电脑进行观看视频时，大多情况下都必须安装相应的插件或者APP，而H5却能够将图像、视频等多媒体任意插入，这样一来，用户无需安装任何APP便能够浏览视频，方便用户的使用。

1.2H5广告的传播特点

1.2.1互动性

现阶段，随着媒体融合趋势的到来，互动性逐渐被凸显。从宏观上看，新媒体的融合在一定程度上改变了受众人群的信息获取方式，受众人群的自主性得到了增强，并且部分人员还能够参与到传播当中。H5广告的传播形式便充分的体现出互动性这一特点，其广告涉及体育、游戏、招聘等多方面领域，充满了生活的各个角落，受众人群能够通过移动或PC设备实现对产品的体验，从而获得相关的知识与信息。H5页面的信息传递方式有受众人群的加入后变得更加丰富有趣，能够在潜移默化中提升产品的知名度。同时，H5广告宣传的过程中还有抽奖等活动的加入，不仅能够提升受众人群的兴趣，还能够更深层次的提高宣传效果。

1.2.2移动性

互联网的普及，使人与网络之间的联系变得更加紧密，衣食住行等基本需求都与网络有关。随着信息时代的深入发展，传统信息传播方式已经无法满足现阶段社会的基本需求，因此，新的广告形式必须要能够打破传统时间与空间限制，拥有实时性、移动性的特点。而H5恰好满足了这一要求，其不仅突破了空间与时间的限制，还能够无视设备的局限性，只要保持网络的畅通，在任何时间和地点，受众人群只要动一动手指便能够收获所需信息。

1.2.3及時性

在互联网技术的影响下，各种媒介在打破传统壁垒的同时，还形成了相互之间的融合，在一定程度提高了信息的获取速度。对于部分受众人群来讲，时间就是金钱，其获取信息是否及时直接影响到工作的走向与发展，因此信息的“及时性”显得尤为重要。H5跨平台、免插件的特点使信息的传播速度得到了有效提升，用户在使用的过程中能够更快的获取到想要的知识与信息。

2.H5广告的页面设计

2.1H5广告的设计原则

2.1.1操作方便

H5广告页面当中，应该重点突出关键功能。随着移动端的不断改进与优化，屏幕已经逐渐从半屏转变为全屏，这就使页面的呈现内容变得更加丰富化、多元化。因此，H5广告的页面设计过程中，应该突出操作按钮的设计，设计人员通过对页面不同内容的划分，能够使用户清晰的注意到功能按钮与关键元素。这样一来，用户在使用过程中便能够实现方便快捷的目的，同时，还能够提升用户进入浏览状态的速度。

2.1.2突出主题

任何广告对于主题的突出都尤为重要，H5广告的页面设计也依旧如此。用户在通过零碎的时间进行浏览时，通常都是进行粗略的筛选，如果缺少清晰的主题、内容冗杂，则很可能导致用户放弃继续浏览，从而降低H5广告的传播效率。由此可见，H5广告的页面设计应该明确广告主题，并且页面要具有清晰的层次感，对广告内容进行科学合理的组织。

2.1.3科学互动

作为互动页面，最显著的特点便是对“互动”的突出。因此，H5广告设计时应该结合多方面因素，构建出合理、清新的广告页面结构。同时，还需要将游戏、动画以及视频等相关动态插入到页面当中，这样不仅能够提升用户的参与性，还能够增强广告页面的娱乐性和趣味性。另外，还应该完善页面当中索引、查询等功能，从而使用户能够在第一时间找出所需的信息，提高用户对页面的印象。现阶段，在互联网移动终端媒介的融合下，使媒介具有更加丰富的运用方法。H5广告当中视频、动画的插入能够带给用户不一样的感官体验。

2.1.4视觉体验

手机、电脑等终端设备刚刚兴起的阶段，人们出于好奇会对页面进行盲目的点击，而随着现阶段互联网成熟的今天，用户已经开始有目的进行页面浏览。因此，H5广告页面的设计除基本的视觉元素之外，还应该将艺术设计充分融入其中，重视用户的体验效果，借助于自身的成熟技术对互动页面进行特色化设计。不仅如此，设计人员还应该从用户的角度出发，科学合理的分配页面呈现内容和元素，并加入一些引导功能，使用户能够更快、更准的找到想要获取的信息。H5广告艺术性的设计应该充分迎合用户的实际体验，从而提升用户对广告的浏览兴趣，实现双向互动。

2.2H5广告的设计方法

2.2.1缩小操作区域

随着移动设备的逐渐更新与优化，已经从原来的半屏变为如今的全屏。因此，H5页面的设计当中应该加入单手操作的功能，使用户通过简单的操作便能够进行单手操作，使操作范围尽可能的缩小，保证在页面中下区域用户手指能触碰到的位置。所以，H5的页面设计应该遵循两点原则：①谨慎使用右滑操作。很多移动设备都将右滑默认设置为返回，因此，当用户在单手操作时，在进行右滑指定的操作时，很可能出现返回上一页面的情况出现。②按钮尽量要距离页面底部远些，这样在进行操作区域缩小时，才能够实现对屏幕的合理适配。由于移动设备种类较多，屏幕大小也不尽相同，因此，为保证缩放操作后，屏幕当中能够呈现出完整的信息，按钮应该设计在距离底部较远的位置。

2.2.2扁平化设计

互联网时代不断深入发展的背景下，人们已经逐渐习惯用零碎的时间来进行阅读和浏览，如果页面内容主次不够清晰，将会导致用户丧失阅读兴趣。据相关心理研究显示，同一屏幕，上侧、左侧相较于下侧、右侧会使人感到更加轻松自在。因此，设计人员在进行H5广告设计时，应该将这一心理因素融入其中，遵循此类规律进行页面的版式设计，将重点内容尽量都呈现在屏幕左侧或上侧，迎合人体大脑的浏览习性，从而方便用户进行阅读。由此可见，設计人员应该结合不同的情况和经验，将页面的关键功能设置在用户注意力集中的区域。

2.2.3信息清晰易懂

移动终端通常都是通过单一的二维平面进行丰富内容的呈现，与视觉扁平化的设计相比，信息结构扁平化更加能突出设计人员的能力水平。现阶段，广告页面的设计理念逐渐向扁平化、轻量化趋势发展。轻盈的信息呈现方式不仅能够突出页面当中发的重点内容，还能够降低用户获取信息的时间。轻量级页面设计在一定程度上解决了用户注意力不集中的问题，使用户能够通过更加直观的方式获取到想要的信息。这种页面设计方式在简约的同时又不失时尚，其中与时俱进的元素是满足现阶段社会以及人们需求的必备条件。

3.H5广告页面设计的应用

3.1H5互动广告版式设计运用

3.1.1可视化图形

与传统媒体设计观念方式相比，H5广告可以不借助任何插件加入视频、图片等元素，使图形在页面设计当中起到更加丰富、生动的作用。图形对于信息的表达并非文字可比，H5页面当中的图形主要包括平面图像、二维以及三维图像等不同形式。H5广告的信息化图形设计，在很大程度上缩减了文字的呈现量，利用图形信息进行文字内容的表达。有限的移动设备屏幕当中应该尽可能的将想要呈现的内容进行充分的表达，而相较于文字 ，图片更加具有冲击力，能够吸引用户的注意力。例如，现阶段的淘宝网页当中，各种形式的图片海报层出不穷，用户能够根据自身的喜好和兴趣点击相应的海报，引导用户进行购买。借助可视化的图形，能够将相关的数据进行有效的结合，从多角度进行主题的阐述与表达，使页面更加富有生动性、丰富性、形象性。

3.1.2自适应字体

传统媒体页面中的字体设计都是参照其页面内容而制定。而H5广告其具备传播的开放性，不仅能够实现页面的无限叠加，还打破了传统媒体页面文字容量的限制，并且强大的兼容性能够很好的移植到不同平台当中。因此，为更好的适应不同设备的屏幕尺寸，其字体的设计要进行科学的考量。H5页面设计当中的字体设置一般都在18号以上，字形通常也会选择加粗，从而提升文字的辨识度。另外，页面的文字风格要与所阐述的内容相同，整齐的字体能够使整个页面显得连贯、整齐。

3.2H5广告动效运用

3.2.1超链接的运用

页面异化是降低用户浏览兴趣的主要原因，其主要是由于页面内容文字过多、内容冗杂而导致。对于这一问题，设计人员可以在设计过程中加入超链接来适应不同屏幕尺寸。文字过多会使用户产生阅读疲劳，从而降低浏览兴致，超链接指的是借助某种指向，使某一页面到达另一页面的链接。文件、图片或者页面可以设置为目标页面。超链接工厂应用在非单一页面当中，这样能够有效的降低H5页面当中出现过多的文字。这一技术的应用，在很大程度上激起了用户的浏览兴趣，并且能够使用户对页面保持长期的关注，促进了广告信息的主动传播。为保证页面当中设置的超链接能够得到流畅、准确的跳转，设计人员可以通过在页面当中插入图形或文字的方式对用户进行导航，从而使用户能够直观的理解设计人员的目的，实现用户与页面之间的良好互动。

3.2.2媒体融合的运用

近年来，受移动互联网冲击，导致传统媒体的入口价值很大程度上的降低。而对于新媒体来讲，也由于传播模式的改变而受到人们的质疑，使其公信力有所下降。媒体融合可以理解为传统媒体与新媒体之间的融合，移动终端的新媒体无论是从技术上还是内容上都充分融合了传统媒体的优势，而传统媒体也能够借鉴新媒体当中丰富的新鲜元素，可以说，媒体融合是具有传统媒体优势的移动终端新媒体传播形态。例如，春晚与微信的合作便是传统媒体与新媒体融合的典型案例。通过观看春晚，用户便能够通过摇一摇获得随机的现金红包、新年祝福等。而随着H5技术的成熟，各大媒体更需要对优质的资源进行整合，通过彼此之间的互相弥补实现优势的最大发挥。

结束语：综上所述，受信息技术蓬勃发展的影响，互联网使人们的生活变得越来越丰富，人们足不出户便能够获取自己想要的信息。为迎合社会的发展需求，满足现阶段人们的根本需要，移动端H5广告应运而生。本文结合H5的相关概念，对H5广告互动页面的设计以及H5广告互动页面设计的应用进行详细分析，通过对H5广告优势以及H5广告提升用户体验的原则和方式的论述和研究，对我国移动端H5广告发展有着重要意义。

参考文献：

[1]沈黎萍，陈奕栎. H5广告的优势与设计思路探究[J]. 产业与科技论坛，2019，18（08）：113-114.

[2]孟岩，陈明婷. 基于H5广告的五大设计要素的互动性研究[J]. 产业与科技论坛，2019，18（04）：220-221.

[3]陈佳娜. 探析广告设计课程中引入H5广告的必要性与方法[J]. 工业设计，2018，（06）：116-117.

[4]肖蓉. 手机端功能型H5广告的创意设计研究[D].青岛科技大学，2018.

[5]郑舒逸. 移情化设计在H5广告中的应用[D].浙江理工大学，2018.

[6]梁圆. 新媒体环境下互动广告创意表现研究[D].湖北工业大学，2017.

[7]邓暮媛. 手机端H5广告中互动化插画设计的研究[D].湖北美术学院，2017.