毕业设计（论文）-APP享吃的产品UI设计开发

全日制本科生毕业论文     题  目： APP“享吃”的产品 UI设计开发 学 院：  计算机与信息科学学院 专业年级：   信息管理与信息系统 2012级 学生姓名： 学号： 指导教师： 职称：   副教授  2016 年 5 月 6 日APP“享吃”的产品UI设计开发摘 要：本毕业设计是APP“享吃”的产品诞生过程和UI设计开发、APP产品定位、竞品分析、思维导图、产品原型、UI设计规范、界面设计。使用Xmind、Axure RP、Photoshop、Sktech等工具完成原型图和UI界面设计。 关键词：产品定位；竞品分析；产品原型；UI界面设计全套设计加扣 3012250582Abstracts：This graduation thesis states the birth process and the UI design and development of the APP “Enjoy Eating”. The birth process includes the product positioning of that APP, analyzing competitors, making mind map and building product prototype. The use of Axure RP, Photoshop, Xmind, Sktech and other tools to complete the prototype diagram and UI interface design.Key words：product positioning;competitive analysis;product prototype;UI interface design UI设计是手机发展和计算机发展的必然结果。我们以手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。事过境迁，如今技术已经完全的达到用户的需求，并且频频推出短信、彩屏、彩信、弦铃声、摄像头等等。这样一来产品的美观、个性、易用、人性化等等都成了产品的卖点。现今随着计算机的飞速发展，计算机行业已经有UI设计意识了，例如：锤子科技，由于重视UI设计和用户体验，获得极客公园“2014 中国互联网年度创新产品大奖”和“最佳用户体验奖”两个奖项1；联想软件的UI部门积极开展用户研究与使用测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费PC第三的称号等。实践证明，各商家只要在产品美观和易用设计方面很小的投入，将会有很大的产出。其投入产出比，要比在功能领先性开发上的投入小得多。1 开发环境简介为了方便APP的产品以及UI设计，前后使用了手绘、Xmind、Axure RP、Photoshop、Sketch、illustrator设计软件。Xmind用于制作思维导图，使得做产品时的思路是清晰的；Axure用于制作产品原型，给界面设计搭建好一个视觉框架；Phtoshop、Sketch、illustrator都是用于界面的实现与细节设计。1.1 手绘这里的手绘并不是指将APP的界面给一一画出来，而是进行天马行空的想象；将用户痛点和用户使用场景甚至可以使不存在的生物使用场景以画面的形式呈现出来，让我们对这个APP的使用有一个直观的概念，然后再将部分界面草图进行绘制。1.2 XmindXmind是一款十分实用的商业思维导图软件，用全球最先进的Eclipse RCP 软件架构，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性等性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率2。我们在此用其搭建APP使用思维导图，以助于制作原型图时不产生混乱。1.3 Axure RPAxure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求、规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档3。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本的控制管理。1.4 Photoshop、illustratorAdobe公司推出的2款设计软件。Photoshop用于处理界面整体的页面设计及版面规划，illustrator用于设计界面细节，如icon以及各类按钮入口。1.5 Sketchsketch是一款矢量软件，同时也附带一些简易的位图处理功能。它的定位是界面设计（我个人习惯于把网页也包含在界面范畴之内）。相对于PS，它能提供更为简便的矢量图绘制方法及专为UI设计定制的许多人性化功能（其实新版本的PS CC2014在UI设计方面也做了非常多的优化）。它更接近于AI的界面操作方式。包括它是基于矢量的（便于导出不同尺寸需求）和拥有画板（Artboard） 概念（就不像PS一样，一个APP需要无数个psd文件了，而像AI一样，一本画册可以在一个AI文件里完成）。2 课题分析2.1 产品定位分析我们将这个APP定位于生活类产品，实现厨师上门服务，安全便捷的进餐方式。产品不仅仅提供了厨师上门服务这个功能，还给提供“享吃圈”这一社交功能来满足现在人们爱炫耀的心理需求。2.2 用户需求分析&竞品分析当现在科技越来越发达，手机功能越来越完善，人们也变得越来越懒了。现在很多的年轻人已经习惯于在家点外卖的用餐方式。但是外卖送来的东西是否安全我们并不知晓。假如能让厨师上门做菜的话，不免让我们食用起食物来更加的安心和愉悦。而在APP Store里经过调查只有爱大厨这款APP在做这一块的市场（现在又多出了“星大厨”和“好厨师”这两款APP）4。如图2-1，这些APP的共同点都只是简单的提供了寻找可以上门的厨师的这个平台，并没有提供一个社交平台，这样从另一方面就会失去很大的用户粘性。让用户使用APP的热情没有那么高涨。而且界面也过于单一或过满，加上APP的用色也过于刺眼使得用户使用APP时候产生一定的视觉疲劳感。 （1） （2）图2-1 竞品图3 思维导图3.1 产品思维导图制作制作产品的思维导图，以方便制作原形图不会形成思维混乱。简单且明了的阐释了“享吃”这个APP所有的界面以及每个页面之间的关系，为之后产品原型制作以及设计稿制作奠定基础。如图3-1所示，从一级页面的首页、搜索、享吃圈、个人中心再到各自的二级页面的逻辑关系做一个明了的整合。在制作产品原型时就能根据图3-1所示的思维导图来制作，每个页面一一对应并且根据思维导图制作每个页面之间的跳转。这样就不会产生功能跳转错误的BUG了。图3-1 思维导图4 产品原型4.1 产品原型设计原型设计在整个产品流程中处于首要的位置，有着承上启下的作用。原型设计之前的需求或是功能信息都相对抽象，原型设计过程就是将抽象信息转化为具象信息的过程，制作成线框图，而线框图也是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行视觉分割5。所以说，原型设计的重要性无可替代。产品经理应当要对此有绝对的控制和驾驭能力。而在制作这款产品的UI设计之前，我根据其每个页面的布局以及页面之间的跳转做了图4-1的产品原型图。从冷启动页到首页，首页和下级页之间的跳转关系都用原型图表达的直接明了了。给下面的界面设计打下框架基础，也在原型图边上注明此APP的功能。制作设计图时候就按照这原型图的大框架制作，只需要定了APP的主色调以及内容的规范就可以将粗糙的原型图制作成高保真设计图。图4-1 原型图5 UI设计5.1 项目立项在做好原型图，确立好项目后就该进行项目归档整理，我的习惯就是将项目作为总文件夹名，接着将PSD和PNG、JPG、原型分开建立子文件夹。如图5-1所示。图5-1 项目立项整理图5.2 Photoshop里的设计规范现在市面上常用的几种设计尺寸6：（1）640*960px iPhone4的尺寸，刚接触APP时候的尺寸，当时拟物风盛行（现在已被扁平化设计风格所替代。以及因为产量原因这个尺寸已经几乎不用了。（2）640*1136px iPhone55S的尺寸，随着iPhone更新，设计也从拟物化时代进入了扁平化1.0时代。（3）750*1334px iPhone66S的尺寸（也是我现在做设计稿所使用的尺寸），向下可以适配4.5，向上可以适配6plus；并且用6的尺寸做的设计稿切图切出来就是2x了，改一改，上下版本的手机界面就都可以照顾到了（也推荐使用6的尺寸做初稿的设计尺寸）。iPhone6相对于iPhone5来说许多控件的尺寸其实没有变化只是显示的间距产生了变化，图5-2是参考线模板图。这里我就详细说明下在iPhone6的设计稿下的设计基本规范：状态栏：40px；导航栏：88px；标签栏：98px；按钮最小体验高度：76px；常用高度：80px，84px，86px，88px，90px，92px，96px；图5-2 项目立项整理图分段选择控件高度：最小高度为44px；常用高度44px，58px，76px，86px，90px，92px，96px，120px，150px；按钮的尺寸要为双数，并且要制作2种状态（已选中和未选中）；可点击对象的区域不要小于44*44px；导航栏字体大小建议34px-38px；标题字体大小建议28px-34px；正文字体大小建议26px-30px；辅助性文字字体大小建议20px-24px；标签栏字体大小建议20px；最小点击域问题：IOS人机指导手册里面推荐的最小可点击元素的尺寸是44*44point，换成物理尺寸大概是7mm左右（人机功效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，触击范围在9mm左右合适）。据说在这个尺寸下，不容易出现误操作，小于这个尺寸，点击就会变得有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸的时候也是有所根据的。所以现在做设计，为了图标精致，可以将图标做的小一点，但是切图输出的时候要考虑用户点击难易度的问题，所以，切图时要将点击区域一块切。普通屏幕还是切44px，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难7。以上就是我平时积累的APP的UI设计中的基本规范内容。在我们给界面做设计的时候不能违背以上的规范，这也是这许多年来设计师总结出的最佳的用户体验规范。5.3 确立界面的主色调一个APP的主色调的确立常与设计师本人的个人喜好有挂钩。我是一个比较喜欢日本文化的人，特别是对日本茶道尤为喜爱。所以我制作这个APP的时候就以日本料理为主并且参考了许多日本茶道的图片，从中定下了这个APP的主色调。图5-3里面的图片是我参考的图片的一部分。这些素材主要来源于一个外国的素材网Pinterest以及中国的花瓣网8。图5-3 主色调参考图从图5-3中，我们发现颜色中浅色部分都偏米黄色，而深色部分都偏深棕色，所以我将深色定为主色调并进行了一定的淡化，所定下的颜色为#726258，如图5-4所示。图5-4 颜色块1而浅色作为辅助色，定下的辅助色为#faf6f3，如图5-5所示。图5-