UI界面的尺寸规范

一、名词解释

1.DPI (Dots Per Inch): 点数密度。所表示的是每英寸所拥有的点数量。Android特有单位

DPI数值越高，即代表显示屏能够以越高的密度显示图像，从而得出，显示的密度越高，显示器显示的就越真实、越清晰

2.PPI（Pixels Per Inch）像素密度，所表示的是每英寸所拥有的像素数量，iOS特有单位

PPI数值越高，即代表显示屏能够以越高的密度显示图像。 从而得出，显示的密度越高，显示器显示的就越真实、越清晰

举例说明：

同样尺寸大小的屏幕，点数密度越高的成像就越清晰，一英寸里有多少个像素格PPI就等于多少

3.视网膜屏幕（Retina screen）：分辨率超过人眼识别极限的高分辨率屏幕

定义超过300PPI以上的屏幕称作视网膜屏幕

屏幕密度计算公式

二、Android尺寸规范

分为两个方面：界面、图标

1.界面

（1）基本单位

DP：Android开发专用单位

以160 DPI屏幕为基准，称之为一倍图。1DP=1PX

计算公式：DP*DPI / 160 = PX

（2）主流尺寸及分辨率

实际开发中，主流尺寸是2倍图720 * 1280 以及3倍图 1080 * 1920，默认的是2倍图720 * 1280

（3）安卓界面设计中控件的尺寸

2倍图中的尺寸图解

2倍图与3倍图之间的尺寸换算关系，3倍图是2倍图的1.5倍

（4）界面背景

一般情况下添加白色背景，也可以添加浅色背景，常用的颜色有#f5f5f5 #eeeeee #efeff4等

（5）分割规范

分割线：高度：必须1px ，颜色：#dddddd #cccccc #000000 （矩形）不透明度为10%

分割条（卡片间隙）：高度：必须20px 颜色：#f5f5f5

列表高：高度100-120px

总结：

2.图标

（1）启动图标尺寸

Android图标最大尺寸为512px，圆角半径为90px。

一般会切两套图，一套圆角一套直角。

以2倍图为例

a.主屏幕中的APP图标96px

b.应用商店搜索中的APP图标96px

c.设置中的APP图标64px

（2）功能图标

a.导航栏中的图标。可点击区域最小48px

b.标签栏工具栏中的图标可点击区域64px

3.文字规范

种类、字号、间距、颜色

（1）种类

Android官方默认字体：“思源黑体”

（2）字号

注意！！！字号必须用偶数

导航栏：36-38px 主题 副标题

正文：28-34px 说明性文字

b标签栏：22-24px 提示性文字

（3）间距

字间距：默认

行间距：1.5倍

（4）颜色

主文：#333333

副文：#666666

提示文：#999999