APPUI版式设计毕业综合实践报告.doc

..中文摘要、电脑等电子设备已经成为现代人生活的必需品，生活中的一举一动都可能体现出电子设备的重要性UI界面作为现代电子设备中人机交互的重要手段，UI界面的设计随着电子设备在人们生活中地位的提高,也成为视觉设计中最为重要的分支之一和重要的新兴学科报告使用了Xmind梳理需求思路，使用Axure制作产品原型，之后使用Photoshop绘制产品UI设计，最终输出产品UI设计稿设计稿主要内容为APPUI版式设计，包含Android版式设计以及IOS版式设计它还涵盖了界面外观的设计，还有用户和机器的互动交流和操作逻辑UI 的设计如今一直伴随着人们的日常生活并密不可分好的 UI 设计可以使产品更使用户更容易接受和更受用户的欢迎关键词：UI设计 APPUI设计 AndroidUI设计word教育资料目 录中文摘要 I1 设计概论 11.1 UI设计的背景 11.2 研究的内容 11.3 研究的意义 21.4 研究的方法 22 设计任务 33 UI设计的依据 44 设计思路 54.1 UI设计的创意 54.2 UI设计的表达 55 设计内容 66 UI设计说明 76.1 设计过程的分析 76.1.1 UI设计整体构思 76.1.2 UI设计风格的选择 86.2幸福花苑UI设计 86.2.1 Auto CAD的平面施工图的设计 86.2.2 3D MAX三维建模设计 96.2.3 Photoshop后期处理设计 16设计总结 20参考文献 21附 录 22致 谢 26 ..1 设计概论UI作为互联网时代时下流行的新词汇，它还涵盖了界面外观的设计，还有用户和机器的互动交流和操作逻辑。

UI 的设计如今一直伴随着人们的日常生活并密不可分好的 UI 设计可以使产品更使用户更容易接受和更受用户的欢迎1.1 UI设计的背景及现状在过去很长的一段时间里界面设计一直没有被国内信息企业重视，做界面设计的人一直被称呼为美工，他们的工作被认为只是单纯地给界面或者网站进行简单的装饰，完全不需要独立的思想和创意当信息产业铺天盖地的融入我们的生活的时候，越来越多的企业发现软件和网站产品仅仅靠先进的技术是不足以在市场上立于不败之地，高水平的界面与交互设计成为了产品在市场上一种重要的手段，为很多厂家带来了相当可观的经济效益，一个美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点界面设计不是单纯的美术绘画它需要考虑使用者、使用环境、使用方式，并且最终实现为用户而设计是纯粹的科学性的艺术设计检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受，所以界面设计要和用户研究紧密结合，最终为用户设计出一个满意的视觉效果1.2 UI的概念UI的本来是User Interface(用户界面)的简称,主要是指对软件的人机交互、操作逻辑、界面美观的整体设计。

1.3 研究的意义UI 在国内在近几年才开始流行起来，是一个新兴的热门行业，所以有许许多多的人涉足于该行业；又因为 UI 设计的行业在国内刚刚火热起来，各个公司对该行业的人才也非常需要在当今的专业 UI 设计人员当中，有许多都是从美术行业、网页设计行业转行的专人也才，其中也包括了自学的人然而和国外的 UI 设计师相比之下，国内的知识水平就相对匮乏，经验也较为不足 无论是 IOS、Android 还是 WP 系统的各类智能及平板电脑，都有各种各样的应用软件应用软件的界面实用性、视觉美观性和用户体验优良性都离不开视觉传达艺术在人机交互技术逐渐成熟的今天，用户开始注重自身的对产品体验的满足感，这就意味着优秀的用户体验即产品成功的关键 产品的视觉设计在产品中占据着重要的地位，优秀的UI设计意味着能给用户带来优秀的用户体验因为自己一直做 UI 设计，所以想通过项目中的 UI 设计来探究UI设计中的版式设计对整体UI表达效果的的意义以及价值2 UI版式设计分类UI界面设计包括硬件界面设计和软件界面设计"这里我们探讨的是软件界面设计，软件界面设计中又包括“用户研究”、“交互设计”与“界面设计”三个部分。

2.1用户研究在产品开发的前期通过调查研究了解用户的工作性质、工作流程、工作环境、工作中的使用习惯，挖掘出用户对产品功能的需求和希望，为我们的界面设计提供有力的思考方向，设计出让用户满意的界面用户研究不是设计者主观的行为，而是站在用户的角度去探讨产品的开发设计它最终达到的目标是提高产品的可用性，使我们设计的产品更容易被人接受使用并记忆当产品最终被推上市场后，设计者还应该主动去收集市场的用户反馈，因为市场反馈是用户使用后的想法是检验界面与交互设计是否合理的标准，也是经验积累的重要途径2.2 交互设计这部分指人与机之间的交互工程一般都是软件工程师来制作，交互设计师的工作内容就是设计软件的操作流程“树状结构”软件的结构与操作规范等一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型、交互规范人机交互设计的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具2.3 界面设计国内目前大部分工作者都是从事这类设计工作，也有人称之为美工，但实际上不是单纯意义上的美术工作者，而是软件产品的信息界面设计师从心理学意义来分，界面可分为感觉、视觉、触觉、听觉和情感两个层次用户界面设计是屏幕产品的重要组成部分界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色，用户界面设计的三大原则是置界面于用户的控制之下，减少用户的记忆负担，保持界面的一致性。

2 设计任务本次设计的任务就是要设计一个相对符合现代人类审美，且拥有良好视觉体验、用户体验的APPUI设计作品一个成功的UI设计作品对于是否符合现代人类审美，除了在扎实的基础理论上的知识外；在技术层面上来看，熟练地技巧也是密不可分的，而且是一个作品的成败的关键部分在我们的设计中有一个共性问题一直存在，那就是每一位客户对风格上的要求都是不同的，所以也要求了UI设计师们在进行UI设计之前必须与产品经理、需求分析人员、需求调研工作者进行沟通，理解需求内容及重点，了解用户心理以及用户所需要的，能接受的UI设计作品事实证明，随着时代的发展进步，UI设计无论在功能上，还是在艺术审美上的要求都要更具有人性化，这也是它的一个发展趋势而且具有挑战性3 UI版式设计依据3.1 UI版式设计法则72法则：因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题根据George A Miller 的研究，人们短期记忆每次能处理5～9件事情这经常贝作为把导航菜单的元素限制在7个以内的依据但是关于“72”的争论很激烈以至于如何把他应用到网站上还不明确主要使用范围是网页设计的导航上2秒钟法则：这是个松散的原则，用户在使用某类系统时的等待反映(比如:功能切换和功能载入)的时候不应该超过2秒。

选择2秒也许有一点随意，但是这却是一个合理的数量级一个更可信的原则是，用户等待的时间越短，用户体验更佳这个法则也使用与移动APP的启动页面或者交互触发如图3-1所示图3-1多手指手势操作3次点击法则：用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色，他们就会离开该网站这条原则突出乐清晰的导航，符合逻辑的结构和易于理解的网站层级的重要性如果你的网站能够让用户知道他在哪里，从哪里来，要到哪里去，并且能够让用户了解如何完成目标，图3-2所示的点击即使多次也是没有问题的图3-2三次点击操作示意图2/8法则(Pareto定律):Paretod定律(也被称为“少数关键定律”或“因素稀疏定律”)表明80％的结果，由20％的原因产生这是商业中一条记本的经验法则（80％的销量来自20％的客户），但是也同样适用于设计领域和可用性领域比如，对20％的用户，客户，活动，产品或过程的定位，可能为你带来80％的利润，使你对它们的注意程度最大化图3-2少数关键简化设计样例3.2 UI版式设计原则Ben Shneiderman 通过对用户界面的设计的研究，提出了一系列的原则，这些原则来自经验和启发，适用于大多数交互系统。

这些原则和所有的用户界面设计都相关，严格意义上说，也适用于网站设计1. 努力做到连贯2. 允许频繁使用系统的用户使用快捷方式3. 提供信息反馈4. 为关闭这一动作设计对话框5. 提供简单的设计处理6. 允许简单的撤销操作7. 提供控制器支持内部控制点8. 降低短期记忆载荷4 UI版式设计标准4.1 Android UI版式设计标准1.尺寸及分辨率:Android界面尺寸：480*800、720*1280、1080*1920PXAndroid比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高2.界面基本组成元素:Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸状态栏高度为：50px导航栏高度为：96px主菜单栏高度为：96px内容区域高度为：1038px(1280-50-96-96=1038)Android最近出的都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的。

Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多去除实体键后再屏幕中显示而出现的双底栏的尴尬情景3.字体大小： Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像,如图4-1所示 图4-1安卓UI版式设计字体4.2 IOS UI版式设计标准尺寸及分辨率:iPhone界面尺寸：320*480、640*960、640*1136iPad界面尺寸：1024*768、2048*1536单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更界面基本组成元素:iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏：就是我们经常说的信号、运营商、电量等显示状态的区域，其高度为：40px;导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px;主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px;内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px;字体大小:Phone上的字体英文为：HelveticaNeue 至于中文Mac下用的是黑体，Win下则为华文黑体，如图4-2所示图4-2 IOS UI版式设计字体5 设计内容局部与整体协调统一：设计时需要从里到外多次反复。