基于H5技術(shù)的交互頁面在旅游景區(qū)導(dǎo)覽系統(tǒng)中的應(yīng)用

馬妮 周潤苗

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

關(guān)鍵詞：H5技術(shù)；交互式頁面；景區(qū)導(dǎo)覽系統(tǒng)

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

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

1 H5解讀

1.1 H5是什么

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

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

1.2 H5的特點和優(yōu)勢

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

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

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

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

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

2 基于H5的交互式頁面

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

2.1 H5交互頁面的類型

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

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

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

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

（4）基于內(nèi)容?；趦?nèi)容的H5主要是用圖文混排展示內(nèi)容，答題類游戲等與內(nèi)容相關(guān)，實際上基于內(nèi)容的H5類型與前面三種類型有較大的關(guān)聯(lián)，常融合在一起來進行內(nèi)容的呈現(xiàn)。

2.2 H5交互頁面的傳播特點

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

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

（3）傳播方式多元化。H5交互頁面?zhèn)鞑ネ緩降淖兏锸沟脗鞑サ姆绞阶兊枚嘣?。在互?lián)網(wǎng)時代，新媒體的出現(xiàn)和應(yīng)用，徹底顛覆了傳統(tǒng)傳播效率低而范圍狹窄的傳播路徑。

3 基于H5的交互式頁面在旅游導(dǎo)覽系統(tǒng)中的應(yīng)用

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

基于H5交互頁面的自身優(yōu)勢，將H5交互頁面應(yīng)用到旅游景區(qū)的導(dǎo)覽系統(tǒng)中，有利于提升游客的旅途體驗、也利于擴大旅游景區(qū)的影響力，激發(fā)潛在的旅游客戶。H5交互頁面在旅游導(dǎo)覽中，可以應(yīng)用于如下幾方面：

3.1 智能導(dǎo)游

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

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

3.2 景區(qū)推廣

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

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

結(jié)合景區(qū)的節(jié)慶活動，開展H5頁面、微信互動O2O營銷，促進景區(qū)的傳播推廣?？梢愿鶕?jù)景區(qū) 的地方特色開發(fā)微信H5互動游戲，讓景區(qū)與游戲無縫鏈接，利用 微信的強關(guān)系鏈，分享、轉(zhuǎn)發(fā)制造朋友圈傳播效應(yīng)，形成擴散式傳播。通過線上線下營銷活動，吸引更多的潛在游客。

3.3 便捷服務(wù)

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

4 結(jié)語

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

參考文獻

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

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

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

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

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

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

[7]錢政.基于微信公眾平臺的交互式移動導(dǎo)覽系統(tǒng)設(shè)計[J].湖南理工學(xué)院學(xué)報（自然科學(xué)版），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