武汉旅游文化传播主题的H5交互设计研究

摘要：近年来，以微信为代表的新媒体的迅速崛起和普及，为城市提供了更多传播形象的渠道，H5以其便捷性、交互性、传播性等优势在其中发挥了举足轻重的作用。文章首先分析H5交互性的特点和优势，运用案例分析法具体研究相关案例，再结合用户定位心理分析的结果，从交互行为、音效、视觉、界面设计对武汉城市形象H5交互设计进行设计实践，以期实现传播武汉城市形象的目的。

关键词：H5交互设计；武汉城市形象；城市宣传

中图分类号：TB47；G124 文献标识码：A 文章编号：1004-9436（2022）10-00-03

0 引言

随着新媒体的发展，越来越多的宣传都逐渐采取线上传播的模式，H5以其独特的传播方式迅速流行起来。H5交互设计综合了人类多感官来实现信息的交流与传播，由于其融入了动态效果、多维度体验，给互联网用户带来了全新的感官冲击。武汉的历史文化底蕴深厚，有许多历史建筑，在“一带一路”倡议下，作为长江中下游重要节点城市，其城市形象的传播获得了有利的发展机遇。在媒体融合时代，运用H5交互设计让用户在愉悦的交互体验中感受武汉城市形象的文化魅力，为武汉城市形象的传播创造了更有效的途径。

1 H5设计的优势

1.1 交互性

随着新媒体的发展，H5的传播方式引发了一波新媒体交互风潮，H5的交互设计超越了静态图形的限制，通过不同的交互方式以及多感官互动体验形式，整合了视觉、听觉、触觉等不同的感知方式，有效吸引了用户的注意力，从以往的单向传播转向双向传播。人机交互通过调动用户的肢体动作来获取信息，常见的触觉交互形式包括点击、左右滑动、连续按压、手指滑动等手势，能够增强用户交互的体验感和参与感。

1.2 传播性

随着新媒体的发展，利用互联网查询信息的渠道逐渐转向手机、平板等智能设备，给信息传播带来了极大的便利。目前，通过移动互联网传播信息，意味着用户可以在任何地方、任何时间通过手机等设备获取各类信息，并可以实时进行分享反馈。由于其推广成本低，H5制作周期短，更容易响应公众的即时需求，迅速拉近了用户与H5之间的心理距离，形成了良好的人机互动体验。

1.3 社会性

随着在互联网的高速发展，人们依靠社交媒体在网络上建立了自己的社交圈，区别于以往的社交圈，信息时代的社交圈大大提升了信息的传播效率，比如，如今作为社交媒体的QQ、微信就为H5的传播架设了一座桥梁，人们可以更好地通过这些平台在自己的社交圈随时随地分享、转发自己的所见所闻，进行一系列的线上交流互动。

2 《幸福长街40号》H5案例分析

2.1 情感共鸣式的交互体验

情感共鸣式的H5交互设计利用熟悉的活动和场景与用户进行互动，从而使用户产生情感上的共鸣，把用户带入“回忆杀”中，大大削减了交互时的疏离感。

作为纪念改革开放40周年的H5新闻《幸福长街40号》，其设计通过竖屏版长图连环画和音效等多感官融合的方式展现出来，连环画带有文化怀旧与记忆的基因，具有认知门槛低和直观性、形象性强的优势，加上融新旧于一体的创新互动形式，很容易获得全年龄段、全文化层次人群的喜欢［1］。该H5设计选取了240个具有代表性的历史事件和现象，通过场景化设计如实还原了当时的社会风貌。

在H5新闻中融入场景，让用户借助熟悉的场景、经验和行为来接收和理解信息，进而主动传播信息，这是激励受众转发、传播信息的重要手段［2］。以具有年代气息的热闹街景为背景，展现人们当时的穿着打扮、生活习惯、交通方式，加强人们对改革开放历史记忆的情感体验，让人仿佛置身于那个年代，感受到当时的时代氛围，让人们从中找到共鸣，拉近人机之间的距离。除此之外，还添加了极具年代感的背景音效，比如巷子胡同里的吆喝聲，人们来来往往的脚步声、纷纷杂杂的说话声，抑或是某个街角里播放的流行歌曲，这些具有时代感、情感化的元素轻而易举地把人拉回到那个年代中去。

2.2 故事讲述式的交互体验

在众多种类的H5交互设计中，故事讲述式的H5更具有吸引力，允许受众与之互动，从而助力进一步的传播。

在H5新闻《幸福长街40号》中，用户通过手指上下滑动屏幕长图便可以看到1978—2018年中国改革开放40年以来的发展变化，新闻采用线性叙事的方法展现了改革开放40年的社会变迁。此外，每张街景图还设置了拍照互动的环节，用户以第一视角进行相关交互体验，在交互中了解当时发生的历史事件，大大增强了用户体验的趣味性。

由此可见，新媒体正快速发展，H5设计被广泛运用且产生了很好的传播效果，正在往多感官化、情感化、注重用户体验的方向发展。

3 武汉城市形象推广H5设计实践

3.1 受众定位心理分析

近年来，随着新媒体的发展，移动设备给信息传播带来了极大的便利，这种传播方式受到了年轻人的青睐和追捧。如今，互联网与人们的生活密不可分，信息传播速度越来越快，网红城市、网红景点等新媒体时代的产物应运而生，各大城市也开始通过各种媒介平台进行不同形式的宣传。互联网越来越普及，但是此种宣传形式的主要受众群体仍然是年轻人。

新媒体的快速发展与应用广泛影响了现在的年轻人，他们会在旅游前通过互联网搜索相关信息做好旅行攻略，旅游景点攻略、美食攻略等已经成为新一代人旅行出发前必做的功课。因此，为满足用户的使用需求，许多推广设计开始通过各种创意宣传吸引用户，H5设计通过多感官的视听体验吸引用户的关注，趣味的交互设计提高了用户的参与积极性，并使其愿意将这份乐趣分享出去，以吸引更多的年轻人前来参与。所以，根据年轻人热爱旅行、喜欢追随潮流的特点，现在很多城市与景点都开始利用新媒体进行宣传，也越来越注重用户的参与性与体验性，通过各式各样的趣味方式吸引着新一代年轻人的注意力，制造新的潮流动向。

3.2 交互性行为设计

交互设计需要把用户体验放在首位，而福格行为模型能够帮助探究用户行为，其认为触发、动机、能力是成功触发行为的三个关键性因素［3］。

H5交互设计的触发点是看H5分享内容或标题是否满足用户的需求，所以对H5标题和内容的选择至关重要。因此，将武汉城市形象的H5设计的标题设置为“一起去武汉游玩吧！”，趣味性的标题能够激发用户的好奇心，从而实现外部触发。从标题文字所展示的信息来看，用户也能明确得知该H5设计的内容，便于用户识别该H5是否满足自己的需求动机，从而激发用户的下一步行动。

动机是引发人做出某种行为的力量和念头，该H5设计采用讲故事的方式进行内容的展开与互动，与用户产生共鸣，并激发用户阐述自我的深层次需求。通过故事设置引发用户好奇心，以第一人称视角来讲述故事能让用户具有沉浸感、参与感，仿佛自己就是故事的主角，以此成为用户进行交互行为的动机［4］。武汉历史文化底蕴深厚，从地域优秀文化中汲取养分，通过展示武汉旅游景点的场景插画，设计个性化的人物角色引导故事的发展，以人物角色在武汉的游玩过程为故事线，用户通过交互行为，同角色一起完成游玩体验。

在角色的旅行游玩过程中，分析用户在情景中可能产生的交互行为，为用户的身份赋予更多可能性，从而唤起用户的同理心。在设定中，用户化身为正在武汉旅游的人，在主界面地图上可以自由选择想要参观的景点，按照提示触屏点击按钮便可以进入相应的子界面，子界面会出现此景点的详细介绍以及与此景点相关的旅行攻略和附近小吃推荐，并且在每个景点处设有拍照打卡的交互行为，打卡完一个景点后，用户通过触屏“左右滑动”这一交互方式，便会回到主界面，接着点击会话框，界面下方便会出现与人物角色进行对话的弹框，然后可通过点击屏幕和人物角色进行问答式互动。互动结束后，可以自行选择下一游玩景点，此时在背景地图上会自动连成一条轨迹，并显示上一景点到此景点的实际距离和交通方式，以便最终游玩路线符合用户的实际需求。用户做出不同的选择会形成不同的游玩路线，最后可以通过此条游玩路线实现自己现实世界的游玩计划安排。

通过这些交互设计，能有效增强用户的参与感，最终形成一个既能展示武汉城市形象又能满足用户需求的H5交互设计。游玩结束后，结尾界面设有转发分享、再玩一次的功能，用户可以选择再玩一次或者通过链接的方式进行分享与转发。

能力是指用户实现与H5交互完成的能力，所以交互设计应尽量与用户的能力相匹配。比如，在互动内容中增加游戏化的体验设计，将交互体验设计成通关模式，这样可以有效激发用户的参与动力，但需要注意的是，如果游戏难度设置得太高，就会提高行为触发的失败率，因此需要设计者选择适合用户的游戏交互难度。

3.3 音效设定

音效是渲染场景氛围的重要环节。在H5设计中，声音效果分为背景声音效果和特殊声音效果。背景声音可用来推动故事的发展和增强主题的气氛。特殊声音效果则是用户在激活某个元素时产生的特定声音效果，能起到丰富听觉等感官体验的作用。在音效设定方面，背景音效选择应具有趣味性的音乐，特殊音效则根据不同的背景特点，选择不同的音效。

3.4 视觉设计

视觉设计采用扁平化的风格，通过元素简约化的形式将复杂的信息简洁化，可以突出信息的重要部分。随着互联网的发展，扁平式风格也很适合移动网络设备。目前，网络上经常可以看见扁平化风格的设计，这种极简的设计也很符合当代人的审美需求。此外，色彩对于视觉也同样重要，色彩具有烘托、美化页面的特点，以具有代表性的色彩与形状作为联系手段，形成视觉引导力，能够引导用户感受地区风土人情和民俗文化［5］（见图1）。

3.5 界面设计

开始界面是用户进入H5看到的第一个界面，界面传达的内容需要满足用户的需求，以处于旅行状态的人物角色设计加上地图样式背景作为开始界面的画面元素，加上“一起去武汉游玩吧！”的主题文字，让该H5交互設计所传达的信息一目了然，能够吸引用户的兴趣，引起外部的触发（见图2）。

进入“一起去武汉游玩吧！”H5交互设计后，就会进入主界面，主界面是一张介绍武汉各景点的插画地图。用户可在此页面选择任意景点进行交互，在交互操作上，点击景点便可以进入相应的子界面，子界面是介绍景点详细信息的页面，用户采取“右滑动”这一交互方式，便能退出子界面回到主界面。在主界面上，除了设有进入详情介绍的子界面外，还设定了与人物角色进行互动的对话提问情节，只要点击相应景点旁的对话框，主界面下方便会弹出与人物角色对话的会话框界面，以问答的方式对景点信息进行呈现，用户点击相应答案就能实现问答体验（见图3）。

结束界面添加了分享转发、再玩一次的功能，用户可以选择再玩一次或者通过链接的方式分享转发给好友。

4 结语

随着技术的不断进步，传播媒介也在不断发展，H5交互设计已成为全媒体时代的重要产品，它改变了传统的设计思维，利用不同感官互动给予用户最好的精神体验和心灵享受，给消费者带来沉浸式的互动体验，从而获得用户的认可。H5交互设计利用各种丰富的表现形式和互动给予用户多变的感受，为城市形象宣传开拓了一种全新的途径，产生了积极的宣传效应。

参考文献：

［1］ 马梅.新闻报道的融合、继承与创新：以人民日报H5作品《幸福长街40号》为例［J］.青年记者，2019（4）：63.

［2］ 谭坤，吕悦宁.基于微信平台的H5广告设计策略分析［J］.包装工程，2016，37（20）：199-200.

［3］ 胡玲俐.乌镇戏剧节文化推广中H5广告的应用研究［D］.上海：东华大学，2021：41-42.

［4］ 徐子彧.基于用户体验的H5交互广告设计研究［D］.武汉：武汉纺织大学，2020：18-19.

［5］ 孙雅君. H5技术支持下“魅力威海”文化创意的设计与呈现研究［J］.通讯世界，2020（1）：277-278.

作者简介：王慧（1997—），女，湖北京山人，硕士在读，研究方向：艺术设计。