基于客戶需求的蘭州樹屏丹霞景區APP的設計與實現

杜 佳,張 婷,張 穎,李林娟

(1.蘭州文理學院 數字媒體學院, 甘肅 蘭州 730010;2.蘭州文理學院 教育學院, 甘肅 蘭州 730010)

2017年7月18日市政府正式批復《蘭州樹屏丹霞旅游景區總體規劃(2016-2030)》(蘭政函(2017)49號)，蘭州樹屏丹霞景區有著天然的研學價值和豐富的人文資源可挖掘，被有關專家稱為絲綢之路上的“黃金旅游資源寶庫”，是目前蘭州市打造的重點文化旅游項目之一，是目前國內已發現的同類型地貌中分布面積最大的丹霞地，已被列為國家發改委PPP項目之一.由于目前蘭州樹屏丹霞景區正處于開發建設中，因而有關此景區的旅游應用軟件很少，其相關的資料也只存在于一些網頁上，為此，有必要將已發展成為旅游業第三產業“中流砥柱”的移動應用技術應用于蘭州樹屏丹霞景區，設計一個基于用戶需求的旅游APP，方便用戶使用，提高景區知名度，推動蘭州旅游業的發展.

文章在對客戶需求調查研究的基礎上，完成了蘭州樹屏丹霞景區APP的總體架構和各功能模塊，介紹了APP開發過程使用的關鍵技術.在VR虛擬游模塊的制作中，運用了基于圖像的虛擬現實技術，構建了景區 720°全景空間，并使用Unity3D引擎將此虛擬展示平臺嵌入APP 應用程序中.用戶可在任何智能移動終端調整視角，放大縮小或上下、前后、左右移動位置，體驗沉浸式虛擬觀景效果，方便快捷地了解景區文化，欣賞景區風光，打破以往傳統旅游在時間空間上的限制.

1 開發環境與關鍵技術

移動應用APP的開發模式有多種，一般來說,較為傳統的開發模式是原生APP開發(Native App)，此模式針對Android、IOS等不同的手機操作系統采用不同的語言和框架，雖然Native App針對特定設備的性能較高，支持高級圖形功能，在應用性能和用戶體驗上具有優勢，但是缺乏代碼移植性和優化功能，升級靈活性較低；還有一種是HTML5應用開發，又稱Web App開發，是一種框架型的APP開發模式，主要通過HTML5、JavaScript、CSS等技術構建頁面.雖然H5移動應用直接訪問設備硬件的特性較低，在體驗和性能上有一定的局限性，但優勢是其編寫的代碼可以同時在Android、IOS、Windows上運行，維護容易，跨平臺開發，更新升級非常靈活[1].考慮到低成本、快速迭代、易推廣并且易于3D展示等因素，蘭州樹屏丹霞景區APP采用了前端基于HTML5進行開發，后端應用Java Web技術實現功能的前后端分離的開發模式.APP的開發中重點還用到了VR全景制作技術Krpano來實現景區虛擬游模塊.

2 模塊設計

通過對目標用戶進行問卷調查，掌握目標用戶對蘭州樹屏丹霞景區的了解程度、了解渠道、出游目的以及對景區旅游APP的期望和使用習慣等，剖析與挖掘游客的需求.在對游客需求進行分析后，深入景區進行了實地考察調研，重點考察了旅游路線、景區文化、周邊景點、美食住宿、配套設施等信息，確保信息無誤后，根據調查結果設計蘭州樹屏丹霞景區應用的功能模塊.

根據調查結果，結合蘭州樹屏丹霞的突出優勢,整合其天然的地質地貌、豐富的人文民俗等特點，設計出以景區展示為主、其他功能為輔的景區APP五大模塊：主界面設計、全部景點、VR虛擬游，景區資訊和其他菜單(如圖1所示).

圖1 蘭州樹屏丹霞景區APP的功能構架圖

為使界面操作簡單，并充分體現軟件的定位特點，主界面設計了景區輪播圖、景區簡介、主要景點、周邊景點、民俗文化、精選體驗項目等與景區展示密切相關的模塊.用戶可通過首頁了解景區概況、周邊景點和游玩項目等基本信息.全部景點的設計主要采用圖片、文字信息和語音導游相結合的方式.景區講解能夠實現語音導游，幫助游客了解景區信息，從而免去游客在旅游過程中觀看景區文字介紹的不便.景區資訊包括游玩路線、住宿美食、通知公告、大型活動、咨詢電話等服務信息.主界面的右上角還設計了其它菜單，對應的子模塊為：地質地貌、科普研學、生態景觀，以展現景區豐富的生態景觀和明顯的研學價值.APP首頁如圖2所示.

圖2 蘭州樹屏丹霞景區APP的首頁圖

3 功能設計與實現

3.1 App實現的關鍵技術

蘭州樹屏丹霞景區前端基于HTML5，采用DCloud的Hbuilder Web開發集成環境，以MUI為前端框架進行客戶端開發.后端采用JavaBean

組件以及MVC(Model-View-Controller)框架模式來實現APP的全部服務功能.MVC是一種軟件架構模式，把軟件系統分為模型、視圖和控制器三大核心模塊[2].此模式將應用數據和應用邏輯分離，降低了耦合度，使得開發更高效.編程語言采用PHP.服務器采用Tomcat 8.0.系統服務器端采用Windows Server 2012 R2平臺.在數據庫方面，考慮到體積小、查詢和更新速度快、成本低等因素，選擇了中小型網站開發常用的MySQL數據庫，使得用戶具有較好的體驗.連接數據庫時，在JavaBean組件中的Users類和Message類中調用DButil工具類，實現數據的存取.

景區界面的實現主要使用HTML5、JavaScript、CSS、PS等技術.界面的靜態布局使用HTML5+CSS3完成，其中，HTML5完成界面的內容展示，CSS3進行界面的風格定位及頁面美化.界面的輪播圖、選項卡等動態功能使用JavaScript來實現.

通過前端后端的設計技術完成APP的整體制作后，可通過安裝運行.使用此開發模式，APP端與PC端網站可進行接口復用，能夠通過網站集成到微信小程序、微信公眾號等應用中，使得景區的宣傳方式更為豐富多樣、便捷高效.

3.2 VR虛擬游模塊的實現

VR虛擬游模塊是蘭州樹屏丹霞景區的特色模塊，以便用戶足不出戶就能身臨其境般暢游樹屏丹霞各景點，該模塊主要包括蘭州樹屏丹霞景區絲路霞光、絲路雄鷹、九色丹青、丹秀映天、丹頂攬勝、翠峰瀾天、沙井部落、丹霞棧道等景點的720°全景展示.

對于景區的VR制作一般有兩種方式：一種是通過三維建模軟件構建三維場景模型，此方法對開發人員要求高，工作量大、耗時長、模型生硬造成視覺真實感不強；另一種是基于圖像的VR全景拍攝方式，這是一種低成本、高效率的場景構建方式.由于制作方式基于真實拍攝的圖片，所以能夠真實可信地還原景區場景，為用戶提供身臨其境的沉浸感[3],非常適合景區虛擬展示等應用.蘭州樹屏丹霞景區APP中的VR虛擬游模塊運用了基于圖像的全景制作方式，其實現過程如下：

(1)利用相機+全景云臺的拍攝方法，對蘭州樹屏丹霞景區進行拍照采集.拍攝時，全景云臺分別調至斜向上45°、水平以及斜向下45°三個方向，形成三個水平層級，每個水平面均以60°為單位進行360°旋轉拍攝，這樣，每個場景得到18張具有重合區域的圖片.

(2)將上述從不同角度、不同方位采集到的圖片運用PTGui軟件進行拼接及HDR融合處理，形成全景圖；利用Photoshop軟件進行補天、補地等美化操作并進行色階、飽和度等調整工作.

(3)將處理好的圖片利用在線VR全景制作技術Krpano進行全景圖的合成，添加熱點鏈接，生成全景漫游.Krpano是目前最流行的全景引擎.它基于Flash的內核,同時提供了HTML5的解決方案[4].Krpano提供兩種類型的HotSpot熱點元素，將HotSpot標簽添加到全景圖的xml文件中便可實現熱點的添加，單擊熱點鏈接會觸發onclick事件，加載其他場景.通過熱點鏈接將多張全景圖進行連接，完成從一個場景鏈接到其他場景的漫游效果.

(4)將制作好的蘭州樹屏丹霞景區全景漫游內容嵌入到APP系統的VR虛擬游模塊當中，實現景點720°全方位立體的虛擬展示效果.景區VR界面如圖3所示.

圖3 VR虛擬游界面圖

4 測試評估

文獻[5]指出“通過用戶進行系統測試來進一步獲取用戶的直接反饋數據，根據用戶的反饋數據不斷優化產品性能，提高用戶體驗和可用性水平”，因此，蘭州樹屏丹霞景區APP應用開發完成后，選擇了旅游類手機APP使用經驗豐富的青年男女作為測試對象，通過不同的手機品牌進行了系統的安裝、卸載測試；針對不同的屏幕分辨率進行了兼容性、圖形、內容、翻頁、滑動等功能測試和手勢、登錄等基本操作；通過填寫調查問卷的方法反饋在測試使用中發現的問題及改進意見，并進行了修改更新.經過測試，該系統界面良好，滿足各模塊要求的基本功能.

5 結語

蘭州樹屏丹霞景區APP整合了景區的優質資源，在滿足APP基本服務的基礎上，特別設計了“全景虛擬游”“民俗文化”等模塊，不但能夠幫助游客合理的安排行程、規劃旅游路線，而且能夠讓游客提前直觀、沉浸式體驗絲路霞光、絲路雄鷹、九色丹青等景點，了解當地的民俗文化和周邊概況.建設與開發蘭州樹屏丹霞景區旅游APP，一方面用傳統旅游與科學技術相結合的方式來提升景區形象和知名度，有效為蘭州市的旅游宣傳貢獻力量，推動我市的經濟發展.另一方面可將信息技術與旅游景區規劃管理工作有機結合，更科學地保護旅游資源，為景區開發管理所需的科學決策提供參考依據.