产品设计教程：如何理解 px,dp,dpi, pt，看这一篇就够了

先聊聊熟悉的几个单位

围绕着各种屏幕做设计和开发的人会碰到下面几个单位：in, pt, px, dpi，dip/dp, sp

下面先简单回顾下前四个单位：

“in”

inches的缩写，英寸。就是屏幕的物理长度单位。一英寸等于2.54cm。比如Android手机常见的尺寸有5寸、5.5寸、6寸等，这里的长度都是指手机对角线的长度。

“pt”

“points” 的缩写，点。一个点等于1/72英寸，所以“点”也是个长度单位而已。

“px”

“pixel” 的缩写，像素。是画面显示的基本单位，真实的像素并不是点或者方块（虽然有时这样显示），也没有实际固定长度，只是一个抽象的取样。设计中的像素和实际显示屏上的像素相对应。

屏幕的分辨率一般就描述为“宽向像素数X纵向像素数”。比如 Android手机常见的分辨率有：320 X 480, 480 X 800, 1080 X 1920等。

“dpi”

"dots per inch" 的缩写，“每英寸的像素数”，即像素密度。下图展示了600 dpi和1200 dpi的对比，明显后者的像素更加密集。

安卓手机种类多样，有各种屏幕像素密度。比如120dpi是低密度（ldpi）类型，160dpi 是中密度（mdpi），240dpi是高密度（hdpi)，320dpi是超高密度（xhdpi），480dpi是超超高密度（xxhdpi）。

为什么要引入 dp 这个单位

像素（px）是设计师们熟知的单位，比如画图自定义尺寸的时候就来个宽xx像素乘以高xx像素，好像一直没什么问题。

不过，如果你仔细观察一下就会发现，在做UI设计时，设计工具给出的默认手机尺寸并不是按像素数来计算的。

以墨刀为例，提供的三星的尺寸是360 x 640。

但这当然不是三星屏幕的像素数。

（否则三星要哭晕在厕所）

查了下三星Galaxy S5/S6/S7屏幕的实际像素数是这样：

那360*640是什么？

细心的同学可能发现了…

即使S5和S6/7的像素分辨率不一样，但分辨率左边一栏都写着360 x 640 dp。

所以，什么是 dp，为什么要有 dp？

答：是为了产品原型设计图能适配不同像素密度的屏幕。

举个栗子吧，如果设计师用像素为单位画图，画了一个4px * 4px的 icon，这样的 icon 放在160dpi和320dpi的两种屏幕上展示，会变成大概这样：

 

比例完全失调！

因此，干脆就不以像素为单位直接画图，而是引入一个新的单位 dp。dp 全称是 “density- independent pixel”，即“密度无关像素”，所以也可以缩写成 dip，不过 dp 更常用。

定义dp为 160dpi 时的一个像素大小；那么到 320 dpi 时，它就相当于两个像素。

两者的数值关系如下：

px= dp *（dpi/160）

这样的话，假如做一个50*50dp的icon，放到160dpi的屏幕上就是50px*50px，放到320dpi的屏幕上就是100px*100px。各元素的布局和比例便不会失调。

所以设计师在给开发切图时，经常会需要切一倍图、二倍图和三倍图，以满足不同像素密度屏幕的需要。墨刀的Sketch切图功能就能让你一键切出一倍、二倍和三倍图，没有繁琐操作。

这里插一句 sp 这个单位，sp 跟 dp 类似，全称是 scale-independent pixel （也会缩写为 sip）, 即“独立比例像素”。sp 主要用作字体的单位，开发用此单位设置文字大小，这样在不同像素密度的屏幕上能进行同比例的扩大缩小。

OK，回到 dp。

既然知道了要用dp为单位画图，那面对各种手机型号和分辨率，画图前需要把px换算成dp。不过，贴心的墨刀已经把这些换算给做好啦！

考虑到今年全屏手机雨后春笋般涌现出来，墨刀也及时在Android设备默认尺寸中添加了Google Pixel 2 和 Google Pixel 2XL的 dp 尺寸，让你免去px和dp的换算，轻松进入画图流程。

当然，如果真的遇到了要为某个小众机型适配而没有默认选项，那就选择最下面的customize自定义好了。怎么算？ 非常容易。

查到某款机型的分辨率为a*b px,该机型的像素密度dpi（也会写作ppi）为c。

那么需要自定义的dp尺寸为：

宽= a/(c/160) ,高=b/(c/160)

好了，搞定！