基于移动端H5的无锡旅游推广交互设计研究

胡佳仪 田星瀚

摘要：目的：数字化时代，用户接收信息的渠道多样，移动端H5以其交互性强、传播效益好等优势风靡社交平台，这也为无锡旅游推广开启了新局面。将无锡地域文化与H5交互设计结合，能丰富无锡旅游推广形式和内涵，助力其高效传播。方法：文章基于H5交互设计与无锡旅游推广现状，指出两者结合的必要性及价值，以交互五要素和H5趋势为创新思路，在用户、场景、媒介、行为和目的等方面进行综合分析，构建用户画像，结合H5优秀案例探究H5发展趋势，得出插画形式H5和小游戏H5颇受关注，有助于明确基于移动端H5的无锡旅游推广交互设计方向。结果：在用户画像和设计方向的基础上，总结出插画形式H5和小游戏H5两种无锡旅游推广交互设计策略。通过“视觉—听觉—触觉”三类感官交互分析，得出插画形式H5能以艺术化的形式呈现图文内容，更容易引发用户情感共鸣；基于用户行为三大要素，即动机、能力、触发，得出小游戏H5互动性强的优势更能够引起用户兴趣、触发用户行为、增强用户体验感。结论：现今，无锡旅游推广进行得如火如荼，数字媒体已成主流，H5不仅要传播无锡旅游的相关信息，更要注重用户在了解过程中的参与感，提升传播效率和质量，最终实现商业价值和艺术价值的双赢，助推无锡旅游业高质量發展。

关键词：无锡旅游；旅游推广；H5交互设计

中图分类号：F592.7；TP393 文献标识码：A 文章编号：1004-9436（2023）23-0-03

随着“5G+互联网”的蓬勃发展，移动端的加载速率飞速提升。《中国移动互联网发展报告（2022）》显示，截至2022年底，中国移动手机用户规模达16.83亿人。这为活跃于移动端的H5提供了发展契机，H5的内容与表现形式变得更加丰富，同时也为无锡旅游的“出圈”带来了更多的机会。一方面，H5能够依托各种社交平台随时随地传播信息，用户可以实时进行分享反馈；另一方面，H5融合了视觉、听觉、触觉等不同的感知方式，能够增强用户体验感和参与感。

1 H5交互设计与无锡旅游推广现状

1.1 H5交互设计价值与现状

自2014年起，以H5为核心的内容创新成为社会关注的焦点，新媒体的推陈出新使信息内容的呈现形式更加灵活多样。移动端H5的具体形式主要包括：插画图文、测试、小游戏、一镜到底、实景VR等。它突破了静态图文的限制，能够结合视听体验和可交互性，提升用户感知、优化内容阅读形式，且具有极强的传播性［1］。

国内移动端H5更关注高效的传播方式，从依附于微信逐渐拓展至微博、知乎等各大平台，国外移动端H5研究起步较早，目前呈稳定发展的趋势，他们侧重于用户体验研究，认为成功的移动端H5交互设计首先要满足大众需求［2］。《H5营销下半场——2019—2020年度H5营销白皮书》一文显示，移动端H5的应用场景已深深植根于人们的日常生活和工作，它的价值随着市场愈发激烈的竞争而不断提升，成为一种符合当下需求的创新技术。

1.2 无锡旅游推广现状

无锡作为一座地理位置优越、文化底蕴深厚的城市，为旅游产业的发展提供了强大支撑。无锡的地域文化也是中华优秀传统文化的重要组成部分，因此很有必要面向世界推广无锡的地域文化。华彦钧的《二泉映月》将无锡的艺术表现打上了国际标签；紫砂壶经历锻造后冲泡出吴文化所特有的茶味道；惠山泥人中的“大阿福”以其热情好客的形象欢迎每一个来锡的游客。因此，地域文化赋能无锡旅游推广至关重要。

现今，无锡旅游推广借助数字媒体平台已渗透到人们生活的方方面面。例如，央视文化节目《非遗里的中国》聚焦紫砂陶制作技艺，展现出无锡“非遗”传承创新的新活力；由无锡广电出品的江南文化动画片《茶婆婆渔婆婆蚕婆婆》在央视网、学习强国等平台推送，播放量突破8亿；无锡发放50万张门票邀请港澳同胞前来旅游，此举被央视《新闻30分》报道。由此可见，无锡已在旅游推广方面取得部分成果，然而，这些形式仅仅是媒介单方面向用户输出内容，用户的体验感不强。为此，将无锡地域文化与H5交互设计相结合，旨在优化用户体验，为用户营造更多维的交互氛围。

2 基于移动端H5的无锡旅游推广交互设计创新思路

2.1 基于交互五要素的H5交互设计创新思路

交互五要素是交互过程产生的五个重要元素，即用户、场景、媒介、行为和目的［3］。简单来说，即用户在某个场景通过某种媒介操作达成目的。结合交互五要素构建用户使用场景，有利于绘制H5用户画像。

在基于移动端H5的无锡旅游推广交互设计中，目标用户是想去无锡旅游并正在网上查找攻略的游客，其大多是怀着轻松、愉悦的心情搜索无锡旅游的相关信息的，因此H5中的视觉呈现、配乐、交互等会对旅游信息的传达起到锦上添花的效果。H5能够在微博、微信、美团等应用进行访问及分享，与用户搜索旅游信息所使用的媒介完全重合。在使用H5之前，用户已搜索到一些碎片化的信息，它们大多以文字、图片、视频等单向传播的形式进行推广，因此，用户更加期待能够获取完整、详尽的游玩攻略，渴望体验更多元化的交互方式，进而深入了解旅游景点相关信息，如票价、距离、交通工具、游览时间、附近美食等。

另外，用户的行为与目的有着直接关系。在设计之前就必须明确用户目的，促使用户产生使用H5的行为。总体来说，用户目的具有随机性、模糊性、明确性。随机性是指用户带着好奇心浏览H5；模糊性是指用户还未明确具体游玩景点；明确性是指用户有了明确的游玩目的地，会在H5中进行更深层次的交互探索。因此，H5的首页应该拥有精美的视觉效果且标题简洁、指向明确，能激发随机性目标用户的好奇心，同时H5设计又需要删繁就简、交互简易，以吸引模糊性和明确性目标用户参与。

通过分析交互设计的五个要素，绘制用户画像，H5交互设计将更具针对性、更加严谨，从而有效传播和推广相关信息，这为基于移动端H5的无锡旅游推广交互设计创新做了铺垫。

2.2 基于趋势分析的H5交互设计创新思路

根据目前H5的变化，推测未来设计趋势，是提出基于移动端H5的无锡旅游推广交互设计方向的方式之一。在旅游推广中，H5不仅是一种信息传播方式，还是一种全新的流量转化方式。H5需要借助新技术实现进一步发展，提高内容品质、优化互动，助力其扩大影响。

随着传播技术的进步，传播形式对传播效果的影响在不断强化［4］。H5交互形式逐渐多元化，出现了插画、小游戏等展示方式。例如，纪念改革开放40周年的H5新闻《幸福长街40号》通过复古风格的竖版长图插画的形式得以展现，这类插画形式H5具有认知门槛低、形象生动、直观性强的优势；由网易新闻和贵州茅台合作的H5《茅台重阳登高计划》，用户进入动态古画中左右滑动，可跟随着茅台公仔的跳动，登上贵州的一些著名登高地，如迎宾山、飞天山等，在重阳节的氛围中，加深对品牌的认知。这类小游戏形式的H5新颖有趣、体验感强，能够高效助力信息传播。

通过分析H5发展趋势和优秀案例，可以发现插画形式H5和小游戏H5特点鲜明、优势突出，在塑造良好的品牌形象方面起到了积极作用，获得了众多用户的喜爱和好评。

3 基于移动端H5的无锡旅游推广交互设计策略

H5交互设计要尽可能满足用户需求，重视用户的情感表达，营造良好的用户体验，并合理预测和把控用户行为感知，引发用户情感共鸣［5］。本文基于用户画像和H5趋势，从多感官下的插画形式H5和用户行为下的小游戏H5两个角度，研究无锡旅游推广交互设计策略。

3.1 基于多感官的插画形式H5的无锡旅游推广交互设计

相较于传统的图文结合的H5，画面精美的插画形式H5更容易被用户接受，其信息传达更具趣味性、娱乐性。插画形式H5不仅能给用户带来更强的视觉享受，还能延伸至多感官，这需要通过可视化、可触性等手段刺激敏感的感官，将信息传达给用户，从而产生交互的可能性。

视觉传达主要表现在图像、文字、色彩等方面。通过视觉传播，刺激感官产生即时反应，视觉设计需要将每个具象或抽象的元素，在色彩、形态、质感、构图等方面进行统一，按照一定的规则将这些元素转化为具有相似特征的视觉图形。在基于移动端H5的无锡旅游推广交互设计中，可以采用竖版长图插画的形式，以建筑景点为主，美食、文化等元素为辅，运用山、水元素串联长图画面，以绿色为主色调，凸显江南风情，向下滑动的视觉动态画面依次是：灵山大佛晃头微笑、鼋头渚上樱花纷飞、三国城前勇士练武、惠山古镇“阿福”和“阿喜”挥手相迎等，丰富的插画内容可使用户沉浸其中。

听觉上的传达是整个设计的点睛之笔，烘托了H5的整体氛围，伴随着手势产生的背景音乐和音效，与动态插画相辅相成。在基于移动端H5的无锡旅游推广交互设计中，可以选取悠扬婉转且极具江南特色的背景音乐来丰富故事层次。音效能够优化交互体验，辅助动态图形的变化，为整体设计增添娱乐性和趣味性。

触觉方面的交互主要体现在手势上，结合手机端触控，在基于移动端H5的无锡旅游推广交互设计中，交互以滑动、点击、切换页面这三种手势为主，用户滑动到感兴趣的景点便可以点击查看具体攻略，同时也可以利用手势设计刺激用户转发、收藏、分享等行为。

通过“视觉—听觉—触觉”三类感官交互分析，插画形式H5能够将枯燥乏味的文字通过艺术化的形式，生动地将无锡旅游景点呈现在用户面前，配合音效和手势，带给用户沉浸式体验，引发用户产生情感共鸣。

3.2 基于用户行为的小游戏H5的无锡旅游推广交互设计

交互小游戏在触发用户行为、增强用户黏性等方面具备绝对优势［6］。结合用户画像和H5趋势，分析用户行为三大要素，即动机、能力、触发，并加以设计，促使用户产生交互行为以达到设计目标，而小游戏则具有更强的趣味性。

动机引导用户做出某种行为，它本身在于用户是否能够从中得到实质性的利益或满足心理诉求，可以通过简单有趣的小游戏吸引想要旅游的用户来体验。在基于移动端H5的无锡旅游推广交互设计中，小游戏画面展示的是无锡景点地图，以个性化的IP角色作为小游戏H5中的主角，并使用户以第一人称视角在某个具体的地点体验相关小游戏，如“鼋头渚看海鸥找碴”，最后可以通过收藏地图中感兴趣的景点，完善现实中的游玩计划安排。

能力是指用户与H5成功交互的能力，用户在完成某一行为的过程中，设计者需要度量做出该行为需要付出的成本，复杂的交互设计可能消耗大量的时间，因此，逻辑的合理度和小游戏的顺畅度至关重要［7］。页面设计要删繁就简，从而提升用户的专注度。在基于移动端H5的无锡旅游推广交互设计中，无锡景点场景和交互按钮既要风格统一，又要有明显区别，前后应保持连贯，嵌入任务流程的小游戏环节应具有明显的导向性。

触发的具体表现为在合适的场景下，将动机、能力合理地展现给用户，提高产生交互行为的概率。在基于移动端H5的无锡旅游推广交互设计中，首页提供点击入口、音乐开关、向下滑动等图标，触发用户完成体验操作。合适的触发点结合手势设计，帮助用户清楚了解交互的逻辑，如哪里可以返回、哪里可以再玩一次等，同时把握游戏节奏，配合合理的动效设计完成有趣的交互。

通过分析用户行为中动机、能力、触发三大要素，发现互动性强的小游戏H5更容易引起用户兴趣，并触发用户行为。用户可在小游戏交互中了解无锡旅游景点，在完成体验后进行转发、分享，从而提高信息的传播效率。

4 结语

数字媒体时代，人们在信息获取方面呈现明显的碎片化趋势，此次基于移动端H5的无锡旅游推广交互设计旨在利用互联网，通过H5这一方式将较为全面的无锡旅游信息传达给用户。本文通过交互五要素和H5趋势两个方面的创新思路分析，构建用户画像，同时找到明确的设计方向，最后总结出插画形式H5和小游戏H5两种无锡旅游推广交互设计策略。总之，H5丰富的表现形式和互动能够给予用户多变的感受，从而为无锡旅游推广开拓一条全新的途径。

参考文献：

［1］ 张艺欣.二十四节气传统文化儿童教育与传播的H5设计研究［J］.艺术与设计（理论版），2022，2（2）：74-76.

［2］ 楊瑞.情感体验下“空巢青年”主题H5交互设计研究［D］.湘潭：湘潭大学，2021.

［3］ 辛向阳.交互设计：从物理逻辑到行为逻辑［J］.装饰，2015（1）：58-62.

［4］ 兰小红，张鑫.现象级H5产品的生产和传播规律分析：以主流媒体国庆系列H5为例［J］.传媒，2020（4）：71-73.

［5］ 伏晓佳.基于动态插画形式的H5广告交互设计研究［D］.上海：东华大学，2020.

［6］ 张耿，项洋.移动端游戏互动式H5广告设计研究［J］.设计，2020，33（3）：131-133.

［7］ 王慧.武汉旅游文化传播主题的H5交互设计研究［J］.艺术科技，2022，35（10）：44-46.

作者简介：胡佳仪（1999—），女，江苏南通人，硕士在读，研究方向：数字媒体艺术。

田星瀚（1973—），男，山东菏泽人，硕士，副教授，系本文通讯作者，研究方向：基于民族传统文化的数字媒体艺术设计。