基于客户需求的兰州树屏丹霞景区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，一方面用传统旅游与科学技术相结合的方式来提升景区形象和知名度，有效为兰州市的旅游宣传贡献力量，推动我市的经济发展.另一方面可将信息技术与旅游景区规划管理工作有机结合，更科学地保护旅游资源，为景区开发管理所需的科学决策提供参考依据.