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

2014艺术设计专业本科 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版式设计字体

7

4.2 IOS UI版式设计标准

尺寸及分辨率:

iPhone界面尺寸：320*480、640*960、640*1136 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

2014艺术设计专业本科 APPUI版式设计

5 设计内容

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

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

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

9

设计总结

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

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

10