基于动态插画形式的广州红色观光巴士H5 广告设计

郑钇弦 黄兰

（华南农业大学艺术学院）

一、H5 广告与动态插画概述

（一）H5广告

H5广告是依托于HTML5技术而实现的移动端网页广告，是视听与交互体验相融合的社会式内容传播载体，因其自身优势迅速占领了互联网广告行业制高点。传统广告往往是以图片或是视频的形式传播内容，H5 广告则在此基础之上加以交互的方式与广告观看者进行互动，增加了广告传播的交互体验感，包含视觉、听觉与触觉体验，更能引发受众兴趣。相比传统广告，H5广告有着创作自由度高、互动方式多样、传播高效便捷、投入成本低廉、投放时间自由的压倒性优势，能够以多感官的交互体验传播广告内容。[1]

（二）动态插画

动态插画是从传统静态插画中衍生出的一种新形式插画，是将传统静态插画进行动态化设计的表现形式，具备传统静态插画的特征，服从传统静态插画的设计原则与规律。[2]动态插画的表现形式是将传统静态插画的图形元素进行局部动态化设计，这种动态化设计具有一定的运动规律和重复循环性。动态插画的出现拓展了传统静态插画的创作空间，更具有趣味性，且能够高效快捷地与数字媒体平台进行适配，常被应用于互联网数字媒体平台广告设计，其丰富的动态效果更能满足当下人们的浏览习惯与审美趋势，具有强大的发展潜力。[3]

（三）动态插画形式在H5设计中的应用价值

随着互联网时代的来临，H5广告凭借自身的传播优势以及交互特征在商业及文化传播领域得到了飞速发展，动态插画形式在H5广告中的应用价值也逐渐被挖掘。一方面，动态插画的视觉效果能够增强H5广告的互动反馈，唤起受众的猎奇心，强化H5广告给予受众的情感反馈。[4]另一方面，H5广告为动态插画带来了信息传递方式的转变。H5广告的传递信息速度快、传播范围广、传播成本低，便于人们从整体理解动态插画的内容信息，H5广告所支持的交互形式与动态效果也更加丰富新颖，能够 在营造良好视觉效果的同时，更为直观地为受众做出信息引导。

二、广州红色观光巴士概述及其现状

（一）广州红色观光巴士概述

广州红色观光巴士是广州公交巴士集团推出的以“红色文化”为主题的双层观光巴士，包含8条不同主题的红色文化旅游线路。广州红色观光巴士将广州多个红色史迹、历史景点通过旅游线路串珠成链，旨在为游客提供一站式历史文化沉浸式体验服务。红色观光巴士车内配有志愿者讲解、车载语音导览，通过在移动的车厢内开展广州红色文化研学课堂，将以往的静态学习过程变为游览式的动态游学，以观光巴士旅游的创新手段传播广州红色文化。

（二）广州红色观光巴士的推广与体验现状

1.缺乏创新性的新媒体推广传播渠道

广州红色观光巴士目前的推广传播方式仍然以传统广告为主，主要通过在线下投放一定的宣发物料进行推广传播。线下投放的纸质宣发物料传播途径单一，难以针对特定人群进行定向投放，因此红色观光巴士急需创新性的新媒体推广传播渠道来提高其知名度。

2.线路景点宣讲方式单一乏味

目前游客在红色观光巴士的乘坐过程中，除了志愿者讲解、车载语音导览外（如图2所示），无其他导入景点信息的途径。这种景点宣讲方式难以让游客产生新鲜的体验感，缺乏一定的 生动性与趣味性，无法让游客产生较为深刻、整体的印象。

3.缺少适宜巴士空间的互动活动

红色观光巴士的站点间隔较长，因此在红色观光巴士行程过程中，除了景点讲解外还需要一定的互动活动为游客行程增加趣味性。目前红色观光巴士内部的互动活动比较单调，缺乏与巴士空间相适应的互动方式，例如观光巴士内摆放的党史读物与导览手册并不适合在巴士内专注阅读。

三、H5 广告设计对于广州红色观光巴士线路推广的意义

（一）延展旅游线路推广传播渠道

在传播广度方面，H5广告在制作阶段结束后可以直接生成二维码分享，从定制到上线的生产投放成本远低于传统广告，用户通过网络可接收到内容信息，通过社交平台分享形成裂变传播，因此它能够带来强大的传播广度。在传播效率方面，H5广告可以通过互联网平台实现面向目标人群的精准投放，并支持实时观察受众的浏览数据以调整宣传策略，大幅度地提升了H5广告传播精度，从而提升H5广告的传播效率。

（二）拓展沿线景点的导游宣讲方式

H5广告允许投放者自由定制内容，能够借助现代数字媒体技术将广州红色文化地标景点信息植入H5广告中，通过动态图形、触摸点击等实现红色观光巴士旅游线路景点的多维导览体验，给受众带来视觉、听觉、触觉多维度的感官体验，有效提升游客的主动探索红色观光巴士旅游线路景点信息的积极性。在增强导游宣讲方式的生动性与趣味性的同时，提升红色观光巴士旅游线路景点知名度，更好地推广广州红色文化地标。

（三）适宜在巴士空间进行投放互动

H5广告的观看十分便捷，无需占用大量巴士空间或是破坏巴士内饰的美观性，游客只需坐在座位上使用微信扫码即可随时随地流畅体验H5广告。H5广告能够有效丰富游客在广州红色观光巴士旅游线路行程中的空余视觉，有效增加游客在巴士行进过程中的趣味感，避免游客因行程过长而产生枯燥乏味感，达到良好的互动体验效果。

四、基于动态插画形式的广州红色观光巴士H5 设计创新思路

（一）设计内容层面的创新性

动态插画能够为H5广告设计提供设计内容层面的创新性。根据广州红色观光巴士旅游线路的特点，适宜通过充分挖掘广州红色观光巴士旅游线路沿线景点的艺术特点，来研究其动态插画内容创作形式。例如，提取广州红色观光巴士旅游线路沿线景点中的建筑、文物、典型事件、历史人物等可借鉴的形象。将现有元素进行提取，通过图形创意设计形成新的动态插画。在H5页面设计中，还可通过图形与文字内容的编排凸显巴士线路的特色，利用巴士旅游线路的特点，创作出打破同质化的H5广告设计作品。

（二）设计形式层面的创新性

交互功能是H5广告的核心优势之一，恰当的交互设计能够让用户产生更多的参与感，提升用户在使用中体验，因此交互设计是H5广告在设计形式层面的创新重点。要创造用户体验良好的交互设计，就需在设计前期对H5广告的设计内容进行正确、充分的解读，充分考虑广州红色观光巴士H5广告受众的使用场景、信息结构与界面元素的形态，设计相适配的交互形式，配合动效设计创造出恰到好处的交互体验。例如让用户通过点击来释放页面中插画的动态效果，为原本静态的页面增添趣味性，增强用户的参与感。

（三）设计表现层面的创新性

H5广告中包含了多维度的感官元素，主要是视觉、听觉元素，具体又可细分为图形、色彩、版式、音效等。[5]对于H5广告设计而言，想要快速调动起用户的情绪，首要的就是通过H5界面中的插画图形、色彩、动态视觉效果、简短的文案和恰当的音效反馈来第一时间吸引用户的注意，营造良好的视听感受，从而让游客能够停留在页面中继续深入浏览。例如使用对比较强的撞色和扁平化等适用于移动终端设备进行显示的设计风格来绘制插画图形，让用户更易于理解H5广告表达的内容，促进用户对H5内容的关注和传播。

五、基于动态插画形式的广州红色观光巴士H5 设计实践

（一）设计定位与内容提取

首先，应当明确广州红色观光巴士H5广告的设计定位。广州红色观光巴士H5是围绕“红色文化”旅游专线，以宣传“红色文化”旅游专线、丰富游客游览体验为目标进行设计的。因此，应当围绕“红色文化”文化旅游专线的线路站点搜集线路资料，根据每个线路站点的历史脉络研究各红色站点的地标性建筑特征，作为H5广告中动态插画与交互设计的参考，为游客留下鲜明的景点印象。根据红色观光巴士旅游线路的特点，其适合以动态插画为主，听觉体验、触觉交互体验为辅的方式设计H5广告。在此基础上，分别选取线路站点红色文化地标展开相关设计与应用。

（二）动态插画设计

1.动态插画的图形设计

广州红色观光巴士H5广告中动态插画的图形设计整体使用以扁平化插画的形式表现广州红色观光巴士沿线景点中的博物馆、纪念馆、纪念碑等元素（如图1所示）。插画的主体颜色使用红、橙、蓝色为主，这样的对比色搭配不仅更加具备视觉冲击力，还能让建筑造型从背景中凸显出来，同时也符合广州红色观光巴士以传播红色文化为主题的整体调性。插画的装饰元素以岭南传统花卉纹样元素与云朵、水波为主，意在凸显岭南红色文化的独特性，为插画的整体画面增添意境感。 最后加上景点的文字信息并采用简洁的排版风格，减少用户的认知与决策成本，让用户的视觉焦点集中在插画图形上。

图1 景点详情页

2.动态插画的动效设计

动态插画表现中最重要的设计因素就是动态效果设计，通过图形的动态造型变化调动视知觉，让用户产生视觉趣味，从而给用户带来全新的感受。[6]广州红色观光巴士H5广告设计中展示的动态插画是在图形设计的基础上进行分层，通过对插画图形素材的不同部分添加动画效果来达到整体的动态效果，例如通过对背景中的云朵添加移动效果来营造一定的氛围感、通过对水波纹添加淡入淡出的效果来营造出水面的动态质感，为整体画面增加趣味性。在完善图形设计的基础上，对页面中的文字、图形元素添加进场以及出场动效，以达到页面之间过渡的动态效果，例如为文字添加抖动的进场效果，相比原本的静态文字，更加能够为游客打造新鲜的视觉效果，从而引起游客继续在页面中探索的欲望。

（三）H5交互设计

广州红色观光巴士H5广告设计中的交互设计以引导式交互、语音类交互、行为式交互的设计为主。引导式交互主要体现在H5广告的首页与站点页设计中（如图2所示），通过模拟巴士启程与行经站点的形式设计界面框架，引导用户进入景点详情页面的探索；语音类交互包含导览讲解语音与按钮交互反馈语音，用户进入站点详情页后，H5页面自动播放内置的讲解语音，实现语音导览体验，同时用户每次点击按钮都会有声效反馈用户的交互状态；行为式互动利用一定肢体交互动作的变化实现与用户交互，用户可通过滑屏、点击等行为式互动方式切换页面、触发插画的动态效果，趣味性地展现广州红色观光巴士线路景点的地标场景。

图2 H5首页与站点页设计

六、结语

动态插画与 H5 广告的结合为广州红色观光巴士带来了更多样化的传播形式与导览体验，从设计内容、设计形式、设计表现三个层面增强了游客在广州红色文化巴士搭乘期间的互动与交流，以更新颖的形式为广州红色观光巴士拓宽了推广传播渠道。动态插画形式在广州红色文化巴士 H5设计中的实践证明了动态插画形式在H5设计中的创新路径可行性，为探索更多样化的H5广告设计形式提供了一定的理论与实践参考。