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.