1.先介绍概念

  • px

英文单词pixel的缩写,意为像素,屏幕上的点,我们通常所说的分辨率如720X1280就是指的像素,代表宽度有720个像素点,高度有1280个像素点。我们在网页设计中经常会出现这个单位。

  • in

表示英寸,是屏幕的物理尺寸,每英寸等于2.54厘米,通常我们所有的手机4.0寸、5.5寸都是指的这个单位,但是有一点需要说明的是,这里的尺寸指的是手机的对角线长度,如果手机的屏幕是4英寸,表示手机的屏幕(可视区域)对角线长度是4 X 2.54 = 10.16厘米。

  • dpi/ppi

Dots(pixel) Per Inch的缩写, 表示每英寸点数,即每英寸包含像素个数。比如320X480分辨率的手机,宽2英寸,高3英寸, 每英寸包含的像素点的数量为320/2=160dpi(横向)或480/3=160dpi(纵向),160就是这部手机的dpi,横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素点。

  • dpi/dp

device independent pixels的缩写,表示设备独立像素,Android中独有的单位,在屏幕密度为160的屏幕上,1dp=1px;换句话说:1 dp ≈ 1 / 160 inch

  • density

表示上面提到屏幕密度,density = dpi/160。

  • pt

point的缩写,同样和px常用作是网页中字体的单位,在印刷行业中常用,等于1/72英寸。至于两者的区别:px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。而point确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。所以也可以理解为pixel是相对大小,而point是绝对大小。两者的转换关系可以用一个公式表示:pt=px乘以3/4,大概接近1倍的关系。

  • em

即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。和px的转换关系为:em=16乘以px。

  • sp

Scale-independent Pixels的缩写,和dp很像,但它可以根据用户的字体偏好设置来缩放,因此,在Android开发中官方推荐我们在给字体设置大小的时候都是用sp。

2.Android资源目录

我们都知道Android工程的资源目录res有以下几个文件夹:

  • mipmap-mdpi dpi=160 density=1 HVGA(320x480)
  • mipmap-hdpi dpi=240 density=1.5 WVGA(480X800) FWVGA(480X854)
  • mipmap-xhdpi dpi=320 density=2 720p(720X1280)
  • mipmap-xhhdpi dpi=480 density=3 HD(1080X1920)
  • mipmap-xhhhdpi dpi=640 density=4

PS:

  • VGA是”Video Graphics Array”,显示标准为640*480。
  • WVGA(Wide VGA)分辨率为480*800
  • FWVGA(Full Wide VGA)分辨率为480*854
  • HVGA(Half VGA)即VGA的一半分辨率为320*480;
  • QVGA(Quarter VGA)即VGA非四分之一分辨率为240*320
  • SVGA(Super VGA)即分辨率为600*800
  • HD(High Definition)分辨率为1080X1920,也就是我们平时说的1080p高清,720p为标清

现在很多人员不足的公司都不会给Android和iOS平台都分别出一套效果图,大部分设计人员都是出一套来共用。

3.最佳实践

  1. 如果是Android和iOS公用一套的话,我们知道iPhone5的尺寸为4.0,分辨率为640X1164,然后根据上面的概念我们知道他的dpi大概约为332,比较接近Android的Xhdpi也即320的分辨率,所以我们完全可以按照这个dpi为320公用一套。所以我们可以在设计效果图的时候选定720X1280的分辨率来进行设计。

  2. 做设计的可能心里都有个约定俗成的规范就是尽可能的让尺寸定义为偶数,当然也可能是这么做为了好居中,Android在设计规范中也给出了几个规范,比如上面菜单栏高度(96px)、边距(16px)、图标宽高(64px)等,字体呢也都建议使用24pt,28pt,36pt 和44pt这几种。

  3. 设计完成后,设计师可以把设计的尺寸都除以2来交给开发者,然后开发者就可以用dp为单位来设置尺寸,同样的,所有字体的pt值除以2作为sp数值交给开发者,然后将图标切成上面的几种(这步可以借助一些插件来完成),同样交给开发者对应放在上面的几个文件夹中。

4.说明

我们知道英寸是物理界的长度单位,我们最后如果都转换为它的话,那么我们所给出的尺寸就都固定了,根据上面我们知道1 dp ≈ 1 / 160 inch,很明显根据这个转换关系我们就可以把单位统一了,比方说我们知道Android中定义边距为8dp,那么它大概有8/160 inch这么宽,虽然在不同分辨率的手机上对应的像素不同,但是这个过程不需要我们关心,这是由系统自动完成的,它知道我这1dp在什么手机对应多少像素,sp也是这个道理,这样就会产生一个现象就是,在不同的手机上显示的内容多少不同,事实上也就是这样,有的手机显示8行就到底了,有的手机可以显示10行还有空白。

分享到:
移动开发者/技术爱好者/喜欢开源与分享,你也可以关注微信公众号MobDevGroup,移动开发在线分享:MobDevGroup