APPUI版式设计-毕业综合实践报告资料

1、中文摘要 手机、电脑等电子设备已经成为现代人生活的必需品，生活中的一举一动都可能体 现出电子设备的重要性。UI界面作为现代电子设备中人机交互的重要手段，UI界面的 设计随着电子设备在人们生活中地位的提高，也成为视觉设计中最为重要的分支之一和 重要的新兴学科。报告使用了 Xmind梳理需求思路，使用Axure制作产品原型，之后使 用Photoshop绘制产品UI设计，最终输出产品UI设计稿。设计稿主要内容为 APPU版 式设计，包含An droid版式设计以及IOS版式设计。 它还涵盖了界面外观的设计，还有用户和机器的互动交流和操作逻辑。UI的设计 如今一直伴随着人们的日常生活并密不可分。 好的

2、UI设计可以使产品更使用户更容易 接受和更受用户的欢迎。 关键词：UI设计APPUI设计AndroidUI设计 目录 中文摘要 I 1 设计概论 1 1.1 UI设计的背景1 1.2 研究的内容 1 1.3 研究的意义 1 1.4 研究的方法 错. 误！未定义书签。 2 设计任务 3 3 UI 设计的依据 4 4 设计思路 4 4.1 UI 设计的创意 7 4.2 UI 设计的表达 8 5 设计内容 9 6 UI 设计说明 9 6.1 设计过程的分析 错. 误！未定义书签。 6.1.1 UI 设计整体构思 错. 误！未定义书签。 6.1.2 UI 设计风格的选择 错. 误！未定义书签。 6.2

3、幸福花苑 UI 设计9 6.2.1 Auto CAD 的平面施工图的设计 错误！未定义书签。 6.2.2 3D MAX 三维建模设计 错. 误！未定义书签。 623 Photoshop后期处理设计 错误！未定义书签。 设计总结 10 参考文献 11 附 录 错.误！未定义书签。 致 谢 12 1设计概论 UI作为互联网时代时下流行的新词汇，它还涵盖了界面外观的设计，还有用户和机 器的互动交流和操作逻辑。UI的设计如今一直伴随着人们的日常生活并密不可分。好 的UI设计可以使产品更使用户更容易接受和更受用户的欢迎。 1.1 UI设计的背景及现状 在过去很长的一段时间里界面设计一直没有被国内信息企业

4、重视，做界面设计的人 一直被称呼为美工，他们的工作被认为只是单纯地给界面或者网站进行简单的装饰，完 全不需要独立的思想和创意。当信息产业铺天盖地的融入我们的生活的时候，越来越多 的企业发现软件和网站产品仅仅靠先进的技术是不足以在市场上立于不败之地，高水平 的界面与交互设计成为了产品在市场上一种重要的手段，为很多厂家带来了相当可观的 经济效益，一个美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家 创造卖点。 界面设计不是单纯的美术绘画。它需要考虑使用者、使用环境、使用方式，并且最 终实现为用户而设计是纯粹的科学性的艺术设计。 检验一个界面的标准既不是某个项目 开发组领导的意见也不是

5、项目成员投票的结果，而是最终用户的感受，所以界面设计要 和用户研究紧密结合，最终为用户设计出一个满意的视觉效果。 1.2 UI的概念 UI的本来是User Interface（用户界面）的简称,主要是指对软件的人机交互、操作 逻辑、界面美观的整体设计。 1.3研究的意义 UI在国内在近几年才开始流行起来，是一个新兴的热门行业，所以有许许多多的 人涉足于该行业；又因为UI设计的行业在国内刚刚火热起来，各个公司对该行业的人 才也非常需要。 在当今的专业UI设计人员当中，有许多都是从美术行业、网页设计行业转行的专 人也才，其中也包括了自学的人。然而和国外的UI设计师相比之下，国内的知识水平 就相对匮

6、乏，经验也较为不足。无论是IOS、An droid还是WP系统的各类智能手机 及平板电脑，都有各种各样的应用软件。应用软件的界面实用性、视觉美观性和用户体 验优良性都离不开视觉传达艺术。在人机交互技术逐渐成熟的今天，用户开始注重自身 的对产品体验的满足感，这就意味着优秀的用户体验即产品成功的关键。 产品的视觉设计在产品中占据着重要的地位，优秀的 UI设计意味着能给用户带来 优秀的用户体验。因为自己一直做 UI设计，所以想通过项目中的 UI设计来探究UI 设计中的版式设计对整体UI表达效果的的意义以及价值。 2 UI 版式设计分类 UI 界面设计包括硬件界面设计和软件界面设计 这里我们探讨的是软

7、件界面设计， 软件界面设计中又包括“用户研究” 、“交互设计”与“界面设计”三个部分。 2.1 用户研究 在产品开发的前期通过调查研究了解用户的工作性质、工作流程、工作环境、工作 中的使用习惯，挖掘出用户对产品功能的需求和希望，为我们的界面设计提供有力的思 考方向，设计出让用户满意的界面用户研究不是设计者主观的行为，而是站在用户的角 度去探讨产品的开发设计它最终达到的目标是提高产品的可用性， 使我们设计的产品更 容易被人接受。使用并记忆当产品最终被推上市场后，设计者还应该主动去收集市场的 用户反馈，因为市场反馈是用户使用后的想法是检验界面与交互设计是否合理的标准， 也是经验积累的重要途径。 2

8、.2 交互设计 这部分指人与机之间的交互工程一般都是软件工程师来制作，交互设计师的工作内 容就是设计软件的操作流程“树状结构”软件的结构与操作规范等。一个软件产品在编 码之前需要作的就是交互设计，并且确立交互模型、交互规范。人机交互设计的目的在 于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。 2.3 界面设计 国内目前大部分工作者都是从事这类设计工作，也有人称之为美工，但实际上不是 单纯意义上的美术工作者，而是软件产品的信息界面设计师从心理学意义来分，界面可 分为感觉、视觉、触觉、听觉和情感两个层次。用户界面设计是屏幕产品的重要组成部 分界面设计是一个复杂的有不同学科

9、参与的工程，认知心理学、设计学、语言学等在此 都扮演着重要的角色，用户界面设计的三大原则是置界面于用户的控制之下，减少用户 的记忆负担，保持界面的一致性。 2设计任务 本次设计的任务就是要设计一个相对符合现代人类审美，且拥有良好视觉体验、用 户体验的APPUI设计作品。 一个成功的UI设计作品对于是否符合现代人类审美，除了在扎实的基础理论上的 知识外；在技术层面上来看，熟练地技巧也是密不可分的，而且是一个作品的成败的关 键部分。在我们的设计中有一个共性问题一直存在，那就是每一位客户对风格上的要求 都是不同的，所以也要求了 UI设计师们在进行UI设计之前必须与产品经理、需求分析 人员、需求调研工

10、作者进行沟通，理解需求内容及重点，了解用户心理以及用户所需要 的，能接受的UI设计作品。 事实证明，随着时代的发展进步，UI设计无论在功能上，还是在艺术审美上的要 求都要更具有人性化，这也是它的一个发展趋势而且具有挑战性。 3 UI版式设计依据 3.1 UI版式设计法则 7 2法则：因为人脑处理信息的能力有限，所以它通过把信息分成块和单元来处理 复杂问题。根据George A Miller 的研究，人们短期记忆每次能处理 59件事情。这 经常贝作为把导航菜单的元素限制在 7个以内的依据。但是关于“7 2”的争论很激烈。 以至于如何把他应用到网站上还不明确。主要使用范围是网页设计的导航上。 2秒

11、钟法则：这是个松散的原则，用户在使用某类系统时的等待反映（比如：功能切 换和功能载入）的时候不应该超过2秒。选择2秒也许有一点随意，但是这却是一个合 理的数量级。一个更可信的原则是，用户等待的时间越短，用户体验更佳。这个法则也 使用与移动APP的启动页面或者交互触发。如图 3-1所示。 图3-1多手指手势操作 3次点击法则：用户在3次点击之内如果还没有找到他们想要的信息或了解网站特 色，他们就会离开该网站。这条原则突出乐清晰的导航，符合逻辑的结构和易于理解的 网站层级的重要性。如果你的网站能够让用户知道他在哪里，从哪里来，要到哪里去， 并且能够让用户了解如何完成目标，图 3-2所示的点击即使多

12、次也是没有问题的。 图3-2三次点击操作示意图 2/8法则（Pareto定律）:Paretod定律（也被称为 少数关键定律”或 因素稀疏定律”表明 80%的结果，由20%的原因产生。这是商业中一条记本的经验法则（80%的销量来自 20%的客户），但是也同样适用于设计领域和可用性领域。比如，对20%的用户，客户， 活动，产品或过程的定位，可能为你带来80%的利润，使你对它们的注意程度最大化。 TfrDetLH4 Tuesday To-Dos Grocery List E) 口 etorH 日卜Niti 唱 e it （2） Cereal FfckGrrqiit- iiml Milk lake o

13、ut 忖ash Eggs Wilth the nyrBS gdmi Pi如 Go fcN 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为: 88px; 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为: 98px; 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为： 734px; 字体大小： Phone上的字体英文为：HelveticaNeue 。至于中文 Mac下用的是黑体，Win下则 为华文黑体，如图4-2所示。 见寸礪豳 （用户从为靜活 I0S 26pX 30 px 32px-34px 28px 30 px 24 p

14、x 28px 图4-2 IOS UI版式设计字体 5设计内容 局部与整体协调统一：设计时需要从里到外多次反复协调，务使其更趋完美合理。 UI版式设计需要与需求整体的重点、公司内部设计标准、风格相协调统一。 色彩与需求重点的协调：色彩有着丰富的含义和象征，人们对不同的色彩表现出不 同的好恶，这种心理反应，常常是因人们生活经验以及由色彩引起的联想造成的。需求 分为次重点：需求中的重点表现内容需要通过色彩突出，对用户做出视觉上的引导，尽 可能的减少用户的认知成本，让用户可以轻易、快速的获取到需求中的重点表现内容以 及相关的重点操作指引。 UI设计的风格：在UI设计的前期工作就是和产品经理多沟通，了解

15、需求重点，多 通过各个渠道了解用户特征，以设计出更易于被用户接受的产品。然后再在专业的知识 上结合用户以及产品需求的要求，做出具有舒适性、科学性、艺术性、易于识别、美观 性的UI设计风格。 设计总结 随着Web2.0时代的到来,互联网作为一个新兴的行业（产业）,已成为社会经济和科 学技术发展最快的一个领域，更是近年来各领域的投资热点。在接下来的十年，我们可 以看到，互联网已经不再只是社会的一个细分业态，而是成为了当今社会发展的一个新 阶段，包括传统商贸零售、金融、政府、公共事业、医疗、媒体等几乎所有行业均会从 业务、营销到技术想互联网化全面转型。 APP作为互联网行业面向大众用户最直接的表现形

16、式，作为互联网给用户传递信息 的载体之一，在设计方面也在不断的完善发展，报告的创新点在于以用户为中心的设计 理念被贯穿在APP产品的始终，以提高APP产品用户体验。在APP的设计之中，APP的 设计版式也是一门新兴知识领域，尽管还只是数十年的事，但随着互联网产品的不断发 展演化，从主流系统APP的产品设计到不同垂直细分领域的 APP产品，其版式正在被互 联网不断统一及完善，并在业内逐渐形成一套独有的统一的设计标准，使互联网产品表 现形式更加丰富，且有规可循，更好的传播互联网信息，更好更快的完成人人交互、人 机交互，助力互联网发展。 参考文献 1 法古斯塔夫勒庞乌合之众：大众心理研究M.中央编译

17、出版社，2013 2 美Kristofer Layon.产品经理必知必会J.人民邮电出版社,2012 M. 3 美Jonathan Cagan Craig M.Vogal .创造突破性产品：从产品策略到项目定案的创新 机械工业出版社,2010 4 黄晟.基于用户体验的 APP设计研究D.陕西科技大学,2010 5 龙滢冰.浅谈基于用户体验的APP界面设计D.北方工业大学,2010 6 刘志.移动学习的现状及其评述J.上海师范大学,2010 7 张睿，周峰，郭隆庆.移动互联网技术J.人民邮电出版社,2008 致谢 四年大学生活终于将以这篇毕业论文而画上一个完美的句号。然而校园生活 画上了句号，但在人生的道路上才是刚刚开篇。非常感谢学校和老师们给予了我 知识，让即将真正踏上社会的我更加有自信地走在这条道路上。同时，我也要感 谢我的父母，是他们给予了我生命，他们的无私奉献和默默的支持让我有了更多 的动力。当然，大学四年里最不能忘记的是曾经共同学习和生活过的同学们，他 们让我感受到