1 绪论
旅游详情页psd模板目前旅游型APP 很受人们的青睐，如果有一款能够“穷游”世界的APP，解决人们旅游选择过程中的痛点，一定很有市场。通过“穷游”APP，可以完成位置定位、订票、预定宾馆、查看游玩的攻略、查看各种特价优惠等，这些功能都可以通过HTML5一一实现。本课题研究将“穷游”APP 的设计思路、理念、效果展现出来，让用户得到较为良好的体验。
2 “穷游”APP 设计分析
在穷游之前，首先要制定一个明确的出游计划，去哪里旅游、大概花费多少钱、旅游的路线制定等等。如你要去北京玩，你觉得1000块就能玩一个星期，最终1000块还有剩余，且觉得是次优质的旅行，那么就是一次成功的旅游，真正体验到了穷游的乐趣。
在旅游途中，如果能体验到美丽的日出或日落，看到那一抹抹的余阳上升或者下落，五彩缤纷、光彩夺目、金光耀眼，心情都会无比愉快，不禁感叹大自然的美。因此把“穷游”APP 的主题定为橙黄，而APP 的主体形象设计为一个橙黄的微笑的狐狸。寓意着即使旅行生活再苦再难也不要忘记微笑。
3 “穷游”APP 整体框架设计
根据“穷游”主题和旅游类APP 的设计理念，以简单实用、经济好用为设计原则，穷游”APP 整体框架设计如图1所示。
3.1 “穷游”APP 的主页面
“穷游”APP 主要由四个页面构成，即首页、攻略页、商城页、我页。
3.2 首页
首页由两个部分组成：顶部和下部。顶部用以播放广告海报，下部作为用户分享。
3.3 攻略页
攻略页分为三个区域：顶部、中部、底部。顶部放置搜索栏，中部放置分类栏，下部放置帖子。
3.4 商城页
商城页分为五个部分，分别放置五种商品信息。五种商品分别为：旅游景点、酒店、机票、高铁、租车。
3.5 我页
我页分为五个板块，分别放置五个不同的内容。五个不同的内容包括：设置与消息；登录；关注、粉丝与获赞；收藏夹、订单与优惠券；“我的”部分。
4 界面设计
4.1 首页设计
4.1.1 广告
几乎在所有旅游类APP 里，首页的顶部都是留一片矩形区域进行广告的放置，而“穷游”APP 首页顶部广告区域放置三张旅游海报，让它们循环滚动播放，并添加简单的文字描述，对文字的颜三渐变和添加描边。4.1.2 用户分享
在广告的下方，则是显示用户分享的旅游地点和一小部分的景点描述，可以看到他们的头像和昵称，在旁边放置一个点赞按钮和点赞的数目显示。
售数目、商品描述、价格和购物车按钮。
热门目的地：主要放置一些热门旅游景点的商品信息，通常以优惠价格展出来引导户点击查看。图标设计是一个喷发的火山图标，代表热门的景点。
舒适酒店：主是放置一些价格实惠、环境良好、舒适度较高的酒店信息，方便用户到合适的旅行酒店。图标设计为一个宾馆图标，让人一目了然。
特价机票：主要是放置当季出售的便宜机票，给当季有需要的用户订购。特价机票的图标设计是一个飞机穿梭于云朵的效果。
特快高铁：主要放置当季所有的高铁出行的车票，方便用户查看路线订购需要的高铁票，计划和12306连接。特快高铁的图标设计是一个高铁在轨道上行驶的过程。
出行租车：主要放置一些租车中介的汽车出租信息，给那些需要租车出行的旅行者提供服务。图标设计是一个汽车行驶在道路上的过程。4.2.3 “我”设计
我页分为五个版块。
图标按钮。图标的设计要符合其页面的大致意思。“首页”就设计成一个圆角矩形分成三大块，简单直接就能看出首页的大致模样；“攻略”则设计成一个指南针图标，意为可以寻求目标寻方向；“商城”
就更为直接，
设计成一个购物车的图标，意为可以购物买商品；“我”则设计成一个人的形象，意为是个人中心，可以查看自己的喜好。如图2所示。
图2  导航栏
4.4 其他页面
4.4.1 空白页
空白页设计，当点击到部分按钮显示不出内容时，就会跳转到一个“空空如也”的页面。在这个页面里，背景是一个空箱子并写着“这里，空空如也”，左上方有一个返回按钮。4.4.2 登录注册页
在点击登录时，会跳转到登录注册页。页面可以进行登
滑动页面进行操作。
5.4 页面容器与触发器的使用
要做出广告区域三张海报或者攻略帖子三张图片循环滚动播放的动态效果，就要添加一个固定大小的页面容器，滑动方向改为左，打开循环翻页，将其放置在适合的位置。页面容器内添加三个页面，页面分别添加素材图片。添加一个触发器，时间间隔适当调整，打开自动播放，为触发器添加事件，当其触发时，页面容器的页面会自动跳转到下一页。
5.5 点赞、收藏按钮与计数器的使用
需要做出点赞的效果和点赞的数目显示，在小模块到点赞和收藏按钮，选择一个修改为合适的大小，对按钮的初始颜和点击过后的颜进行修改。添加一个计数器，计数器的位置、字体大小和颜做相应的调整。为点赞按钮添加事件，在点击时，计数器会加一.
5.6 输入框的使用
在攻略页面，要做出搜索分类栏的关键词搜索，需要在小模块的表单组件到输入框，将提示文本改为“搜索美食、自然、人文等攻略”，修改其大小位置及边框颜，为其添加事件。当输入进行中时，输入框的内容等于某个关键词，分类栏的素材图片便会隐藏同层控件。
5.7 透明按钮和形状工具的使用
给导航栏、攻略页的分类栏、我页的多个区域等位置添加透明按钮，为其添加事件，在点击时，可以跳转到某个页面，透明按钮可以做成选择、退出或是返回等按钮。在导航栏和攻略页的分类栏上的透明按钮添加50%透明度的带有颜的形状，分别放置在同一容器中，把显示关闭，为指定的透明按钮添加事件，在点击时，形状显示并隐藏同层控件。
本框中。
5.10 动态效果的实现
对狐狸头像、商城的图标（火山、宾馆、飞机、高铁、汽车）添加一个轨迹，设置相应的时间，打开自动播放和循环播放，设置其位置、角度或者不透明度的关键帧动画即可。
5.11 移动端的适配调整
为舞台添加事件，在初始化时首页和分类页的面板设置属性，将H 调整为系统窗口高；在舞台添加一个横幅，整体分布改为左下，将导航栏拉进横幅。这一步的目的是为了移动端的显示适配，不同机型可能并不能完全显示页面的内容，调整之后便可。
5.12 测试
作品完成后进行发布，使用手机扫二维码，对所有页面和效果进行测试。导航栏与攻略页的分类栏按钮可以使用并有反馈显示；首页广告可以循环播放，也可以自己用手指滑动；点赞收藏按钮可以使用，所有透明按钮可以使用，页面跳转正常；登录注册与退出按钮可以使用；关键词搜索可以使用；购物车系统良好，能够正常读取数据库的数据；动态效果没有问题；手机适配也没有问题。
参考文献
[1]朱璇.背包旅游理论与实践[M].中国旅游出版社,2009.[2]杨彩霞.旅游预订类App 用户持续使用行为研究[D].暨
南大学,2018.
[3]张帅桐.浅议四种移动APP 的开发模式[J].电脑知识与
技术, 2017.
[4]路可音，张晓明.旅游类APP 的应用研究[J].教育教学
论坛,2019.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。