基于H5技術的交互頁面在旅游景區導覽系統中的應用

馬妮 周潤苗

摘要：移動互聯網的快速發展，帶來了生活方式的巨大變革，形成了“移動生活形態”，基于H5技術的交互頁面也滲透到人們生活的各個方面。通過H5的內涵、H5交互頁面的介紹，在智慧旅游的背景下，探索基于H5的交互頁面在旅游導覽中的應用方式；借助H5交互頁面的優勢及傳播特點，來實現景區智能導游、傳播推廣及數字化便捷服務，以滿足游客的個性化需求，提升景區的服務水平。

關鍵詞：H5技術；交互式頁面；景區導覽系統

中圖分類號：TU984.18 文獻標識碼：A 文章編號：1007-9416（2018）06-0080-02

隨著移動社交媒體的迅猛發展，尤其是微信的普及使用，H5以迅雷不及掩耳之勢興起，基于H5的交互式頁面如燎原之勢發展蔓延。H5給傳媒方式帶來新的變革，也帶來了信息傳播的新模式。

1 H5解讀

1.1 H5是什么

HTML是Hyper Text Markup Language 的簡寫，即“超文本標記語言”，HTML的第五代版本，簡稱H5。H5從2008年1月發布第一份正式方案開始，經過8年時間，到2014年10月才最終發布規范標準。H5將互聯網的表現語義化，能更好地被人類和設備解讀，并能更好地兼容在移動設備上，實現多媒體的整合。

通俗地說，H5是為了在移動設備上運用多媒體而開發的高級網頁技術，適用于跨平臺應用程序、視頻、動畫、圖形、風格、排版和其他數字內容發布，在內容呈現上與PC端網頁無異。隨著以微信為代表的移動社交媒體的迅速發展和廣泛應用，基于H5技術的內容和產品日趨流行。

1.2 H5的特點和優勢

相比于APP，H5投入成本較低，具有本地儲存和跨平臺打開功能；對用戶而言，其操作簡便；用戶可以直接瀏覽體驗無須下載儲存；H5能根據用戶移動端的設備，自動切換頁面的分辨率、圖片尺寸及相關腳本功能等；同時，H5 具有優良的交互性，符合互聯網社交分享和移動信息傳播的規律。

（1）本地存儲。H5的本地儲存功能使得H5 頁面中所有的元素都不占用手機等移動終端的內存，可減少內存壓力。本地存儲功能也可以縮短網頁啟動時間，提升訪問速度。

（2）免插件。在PC端，用戶觀看視頻，必須借助視頻插件或者APP的應用才能實現。而H5則能直接承載圖像、音效、視頻等多媒體類型，用戶無需下載插件就能輕松流暢的觀看高清酷炫視頻、圖文配套音頻，感受到極好的視聽體驗。

（3）靈活性。H5可在網頁上進行直接調試和修改，靈活方便，避免繁瑣的編碼、調試和運行工作；用戶在使用過程中也無需進行反復的更新，即可獲取修改后的內容。

（4）超強繪圖功能。H5 強大的繪圖功能和三維效果為互動頁面帶來豐富的感官體驗，并為交互形式提供技術支持。H5技術的繪圖功能用腳本來完成實際的繪圖任務，制作出的動畫效果可在移動端瀏覽。

2 基于H5的交互式頁面

H5交互式頁面是基于新媒體平臺將內容在手機、平板電腦等移動終端上進行開發、使用和傳輸，通常以互聯網營銷或宣傳為目的，通過掃二維碼或者分享鏈接的方式進行傳播。H5交互式頁面一般由多個頁面組成，以圖文、視頻、音頻、動畫等多種方式進行呈現，通過點擊、滑動等手勢作為第一接觸方式和翻頁方式。H5交互頁面憑借精美的設計風格、新鮮的交互體驗以及強烈的社交屬性，容易對用戶產生極強的分享驅動力，容易在移動社交環境中形成病毒式傳播。

2.1 H5交互頁面的類型

H5交互頁面大致有這樣幾種類型：基于傳感器、基于觸摸屏操作、基于畫面呈現、基于內容。

（1）基于傳感器。手機上的傳感器有陀螺儀、GPS、攝像頭、麥克風、震動傳感器、光線傳感器、距離傳感器等。陀螺儀和重力感應、地理位置、用人臉和H5進行互動的人臉識別在體感H5中用的比較多。

（2）基于觸摸屏操作。在觸摸屏上的操作也有多種，如單屏滾動、手勢操作、全景交互及多屏互動。單屏滾動是很常見的交互形式。翻屏時可以加上一些轉換的動畫，使得翻頁效果生動不單調，也可以加上重力感應，讓手機在轉動時產生視差效果。手勢操作我們和屏幕交互，除了有點擊、滑動外，還有很多手勢操作，如拖拽、放大、所轄、旋轉、畫圖。多屏互動指在多個屏幕上體驗活動，各自的操作會同時反應到其他屏幕上，一般以雙屏互動為主。全景交互指將用戶置于一個360度環繞的圖片/視頻環境下進行沉浸式的體驗，用戶可以通過轉動手機或滑動屏幕來看這個環境里不同角度的內容并進行交互。如果將內容分成左右兩個屏，帶上VR眼鏡，則可以進行VR體驗。

（3）基于畫面呈現。一般展現一段比較酷炫有趣的畫面內容，如視頻、動畫、特效，給用戶帶來視覺上的感官享受，用戶也可以通過與畫面內容互動，看自己想看的內容。

（4）基于內容。基于內容的H5主要是用圖文混排展示內容，答題類游戲等與內容相關，實際上基于內容的H5類型與前面三種類型有較大的關聯，常融合在一起來進行內容的呈現。

2.2 H5交互頁面的傳播特點

（1）交互方式雙向化。H5交互頁面在傳播過程是與 受眾進行信息或行為的交互過程，基于互聯網多向傳播的特性，H5頁面革新了傳統媒體的單向傳播方式，充分發掘目標人 群的潛在需求和閱讀習慣，有針對性地進行交互體驗的優化，讓閱讀者在接受共性信息的同 時獲得個性化的體驗，提升了用戶的參與感，增強了互動性。

（2）信息載體多樣化。H5交互頁面豐富了信息載體的形式，從傳統媒體簡單的圖文呈現方式發展成為圖文、視頻、動畫、特效等一種或多種形式的結合，表現形式更加多元化和形象化，能更加精準的達到營銷目的，提升用戶的感官刺激，有效提升信息傳播效率。

（3）傳播方式多元化。H5交互頁面傳播途徑的變革使得傳播的方式變得多元化。在互聯網時代，新媒體的出現和應用，徹底顛覆了傳統傳播效率低而范圍狹窄的傳播路徑。

3 基于H5的交互式頁面在旅游導覽系統中的應用

景區的導覽系統是用于環境定位、資訊獲取等的系統模塊，由導覽牌、標識牌、手冊等資料組成，主要為 受眾提供便捷有效的引導、講解等服務，方便游客的參觀游覽。伴隨著互聯網和 智能終端的普及，傳統景區旅游導覽系統不再滿足游客個性化的需求，智慧旅游已經開始應用到了旅游服務中，旅游類APP是常見的智慧旅游產品。而相較于APP來說，H5交互頁面的啟動時間更短，聯網速度更快，且無需下載，不占用存儲空間，使用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。

基于H5交互頁面的自身優勢，將H5交互頁面應用到旅游景區的導覽系統中，有利于提升游客的旅途體驗、也利于擴大旅游景區的影響力，激發潛在的旅游客戶。H5交互頁面在旅游導覽中，可以應用于如下幾方面：

3.1 智能導游

早期的電子導游系統，已經足夠智能化，具備了語音提示和景點信息自動播報功能，但仍需攜帶導游設備或者是在移動端安裝應用，而H5交互頁面則讓游客解放出來，拿著著手機掃描一下當前游覽的景點二維碼，就可以聽到解說和瀏覽詳細信息。

H5交互頁面的智能導游功能主要是把景區范圍內的景點或展覽品的解說錄音、詳細介紹、圖片、故事等內容以圖文、音頻、視頻、動畫等多媒體方式編輯并錄入系統資源庫，生成單個景點或展覽品的二維碼。游客只需用微信對感興趣的展覽品標牌上或景點指示牌上的二維碼進行掃描，就能獲取相關展品或景點詳細而直觀生動的信息。

3.2 景區推廣

H5交互頁面在移動終端上直接向目標受眾定向和精確地傳遞個性化即時信息，方便、快捷、傳播性強的特征已經成為各類企業最心儀的營銷方式。

景區機構可以把景區的特色用H5交互頁面的方式，通過微信公眾號進行圖文群發推廣、微信群推廣、線上線下 二維碼推廣，還可以將H5頁面與其他社交平臺如QQ、微博 聯合起來，打造多元化H5營銷渠道，以期達到對景區多元化的營銷。

結合景區的節慶活動，開展H5頁面、微信互動O2O營銷，促進景區的傳播推廣。可以根據景區 的地方特色開發微信H5互動游戲，讓景區與游戲無縫鏈接，利用 微信的強關系鏈，分享、轉發制造朋友圈傳播效應，形成擴散式傳播。通過線上線下營銷活動，吸引更多的潛在游客。

3.3 便捷服務

H5交互頁面亦可以提供數字化的便捷服務，在景點H5頁面中，植入景點周邊的服務信息，游客在掃描二維碼的同時，就能獲得相關的服務信息。借助H5交互頁面把“吃住行游購娛”旅游六要素以更加快捷、便捷的方式傳遞給自助游客，自助游、自駕游游客不僅可以更詳細地了解和景區有關的各種旅游信息，還能預訂門票、餐館和酒店。

4 結語

移動互聯網的不斷發展，游客對景區了解的模式正發生改變，旅行體驗需求也在不斷提升，景區構建以服務游客為核心的智慧旅游體系，是大勢所趨。作為智慧旅游的重要實現手段的H5為景區提升服務水平，提供了足夠的空間。本文探討了基于H5的交互頁面自身的類型及傳播特點，如何將H5交互頁面運用到景區的導覽系統之中，以期更好地滿足游客個性化的需求。旅游景區實現智慧旅游之路還需更多依賴H5技術，實現數字化服務，將旅游景區打造成獨居特色的智慧旅游精品景區。

參考文獻

[1]胡曉林，馬振龍.基于H5 技術的微信交互式廣告在交互設計方面的“優勢整合”創新思考[J].包裝工程，2016，37（24）：124-129.

[2]張揚.基于“H5+微信”的科技期刊新媒體融合[J].中國科技期刊研究，2017，（10）：936-940.

[3]杜蔚苗.移動終端 H5 廣告互動頁面設計研究[D].湖北工業大學，2017.

[4]豆曉寧，王小輝，雷可為.基于智慧旅游的絲路經濟帶手機導游平臺發展研究[J].科技視界，2015，（12）：52+154.

[5]李云鵬，黃超.北京智慧旅游公共管理與服務建設現狀與對策分析[J].城市管理與科技，2015，（01）：65-67.

[6]韓旭，高鵬宇，李雪峰.從“互聯網+”的角度淺析旅游景點自助導游平臺的發展[J].中國新通信，2015，（23）：55.

[7]錢政.基于微信公眾平臺的交互式移動導覽系統設計[J].湖南理工學院學報（自然科學版），2015，（01）：29-32.

Abstract：The rapid development of the mobile Internet has brought about a tremendous change in the way of life and formed a “mobile lifestyle”. The interactive pages based on H5 technology also penetrated into all aspects of peoples lives. Through the intension of H5 and the introduction of H5 interaction page， in the context of smart travel， explore the application of interactive pages based on H5 in tourism guides； use the advantages and propagation characteristics of H5 interactive pages to realize intelligent guides and dissemination of scenic spots. Promote and digitize convenient services to meet the individual needs of tourists and enhance the service level of scenic spots.

Key words：H5 technology； interactive pages； scenic navigation system