H5在地域文化创新设计中的应用研究

孙茜 辛彦庆

摘要：通过对现今新媒体H5和地域文化的研究，分析地域文化与新媒体H5相结合的需求与优势、创新设计现状，提出新媒体H5在地域文化创新设计中的应用方法，论述H5在地域文化发展的中作用。从新媒体H5的特点与优势入手，分析基于地域文化的创新设计在新媒体环境下发展的新需求，结合地域文化数字化创新思维，从而实现地域文化在H5交互中的创新应用设计。进行基于江西于都地域文化的H5创新实践，设计《寻找消失的“绣球草鞋”》H5小游戏。地域文化H5创意设计可以提高地域文化的曝光率，促进地域文化热点效应的产生，以及用户的参与度和活跃程度等，有利于地域文化的传播与发展。

关键词：H5；地域文化；交互设计；新媒体；创新

中图分类号：J0-03 文献标识码：A

文章编号：1003-0069（2024）01-0016-03

Abstract：Through the research on the current new media H5 and regional culture，this paper analyzes the needs and advantages of the combination of regional culture and new media H5 and the current situation of innovative design，proposes the application methods of new media H5 in the innovative design of regional culture，and discusses the role of H5 in the development of regional culture. Starting from the characteristics and advantages of new media H5，this paper analyzes the new requirements for the development of innovative design based on regional culture in the new media environment，and combines the digital innovative thinking of regional culture to achieve the innovative application design of regional culture in H5 interaction. The H5 innovation practice based on the regional culture of Yudu，Jiangxi was carried out，and the H5 mini game "Looking for the disappeared ‘Hydrangea Shoes’ "was designed. H5 creative design of regional culture can improve the exposure rate of regional culture，promote the generation of regional culture hot spot effect，as well as the participation and activity of users，which is conducive to the spread and development of regional culture.

Keywords：H5；Regional culture；Interaction design；New media；Innovate

随着移动端社交新媒体的发展，H5 技术得以迅速发展，基于H5 技术的交互式设计也随之不断进入大众视野，在各个领域中都展现出了强大的新媒体传播能力。在这个全民媒体的时代，网络媒介在文化信息传播中具有不可忽视的作用。H5 作为新媒体创意的载体和平台，丰富了地域文化信息的表现形式，并打破了原有传播的范围和界限，使人们可以通过更多的视角去了解地域文化。因此，在基于地域文化创新设计发展中，与新媒体H5交互的结合是当今地域文化创新设计发展的方向和趋势。结合当下新媒体技术，挖掘地域文化特质，利用数字交互创新思维进行艺术创新设计，充分展现地域文化的深刻内涵与底蕴，从而使地域文化在数字时代中获得可持续的发展，以扩大地域文化的影响力和传播范围。

H5全称为 HTML5，手机等移动客户端的动态邀请函、小游戏等都是 H5 网页。随着H5技术的不断提升，其逐步成为当今数字时代最主流的网页标记语言规范，凭借其固有的跨平台性在微信、微博等媒体社交平台发布信息，用户既能浏览文字、图片，又能观看动画、视频，也能进行交互小游戏与填写问卷调查，并能通过公共社交媒体将其分享转发出去，扩大其传播范围和广度。

地域文化是一種有着物质和精神双重属性的区域文化，其多是在本地区多年的发展中所汇聚、诞生的文化内容。[1]其中，地域物质文化是指地理自然景观等客观实质化存在的集合，是基于自然地理环境的差异所产生。精神形态文化作为文化系统的核心要素，是人们在社会实践及仪式活动中形成的观念意识，包括精神信仰、传说典故等具有象征作用的文化。[2]因其不同自然环境、历史环境和人文环境，从而凸显了地域文化内容的独特性、差异性、社会发展性等特征。

（一）地域文化艺术创新趋势

每一种地域文化都有着自身独特的设计构想空间，以及独特的审美和文化积累。这种特有的地域文化符号的构建形成，无论是对地域文化的继承发展，还是广泛的传播都具有重要的意义。[3]新媒体技术的应用是时代发展的必然趋势，在这个背景下，大众的审美观念、思维特征、生活娱乐方式等都发生了巨大的改变，文化创意也由传统的固化单一的感官体验向思维、行为刺激转变。因此，地域文化资源传播工作遭到挑战的同时也迎来了新的发展契机，通过新型媒介的开发与应用，将地域文化创意结合移动客户端、数位化虚拟现实等新技术，构建现代化的设计语义，开辟新的传播途径是地域文化创意发展的必然趋势，二者的结合拓展了地域文化宣传的受众面，加升了地域文化的认知度。

（二）H5在地域文化设计创新中的优势

新媒体时代下的文化创意是“文化”“创意”和“科技”的结合，这三者的相融合是中国文创发展的新方向。[4]新媒体的出现，允许用户参与作品，让用户能够主动探索作品中包含的信息，相对于传统媒体，其叙事方式更为开放，改变了静态、单向、固定、直观的传统媒体的特征，具有了虚拟性、交互性的特质，让用户掌握主动权。[5]H5在数字化媒介传播中是一个十分重要的媒介角色，主要有开发便捷、多维度传播、交互功能强大和表现形式多样等特点。在与地域文化创新设计结合过程中，应用 H5技术不仅可以展示当地特色自然景观，并通过答题、游戏、测试、打分等方式对地域文化进行互动、宣传，加深人们对地域文化的认识和理解，推广区域历史非物质文化遗产、风土人情、社会发展现状等相关信息，甚至还可以对地域场景进行仿真模拟，有助于提高地域文化的推广效果和品质。新颖、富有视觉冲击力的互动形式带给用户一种全新的地域文化交流体验，还能激发用户的分享欲，在互动中促进了地域文化相关内容的再传播。将文化创意与设计创新相融合，借助新媒体推广和交流功能，是 H5形式的地域文化数字化创新设计的巨大优势。

H5 的呈现方式种类多样，包括文字、动画、视频、小游戏等，其设计主要围绕视觉、听觉、交互等方面进行展开。基于地域文化的H5创意设计主要通过地域文化元素视觉化与数字化交互设计结合的方式，使地域信息内容更具趣味性和吸引力。

（一）图文展示型的H5设计

图文展示型的H5设计，主要以信息可视化为主，围绕页面的视觉设计进行，其交互行为一般采用最简单的滑动与点击，再配上适当的动态效果，音效方面选用与主题相符合的背景音乐。比如在东江寻乌县的H5宣传作品《印象寻乌》中，通过长页面与动态插画结合的表现形式，将寻乌县红色文化、客家建筑和“中国蜜橘、脐橙之乡”等特色景点、历史文化和社会发展串联在一起，画面过渡自然，古朴的背景音乐与整体淡雅的画面风格和谐一致，生动形象地突出了寻乌县的特色。《印象寻乌》用图文结合的画面表现建构了和谐统一的艺术化地域场景，可以提升寻乌县区域文化资讯的认知表达，从而有效提高了用户对此地域文化信息的接受程度，促进了用户对寻乌县地域文化H5内容的关注和传播。

（二）互动小游戏式H5设计

游戏互动式H5广告是移动端H5广告的表现形式之一，本质是利用游戏化的思维来解决广告信息的问题。对于增加用户黏性游戏化的互动体验拥有绝对优势。[6]游戏互动式H5将信息内容通过游戏方式进行传达，让用户从被动接收者转变为主动创造者。借助H5技术建立交互游戏的场景，将内容的娱乐化展现和媒介本身的特性结合到一起，通过多感官来实现游戏环境中的交互行为，增进用户与地域文化的深度交流。在视觉表现上，画面精美、风格强烈、动态流畅的页面设计是H5游戏设计侧重点之一。在H5页面呈现形式中，文字信息结合插画是当下较为流行的一种表现手法，插画相较于其他艺术形式更容易通过其夸张和鲜明的艺术感染力来触及用户的内心。[7]在交互操作上，互动小游戏式H5强调高度的可玩性和良好的游戏体验。完成游戏任务后生成用户自身的趣味化认识与个性化页面在极大程度上关怀了用户的个体自由，也更能激发用户的参与热情。在成都城市宣传H5小游戏《成都街头到底有几只“猫”？》（图1-3）中，以“找熊猫”为H5小游戏的串联点，可爱的大熊猫们分别藏在成都街头的各个角落，分辨出假的熊猫，找出10只真正的大熊猫就算游戏成功。游戏通过寻找最具成都地域影响力的大熊猫，欣赏成都城市风貌，领略成都街头与众不同的文化特色和人文风情，增强用户对成都地区独特的情绪体验和情感共鸣。

網易哒哒为浙江云和县制作的H5小游戏《来自「云和」的礼物》（图4-6），画风清新自然，以青山绿水为主，在配合整体画面调性的基础上，根据不同景点特色将画面分为5个部分，并且在色彩、形态上进行区分，在视觉上给用户新鲜感。配乐轻快松弛，使用户融入云和纯净自然的游戏场景中。通过创意小游戏的互动形式，还原了云和几大知名景点和习俗活动，并将云和地方特色产品“木玩”的制作工序展示其中，用户在进行木制玩具的制作、击鼓引牛等有趣互动中收集特色小礼品。这种有参与感、吸引力的游戏交互行为能促使用户主动参与其中，自发关注云和文化信息，有效产生二次传播，更好地宣传地区风土人情和民俗文化，提升云和地域文化价值及影响力。让用户边玩游戏边欣赏美景，多方位展现云和风光和文旅特色，达到打造“童话山水，文旅云和”旅游名城的宣传目的。

江西于都拥有悠久的历史、浓厚的红色文化和独特的地理位置，孕育了于都丰富多彩、特色鲜明的地域文明。但其地域文化资源亟待探索、地区宣传寻求转变，利用好新媒体进行艺术创新和文化推广十分重要，用创新思维挖掘于都文化表现形式的可能性和文化创意表达的新途径，在于都地域特色文化推广中解决自身的创新发展问题。因此，于都地域文化与新媒体技术的融合，能更好地引导于都地域文化产品的创新设计与开发，提升于都地区影响力，为于都地区的“新长征”文化产业和旅游业的发展注入了强大的推动力。

（一）作品前期内容整合

1.信息整理与提取

在数字化创意内容上，多元性地域文化信息的呈现是非常关键的。于都地域文化H5 设计内容主要从地理环境资源、历史文化、民俗活动以及现代社会发展等方面进行信息的选取与梳理。于都是长征出发地，红色文化是当地重要文化建设资源，主要选取了中央红军长征出发纪念馆等作为创作来源；在民俗文化方面选取于都唢呐“公婆吹”、客家古文等；在地区建设上，选取了寒信古村、潭头社区等代表性建筑。这些地点以及文化元素的选择尊重区域地理环境特色，充分考虑到地方历史继承发展的需要，应合其地域历史文化特征和民俗风格，包含了于都重点文旅和文化内涵，使H5全方位展现于都地域文化中自然、历史与人文的魅力，并通过这些代表性文化资源呼应于都“新长征”的文化建设思路，表现于都新长征之旅的精神风貌，突出展示于都地区历史底蕴和现代化建设成果。

2.视觉设计

在于都H5 的视觉设计上，主要从文字、色彩、画面风格等角度考虑，视觉效果所呈现的艺术风格与画面情绪是用户对于整体画面最初和最直接的印象。在于都H5小游戏视觉设计上，既要展现出于都当地的地理、文化特色，又要将其进行艺术化处理，契合数字媒体展示形式，符合现代化审美需求。整体画面表现上，色彩以青绿色为主，展现于都清新自然的地理环境，红色调加以辅助，突出于都红色历史文化，并且衬托出温暖和谐的社会生活氛围。用装饰性扁平风格的插画创意为表现手法，整体画面轻松活泼。在历史文化传递的基础上展现于都地域文化的传承和发扬，强调于都“新长征”建设中的新面貌、新发展。对于重要景点的介绍中，使用真实场景图片和动画视频使信息传达更加有效、生动。通过画面创意设计，艺术化表现于都重点地域信息资料，对于都地域文化进行有效的科普与宣传，让更多的人了解到于都文化。

3.交互设计应用

于都H5 交互选择小游戏的形式，用游戏通关的方式展开交互行为。在保证游戏逻辑的情况下，交互的设置控制在用户的能力范围内，协调游戏中的交互触点。在游戏过程中设计一些页面跳转设置，使用户在视觉上缓解对单一画面的倦怠感。游戏线索的触发选择画框的弹出，配合统一的音效，引起用户的重视，以获得关键线索，更好地进行后续游戏。在游戏通关时，设置线索框点亮机制，增强用户在玩游戏时的成就感。创作过程中注重技术的实用性与艺术性相结合，合理运用不同类型的交互手段，把控好各个交互行为在 H5中的节奏和表现方式，强调交互动作和画面表达的一致性，使整个H5 的操作更加完整流畅，并且增加了游戏参与感和趣味性，通过合理交互带给用户良好的互动体验和情感共鸣。

（二）作品整体设计

H5小游戏《寻找消失的“绣球草鞋”》加载页用进度条与绣球草鞋图标（图7）进行简单表现，呼应主题。游戏背景介绍和游戏玩法介绍后正式进入游戏环节。根据画面中动态提示点击中央红军长征集结出发地纪念园，弹出“丢失的草鞋”和第1个线索提示（图8），并点亮第1个线索框。线索提示点击于都长征渡口，转页进入于都红军长征纪念地点信息介绍（图9），返回后点亮第2个线索框并跳出第2个地点线索（潭头社区），根据此交互行为依次进行，最后找到雩阳美食乐园，点亮最后一个线索框，成功寻找到消失的“绣球草鞋”，并生成玩家专属卡片（图10）。在游戏过程中也可点击线索之外的其他地点，有相关文字信息弹出，进行简单的地点介绍，在游戏场景右下角设置照相机图标，可随时对游戏界面截图。游戏结束后，可选择继续探索或保存卡片将游戏分享给朋友。在游戏中可以听到轻快明快的纯音乐和大自然中的声音，進一步感受游戏整体氛围，各类交互触点和转场节点也有不同的提示音，以增强提示效果并提升画面活力。

《寻找消失的“绣球草鞋”》通过小游戏的形式，选用于都真实历史故事中具有代表性的物品——绣球草鞋，以此作为游戏故事线索，串联整个游戏逻辑。用插画形式艺术化地概况于都地理风貌，将于都特色景点集中展现在画面中，辅以动态插画丰富画面表现力和灵动感。以“消失的绣球草鞋”为主线，安排线索提示在于都4个特色景点中，分别强调了于都红色历史文化重点和于都现代化社会建设的快速发展，显示于都在“新长征”路上带来了崭新的社会风貌。

作为于都地域文化的创意设计，《寻找消失的“绣球草鞋”》从寻找绣球草鞋的过程中体验于都“长征-新长征”的过程。在长征小道中聆听红色故事，感知红色文化底蕴，欣赏于都美丽风景的同时，探索新时代成就，体会于都地区的现代建设和社会发展。H5从用户的第一视角出发，增加了用户对于都地域文化的体验感和主动创造性；场景介绍的探索强调用户对于都地域信息自主选择性，强调用户的个体兴趣；设置画面反馈机制增加用户黏性；生成“于都新长征守护者”玩家卡片以获得游戏成就感，促进社交行为，以进一步加大此H5小游戏传播，进而起到于都地域文化的广泛宣传的职能作用。此H5借助新媒体技术与互动模式，通过思维创新、内容创新、形式创新等方式，实现地域文化创新设计和数字化H5创意表达，全方位、多维度、立体化地呈现出地域文化的特色，充分体现了于都地域文化现实意义的有效整合和创新设计。综合多种感官体验设计，突出强调了于都红色文化的继承、发扬，呼应江西于都“新长征”的地区建设思路，充分体现了其建设成果，并通过H5强大的媒介传播性，在无形之中达到于都地域形象的开发、介绍以及宣传的目的。

媒介技术的快速发展给信息传播带来了深远的影响，在数字化传播实践的基础上，激发数字化创意传播多角度的视觉想象力和受众广泛参与的交互感，创造性地呈现了数字化传播的视觉结构和交互特质。[8] 地域文化的艺术性表达与传播要打破原有的传统形式与创意思维，深入挖掘地理资源、历史资源和现实社会资源，大胆运用各种创意要素，探求新媒体艺术创意话语的表达。以H5为载体，艺术创新与数字创意思维为导向，是积极推进地域文化的数字化艺术创意的生产和传播，促进地域特有文化的挖掘与传承、分享与互动的有效途径。通过这种方式，拓展了地域文化的传播和影响，带动地域文旅相关消费和经济发展，以促进地域文化的可持续性发展及建设。

参考文献

[1]王立森.地域文化符号在现代产品设计中的应用[J].工业设计，2017（02）：69+71.

[2]马瑞果，林伟.基于地域文化的文创产品设计新思路探索[J].包装工程，2022，43（10）：312-318.

[3]秦旭萍.地域文化符号视觉设计方法研究[J].设计，2021，34（15）：55-57.

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

[5]刘月林，于昭婷，宋立巍.面向非物质文化遗产数字化展示的互动媒体设计[J].设计，2016（14）：122-123.

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

[7]周艺璇.动态插画在H5设计中的应用研究[J].设计，2021，34（05）：143-145.

[8]汪宏升. 中国传统村落文化的数字化创意传播研究[D].中原工学院，2021.