(完整)APPUI版式设计-毕业综合实践报告

(完整)APPUI版式设计-毕业综合实践报告

中文摘要

手机、电脑等电子设备已经成为现代人生活的必需品，生活中的一举一动都可能体现出电子设备的重要性。UI界面作为现代电子设备中人机交互的重要手段，UI界面的设计随着电子设备在人们生活中地位的提高,也成为视觉设计中最为重要的分支之一和重要的新兴学科。报告使用了Xmind梳理需求思路，使用Axure制作产品原型，之后使用Photoshop绘制产品UI设计，最终输出产品UI设计稿。设计稿主要内容为APPUI版式设计,包含Android版式设计以及IOS版式设计。

它还涵盖了界面外观的设计，还有用户和机器的互动交流和操作逻辑。UI 的设计如今一直伴随着人们的日常生活并密不可分。好的 UI 设计可以使产品更使用户更容易接受和更受用户的欢迎.

关键词:UI设计 APPUI设计 AndroidUI设计

I

(完整)APPUI版式设计-毕业综合实践报告

目 录

中文摘要 .......................................................... 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设计的表达 ............................................... 7

5 设计内容 ........................................................ 9

6 UI设计说明 ........................................

错误!未定义书签。

6.1 设计过程的分析 ................................

错误!未定义书签。

6。1。1 UI设计整体构思 ........................

错误!未定义书签。

6.1.2 UI设计风格的选择 ........................

错误!未定义书签。

6。2幸福花苑UI设计 .......................................... 9

6.2.1 Auto CAD的平面施工图的设计 ..............

错误!未定义书签。

6。2.2 3D MAX三维建模设计 ....................

错误!未定义书签。

6。2.3 Photoshop后期处理设计 ..................

错误!未定义书签。

设计总结 ......................................................... 10

参考文献 ......................................................... 11

附 录 ............................................

错误!未定义书签。

致 谢 ......................................................... 12

II

(完整)APPUI版式设计-毕业综合实践报告

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界面设计包括硬件界面设计和软件界面设计”这里我们探讨的是软件界面设计，软件界面设计中又包括“用户研究”、“交互设计”与“界面设计"三个部分。

1

(完整)APPUI版式设计-毕业综合实践报告

2.1用户研究

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

2。2 交互设计

这部分指人与机之间的交互工程一般都是软件工程师来制作，交互设计师的工作内容就是设计软件的操作流程“树状结构”软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型、交互规范。人机交互设计的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

2.3 界面设计

国内目前大部分工作者都是从事这类设计工作，也有人称之为美工,但实际上不是单纯意义上的美术工作者，而是软件产品的信息界面设计师从心理学意义来分,界面可分为感觉、视觉、触觉、听觉和情感两个层次。用户界面设计是屏幕产品的重要组成部分界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色,用户界面设计的三大原则是置界面于用户的控制之下，减少用户的记忆负担,保持界面的一致性。2

(完整)APPUI版式设计-毕业综合实践报告

2 设计任务

本次设计的任务就是要设计一个相对符合现代人类审美，且拥有良好视觉体验、用户体验的APPUI设计作品.

一个成功的UI设计作品对于是否符合现代人类审美,除了在扎实的基础理论上的知识外；在技术层面上来看，熟练地技巧也是密不可分的,而且是一个作品的成败的关键部分。在我们的设计中有一个共性问题一直存在,那就是每一位客户对风格上的要求都是不同的，所以也要求了UI设计师们在进行UI设计之前必须与产品经理、需求分析人员、需求调研工作者进行沟通,理解需求内容及重点，了解用户心理以及用户所需要的，能接受的UI设计作品。

事实证明，随着时代的发展进步，UI设计无论在功能上，还是在艺术审美上的要求都要更具有人性化,这也是它的一个发展趋势而且具有挑战性.

3

(完整)APPUI版式设计-毕业综合实践报告

3 UI版式设计依据

3。1 UI版式设计法则

7±2法则:因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题.根据George A Miller 的研究,人们短期记忆每次能处理5～9件事情。这经常贝作为把导航菜单的元素限制在7个以内的依据。但是关于“7±2”的争论很激烈。以至于如何把他应用到网站上还不明确。主要使用范围是网页设计的导航上。

2秒钟法则:这是个松散的原则，用户在使用某类系统时的等待反映（比如:功能切换和功能载入)的时候不应该超过2秒。选择2秒也许有一点随意，但是这却是一个合理的数量级。一个更可信的原则是，用户等待的时间越短，用户体验更佳。这个法则也使用与移动APP的启动页面或者交互触发。如图3-1所示。

图3-1多手指手势操作

3次点击法则：用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色，他们就会离开该网站。这条原则突出乐清晰的导航，符合逻辑的结构和易于理解的网站层级的重要性。如果你的网站能够让用户知道他在哪里，从哪里来，要到哪里去，并且能够让用户了解如何完成目标，图3—2所示的点击即使多次也是没有问题的。

4

(完整)APPUI版式设计-毕业综合实践报告

图3—2三次点击操作示意图

2/8法则(Pareto定律）：Paretod定律(也被称为“少数关键定律”或“因素稀疏定律")表明80%的结果，由20%的原因产生。这是商业中一条记本的经验法则(80％的销量来自20％的客户)，但是也同样适用于设计领域和可用性领域。比如，对20％的用户，客户,活动，产品或过程的定位，可能为你带来80％的利润，使你对它们的注意程度最大化.

5

(完整)APPUI版式设计-毕业综合实践报告

图3-2少数关键简化设计样例

3。2 UI版式设计原则

Ben Shneiderman 通过对用户界面的设计的研究，提出了一系列的原则，这些原则来自经验和启发,适用于大多数交互系统。这些原则和所有的用户界面设计都相关，严格意义上说，也适用于网站设计。

1。 努力做到连贯

2. 允许频繁使用系统的用户使用快捷方式

3. 提供信息反馈

4. 为关闭这一动作设计对话框

5. 提供简单的设计处理

6. 允许简单的撤销操作

7. 提供控制器.支持内部控制点

8。 降低短期记忆载荷

6

(完整)APPUI版式设计-毕业综合实践报告

4 UI版式设计标准

4。1 Android UI版式设计标准

1.尺寸及分辨率:

Android界面尺寸：480＊800、720＊1280、1080*1920PX.

Android比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＊1136

7

(完整)APPUI版式设计-毕业综合实践报告

iPad界面尺寸: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版式设计字体

8

(完整)APPUI版式设计-毕业综合实践报告

5 设计内容

局部与整体协调统一:设计时需要从里到外多次反复协调，务使其更趋完美合理.UI版式设计需要与需求整体的重点、公司内部设计标准、风格相协调统一。

色彩与需求重点的协调:色彩有着丰富的含义和象征，人们对不同的色彩表现出不同的好恶，这种心理反应，常常是因人们生活经验以及由色彩引起的联想造成的。需求分为次重点：需求中的重点表现内容需要通过色彩突出，对用户做出视觉上的引导，尽可能的减少用户的认知成本，让用户可以轻易、快速的获取到需求中的重点表现内容以及相关的重点操作指引。

UI设计的风格：在UI设计的前期工作就是和产品经理多沟通，了解需求重点，多通过各个渠道了解用户特征，以设计出更易于被用户接受的产品.然后再在专业的知识上结合用户以及产品需求的要求，做出具有舒适性、科学性、艺术性、易于识别、美观性的UI设计风格。

9

(完整)APPUI版式设计-毕业综合实践报告

设计总结

随着Web2.0时代的到来,互联网作为一个新兴的行业(产业）,已成为社会经济和科学技术发展最快的一个领域，更是近年来各领域的投资热点。在接下来的十年，我们可以看到，互联网已经不再只是社会的一个细分业态，而是成为了当今社会发展的一个新阶段，包括传统商贸零售、金融、政府、公共事业、医疗、媒体等几乎所有行业均会从业务、营销到技术想互联网化全面转型。

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

10

(完整)APPUI版式设计-毕业综合实践报告

参考文献

[1] ［法]古斯塔夫·勒庞.乌合之众:大众心理研究［M].中央编译出版社, 2013

［2] ［美］Kristofer Layon．产品经理必知必会[J］.人民邮电出版社，2012

[3] [美]Jonathan Cagan Craig M。Vogal．创造突破性产品：从产品策略到项目定案的创新[M].机械工业出版社,2010

[4] 黄晟。基于用户体验的APP设计研究［D].陕西科技大学，2010

[5]龙滢冰。浅谈基于用户体验的APP界面设计[D］。北方工业大学,2010

［6] 刘志．移动学习的现状及其评述[J］。上海师范大学,2010

[7］ 张睿，周峰，郭隆庆．移动互联网技术［J］。人民邮电出版社，2008

11

(完整)APPUI版式设计-毕业综合实践报告

致 谢

四年大学生活终于将以这篇毕业论文而画上一个完美的句号。然而校园生活画上了句号，但在人生的道路上才是刚刚开篇.非常感谢学校和老师们给予了我知识，让即将真正踏上社会的我更加有自信地走在这条道路上.同时，我也要感谢我的父母，是他们给予了我生命，他们的无私奉献和默默的支持让我有了更多的动力。当然，大学四年里最不能忘记的是曾经共同学习和生活过的同学们，他们让我感受到了什么叫真诚,陪伴我一起度过这美好、快乐的四年校园时光。

在本文完成之际，谨向我的指导老师王春梅老师致以最衷心的感谢，在设计中和论文写作中都是在她的悉心指导和关怀下完成，从论文的选题、作品的设计，到论文撰写及修改，都倾注了满腔心血和汗水，为了顺利完成设计创作，在课余时间我也对她少不了叨扰，但她总是很耐心的向我指出优点与缺点，并给予了我很多的修改意见,从她身上我学到了很多东西。在学习期间,她的言传身教将使我终生受益,她认真严谨的教学态度、豁达的胸怀、平易近人的处事风格将影响我一生,值此提交论文之时,向王春梅老师再次表达衷心的感谢！

s

12