基础知识！DPI指南

如你所见，文本变大了，准确点说是两倍大，然而正方形还保持不变，原因就是Photoshop按照PPI值放大了pt值，结果在PPI值变为两倍的情况下文本大小增加为原来两倍。而用像素定义的蓝色正方形，保持了原来大小。像素就是一个像素点，不管PPI怎么配置它会一直保持一个像素。造成这个差异的是用来显示它的屏幕的PPI值。

我们需要记住的是在做数字化设计的时候，PPI只会影响你对设计的感知、你的工作流和以pt为单位的图案例如字体。如果你在工作资源文件里包含了各种PPI配置，程序就会根据接收到的文件的PPI比例在不同的文件里调整转移视觉的大小，这会成为一个需要解决的问题。

那么，解决方案是什么呢？就是坚持使用PPI（对于1x设计，最好控制在72-120之间）。我个人使用72PPI，因为这是Photoshop的默认配置，我的同事也是。

附加:

PPI配置对输出到web上的设计毫无影响。PPI配置只对基于PPI独立计量（比如PT）产生的图案有影响。像素是任何数字化设计的度量单位保持像素比以及设计的目标，而不是PPI在进行数字化设计时使用实际的PPI配置，你会感受到它在目标设备上的样子（以1x的web/桌面设计72-120ppi为例）。在你的文件中自始至终保持相同的PPI配置

关于这个的额外趣味阅读：StackExchange post

iOS上的PPI处理

是时候钻研下特定平台的设计了。

让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看，iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机，有iPhone和iPad。 在手机分类中，有过去的3GS（iOS6依旧支持）和更高版本，其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表：

2014年9月Apple宣布，现在又有2个新类别的iPhone：iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一点（0.7英寸左右），但是PPI相同。iPhone 6 Plus由于它的尺寸，5.5英寸，产生了iOS上新的像素比，@3x。

相较于其他iPhone，iPhone 6 Plus控制展示比较特殊的是：视觉效果降频。

以为iPhone 6设计为例，设计的画布为1334750px，手机上就呈现1334750的物理像素。当为iPhone 6 Plus时，手机的分辨率小于渲染的图像，因此你设计的分辨率为22081242px，展示时降频为19201080px。如下图：

物理分辨率比渲染分辨率小15%，会造成一些细节问题，比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的，除非你近距离观察。因此，在2208*1242px的画布上设计，需要注意设计中真正精细的地方，像是分隔符。模拟如下：

感谢Paintcode的说明，看看他们专门的页面。点击查看

在iPod touch分类中，iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7，它的屏幕大小与iPhone 5相同。

最后说说iPad。除了iPad 第一代，其余的都用的是iOS7，同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看，iPad mini只是普通的iPad（一样的PPI屏幕），但是物理体积更小，也就是说它们拥有相同的分辨率，只是大小从9.7英寸减小到了7.9英寸。保持同样的比例，便会相应地增大像素点的密度，你的虚拟资源就会显得更小了。

至于台式机和笔记本，我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天，Apple提供的几乎都是1x像素比的Retina屏幕（Macbook，Macbook Air，旧版Macbook Pros，台式机显示器），Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是，你需要以相同方式设计来覆盖这两种不同类别的屏幕。

当只使用一种像素比时，基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI（例如，100%/1x）然后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后，就能够直接在2x上进行设计了，低分辨率时资源更小。如果你正在为Retina屏幕设计的话（Macbook Pro），这就特别有用。

引入资源，chrome为例

如图所示，每次请求资源需要传送两张图片。非Retina下图片名为name.png，Retina的图片增加到@2x命名为@2x.png，这是iOS开发约定的命名规范。

如果你创建了一个图片只用在iPad上，我们在.@2x后面加上~iPad，这仅仅只是chrome的约定。对需要的资源都这样处理，不要只用一个版本的资源来覆盖所有DPI。

附加, iOS规则集:

@2x的资源必须始终是1x资源的两倍。Retina资源加上@2x.始终创建100%和200%比例的图片。1x和2x的资源始终要保持名字相同。在100%比例下开始设计，然后做乘法。传递.png格式的图片。使用pt创建规范而不是px。

Android上的PPI处理

Android平台的设备种类比iOS多，因为任何OEM都可以生产设备并且几乎没有比例的限制，然后加上自己版本号。结果就是生产出几乎无限制的屏幕大小和DPI种类，电话和平板电脑一样大，或者电话和平板电脑一样小的情况比比皆是。为此，你的设计总是需要做适配。

在这个部分，我们将采用不同于iOS的方法，我们先来讨论下像素比和DPI分类。

Android设备可以分为两类：手机和平板电脑。这两种设备又可以按照不同DPI分为：ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。

幸好，有些比其他使用得更加频繁，有些甚至已经弃用了。

首先我们要找到等价于iOS上1x的基础单位。在Android上，这个基础单位就是MDPI。

让我们看看下面列表的像素比。

是的，很多，而且还没有完，还有一个落下了。

实际上，目前正在使用的DPI有4个：MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI，现在已经不再使用，TVDPI是TV UI的特殊例子，在2012年版的Nexus 7中短暂使用过，在手机和平板电脑的使用中没有考虑的必要。尽管如此，TVDPI的像素比（1.33x）还是被用在一些安卓系统的设备上，像是LG G手表，我们后面来讨论这个。

让我们结合带着各自DPI的Android手机和平板电脑全面客观地看待事物。

也许在现在这个时候有一个设备使用XXXHDPI的实际app资源，但也不是很常见。如果你能用额外时间生产XXXHDPI资源，你的app便不会过时。

引入资源，chrome为例

每次请求资源都需要传递一组4张图片，从MDPI到XXHDPI，无需考虑LDPI。注意，在下面的chrome版本中，TVDPI的输入在这个例子里的5张图片里也很清楚。

和iOS一样，我建议把100%或者1x的像素比作为你设计的基础，这会让设计在适配其他像素比的时候容易一点，特别是在像素比为1.33和1.5的安卓系统上。

看看下面安卓上chrome的返回按钮的例子。

DPI后面跟着的建议名称不是安卓官方指南强制要求的，这是我们为资源取名的方式，因为现在有限的设计工具很难给每个资源定义一个路径。 考虑到一个资源有时有上百个资源文件，站在设计师的角度来说这是使输出过程不那么痛苦以及避免重命名错误的一个途径。资源在资源仓库里面的存储方式是有结构的，参考后面：

drawable-mdpi/asset.pngdrawable-hdpi/asset.pngetc…

如你所见，资源被截成了3232dp的正方形，Android像素比也会是小数。当用1.33或者1.5乘以一个数的时候，最后的结果很有可能就是小数。在这种情况下你需要通过四舍五入来让数字变得有效。在这个例子中，321.33=42.56所以四舍五入之后是43px。

你需要注意以像素为单位的元素，比如笔画。你需要确保你的笔画既不是1px宽也不是2px同时也不像屏幕分辨率部分描述的那样模糊。

附加, Android规则集:

Android有7种不同的DPI，你需要关注其中的4个：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未来，可以关注XXXHDPI。MDPI是基础的DPI或者1x像素比Android使用dp代替pt当作参数规格，但是他们是一样的。用你最好的判断来处理小数像素比。传递.png格式图片。确保检验命名约定，与执行负责人共同完成输出进程。

Mac、Chrome OS上的PPI

Mac（OSX）和Chrome OS在处理PPI方面是十分相似的。 两个OS都支持常规的PPI（100%）和hi-res/retina PPI(200%)。像iPhone和iPad，就只有2x像素比。

即使大多数的用户都使用Mac和Chrome OS，但是也有用户会在低分辨率的设备上使用，我强烈建议将你的app面向未来的高端屏幕。面向未来对于ChromeOS意味着为Web-app或者网站创建hi-res资源，那绝不是浪费时间。当前有3种笔记本处理PPI，13寸、15寸Macbook pro以及Chromebook Pixel。除此之外，Chromebook Pixel还处理了touch。

引入资源，chrome为例

Chrome的工具栏按钮资源就是相似性最好的例子。我们在两个平台上使用完全相同按钮，即使代码不同，视觉上也是一样的。看下面这个chrome菜单按钮的例子。

附加:

Chrome OS和OSX像素比相同，都是2.Chrome OS高分辨率展示也处理touch。

可拉伸资源

不管你的app是在桌面或者手机上。你通常都会引入可拉伸资源。

可拉伸资源的建立会使代码在没有减少渲染的情况下比实际需要的多。

他们与可重复资源即使有的时候展示结果一样，工作方式也是不同的。

看看下面这个Chrome的例子。iOS上的工具栏在整个屏幕上只用了一个在x轴上平铺的超细资源。

现在这种方式已经过时了，让我们来看看不同平台如何处理可拉伸资源。

iOS上的可拉伸资源

对iOS的设计师来说这个很简单，因为拉伸在代码里面定义比资源片段或者标记方式好。所有需要做的就是提供一个基础图片，如果你自己还没有实现这个，可以将你的资源规范定义为水平或者竖直可扩展，或者两者均可。看看下面这个iOS上Chrome的默认按钮的例子。

Android上的可拉伸资源

Android有和iOS不一样的处理可拉伸资源的方式，它更依赖设计师一点。

在这个平台你将采用九宫格，这些辅助线包括了4条围绕资源本身的线。他们必须被当作资源的一部分来传递片段/图片，用它来准确的呈现视觉规格。

他们定义了两个区域：可拉伸区域和填充区域。一旦定义好，代码就只会拉伸可拉伸区域，并把内容放在你定义的填充区域。

看看下面的例子，就是你前面看到的Chrome默认按钮的Android版本。为了演示，我把他放大了。

如你所见，这个九宫格是一组4条纯白色的bar。他们在任何DPI下都是宽1px，这是代码表示的。可拉伸区域不包括圆角因为圆角不能平铺开（否则看起来很难看）。在这个例子中，我们给按钮添加了规格允许范围内10dp的padding。.9也需要平铺并且截断部分要100%透明。如果不这样，他就不能正常工作，需要修改。