一款校园生活资讯类手机APP的UI设计

山东大学（威海） 毕业论文（设计） 毕业论文（设计）设计(论文)题目一款校园生活资讯类手机APP的UI设计姓 名：吕丽蓉学 号：201100800498学 院：机电与信息工程学院专 业：数字媒体技术年 级2011级指导教师：李婷 2015年 5 月 18 日目 录一、绪论1（一）设计背景1（二）设计的总体概述1二、认识UI设计1（一）什么是UI设计1（二）UI设计的基本流程2（三）UI设计的参考原则21.快速流畅22.数字法则23.优化结构34.界面美观3三、用户需求分析3（一）用户体验设计3（二）用户的功能需求分析3（三）用户的视觉需求分析4四、UI设计工具的体验和简介5（一）Axure RP5（二）Photoshop5五、APP原型的功能实现5（一）找兼职模块6（二）校园二手交易模块8（三）校园活动模块9（四）收藏模块11六、APP原型的界面设计12（一）界面设计的风格12（二）图形的样式15（三）界面的配色方案15（四）结构排版17七、后台数据库的设计18八、总结19（一）遇到的问题及解决方案191.功能的设置及实现。192.工具的选择。19（二）设计的不足之处19（三）收获与感悟20参考文献21谢 辞22摘 要在这个电子产品飞速发展的时代，UI设计正被越来越多的设计师们重视起来。一个贴近产品服务于用户的UI设计会让一款手机APP带给人顺畅的交互体验，美观新颖的界面设计也能帮助产品吸引住用户的眼球，可以说这是一种建立在科学性基础之上又富含艺术性特色的设计，能够拉近用户和应用程序之间的距离。在各种买购、社交类APP产品逐渐完备的情况下，在我们的实际体验中发现缺少一款基于校园生活的资讯类APP，去为在校生提供校园信息浏览的平台，主要实现功能针对于学生的校园生活需求，而所做的UI设计，正是依附于所设计的APP，此款校园资讯类APP的UI设计的整体风格采用多色彩的扁平式，色彩感较强，视觉感受时尚。我们相信一款优秀的UI设计，不仅能够让APP看起来品味十足，还能够让软件操作起来顺畅自然，从而展示出软件的特色和价值。关 键 词：UI设计 校园APP 扁平化界面ABSTRACTInthiseraofrapiddevelopmentofelectronicproducts,UIdesignisbeingmoreandmoredesignerswhopayattentiontoit.AclosegoodsandservicestotheusersmobilephoneAPPUIdesignmakesasmoothinteractiveexperiencetobringpeople,beautifulnewinterfacedesigncanalsohelpproductattractedtheuserseye,wecansaythisisanestablishedscientificbasisoftherichartisticanddistinctivedesign,tonarrowthedistancebetweenusersandapplications.Availableinavarietyofbuying,socialclassAPPproductsgraduallycompleteacase,wefoundalackofpracticalexperienceinaclass-basedinformationAPPcampuslife,campusinformationtoprovidestudentsbrowsingplatform,themainfunctionforatflat,colorsensecampuslifeneedsofstudents,whiledoingUIdesign,itisdependentonthedesignoftheAPP,theoverallstyleofthecampusinformationThisclassAPPUIdesignofmulti-coloredstrongfashionvisualexperience.WebelieveagoodUIdesign,notonlycanmakeAPPlooksfulltaste,butalsoallowsthesoftwaretooperatesmoothandnatural,thusdemonstratingthecharacteristicsandvalueofthesoftware.Keywords:UIdesign CampusAPPFlatinterface 一、绪论（一）设计背景智能手机的推广促进了各类应用程序的发展，像社交类的微信、微博，买购类的美团、淘宝，以及娱乐类的逗拍、脸萌，这使得我们的生活变得快捷而丰富。但在我们的校园生活的点点滴滴中，也在各方面体会到很多与校园生活相关的消息在收集的过程中存在着些许的不够便捷，比如对于大四学生想处理自己的衣物和书籍除了贴吧却找不到更为专门的交流平台，又比如在校园里除了张贴海报也找不到其他更新颖普及的方式来宣传学院活动，我想既然手机APP是为了提高人们的便捷性，那么也应该有更贴近校园生活更有针对性的应用程序来帮忙解决这些被遗漏的角落，因此，我希望设计一款对校园生活更有针对性的资讯类手机应用程序，借助于时尚的界面风格，来便捷校园生活。（二）设计的总体概述我的设计的整体思路是依附于一款贴近校园生活的手机APP原型，来展现出舒适时尚的移动UI设计。制作出应用程序的图标、按钮、以及各级界面的设计，使用统一的扁平化的设计风格，特别重视用户的需求以及应用程序的交互体验，力求在整个设计中注重UI设计的基本流程和参考原则的实际运用。同时，在功能上根据学生的实际生活满足学生校园需求，去实现校园的二手交易、学生招聘以及学院活动宣传等资讯的收集功能，能够方便同学在自己所在的学校及时收集到相应的信息，便捷校园生活。二、认识UI设计（一）什么是UI设计UI是英文单词User和Interface首字母的缩写，意为用户界面，从字面上看是用户和界面这两个部分，实际上还包括界面和用户之间的交互关系，因而UI设计被细分成三个层面：图形界面设计（GUI）、交互设计和用户研究。在国内，我们对UI的理解大多数还停留在美术设计方面，这表明了我们在用户交互的重要性上缺乏理解。同时，通过在很多软件公司中人员的比例和待遇的差别上，我们也可以看出，目前国内在软件开发过程中依然存在着重技术而不注重应用的现象，这种观念在某种程度上将制约软件产品的发展，使其难以具有长久的竞争力，因而，正确认识UI设计的价值十分重要。UI设计不仅仅是进行美术方面的创作，更是对应用程序的使用者、使用方式和使用环境进行分析，最终实现为用户服务，使交互的过程更加流畅简便。那么一个完整的UI设计过程则包含三大部分，即前期的数据搜集和用户需求分析、中期的预定功能实现以及后期的界面设计。1. 前期的数据搜集和用户需求分析这一阶段我们首先要明确我们的软件是给什么人用，比如用户的年龄、兴趣、性别等，同时要考虑在怎样的环境用，最后要参考用户如何用，是鼠标键盘还是移动设备上的触摸屏，总之要通过各种各样的方式去了解软件用户需要什么样的体验，只有掌握了这部分资料才能对整个项目的总体性设计做出决策。每一款软件的推广离不开对市场的考察，包括近年来国内外UI软件的市场规模和增速、影响市场需求的因素、UI设计行业的竞争格局以及UI设计的整体走向等，有了这一部分的数据搜集，我们才能更好的抓住市场机遇，同时了解同类产品的优缺点，做到知己知彼、扬长避短。2. 中期的预定功能实现在这一阶段主要由程序员进行功能的实现，但是仍需要UI设计师参与其中。在开发初期UI设计师需要制作出产品每个模块的效果图，使程序员在开发的过程中能够更好的把握各个模块的统一性，遵从设计的整体性，从而共同协作来设计出用户满意的产品。3. 后期的界面设计在这一阶段UI设计进入界面样式的设计过程，定义产品的整体风格，美化图形设计，在设计中要渗透到每一级界面的布局和元素以及文字排版等，要做到注重细节、注重用户的体验，因为一个友好舒适的界面设计将带给用户不一样的心理感受，给产品带来巨大的增值功能。界面设计也不仅仅是美化界面同时也包括人机交互部分，用最舒适、自由、简单的操作来满足用户的感觉（视觉、听觉、触觉）和情感两个层次上的需求，通过用户界面的交互设计，人们追求一个界面不仅实现置界面于用户的控制之下，还要减少用户的记忆负担，也要保持界面的一致性，从而带给用户舒适流畅的心理体验，体贴入微的为用户服务。（二）UI设计的基本流程UI设计流程中的第一步是确定目标用户，UI设计的一个重要的任务就是实现用户与界面的交互，而不同的目标用户则会引起交互设计过程中重点的不同，因此通过确定应用程序的目标用户，能够更为直接的去理解用户的需求，进而思考UI设计方案。UI设计的第二步是采集交互方式，要针对不同的用户类型了解用户的交互习惯，并进而捕捉到用户想要的交互效果，使得程序的使用者有较为舒适流畅的感受，这对界面交互的细节处理有极其重要的效果。UI设计的第三步是指示引导用户，我们所设计的应用程序是服务于用户的，那么更好的使用户能够全面的使用程序，应在设计过程中具备指示引导的功能，让用户可以便捷的了解到应用程序的实际用途，提示给用户反馈信息，并引导着用户进行下一步操作，使应用程序易于上手。（三）UI设计的参考原则1.快速流畅身临其境的产品才更能吸引人，因此在应用程序的设计中一定要注重与用户的交互，也只有快速流畅的交互才能够提供最佳的用户体验。快速流畅涉及到UI设计中的简洁性和统一性，通过简洁的画面减少复杂画面对于用户捕捉信息的干扰，通过界面的风格统一性来契合用户的视觉感受，除此之外，我们在设计之初也要保证所做的每一个交互动作彼此之间是连续的，而不是孤立存在的，否则，将会使程序在使用过程中出现节点，减少流畅度。2.数字法则具体的数字能够更为直观的给用户带来兴奋点，就如同在消息图标上直接显示消息的数量，更能引起用户的注意力。信息的传递是应用程序的一大任务，图表信息的展示则显得尤为重要，因此，在采用信息图表的方式基础上加上动态磁贴的结合，充分利用数字对于人体感官的直接作用，增加界面的功能体现，优化用户的体验。3.优化结构在应用程序UI的设计中，要注重对层级结构的平衡，找到一个最能体现程序特色的排版，因为排版的好坏能够直接影响应用程序的节奏感和结构感。但是我们在设计的过程中不能一味注重结构，要将重点放在内容上，让内容代替布局，掩盖住设计初期的结构框架，可以充分利用颜色、字体、比例等元素带给用户沉浸式的体会，突出应用程序的重点功能，方面用户进行交互。4.界面美观在快捷、直观的基础上要注重界面的美观性，美好的事物能够增强用户的愉悦程度，带给人舒适的视觉享受，这也是我们在UI设计过程中最直接的要求，注重图形、色彩搭配等一系列要素的创意性和设计感，不仅满足内容需要，更能提升产品的艺术价值，因而界面的要做到注重细节，力求完美。三、用户需求分析（一）用户体验设计我们所设计的产品最终的目的是要让用户进行使用，那么用户的体验才是我们在设计的过程中要着重思考的。而我们在用户体验上所追求的目标归根结底是为了提高用户使用软件的效率。这主要是通过两种方式来加以体现：一是帮助人们变得更快，二是努力减少人们在使用软件过程中出现麻烦的机会。一个产品如果不能满足用户的使用效率，那么再多的功能都不能够被用户充分的使用，一个不被欣赏的设计是我们不想要的，我们需要用户对产品有良好的心理和视觉感受，因而将用户体验设计纳入考虑范围是必不可少。 用户体验的整个开发流程，其实是为了确保我们在进行软件设计时能够站在用户的角度，去思考周密并去试图理解用户在他们每一个步骤中所想要的期望值，这样才能真的为我们的软件设计提供有效的信息，也就是说，只有在设计过程中了解到这些用户想从这个产品得到什么，理解他们想达到的这些目标将怎样满足他们所期待的其他目标，才能由此来制定自己的设计方案。（二）用户的功能需求分析确认用户的功能需求是相当困难的，因为不同用户群体存在着不同的需求和期待。要对这些用户的需求寻根求底，必须要定义谁是我们的用户，这也是UI设计流程中第一步所要做的事。当我们知道哪些人群是我们想要了解的，就可以对他们进行调研，这些研究能有助于我们了解当用户使用我们的产品时，他们想要实现什么功能，我们的设计对他们生活存在的价值到底在哪里。对于我所做的UI设计的用户定义为大学校园里的学生，在通过自己以及周围同学的校园生活经历中，我们发现，对于买购类、社交类的APP已经很完备了，但是对于部分消息的收集存在不及时不方便缺乏途径等现象。同学多数反映：很多想要在大学期间体验兼职，但是兼职的消息却凌乱的张贴在校园的各个地方难于收集和比较；学校各个学院的活动难以及时收到，有时错过自己想去的晚会，或是接到活动比赛通知却已错过报名日期；对于自己一些不用但却质量较好用期较短的货品找不到合适的平台进行出售，只能通过在学校广场集中摆摊点、或是通过贴吧，而对于东西量少的情况更难以集中起来摆摊出售，而贴吧吧务却又常常不允许贴吧买卖这一系列的不方便的情况存在于校园生活的点点滴滴当中，虽然事小却引起了大家的吐槽，针对这样的情况进行收集和总结，我认为主要需要满足以下功能： 一是能够方便收集各类校园兼聘资讯； 二是能够方便的发布二手交易的资讯；三是及时收到全面的学校活动的相关信息；在了解同学的各类需求后，我认为应为程序设置一个数据库，添加资讯的收藏功能，使得可以把想要的资讯分条收藏，然后缩小范围集中比较，这样将优化资讯比较的过程。（三）用户的视觉需求分析评估一个产品视觉设计的有效方法之一，就是试着去对自己提出这样一系列的问题：你的视线首先落在哪儿？哪个设计要素最先吸引到了用户的注意力？它们是对于战略目标来讲特别重要的东西吗？多问自己一些问题，去试着确定视线所停留的地方，一定要注意视线在页面周围的、无意识的移动，很多情况下，人们视线的移动方式也是我们设计中构思的考虑因素。而对于用户来说，他们不需要考虑这些问题，只需要根据自己的感觉走，你们界面的色彩、布局是否给人耳目一新的感觉便显得尤为重要了。也许用户的视觉需求就在于这款软件中是否有一个图标更为别致、是否整体的风格更贴合自己的性格使人感到舒适，因此，我们在设计中，也应该多进行换位思考，从用户的角度得到设计的灵感。当然，为了在用户体验中获得优势，我们对界面的要求也应该对功能实现有所引领作用，即软件的交互设计，让用户能够最容易的发现接下来的操作，最迅速的掌握整个软件的应用方式，最有效的提高用户使用的流畅程度和便捷程度。那么针对于校园生活的UI视觉需求，我认为应追求于简单和平面，减少商务色彩，同时减少杂乱的信息。其实色彩的作用不仅仅在于丰富和装饰，用色彩可以代替内容，形成内容上的分割。下面对于两类界面，左侧是QQ中吃喝玩乐模块的截图，右侧是SOAPBOX的界面设计图。 对于左侧腾讯的界面设计是国内APP应用较多的，包括美团、考研帮中都有所应用，运用各色的圆形图标表达各类应用，同时下方设置部分热门推荐，特别具有应用时效性，而右侧的采用对比色块进行分割，与时下微软发布的Windows Phone的界面风格有相似之处，这类的界面设计被称为Metro，源自于包豪斯风格所倡导的“化繁为简”，在这样一种界面的引导下，色彩的运用将更为突出，同时布局整齐简易，用户将会有流畅快速的操作体验，这也是我在校园APP的UI设计中应当学习和借鉴的，通过色彩和窗口分割内容带来新鲜的色彩感。四、UI设计工具的体验和简介（一）Axure RPAxure RP是一款专业的快速设计APP原型和网页制作的软件，可以制作出逼真的、基于HTML代码的网站原型和APP原型，用于评估、需求说明、提案、策划等各种不同的目的，能够相应用户的点击、鼠标悬停、拖拽、提交表单、超链接等各种事件。同时，Axure RP作为专业的原型设计工具，能够为设计师们高效的创建原型，同时也能支持多人的协作和版本的控制管理。在我使用Axure RP设计APP原型之前，曾尝试过墨刀这款专用于APP原型设计的软件，墨刀的实现功能较为简单易于上手，主要通过全局手势来完成各级界面的跳转，可以实现基本的抽屉功能以及tab菜单等的设计，但是墨刀软件相对不成熟，存在着启动界面进入迟缓、部件过少、无法实现数据库的虚拟等一系列的问题，最终让我放弃了墨刀，选择了Axure软件。在我的使用过程中，我认为Axure功能较为强大，它的工作环境主要包括主菜单和工具栏、站点地图面板、控件面板、模块面板、线框图工作区、页面注释和交互区、控件交互面板以及空间注释面板等八部分组成，可以实现条件、动作、事件的添加，同时可进行界面美化操作，其中，动态面板的使用为实现APP界面的多功能跳转提供了便捷，但软件的使用过程也需要设计者较好的逻辑思维和UI设计灵感。（二）Photoshop对于UI设计中的各级界面设计我主要应用了Photoshop，其实它的专长在于图像处理，但因为当前用于界面设计的专业软件较少，大多数人还是采用PS来进行美工制作，它能进行广泛的平面设计，例如制作海报招贴，同时也能实现图形创意制作，比如手机图标的自主设计等，可以说是一款比较出名的图像编辑器。PS软件可以实现图像的编辑和合成、校色调色等功能去制作设计中所需要的图片素材，如我们校园APP中的图标的制作，也可以实现对图像做各种变换如放大、旋转、倾斜、镜像、修饰、透视等处理，还能通过对图像通过图层操作、工具应用来合成图像，同时可以方便地对图像的颜色进行明暗、色偏的校正调整以及特效制作，实现外来图像与创意的很好融合。五、APP原型的功能实现根据前期的用户需求调研，针对于收集兼职信息、进行二手交易、查看校园活动信息等需求，决定在功能中主要设置四个模块，分别是：找兼职模块、二手交易模块、校园活动模块和收藏模块，在每个模块中针对实际情况将各类消息分类发布在app中，并对每条消息提供浏览和收藏功能。此外，为了提高app的针对性，对学校可进行设置，使得其中的内容能够局限在本学校，也可通过“添加”进行添加学校，方便用户随意选择，这样保证了信息收集的范围。（一）找兼职模块在找兼职模块中主要满足用户搜集与学生兼职相关的各招聘信息，而校内兼职和日结算兼职对于在校学生而言更具吸引力，因此在模块的首页上方设置校内兼职和日结算区两个矩形色彩框进行便利导航。同时根据学生力所能及的工作类别下设热门招聘、教育艺术、IT设计三个子模块展示在模块首页，进行部分招聘信息的展示以方便搜索，其中每一个工作名称均为按钮设定，可点击查看该类工作的具体职位及其相关信息。各级界面示意图：各级界面展示：此界面是找兼职模块的一级界面，主要功能是分类展示了校园可以搜集到的各种兼职信息，每一个小分类都完全贴合校园同学的实际需求，每一个按钮可点击进入下一级界面。图一： 图二： 以找兼职模块中左上方的“校内兼职”按钮为例，点击按钮则可出现上方图一所示的界面，每一横栏代表一个兼职信息，而右侧绿黄相间的矩形条一方面为了区分相邻两项兼职信息，另一方面，每一个彩色矩形可点击，点击后向左滑动出现心形的收藏按钮，如上图二所示。点击每个兼职信息则出现找兼职模块的第三级界面，即该兼职的详情，详情页面将再次设有心形的收藏按钮，方便用户在此页面直接点击收藏，不必返回上一级页面，如图所示。同时，该页还将显示此条兼职信息的具体介绍，包括薪资待遇、招聘人数、工作时间、工作区域、职位描述以及联系方式，使用户能够及时便捷的了解相关信息，必要时可通过电话联系与招聘单位协商。 （二）校园二手交易模块该模块主要针对于同校的学生难以进行二手货品的交流现象，能够为大学生提供一个方便的货物交换的平台。卖家可以将自己不用的部分衣物或者书籍拍照，同时将信息分类挂在校园APP中，而同学在浏览各类信息中可选择是否有自己钟意的物品，通过其中提供的具体信息可以与同校的或者附近学校的同学进行沟通、交易。这样不仅减少了物品的浪费，同时对于买家来说，既减少了网上购置新物的邮费，又能买到可以看到实物的廉价商品。根据学生需要进行交易的物品进行分类，主要是服饰、鞋帽、电子产品、书本和其他物品五类，每一类之中包含具体的商品，主要是通过卖家上传的图片进行商品的展示，用户可选择对此类消息进行收藏或者继续点开商品详情了解商品的相关信息和卖家的联系方式。各级界面示意图：各级界面展示：这是二手交易的一级界面，五种物品的分类对应五个色块，每个色块在点击时会出现颜色瞬间透明度下降这一交互现象来提示用户，给予视觉上的感知。 以二手交易中的第一个服饰类为例，点击一级界面中的第一个色块则出现此页面，与找兼职模块中的设计一致的是，右边同样设有绿黄相间的矩形，其功能不变，而不同的是，每一横栏左边出现了一个小型的图片展示窗口，这与二手交易的功能设定相匹配，便于用户直观的了解物品的外观，来决定是否有必要进入下一级界面查看物品详情。 在二手交易的详情界面主要是物品的大图展示，同样再次设置了心形收藏按钮，同时在该页还说明了物品的价格及相关的物品描述，如衣服的大小号、使用情况等，使用户对该二手物品的新旧程度和各项参数有个初步的认识，若想了解具体情况，也可通过联系方式进行沟通，因为此APP基于附近或自己所在的大学校园，则为买家和卖家提供了更多的便利。（三）校园活动模块该模块的主要作用是方便学校各学院学生会同学将近期内本学院即将开展的活动信息发布在APP上，提供活动地点、活动时间、活动形式和内容等，使得学校同学能够更为集中的了解近期内整个校园的课外活动安排，有选择的参加或是观看，这对丰富校园生活，提高校园活动参与度有一定的积极作用。各级界面展示：该界面是校园活动模块的一级界面，根据校园活动的类型分成了四大类，分别是知识竞赛类、音乐类、体育运动类和娱乐休闲类，这四类基本包含了所有的校园活动类型，每一类型的活动子模块以矩形色块配以图形表示出来，整体设计采用窗口式方式排列，但窗口大小不进行统一，给用户活泼的体验。每一个窗口可点击使用户有选择的进入下一级界面，且在点击时设计交互现象，如图上知识竞赛类窗口，字体添加阴影，而其他窗口中的字体无任何变化。以校园活动的第一个知识竞赛类为例，点击蓝色窗口进入二级界面，此界面与之前两个模块的二级界面设计排版一致，成矩形列表状排列，同样，右侧绿黄相间的矩形具备点击出现收藏按钮。与竞赛类相关的比赛通知和报名公告在此界面显示。在活动详情界面，上方以大图片展示的方式显示该活动的宣传海报，在某种程度上也是吸引同学参加活动的有效方式，与之前的详情界面保持一致的是也再次设有心形收藏按钮和该活动的详情描述，包括比赛时间、比赛要求、报名方式等，可根据活动实际情况进行添加，最后设置咨询电话方便用户与活动负责人进行进一步沟通联络。 （四）收藏模块收藏模块主要属于后台的数据库设计，能够储存用户在浏览过程中收藏的资讯，方便用户对自己感兴趣的信息进行收集，例如收藏兼职的相关信息，则可通过收藏模块进行几条信息的对比，这样能够更直观而方便，同时可以通过数据集实现信息的添加和删除操作，方便对个人收藏夹内容的管理。而在页面设置上主要采用列表的形式进行排版，使条目清晰，力求简洁明了。点击心形收藏按钮，在收藏模块会加入这一条信息下面是收藏功能的展示： 点击删除，则会删除该条收藏六、APP原型的界面设计（一）界面设计的风格界面设计的风格其实也是一种设计语言，它定义了整个软件界面的视觉第一效果，在欣赏了很多国内国外移动UI设计的效果图后，给我留下印象最深的有两种，一种是大视野背景图风格的界面，而另一种是多色彩的扁平化界面。我认为这两款设计风格都不乏时尚性，第一种大视野背景图的最大优势是提升了视觉的表现力度，同时极大的丰富了APP的情感化元素，能够很快的抓住用户的眼球。这种设计方法虽然极易渲染氛围，但是实际上对文字、排版设计的要求变得更高，难度也大的多，因为它对于前景的信息排布设计是有很大挑战的，毕竟内容丰富的背景比较容易干扰用户的注意力，这样就会减小前景的文字内容的可读性。所以有时常常看到需要把重要操作用明确的色块来进行区隔，将阅读型文字从背景图中突出出来。而第二种扁平化设计已经成为移动设备界面设计的一种发展趋势，它运用简单的设计元素，更为关注色彩的运用，同时精简设计，减少了很多不必要的元素，像如那些透视、纹理等等，往往带给人别具一格的视觉感受，使界面清新简单又美丽十足。综合这两种自己最为欣赏的风格，考虑到设计的难度与用户的适应程度，结合校园APP的主题，我认为选取多色彩的扁平化风格则更为凸显年轻与活力，同时能够简化操作，切合本款校园App内容相对量少的特点。通过对一系列扁平化设计方案的研究，不难发现，扁平化不仅体现在多色彩的运用上，同时它又是贯穿整个设计始终的，包括软件中图标的设计、图案的运用，而相比较而言，线性的图标设计搭配鲜亮色往往能出现比较好的设计效果。启动界面展示图：此款校园APP主要的功能是用来搜集信息的，因而以“寻找和浏览”为主题设计图标，同时“眼睛”的图形，加之“LOOK”整体形成放大镜的造型，意为“寻找和浏览”，考虑到蓝色和黑色的图标，配置以黄色的背景，形成色彩的对比，简单的输入窗口与按钮与整体形成色块的分割，整个图标和界面具有扁平化特点。如图所示，用户名和密码窗口设有获取焦点的功能，点击可获得光标，且密码窗口采用输密码的格式，输入的字符以黑色圆点显示，点击登录可进入APP首页。APP的首页的效果体验是用户进入该应用程序的第一印象，一个完整的首页设计主要包括广告图、导航、应用程序各部分内容等，通过首页可以链接到各个分页。按照用户的特征与需求，来定义界面中每个元素的风格和视觉效果，从而展示整个应用程序的整体设计风格，合理的APP首页布局和交互设计可以给用户的体验带来便利。因此，首页的设计则显得尤为重要。在我的APP首页设计中，主要分为三部分内容。第一，是一个图片轮播的广告区，每张图片对应“校园兼职”、“校园二手交易”和“校园活动”的主题，起到对APP中主要模块的宣传功能，每张图片以2500毫秒的速度进行循环播放，给首页增加了动态的视觉效果，同时广告海报的设计风格贴近校园生活，与首页整体的界面风格相匹配。轮播图片的展示：这是关于二手交易的广告海报，另外两张将在接下来的截图中有所展示，此处不重复上传。第二，设置学校添加区，在图片轮播的右下方有一个星形的线性图标，左侧显示目前所选择的学校名称，点击星形图标可进行学校的添加，而整个APP的范围则限定在所选的学校校园之内，进一步方便用户。由下向上滑出点击 第三，四个模块的导航区，采用22网格布局，使用没有圆角和折边的纯矩形作为模块窗口，用对比度较为强烈的鲜艳色块作为图标的底色，采用简单的纯白色线性图标，使首页的界面带有Metro风格。（二）图形的样式在整个app的UI设计中，图标的应用是极为广泛的，为了适应界面以及配合整体的设计思路，我们需要有很多具备自己app特点的图标，以显示整体设计风格的一致性，否则将达不到UI设计参考原则中对于快速流畅的要求。因此，图标的设计要考虑到app的具体内容、板块设置、风格特点以及色彩搭配。根据实际的板块，首先主界面需要四个图标来分别代表四个相应的模块，而对于每一个模块中的子模块也必须要配套的图标，用二手交易模块来举例，该模块中又根据交易的类别细分为五个条目，分别为服饰、鞋帽、电子产品、书本和其他物品五类，即需要为此设计相关具有艺术性和代表性的图标。除此之外，导航类的按钮也需要添加图标，像如“后退”、“添加”等，而我们在设计中要做的就是让这些图标能够清晰而形象的表现出相应的内容，富有极大的辨识度，同时具备一致性的设计风格。以上列举了二手交易中的图标，采用扁平化设计，但在此基础上，仍能通过运用添加图层蒙版为每个图案添加色彩上的阴影，既不破坏扁平化的美感，又能使得效果更佳。同时，圆形元素的使用区分于主界面上的方形色块的运用，使得主模板与子模板图标在色块面积上有所分别，便于区分主次，而色彩的丰富度也有所提高，显示了其内容的细化性。 这三款图标是该APP中“收藏”“删除”“添加学校”的图标样式，均以矩形色块配以纯白色线性icon设计而成，简单大方，意义明显，具有较好的标识度，能够给用户起到良好的引领作用。（三）界面的配色方案色彩在界面设计中是最具有表现力和感染力的元素，它能够通过人们的视觉感受来产生一系列的效应，比如心理和生理上的反应以及类似物理的效应等，形成丰富的联想和意义深刻的象征。对于界面的配色方案，有其内在的科学性法则，但呈现给用户的则是第一视觉上的感受，一般分为三个大类：由色相差形成的配色方案，由色调调和形成的配色方案和由对比配色形成的配色方案，每一种又有所细分，如下表所示：在我的设计中主要运用第三中配色方案中的色相对比，采用多色对比的方式构成不同色块，并在色彩的搭配中多采用鲜亮色，结合不同的亮背景或者暗背景，调整色调和饱和度，使其能有合适的搭配，但是，在同一个子模块中，做到尽量避免过多的对比，使得页面趋于整洁，避免过于杂乱。 如图所示，每一个模块下的子页面标题均采用与首页模块图标相一致的底色，同样采用纯白色字体颜色和符号颜色，提高了用户在交互体验中的流畅性，体现了“总体协调、局部对比”的色彩应用原则。色彩的运用也在于与图形的搭配当中，每一个矩形按钮的底色与图形的背景颜色相一致，使图形与栏目形成紧密的结合，真正起到导航用户的作用。（四）结构排版排版是在UI设计中也十分重要，它是将文字、图片等基本元素在整个设计界面中调整，使界面的布局产生条理化的过程，好的结构排版能够让用户更容易方便的去阅读、接受软件提供给他们的资讯。结构排版扮演着内容与用户之间沟通桥梁的角色，在设计中要让用户不需要特别的努力、训练就可以了解提供的内容；与之相反，糟糕的排版可能会让用户产生拒绝的心理，难以接受这些内容。因此，排版对于资讯类的APP十分重要。排版设计也会因为不同的情境、需求而不同，排版的基本要素如下：1. 对齐任何的东西都不能随意摆放，在每一个元素之间都具有某种视觉关系。可以利用对齐的方式建立一个清楚整齐的外观。2. 亲密彼此相关的内容应紧密的靠在一起，反之那些不相关的内容需要保持距离。可以利用亲密性来强调画面的架构与组织。3. 重复重复视觉要素的大小、颜色、字体、空间等，能够增强条理性，同时也能增强整体的一致性。4. 对比为了避免页面上元素太过于相似，如果它们不同，那就让他们保持截然不同的效果。让重要的内容引人注目，让用户直接看到它们。“纸上得来终觉浅，绝知此事要躬行”，太多的理论知识也需要实际的设计中反复推敲研究，才能够配合好界面风格和内容，转换成设计的图稿。而这款校园APP中所用到的排版可以整理为两类：一是列表式，用来罗列各类消息，这也是用的最多的一种，在找兼职和二手交易的子模块中均有使用，这体现了排版要素中的对齐、紧密、重复的原则，相似的要素排列整齐；二是窗口式，更为简洁而又直接的表现内容，同时令界面有新颖感，在主界面以及校园活动子模块有所体现。总之，结构排版是否清晰合理，关系着用户的视觉流程的通畅程度和信息传达的明确性，排版的重要意义在某种程度上是统一应用程序的形式内容，将各种视觉要素做出整体性上的安排考虑，从而增强用户的注意力和理解力。七、后台数据库的设计每款APP中比较重要的设计在于后台数据库的创建，而在我们的校园资讯类APP中，所用到的数据库功能主要体现在收藏模块当中，具体操作为对每一条信息都含有一个收藏的图标，点击图标可使此条信息收藏进收藏模块，同时点开收藏模块可查看之前收藏的信息，这样的一个操作在Axure开发工具中主要通过中继器（repeater）来实现。中继器的主要部分有三个，分别是主页、项目交互和数据集。当然，也可以进行样式、属性等一系列的设置。主页就像其他的设计页面一样，可以把用到的元件拖放进来，来进行合适的排版以完成单个模块所形成的最终效果，同时结合数据集来形成重复的项目列表。数据集则是以表的形式充当存储数据的容器，可以让每一行数据对应一组模块，而这个模块也是可以根据我们的所需进行设计的，比如图片加文字横向形成一个模块等。中继器的数据集能实现查（筛选、排序）、增、删、改的动作。中继器的项目列表可以实现分页的功能，也可以通过动作进行控制页码，在我的收藏模块中主要实现增和删的动作。在Axure中，中继器里所显示的列表项与中继器的数据集相关，在默认情况下是一一相对的。也就是说，中继器数据集中有多少行数据，那么，列表项就有多少个，比如我们的收藏夹中有3个项目，那么就有3行数据排列在中继器的数据集当中。中继器的使用是相对难度较大的，通过实际应用，我认为它在某种程度上提供的是一种虚拟的数据容器，可以实现数据间的交流，如下图：我们要收藏的是收藏图标所指示的文本内容数据集中列表项命名为text（有所区分）我们将中继器命名为TEXTS 中继器展示窗口TEXT图形所指示的文本图形数据集与中继器展示窗口之间实现文字连接通过点击图形，将图形所指示的文本，添加行到数据集中数据集text通过中继器中数据集和项目交互的设置，能够实现我们校园APP中的收藏功能，用户可以有选择的对自己感兴趣的信息进行收藏，更方便用户进行自己所需信息的管理，实现“添加”和“删除”，使的该APP的功能进一步完备。中继器是Axure 7.0推出的新功能，它的使用十分的广泛，如登录界面的验证、复选框与标签的同步、搜索等，当然很多人说中继器也是目前为止Axure中最为复杂的功能实现、没有之一，因而充分利用中继器，通过我们的不断的学习和积累，将会创作出更为完备实用的APP原型。八、总结（一）遇到的问题