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

猜你喜欢

转载自blog.csdn.net/y_programmer_ape/article/details/106676448