这篇文章翻译自Google Chrome的设计师 Sebastien Gabriel，目的是为了给设计师解答诸如DIP、DPI这类关系不大但容易混淆的概念。原文穿越：sebastien-gabriel.com/designers-guide-to-dpi/home，下面是文章正文————
DPI = Dots Per Inch，最开始用在打印上，指的是在一英寸的纸上打印多少滴墨水。DPI越小打印的质量就越差。
这个概念后来被迁移到了电脑屏幕上，只不过变成了PPI，也就是Pixels Per Inch，原理是一样的：你的屏幕一英寸能显示多少像素。
Windows电脑的起初默认PPI是96，Mac电脑是72，不过80年代之后这个数字就不太一样了。一般的非高清屏的桌面（包括Mac）PPI都在72到120之间。在72到120之间做设计能够保证你的作品在任何地方的比例都相差不大。
举个栗子（见下图）：
一个MacCinema27寸显示屏的PPI是109，也就是每英寸屏幕上能显示109个像素。它的显示屏宽度大概在23.5英寸，23.5*109约等于2560，这就是它分辨率2560*1440中的宽。
假定你在上文提到的屏幕上设计一个109*109的蓝色方块，这个方块在屏幕上会有一个1*1英寸的物理尺寸。但如果用户的屏幕PPI是72，蓝色方块的实际大小就会变的大些。下面是一个模拟效果。
屏幕分辨率决定了你的设计是怎样呈献给用户的。好在目前LCD显示器已经替代了CRT显示器，用户们普遍能够得到一个较好的PPI。
分辨率定义了一个屏幕能够显示的像素，一个2560*1440的显示，2560是宽，1440是高。当然你明白这并不是实际的物理尺寸。
今天的LCD显示器都有一个预定义的分辨率，或者说原生分辨率，这个分辨率就是这个屏幕能显示的像素数。拿27寸的Cinema显示器来说，它的PPI是109，原生的分辨率是2560*1440。如果你降低它的分辨率，显示的东西看上去就会变大。
之所以东西变大了是因为，屏幕原本是2560*1440的，这时分辨率下降了，但是一个一个的像素们还是在那，而且以一英寸109个像素的方式显示。系统为了填补这个空白会做什么？当然就是把所有的东西都拉伸。GPU或CPU会根据新的比例重新计算每个像素应该显示什么。
如果你想让27寸显示屏的分辨率变成1280*720，也就是原来的分辨率减半，GPU就不得不模拟出一个是原来两倍大小的像素来填充屏幕。由于比例正好是二等分，所以看上去还不会太模糊，但是如果变化的比例是1/3或3/4呢？看下图：
左边的窗口是在OSX的默认分辨率1440*900下渲染的，右侧是将屏幕分辨率改成了1024*640后同样的窗口
来看另一个例子。左侧是一条1px的直线在原生屏幕上，现在把分辨率调小50%。为了填充屏幕CPU会把包括这条线在内的一切都变大150%，也就是乘以1.5。由于没有半个像素，系统能做的就是把颜色均分，然后填充在图形的周围像素上，这就造成了模糊。
这就是为啥你在MackbookPro retina上更改分辨率的时候，它会用“looks like”这样的口吻。
你最近很可能听了很多4k的说法（至少在我写这篇文章，2014年初）。想明白这个，你要先了解HD。
事先声明，这里的内容都是超简化了的。我只想谈谈最通常的分辨率。
HD这个词适用于比1280*720大的一切分辨率，或者说720p以上。
full HD指的是1920*1080.大多数的电视用的是这个分辨率，越来越多的高尖手机也是这样，比如Galaxy S4，HTC one，Sony Xperia Z，Nexus 5等。
4k则是从3840*2160起。也有人管他叫Quad HD或Ultra HD。4k的分辨率是1080p的四倍。还有另外一种4k，分辨率是4096*2160，通常用在投影仪上。
现有的系统是无法延展成4k的，如果把4k显示器连接在在chromebook或macbook上，它将会用常规的比率配合最高分辨率的组件（如200%或@2x）来显示，好让所有的东西看起来比较小。举个例子：你把一个12寸的4k屏连在一个12寸的高清屏电脑上，所有的东西看起来都是缩小了两倍。
下面的例子就是
iPhone4发布的时候苹果用到了“retina”这个词，之所以这么叫是因为设备的PPI太高，以至于肉眼的视网膜无法区分屏幕上的像素。
这个解释对当时的设备来说没问题，但是随着屏幕变得越来越好，我们的眼球现在已经足够观察那些细致的像素，尤其是那些圆角处理过的UI元素。
技术上讲，他们只不过是在同样的物理屏幕上多显示了两倍的像素。
iPhone 3G/S是3.5英寸，分辨率480*320,163PPI
iPhone 4/S是3.5英寸，960*640,326PPI
没错，非常精确的两倍。屏幕上的元素看起来都清晰了两倍因为同样的物理尺寸里像素正好多了4倍。
下面这个图就是设计APP在不同环境时的情况：
苹果已经用了“Retina”这个词，所以其他公司只能用“HI-DPI”或其他。
倍数就是你在给不同PPI设备做设计时的数学救世主。从此以后你不用在管那些不同设备的技术规格之类的。
让我们拿iPhone3G和4举栗子。屏幕上同样的物理尺寸，一下子多了两倍的像素。所以倍数就是2。也就是说只要把各种组件的尺寸都乘以2，就能适配4G分辨率了。
假设我们做了个44*44的按钮（这也是iOS的推荐触摸尺寸），我们叫它“Jim”。
要让Jim在iPhone4上看上去正合适，只需要把它设计的两倍大小就可以。如下图
只需要一张Jim.png和一张Jim@2x.png就OK了
这时候你可能会问“那倍数除了2还应该有其他的吧？”答案是确实有，而且它是一个十足的噩梦。我之所以这么说，是因为倍数太特么的多了。
我们先说单位（units），对于多DPI设计来说，“单位”比“像素”更重要。这就要引入“DP”和“PT”。
DP和PT是用来规范不同DPI设备的。
DP也叫DiP，全称是Device independent Pixel（设备独立像素），PT代表Point（点）。PT是给苹果用的，DP是给安卓用的，其实本质上一样。
它们都是在定义尺寸，但跟设备倍数（multiplier）无关。它们极大地帮助了不同工种比如设计师和工程师之间的沟通。
拿我们之前的小按钮Jim举栗子。Jim在普通的非视网膜屏幕上是44像素宽，视网膜屏幕上是88像素宽。这回我们给它加上一个20像素的边距因为它想有点自己的空间。这个边距在retina上应该是40像素，可是40像素在非retina上是不行的。
那该咋办？这样：我们就拿非retina上的100%作为一切的基准。
这回，我们让Jim的尺寸是44*44DP（PT），边距是20DP（PT）。 不论在什么PPI的设备上，Jim就是44*44DP不变了。
Android和iOS系统自己将会为这个尺寸做适配，把它转化成正确的倍数。
SP是从DP何PT分离出的一个概念。它的全称是Scale-independent pixels，专门用来定义字体大小。SP受安卓设备的字体设置的影响。定义SP和定义DP差不多。16SP对于阅读来说就非常不错。
讲了PPI、视网膜、倍数，现在来聊聊一个重要的话题：“如果我在设计工具中修改了PPI配置会怎样？”。
这么说吧：只要不关系到打印，PPI设置就没啥用。
PPI设置是留给印刷用的。如果你仅仅是给web设计，对你位图的尺寸没有任何影响。
下面是一个例子。我打开PS，调成72PPI，画一个80*80像素的方块，和一段16磅的文字。第二个是用同样的尺寸，只不过是144PPI。
结果就是，文字变大了两倍，方块没变。原因是PS或其他设计工具会根据PPI的不同拉伸跟pt有关的元素，导致了文字变成了两倍大小，但是用pixel定义的元素，PS不会管它。一个像素就是一个像素，不管你PPI是多少。只不过不同PPI的屏幕显示像素不同。
但有一点你要记住，如果你的设计源文件里用了不同PPI，在文件之间相互嵌入时会转换大小，这个肯定让你头疼的。
解决办法？一直用72PPI吧，PS的默认。
接下来聊聊平台设计规范。
从屏幕尺寸和DPI的角度来说，iOS有两种移动设备、两种笔记本/桌面屏幕。
在移动端，有iPhone和iPad。
在手机的范畴，老的3GS是非retina的。iPhone5以上用的是更高的屏幕，但是和IPhone4、4s的DPI是一样的。
2014苹果秋季发布会上，iPhone又多了两个成员：6 和6Plus。
iPhone6比5大了0.7寸，但PPI没变。iPhone6 Plus却引入了iOS的一个新的倍数：@3x。
理解iPhone6 Plus与其他iPhone设备在显示上的区别时有一个很特殊的地方：它转换了视觉上的采样。
给iPhone6做设计的时候，你是子在一个1334*750像素的画布上设计，然后手机就渲染出1334*750像素的界面。但是iPhone6 Plus的分辨率比它渲染的图像的要小，因此你需要在2208*1242的分辨率下进行设计，然后6Plus会把它降成1920*1080像素。下面是图示：
实际尺寸比渲染尺寸小15%，会产生一些小瑕疵，比如原本很精确的细节，却多出了半个像素。不过分辨率实在是太高，除非你离得很近，否则看不出来的。下面是一个图示：
感谢Paintcode在发布会后提供了非常好的解读。这里是他们做的说明页面。
下面是关于iPad的图示：
在这里，笔者建议从基础的PPI比如100%/1x开始做设计，然后乘以2，并在@2x的屏幕上检验你的设计。下面的案例是在iOS上用的Chrome需要的组件说明：
你会发现每个组件需要两个图片，一个叫name.png，一个叫name@2x.png。这是个iOS的习惯，应该遵守。
Android平台的设备比iOS要多的多。结果导致你要面对一系列的屏幕尺寸和DPI，包括那些大得像平板一样的手机以及小得像手机一样的平板。
接下来跟iOS不太一样了。我们先来讨论倍数和DPI。
我们有手机和平板两个设备范畴，它们都有一系列的DPI：Ldpi，mdpi，tvdpi，hdpi，xhdpi等等。
不过还好，常用的只是一小部分，有些甚至都已经废弃了。
第一件事，我们找一个跟iOS的1x一样的基准单位。Android上就是MDPI，见下图：
很多？还没完呢：
有五种有效的DPI正在被使用：MDPI，HDPI，XHDPI，XXHDPI和XXXHDPI。
下面让我们来归归类：
以Chrome为例来说说设计时需要的组件：
每个组件你需要提供4张图片，从MDPI到XXHDPI。
就像讨论iOS时，我建议你用100%或1x的倍数作为设计基准，这能让你再准备不同尺寸的组件时轻松一些，尤其是遇到Android上1.33和1.5这类的倍数。
如你所见，图片是32*32dp，而有的Android倍数是小数，比如当你乘以1.33时尺寸是42.56，这种情况下我们代之以43像素。
不论是给桌面还是移动做设计，你都始终需要可延展的组件。
可延展的组件，就是用代码来把图片放大到你想要的大小，同时不失真。这跟重复地平铺组件不同，尽管最后看上去差不多但是其内部的实现机制是不一样的。
以下面的Chrome为例，iOS的工具栏是用一根极细的条重复平铺在屏幕上。不过这种方式已经相对罕见。
对设计师来说，iOS上延展组件相对容易一些，因为代码里已经定义好了这类变换。需要做的就是提供一张基准图片，见下图：
Android的方式就不一样了。
对于这个平台，你要使用9宫格系统。9宫格包含4条线，
9宫格定义了两个事：伸缩的区域以及填充的区域。一旦这些都定义好，代码就只会去拉伸你定义的部分。下面是图示：
如你所见，9宫格是那个由4个黑条构成的组合。这些黑条的宽度应该是1像素；可延伸的区域不包含圆角。中间是填充区域。
使用9宫格需要在名字前加上.9，就和在iOS上加@2x一样。
上面的图片里，我为了说明白这个事就把9宫格放大了，在实际的应用里，你要优化它，只保留它需要的地方，同时把其他拉伸的部位降到最小。
当你着手创建一个UI组件的时候，非常需要先理解一下触控和DPI之间的关系。
桌面-非触控
早先的计算机技术并不具有触控这样的概念。我们使用鼠标和键盘来精确地操作UI。鼠标的精确等级是1pt，理论上你创造一个1*1pt的按钮，人就可以点击。就像下面这张图：
这是20倍大小的ChromeOS光标。红点就是可点击的区域。你能用手精确地点一下吗？
下面是两个最常用的手指尺寸，食指和拇指，以及他们占用的空间。实际的区域当然会更小一些也更精确一些。
设计触控操作的时候，最好把手指的尺寸估算地大一些。
尽管这样列出比较方便，但在应对设计工作时，还是要谨慎一些，并且多多自行试验。
苹果牢牢地控制着自己的硬件设备，他们明白触屏的质量，所以他们可以规定一个相对小一些的触控对象，而且他们的屏幕也相对小一些。
安卓和Windows，由于大量不同的OEM厂商有不同的硬件，设计时使用大一些的触控对象会更“安全”一些，留白也更大一些。
