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

陈国鑫+姚铭昊+李立杰

摘要：H5广告是目前智能移动终端最常见的广告形式之一，人们在使用智能移动终端设备时，会根据移动终端的显示特点来选择观看H5广告内容。本文在对目前阶段H5广告进行传播特点分析时，对其所具有的人机交互的互动性给予了高度肯定，并以此为出发点进行了友善、亲切、富有趣味性的广告页面设计，力求使广告内容更加生动形象，更容易被用户接受。

关键词：智能移动终端；HTML5广告；互动页面；广告展现方式

前言：

H5广告全程为HTML5广告，是基于HTML5页面所进行的广告展示。与一般常见的flash广告和web广告等广告页面不同，HTML5广告由于其利用html进行程序编写，具有极强的共性和兼容性，同时浏览起来更加方便，因此拥有十分广阔的市场空间。目前以微信为主的智能移动终端APP，都存有内置的H5广告界面。H5广告是现阶段人们接触较多的一种广告形式。

一、操作区域设计

H5广告的载体为普通的智能移动终端设备，其应用的方向是用户所利用的碎片化时间，因此在进行广告页面设计时，首先应当考虑到页面观看者的观看场景。一般情况下，智能移动终端设备的使用者在使用过程中更加习惯单手操作，单手操作的特点使得屏幕显示的内容容量和内容排布位置都需要随阅读习惯而发生改变。一个好的H5广告设计，是需要迎合用户的使用习惯，使其在观看广告页面时感受舒心。因此在进行H5广告页面设计时，应当遵循两个方面。其一是尊重智能移动终端内置系统的操作逻辑，以苹果手机为例，苹果手机IOS系统的内置操作交互逻辑当中，操作者在手机页面进行向右滑动时页面直接进入手机后台，基于这一特点，H5广告为了避免造成手机用户的误操作，需要慎用手机内置系统的交互逻辑[1]，从而带给用户良好体验；其二是注重页面布局，目前的智能移动终端设备的屏幕尺寸普遍在5英寸以上，单手操作相对困难，H5广告页面在进行功能按钮布局时应当根据用户手指触碰的区域进行设计，例如为了方便操作同时保障页面显示完整，可以将按钮设计远离手机屏幕底部。

二、关键信息设计

H5广告交互页面其本质上是广告推送，目的在于通过推送到用户的广告内容使用户能够对广告所表达的产品信息进行了解，因此在进行页面设计时，需要具有主次之分，使主要内容或关键信息能够在页面当中被强调。目前智能移动终端的软件APP设计逐渐人性化，通常会根据用户的使用习惯对用户进行定制化的推送。例如“今日头条”APP，作为重要的新闻客户端，其内置的算法能够根据用户日常阅读新闻的频次和感兴趣的新闻内容为用户定制符合其需要的新闻页面，用户通过观看新闻页面可以很轻松地寻找到需要的内容，提升了用户的使用好感和使用亲密度。H5广告页面由于其编程特征的限制无法达到这一要求，但是仍然可以根据普通人的阅读习惯进行页面布局的设计。例如在视觉心理学的研究当中，研究者发现，人们在阅读过程中，阅读的重点排布在左侧或上方的时候，能够带给人轻松愉悅之感，并在大脑中形成对所观看内容的简洁印象。而当重点排布内容居于页面的右侧或者下方，则会使用户感受到沉重、压抑。

因此在设计过程中，广告交互页面的设计人员就可以根据这一特点和用户心理特征进行页面的排版布局。例如将页面所想要表达的关键信息放置在页面当中对用户视觉影像强烈的地方，不但会增加用户的好感度，同时还能够将关键信息进行重点突出，增强用户的印象。而在与用户交互的过程中，页面表现关键信息时的逻辑和条理就显得十分重要，在设计过程中，设计师可以采用色彩、光线的明暗变化来进行用户行为的引导。例如在豆瓣网上线使用的H5广告页面“我们的精神角落”中，通过多页面交迭的方式一步步引导用户通过点击和交互来解锁下一页面，用户根据页面提示进行屏幕操作，获取“钥匙”，从而打开下一页面。在这一过程中，用户的好奇心得到了满足，同时也使得页面当中的重点内容凸显了出来，增强了用户的印象。

三、交互功能的设计

前文所提到的豆瓣网“我们的精神角落”在进行关键信息和页面整体布局的过程中，使用到的技术手段正是页面交互。页面交互的使用使得广告页面的内容和特点更加丰富，也使得与用户之间的距离得以拉近。目前在进行H5广告页面交互设计时通常使用到的技术有动态元素和超链接。动态元素能够使页面当中所表现的文字和图画信息以动态的效果呈现出来，增强了页面的展示能力，一般应用于触感效果和视觉效果的使用中。例如国外经典的H5广告In space we trust[2]当中，设计者将页面当中所需要展示的内容通过时间轴的方式进行表现，用户在与时间轴进行交互的过程中，通过页面当中的动态元素进行触控操作，页面在操作时以数据和事件为线索逐渐展开，从而形成了其所表现的“宇宙探索”全过程。在页面的画面当中，为了能够增强视觉表现力，设计者还加入了光线的明暗变化，并通过暗红、暗紫、暗黑三种颜色表现“宇宙”正在跟随探索者发生变化和移动。用户通过点按屏幕上的“太空小人”，即可以控制小人向前奔跑，给人身临其境之感。

超链接主要应用于文字信息过于繁琐，内容复杂的情况下，设计者为了能够使页面简洁明朗，带给用户优质体验，会选择使用超链接的方式将不必要在页面当中第一层次进行展示的内容进行隐藏。用户根据自身需求，通过链接按钮的方式点击查看，从而避免因臃肿的条目使用户丧失浏览的兴趣。在进行超链接转换的过程中，为了实现快速转换，设计者可以在转换过程中加入动画过程，从而使转换更加自然。例如在一些H5广告页面的设计上，设计者选用蓝色闪动的球体进行主要元素的转变，在带给用户丰富的视觉色彩冲击后，也使得转换过程变得流畅自然。

结论：

综上所述，H5广告互动页面在进行设计时，设计者应当考虑广告页面所需要传达的重要信息，进而根据用户使用习惯和观看习惯进行丰富的用户引导，最终完成信息的传递。在设计当中，利用交互内容进行与用户的互动是目前H5广告设计所主要采用的设计手段，其不但能够拉近与用户的距离，还可以将关键信息进行重点展现。

参考文献：

[1]李晨.新媒体时代下的 HTML5 广告传播模式研究[J/OL].艺术科技，：（2017-11-06）.

[2]胡晓林，马振龙.基于H5技术的微信交互式广告在交互设计方面的“优势整合”创新思考[J].包装工程，2016，37（24）：124-129.endprint