设计中的单位

在设计中，单位这个东西其实很简单。但又并简单，因为种类太多，应用环境不一，导致在学习理解中容易产生一些误解。有些单位真的可以说是熟悉又陌生！

平面设计中常用单位

在平面设计中，常用单位有：厘米（cm）、毫米（mm）。国内大多数印刷产品都会用到这两个单位，当然，大一些的户外广告可以会用到米（m）。它们之间的单位换算就不多说了，很简单。英寸（inch，缩写为in）这个单位也会用到，但是不常用，外国人可能用得比较多，值得注意的是我们生活中常提到的“某某型号的手机屏幕是多少多少寸……”，这里的“寸”指的是英寸。1inch=2.54cm=25.4mm

我们都知道印刷产品和屏幕中显示的产品是有区别的，这个区别就是分辨率不同。平面设计中，在设置分辨率时一般为300dpi，而在屏幕中显示的为72就足够了。其实印刷的分辨率为300，这个并不是代表任何印刷产品，比如在喷绘中72-100可能就足够了。

关于dpi或ppi的介绍可以移步看看我以前的笔记

在平面设计中，关于字体大小。工作中常说“几号”字，这里指的是pt（全称point），在印刷中人们称为“磅”或者“点”。

“点（point，pt），现在电脑里使用1点准确地说应该是1/72英寸。这是活字时代使用的单位，当时英美的点和欧洲大陆的点还有略微的差别，而Adobe（奥多比）公司在开发PostScript页面描述语言时，将这个单位导入桌面排版系统并将其定为1/72英寸。”摘自《西文字体》

网页设计中常用单位

网页设计中的单位则比较简单，我指的简单是针对于设计师来说，在设计网页时用到的单位比较的简单，就是像素（pixel，简称px）。比如，网页中最小的字体为12px。但是，对于网页开发者来说，px已经不能满足他们的需求。比如，em、rem等等，当然这些不是今天这篇文章讨论的问题。

UI设计中常用单位

重点来了！重点来了！重点来了！这才是这篇文章的重点！

首先，需要明白一点，像素（pixel，简称px）是相对单位、相对单位、相对单位，它指位图图像中的最小单位，设计师作图的常用单位。但没有实际的大小和形状，是个相对的量。它没有一个固定值，不像厘米、毫米。影响px的因素是屏幕的分辨率，也叫物理像素。

例如，同样大小的两块屏幕，一个高清（分辨率高），一个非高清（分辨率低），它们里面一个像素的大小是不一样的。

我们都知道，不同手机屏幕的分辨率是不一样的。这给UI设计师带来一个问题，app界面设计中，元素的大小设计成多少像素的合适！比如，一个按钮，设计成10*10px，在一般的屏幕中可以正常显示，如果放到高清屏幕中，这个按钮可能会变得很小。怎么解决？把按钮设计成20*20px、30*30px，是不是就能正常显示呢！

因此，UI设计师工作中就多了一道工序，切图，并且是多倍率切图。当然，现在很多软件和插件是可以做到一键切图的，很方便。

有没有觉得很复杂，那么多的尺寸来表示一个元素的大小，这在实际交流中就会造成很多麻烦。编一个小故事，开发大兄弟说：“我要一个按钮，大小是60*60px”。给他后，他说：“天呐这个按钮怎么这么小”。原来开发要的是2倍图下的按钮，那么就应该是120*120px，这样才能正常显示啊。

是不是觉得px这个单位此时非常的不合适，它只是一个相对单位，没有一个固定的标准。那么，有没有一个绝对单位能在UI设计中使用，用来统一图形在不同型号设备上图形的大小呢？答案是有的，它就是pt（全称point）。前面已经提到过，pt最早是在印刷中使用的单位。但是，值得注意的是印刷中所说的“pt”和UI中iOS的开发单位“pt”是有所区别的，它们并不是同一个东西。1pt=1/72inch，约等于0.35mm。

关于单位的换算：1pt=(ppi/72)px

当photoshop中新建画布的分辨率为72ppi(即72dpi时 )，1pt=1px；当新建画布分辨率为72*2=144ppi时，1pt=2px

ps：iOS开发中的pt和安卓开发中的dp本质上是一个概念，只是叫法不一样而已。

总结一下就是，px在硬件中构成了液晶屏幕（物理像素），pt在软件中构成了画面（逻辑像素），设备的成像由物理像素和逻辑像素组成。

由于iphone3GS和iphone4的物理屏幕尺寸的大小是一样的，所以，他们的pt是相同的。但是由于iphone4的现实像素为960px×640px，也就是说每英寸在iphone4的屏幕下显示了326个像素（刚好是iphone3GS的2倍）。

关于安卓。想说的就是dp这个单位。 dip或dp，是安卓开发用的单位，1dp表示在屏幕点密度为160ppi时1px长度。因为安卓设备屏幕众多不可能为每个屏幕单独开发，所以用公式 px=dp*(ppi/160)计算在不同屏幕上的像素数。

举例①：HVGA屏320*480，一般是3.5寸，计算点密度为√ (320^2 + 480^2) / 3.5 = 164，约等于160，1pd=1px。

举例②：WVGA屏480*800，按3.8寸屏算，点密度 √ (480^2 + 800^2) / 3.8 = 245，约等于240，1dp=1.5px。

dp和iOS中的pt一样，在不同屏幕密度下，1dp或1pt的对应的像素点数也不一样。