红色旅游智能手机app界面UI设计的论文Word下载.doc

1、2.3庆阳红色旅游软件开发在UI方面的现状93.软件界面设计基础93.1创意来源93.2前期准备工作103.3软件界面设计原则103.3.1一致性原则103.3.2留白原则103.3.3用户体验原则103.3.4记忆最小化原则113.3.5协调性原则113.4基本要素设计113.4.1设计软件113.4.2 设计标准色113.4.3 设计规格113.5手机APP框架结构图114.详细设计124.1 Logo的设计124.2原型图设计124.3主要界面设计134.3.1引导页界面134.3.2启动页界面134.3.3注册界面144.3.4登录界面154.3.5首页界面154.3.6旅游攻略界面1

2、64.3.7庆阳美食界面164.3.8最新资讯界面174.3.9我的界面174.4GUI的排版展示185设计切图及标注185.1设计切图185.1.1切图的含义185.1.2切图的格式185.1.3 ios与安卓切图185.1.4切图命名格式185.2设计标注195.2.1APP标注颜色195.2.2APP标注内容195.2.3APP标注位置196总结19参考文献21英文摘要22致谢23陇东学院本科生毕业论文（设计）诚信声明本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不含任何其他个

3、人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 作者签名： 二O一 年 月 日 庆阳红色文化数字化平台智能手机APP的UI设计姓名（地址）摘要：随着互联网行业的迅猛发展，手机移动设备不断普及，许多应用软件的研发能够便捷、有效的为客户提供各式各样服务。在功能相似的基础上，便捷的操作及优秀的界面设计就成了这些软件竞争的关键，手机APP的UI设计自然也就显得尤为重要。那么，什么是UI设计呢？百科上的定义是：“UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美

4、观的整体设计。”本文主要介绍的是一款关于庆阳红色旅游的APP的UI设计。庆阳市是著名的革命老区，境内有南梁革命纪念馆、山城堡战役遗址、河连湾陕甘宁省政府旧址等丰富的红色旅游景区。通过对庆阳红色旅游资源的整体情况调查，现阶段还没有一款系统化的关于庆阳红色旅游的APP，大多数为包含关系，并且都是界面粗糙，缺少生气，设计呆板，内容匮乏，不能吸引用户的眼球，无法实现设计的目的。因此，庆阳红色旅游的APP的UI设计是值得研究的课题。本文主要通过对庆阳红色旅游景区的了解，设计“庆阳红色旅游”的APP界面，展示出红色旅游景区、本土资源、纪念品、红色剧本等具有庆阳红色文化的数字化平台，满足客户的审美需求，实现

5、设计的目的。关键字：手机APP；UI设计；庆阳红色旅游1绪论1.1UI简介如今，随着互联网行业的的飞速发展，早先的应用软件已经不能满足用户的需求。强大的功能在激烈的市场竞争中不在是制约用户的关键，也不足以战胜强有力的对手。幸运的是，一些举目千里的民族企业家意识到了UI设计能够给应用软件带来的新的市场天地，例如我们熟知的金山公司，因为重视UI的设计在开发中的地位，才使得金山产品在同类软件产品中独占鳌头。实践证明，界面美观和易用设计相结合的产品才会更加受到用户的欢迎，能够给产品带来巨大的效益，达到事半功倍的效果。因此，UI设计将会更加受到人们的重视。那么什么是UI设计呢？在百科上是这样解释的：“U

6、I的本意是UserInterface也就是用户与界面的关系。他包括交互设计，用户研究，与界面设计三个部分。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。”1.2软件开发的界面设计现状2015年可以说是界面设计的一个小浪潮，许多美工、平面设计师也开始转行像UI设计师进发。但是目前还有很多的商家他们认为软件产品的核心是技术，所做的应用软件最终都是面向用户的，而用户的需求很简单，那就是实现功能，功能实现了，问题也就解决了，所以这些商家在招聘时，几乎没有UI设计师这个职位，都是编写代码的开发人员，而大部分编程师都自以为是艺术家，界面设计简单无

7、趣，只要实现功能就能得到用户的满意，所以他们不去遵循用户界面的设计标准也不花心思让产品好用，相反地，他们错误地认为编写更加方便简洁的代码或者是找一套自认为美观的颜色才是最重要的事，而UI设计只是起到辅助的作用。但随着软件种类的增多，相似的应用软件更是层出不穷，技术完全可以达到用户的需求，这时，一个新的突破就有待开发，UI设计就成了软件的创新点，为了提高商品的卖点，商家们都非常重视界面的美观与交互。这就使UI设计走向了时代的小高潮，随之UI设计师也开始不断地扩大了规模。但是，中国的UI设计和西方发达国家的还是有很大的差距的，很大部分的软件界面都是临摹西方国家的软件界面，没有一点新颖与创新。那么如

8、何赶超西方设计的使命也就肩负在了现代人的基础上。提高UI设计师个人水平是中国UI发展中首要的问题。现阶段，在国内的高校还没有创建一个相对健全的UI课程，而提高UI设计师的关键在于有一个良好的学习氛围和交流平台。国内也有很多设计的交流平台，但是这对于培养优秀的UI设计师还是远远不够的，我们必须要有多个资源丰富、设计优秀、检索方便、专业性强的UI设计学习与交流的平台，才能满足UI设计师们的需求，才能培养出优秀的UI设计师。2项目概述2.1项目目的和内容庆阳红色旅游这款手机应用软件的设计目的不仅是为了宣传庆阳红色旅游景点、纪念品、红色皮影剧等具有庆阳特色的红色旅游产品，它的设计还要满足旅游者的需求，

9、便利旅游者的出行，促进红色旅游业的发展，增强爱国主义的精神，开拓更加庞大的红色旅游市场等。庆阳红色旅游APP的界面可以吸引用户的眼球，美观的照片加上旅游地的详细介绍，让用户有种想要旅行的冲动，可以增加庆阳本地的经济收入，并且带动周边地区的经济发展。可以说，作为一款专业地方性的旅游APP，他带来的将是广泛的经济效益、社会效益以及深远的政治影响。我的作品是一款拥有关于庆阳红色旅游的APP的UI设计。作品内容包括有:首页、旅游攻略、庆阳美食、最新资讯、庆阳简介、庆阳酒店、庆阳宾馆、庆阳特产、租车公司、景区概况、关于我们等界面的设计，首页界面的设计是整套APP界面设计的关键所在，我将底部菜单栏分为5个

10、模块，分别为：首页、旅游攻略、庆阳美食、最新资讯、我的，这几部分内容为此APP着重设计的内容。由于搭建框架时，APP的内容较多，并且不存在包含关系，所以我采用首页模块划分的方式，将APP的主要功能用八种不同颜色的色块加上8个精致的icon构成了8个模块的内容，在首页中显示的列表还包含推荐景点和推荐酒店，这两项内容也是用户最关心的内容，所以我将它放在了首页上，可以让用户一目了然，当然，在相应的内页也包含这部分的内容。内页的设计大部分采用列表的形式进行展示，这样可以将重要的内容全部展示出来，给用户带来清新的体验，我的作品具有很高的体验效果，用户不用看引导页就可以清晰的找到自己想要的内容。此款手机A

11、PP的UI设计主题突出、明确，界面色彩虽运用鲜艳的红色但并不显得单调，界面风格整体统一，作品在设计时精确到每一个像素，给用户一种悦目娱心的感觉。2.2项目分析2.2.1行业背景分析自从移动互联网走进了人们的生活，五花八门的旅游类APP也随之到来，这是一次旅游业上的革命，抓住这次商机，就能开括旅游市场。所以，很多公互联网司争先恐后的涌入了这次争夺战中。在这次争夺战中，携程旅行、去哪儿还有同程旅游占得先机，百度、阿里巴巴、腾讯互联网这三巨头更是不会错过这次契机，创业型的小公司在旅游类市场上也发了下力，挤进来分一小杯羹。目前，旅游类的APP基本上都是由酒店、餐饮、机票、门票、路线等模块组成的有查询预

12、订功能的综合性服务平台，携程旅行可以作为首个代表。并且，一些区域性的旅游类APP也抓住机遇。截至2016年3月15日，通过对部分手机商店的调查，它们包含旅游类的APP的数据分别为：豌豆荚132个、应用宝有410个、安卓市场430个、360手机助手640个、百度手机助手310个、安智市场972个。统计得出，在单个商店上线的区域性旅游类APP510个，总下载次数却达到了20759343次。近年来，作为一种新型旅游形式的红色旅游广泛地在神州大地上崛起。随着人们生活水平的提高，越来越多的人涌入到红色旅游中来，来缅怀革命先烈。国家也十分注重红色旅游的发展，并安排专项资金来建设一些重点的革命老区和革命纪念

13、地，将红色旅游与自然景观进行了密切的结合，让游客全身心的体会到革命的来之不易。从移动端旅游类APP的下载量中可以看出，关于旅游类APP软件应用的一些趋势，携程旅行、去哪网、同城旅游稳稳的位居了前三位，他们的月下载量都在10万次以上，这就说明移动端用户对旅游APP软件有很强的依赖性，通过对旅游APP用户好评率来看，用户的总体评价并不佳，经过分析，这种情况是因为这些APP虽然做的规模庞大，但是针对某些景点的介绍并不清楚。比如庆阳红色旅游的景点，在这三款APP的查询中更是凤毛麟角，所以为了让客户满意，有针对性的地方旅游类APP的设计是很重要的，庆阳红色旅游APP既是针对地方特色的一款APP。2.2.

14、2典型用户分析用户人群：针对于16-70岁热爱历史、热爱红色旅游、追寻品质生活的人群。2.2.3同类APP分析相比同类型APP的设计，我设计的APP既有缺点也有优点。缺点是，界面的颜色相对单一，界面上的照片有的不够清晰，原因是庆阳红色旅游刚刚被开发，他在网上的素材特别的少，而且大部分的素材并不清晰，随着庆阳红色旅游的进一步发展，我想在互联网上的素材也会越来越多，那样界面在照片的美观上就得到了解决。优点是，界面统一，条理清晰，小图标的风格一致，并且在设计时采用一像素不差的原则，让用户在使用时感觉非常的舒适，可以让90%用户达到相当满意的程度，内容涵盖详尽，包含用户出行所想不到的一些贴心服务，让用

15、户使用时更便捷更贴心。我也下载了一很多地方性的旅游APP，大部分都是界面粗糙，为了实现功能而去制作，完全不顾虑界面的美观程度，并且界面不能达到统一的效果，用户在使用时更是摸不到头脑。2.3庆阳红色旅游软件开发在UI方面的现状目前，庆阳红色旅游刚刚处于起步阶段，很多相关庆阳红色旅游的APP中资料不完整，一般都是一些大型的APP将庆阳红色旅游景点提到一些，很多内容严重丢失，甚至有的红色旅游景点都没有摄入，不能将庆阳红色旅游及本土资源全部展现给用户。有关庆阳红色旅游的APP在UI方面的设计更是不尽人意，很多图片和景区内容不相符，大量的景点图片没有经过修理，网上找到后直接安放在了APP上，设计的界面粗

16、糙不说，在颜色的搭配以及icon的使用上也不协调。更有甚者文字排版都错乱不堪，让用户无法进行阅读，更无法进行操作。所以推出一款操作简单、界面合理、内容完整的庆阳红色旅游的APP已是当务之急。3.软件界面设计基础3.1创意来源选择庆阳红色旅游APP的UI设计这个主题作为毕业论文，是因为本身自己本身就很喜欢革命先烈的的故事，再加上庆阳市是著名的革命老区，而我在这里上了四年的大学，对庆阳的红色旅游景点以及地方特色都做了详细的了解，所以想到了这个主题。因为做的是红色旅游，所以在选择颜色的时候首先选择的就是红色作为APP界面的主要颜色，并红色可以给人带来清新和时尚的感觉，也能带来喜悦的心情。让人们在忙碌

17、的生活中放松身心，阅览革命先烈的英雄事迹。3.2前期准备工作设计主题明确后，开始展开无穷的联想，然后查阅大量的资料和同类的应用软件，再根据自己想要设计的内容进行整理分析，先做一个大致的流程图，将我们需要展示的功能一一列举，然后将确立的大模块逐步细分，形成几个小模块，再根据产品的一特征做创新。我们的APP最终是面向用户的，所以不管什么设计都需要想到用户再用这个APP的时候是否方便，怎么样的交互界面即可得到用户的满意，又有亮点。3.3软件界面设计原则3.3.1一致性原则遵循界面设计的一致性是交互设计的基本规范。除了在元素、数值、链接和其他数据的展现形式上都要保持着统一，还要在场景和含义上保持一致。

18、界面设计拥有了一致性之后，用户可以轻松学会操作，不需要相关人员去费力写操作文档。用户在使用时，就会建立一个标准的界面框架模型，在熟练了一个界面后，切换到另一个界面便可随心所欲的进行操作，并且带来的视觉效果也很赞，给用户一种高度统一的感觉，体验度得到上升。3.3.2留白原则对于留白这个概念有时也叫它负空间。可能我们看见这个名词时，认为它是流出来一部分白色的空间来，其实不然，留白指的是一部分区域，这部分区域不一定就是白的，它只是页面布局中环绕各元素的空白空间。留白的作用主要是将内容进行区分，形成鲜明的对比。针对于繁杂的页面布局，适当的留白能让页面看起来整洁，并且重点突出。因为它留下了许多空间，让设

19、计不同的部分形成鲜明的对比，那么屏幕的焦点就会自然而然的显现出来。如果界面上的文字过多，它就会显得十分拥挤，影响阅读兴趣。留白则会提升用户的阅读体验，也便于理解。留白还可以突显界面中其他的色彩，这对于吸引用户有很大的作用。3.3.3用户体验原则用户体验的原则指的是我们在设计界面时要从用户的角度出发，而不是从一名设计师的角度思考问题。我们的应用最终的使用者是用户，所以我们在设计的过程中要以用户为中心，以人为本，这样才能得到更好的用户体验。3.3.4记忆最小化原则设计过程中时，要考虑大脑处理信息的范围。根据遗忘曲线的研究发现，人类大脑对新事物遗忘的规律，短期记忆很不稳定，在24小时内就存在25%的

20、遗忘率。所以一个界面上的信息量不宜过多，否则影响会用户的体验效果。3.3.5协调性原则设计界面时，要保证界面的协调性。控件的摆放位置要保证协调均衡，让界面看上去和谐美丽。将重要的控件放在明显的位置，让用户便于浏览和操作。另外，设计的界面要符合人们的操作习惯。3.4基本要素设计3.4.1设计软件用Adobe Illustrator CS6设计Logo的矢量图。用Adobe Photoshop CS6处理图片，做为设计的主要软件；利用智能参考线的辅助，在软件中做出效果图。3.4.2 设计标准色主要颜色：# F7253E；#FFF9D00；#F9F9F9；#DDDDDD。3.4.3 设计规格设计的尺

21、寸采用市场上常见的iphone6的尺寸750px 1334px；分辨率最佳显示为72ppi；色彩模式则采用RGB模式。3.5手机APP框架结构图在确定了需要设计的模块以后，我们要根据模块建立一个框架结构图，让我们在设计的时候可以按部就班有思路的去设计。图 Error! No text of specified style in document.手机APP框架结构图4.详细设计4.1 Logo的设计Logo的设计采用庆阳红色旅游中“红色”二字的首字母“H”和“S”组合而成，为了突出红色旅游的特色，Logo的颜色采用了最具有代表性的中国红，象征着革命的胜利；鲜艳的红色与中国国旗的颜色相互照应。L

22、ogo的形状采取上下、左右均对称，角度为27，是最合适的角度，给人一种对称的美感。如下图4.1所示。 No text of specified style in document.ogo图形4.2原型图设计原型图是根据我们确定的流程图而设计的界面基本框架图，主要利用的是黑白灰三种颜色搭建界面的轮廓，更快的为客户展示视觉效果。部分原型图如图4.2所示。 No text of specified style in document. 原型图4.3主要界面设计4.3.1引导页界面引导页采用的是目前市场上比较流行的扁平化界面进行设计，用一个小人的形象来统一界面的规划，介绍了软件的主要功能，如图4.3.

23、1所示。 No text of specified style in document.1 引导页界面4.3.2启动页界面启动页也采用扁平的设计风格，底色采用径向渐变的红色，放上设计好的logo，并在下方放上一个具有革命历史性的小车，整个界面看起来协调、轻快，让用户每次打开APP都有愉悦的心情。如图4.3.2所示。 No text of specified style in document.3 启动页界面4.3.3注册界面注册界面是采取手机注册的方式进行注册，界面应用红色的小icon，让界面充满活力。如图4.3.3所示。 No text of specified style in docum

24、ent.3 注册界面4.3.4登录界面登录界面有用户和密码两部分内容，输入后点击登录进入界面。如图4.3.4所示。 No text of specified style in document.4 登录界面4.3.5首页界面首页将庆阳红色旅游APP的模块全部展现，其中包含：庆阳简介、旅游酒店、庆阳宾馆、庆阳特产、租车公司、一步导航、关于我们的模块，用户可以通过首页了解整套APP的规划。如图4.3.5所示。 No text of specified style in document.5 首页界面4.3.6旅游攻略界面旅游攻略界面采用了列表的排列方式，怎样游庆阳的攻略全部进行了陈列，点进去一个模

25、块可以得到详细的介绍。如图4.3.6所示。 No text of specified style in document.6 旅游攻略界面4.3.7庆阳美食界面旅游美食界面将庆阳的美食全部陈列，采用饱和度较高的图片来吸引用户，勾起用户的食欲。如图4.3.7所示。 No text of specified style in document.7 旅游美食界面4.3.8最新资讯界面最新资讯界面也采用的是列表的展示形式，时刻更新庆阳市红色旅游景点的情况和一些旅游类文章。如图4.3.8所示。 No text of specified style in document.8 最新资讯界面4.3.9我的界

26、面我的界面采用一些小icon，让页面看起来更加精致，不至于枯燥乏味。界面包含我的资料、软件反馈、分享给好友、软件设置和版本升级5大模块。如图4.3.9所示。 No text of specified style in document.9 我的界面4.4GUI的排版展示GUI就是图形用户界面的简称，是指采用图形方式显示的计算机操作用户界面。我所做的仅仅是GUI的一个展示界面，将设计的过程从上到下依次进行排列，对logo、原型图、界面及展示效果进行了排版。5设计切图及标注5.1设计切图5.1.1切图的含义切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，通俗来讲，把

27、一张设计图利用到切片工具把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。在APP中切图，与在web中切图大致是一样的。开发同学在实现过程中，需要计算好每一个元素（包括文字，图片等）的位置，然后在调用我们切好的图进行填充。5.1.2切图的格式一般切图的格式在ps中存储成web格式时，选择的是PNG24，而启动页和引导页的切图采用的是PNG8的格式进行存储。5.1.3 ios与安卓切图ios的屏幕精度分成retina与非retina2种，而Android的屏幕精度只要分成：mdpi（横向屏幕360px左右）；hdpi（横向屏幕480px左右）；xhdpi（横向屏幕

28、720px左右）3种。庆阳红色旅游APP在设计时，是按照retina进行的切图。5.1.4切图命名格式APP的切图可分为背景、按钮、图片、TabBar、icon等几大类。为了让切图的命名整齐规范，我们会按照它的特性命名。比如背景图我们会命名为bg_xxx.png、按钮图命名为btn_xxx.png、图片为img_xxx.png等等，取它们的英文缩写作为头部，在界面上的位置用xxx表示。如果在设计时需要成倍数关系的话，可以在后缀名前加上2x，表示二倍的关系；3x则表示三倍的关系。如iPad mini、iphone 6和iPhone 6 Plus在切图命名时分别用bg_xxx.png、bg_xxx

29、2x.png和bg_xxx3x.png。庆阳红色旅游APP是按照iphone 6的尺寸进行设计的，所以切图命名时采用的都是2x的命名方式。5.2设计标注5.2.1APP标注颜色我在标注庆阳红色旅游APP时应用的软件是马克鳗，当然其他软件也可以办到。在标注颜色时采用的是16进制标注法。 如果采取16进制和RGB两种色值表达的方法可能会更加的清晰。5.2.2APP标注内容在标注内容的时候，我们需要标注字体大小和字体颜色，字体大小采用的是以像素单位；在顶部标题栏标注背景色值，如果有透明度的话也需要进行标注；标注banner时我们只需要标注它的高度，因为宽度是屏幕的宽度；标注菜单图标时，不一定非要标图标本身宽度和高度，我们可以根据情况扩大它的点击范围，使每个图标的标注大小一样。标注图文信息时，图片要标注宽高，文字要标注大小，颜色和行高，有特殊字体的也要进行标注。5.2.3APP标注位置所有元素统一距离屏幕最左24px和最右24px。这一部分我们也叫做安全区域，内容部分不能跨过这个具体，否则用户在使