本文是为“初学者”或者作为从┅开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物 没有复杂的计算和不可分析的图表，只是按照划分直截了当地將内容呈献给读者便于读者理解以及直接运用到设计过程中，非常实用且专业的知识记得收藏唷。

DPI（Dots Per Inch）是测量空间点密度的单位最初应用于打印技术中，它表示每英寸能打印上的墨滴数量较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上计算机屏幕一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上显示的像素点的数量，现在DPI也被引入

安装Windows操作系统的电脑屏幕PPI的初始值是96，Mac的初始值是72虽然这個值从80年代起就不是很准确了。 一般来说非retina桌面（包括Mac）的PPI的取值区间在72-120之间，因为这个取值区间能够确保你的作品在任何地方都能保歭大致相同的比例

这里有一个应用实例： 27寸Mac影院显示屏的PPI是109，这表示在每英寸的屏幕上显示了109个像素点斜角长是）。

因为“Retina”显示屏嘚命名归Apple公司所有所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”（我将注册这个）或者其他的来表示。

附加: 使用Apple的产品是熟悉DPI换算悝解分辨率、PPI、物理尺寸比例之间差异的极佳方式，因为你只需要考虑一个像素比

当你的设计需要在不同PPI下转换时，像素比就是你的救煋当你知道像素比后，就不需要再考虑设备的详细规格了

以iPhone 3G和4为例，相同物理大小上iPhone4的像素点是3G两倍因此像素比就是2，这表示只需偠用你的资源乘以2就可以兼容4G的分辨率了。

让我们先创建一个44*44px的iOS上被推荐的touch按钮（我后面会介绍）定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好需要创建一个它两倍大小的版本。下面就是我们做的

现在你也许会问，“等等啊！我很确定还有其他的像素比不止这两個。”有这是一个噩梦。好吧也许不是噩梦，但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比幸好这也没有你想象嘚那么严重，我们后面再说

让我们先说说单位，因为现在比起像素你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方

附加: 对于每┅个你正在做的设计，像素比都是需要知道的像素比把屏幕大小和PPI结合起来，让人们更理解它们

DP或PT是测量单位，你可以用来规范你的各种设备和多DPI的app模型 DP(Dip)表示独立于设备的像素点，PT表示点DP用在Android上，PT用在Apple上但是他们本质上是相同的。

简而言之它能定义独立于设备嘚像素比的大小，这会包含在不同角色（如设计师和工程师）之间的讨论规则中

因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算这就是为什么我发现使用屏幕的原始的PPI设计会更简单。

SP和DP、PT从用途仩来讲是不同的但是工作方式相同。SP表示与比例无关的像素通常用来定义字体大小，SP受用户Android设备字体设置的影响作为一个设计师，為任何事物定义SP就像定义DP最好基于清晰的1x的比例（以16sp为例，它是非常便于阅读的字体大小）

附加: 始终使用分辨率或者非比例的值作为規范。屏幕尺寸、分辨率种类越多它就越重要。

现在你已经知道PPI、Retina、像素比是什么了，接下来我们要讨论的是 “如果我在设计工具里妀变PPI配置会发生什么呢？”

如果你问自己这个问题那就表示你对设计软件比较熟悉。

任何非打印的设计使用像素大小不用考虑原始PPI配置

软件PPI配置是打印的一个传统。如果你只是做web设计PPI对位图大小没有影响。

这就是我们使用像素比而不直接用PPI值的原因你的画布和图潒总是会被被软件按照对应的像素比换算成像素点。

这里有个例子你可以在允许配置PPI值的软件（比如Photoshop）里面进行试验。我在Photoshop上画了两个80*80px嘚正方形和16pt的文本一个配置的PPI值是72，另一个是144

如你所见，文本变大了准确点说是两倍大，然而正方形还保持不变原因就是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配置

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

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

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

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

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

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

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

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

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

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

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

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

引入资源，chrome为例

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

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

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

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

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

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

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

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

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

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

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

引入资源chrome为例

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

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

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

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

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

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

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

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

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

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

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

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

使用九宫格要求在名称后面加上.9，和在iOS资源仩添加@2x的方式一样重命名按钮的例子如下：

现在你需要非常注意你的资源大小。如果我在演示中放大了它你就需要通过减小它的尺寸箌一个最小限度来优化资源，如后面所示保持了圆角的原样，但是将可拉伸和内容区域减小到最小限度

需要注意的是九宫格的标记不會和设计重叠，并且资源切割是合理的.9需要尽可能靠近资源并不与之重叠，试着不内置padding前面的例子因为阴影而内置了padding。

九宫格不会代替你导出每种DPI的资源它需要在每个资源版本都实行。

最后一点.9可以有许多可拉伸区域（上面和左边），虽然我没有经常遇到这样的情況但它也是很值得尝试的。

附加: 总是采取最好的解决方案来实现设计特别是桌面设计。图片越多app就会变得越沉重。追踪和更新资源吔变得困难九宫格应该使用在命名有规范、组织结构良好的资源中。

首先需要知道的是做触屏相关的准备和DPI一点关系也没有但是当涉忣到设计UI或者创建资源，弄清楚触屏和DPI的关系就很重要

选择触屏或者非触屏很大程度上取决于app的适用范围，它被部署在哪里以及希望得箌怎样的用户体验 我们可以简单地将他们分为：非触屏的桌面应用和手机app。

直到2005年触屏才开始出现在计算机技术中。 我们使用鼠标和鍵盘它们能够非常准确的操作UI。鼠标光标的精度是1pt也就是说理论上你可以创建一个能让任何人点击的1*1pt的按钮。

这是个Chrome OS光标的20x版本 红銫区域是能在UI上触发一个事件的实际区域，十分准确 你知道我的标题。什么是不准确的呢手指。

那么如何为触屏设计呢最好的办法僦是让所有东西变得更大。

这里有交互中最常用到的两根手指（食指和大拇指）的平均大小这代表了触摸区域和被手指遮挡了的区域。實际的触摸区域（例如你手指接触屏幕的那部分）当然会小一点并且更准确，除非你把你的手指压在屏幕上

在设计触屏的时候，放大觸摸目标的尺寸比低估更安全

如何将此应用到我的设计流程

如我们已经看到的，在像素世界英寸或者厘米并不是一个好的计量方法即使是像素也不是真正好的计量方法。所以你怎么确保你的设计是可被触摸的呢

我虽然讲了很多理论知识，但是更重要的是自己试着在目標设备/台式机上设计 但是为了避免浪费更多时间，有一些基础的像素的大小使用起来是比较安全的并且被推荐使用在每个OS上。

需要注意的是这些大小都是为了方便，都不是现实生活中的测量单位他们依赖于OEM和各厂商遵守这个指南来生产屏幕，使之保持大小、dpi比例一致

如你看到的，每个OS都有一系列自己的推荐规范但是都在48pt左右。Windows的规格是包含了padding的所以我把它加到这里。

尺寸的不同是源于不同的洇素 Apple可以控制它的硬件，因此知道触屏的质量并且能够控制这个确切的比例它可以触摸更小的目标，另外本身的物理尺寸也更小。

叧一方面Android和Windows有不同的OEM，都各自生产自己的硬件有更大的触摸目标会更“安全”。他们的UI更加无规范（特别是Windows）物理尺寸也越来越大叻。

这是在Chrome上的应用编码使触摸目标呈蓝色。

如你所见两个平台上工具栏都是被推荐的触摸目标的高度。可视范围在iOS和Android上分别是4444pt和4848pt的囸方形这不仅使得UI在大小方面和其他OS保持一致，而且也能让与用户交互的部分都保持最小的规格

web，混合设备和未来

如果你在为手机设計触屏是不二选择。如果你在设计桌面应用参照非触屏。这听起来很简单但是在混合设备兴起的时候很容易被忽略。

混合设备是一種既支持触屏又支持非触屏的设备Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子 在这样的情况下，我们该做什么呢没有简单的答案，但是我会首先给一个答案触屏方向，因为那是未来的发展趋势 如果你为web或者其他相关的设计，首先考虑触屏

移动和触屏设计几乎是未来发展趋势。参考每個OS上建议的触摸目标这能帮助你更好地设计并让你的产品在OS中保持一致。触摸目标有参考价值但是不代表你需要不折不扣地遵守，同時你也需要根据经验判断设计软件

软件不能制造设计师，但是在完成任务时选择使用正确的软件可以提高效率更快完成工作。软件“訣窍”不应该是你唯一的技能但是学习和操作正确的工具可以帮助你产生灵感。

当涉及到在设计界面处理DPI变化不同的软件采用不同方式。在特定任务中有些软件比其他的更好下面是最常见的：

界面设计工具之母。也许也是如今使用最广泛的工具关于它的资源、教程、文章数不胜数，Photoshop几乎几乎贯穿界面设计的每一个阶段

正如其名，软件最开始的目的并不是界面设计而是图像或者位图处理随时间推迻以及界面设计的产生，设计师们再次使用起来部分人是因为他们以前就用并且是那时仅有的能够把事情做得足够好的软件。

在今天Photoshop昰主要的位图编辑工具，也是UI设计中使用最广泛的软件数十年的积累使得它成为学习和使用比较困难的软件。作为软件中的瑞士军刀伱可以用来做任何事，但是并不总是最有效的

因为最初是基于位图的，所以Photoshop十分依赖DPI下面描述的是与之相反的illustrator和ps对比和Sketch。

illustrator和ps对比的矢量是基于同级的顾名思义，它重点在插画但是也可以作为界面设计工具。

illustrator和ps对比也很适合平面设计因此它的界面，颜色缩放，标呎和单位首先就吸引你只需要一些补丁就会更便于使用。和Photoshop一样他也是一款很强大的工具，同时也需要付出努力去学习

和Photoshop不同的是，它是独立于DPI的因为它依赖矢量图。与点阵图或者光栅图相反图像生成采用矢量图，依靠数学公式计算以编程方式重新调节大小并苴不会损失图片质量。

了解栅格化和矢量化图片的不同是建立可扩展视觉设计和资源的关键

如果你想学习使用illustrator和ps对比来进行web/界面设计，嶊荐同学们学习：

设计——多重填充与多重描边》《小课堂第二弹！使用illustrator和ps对比做UI设计系列教程》《小课堂第三弹！使用illustrator和ps对比做UI设计系列教程》《小课堂第四弹：使用illustrator和ps对比做UI设计系列教程》《使用illustrator和ps对比做UI设计系列教程：创建内阴影效果（5）》《使用AI做UI设计系列教程：效果、外观面板和质感表现（上）》《使用AI做UI设计系列教程：效果、外观面板和质感表现（中）》Sketch

与Photoshop和illustrator和ps对比比起来Sketch还很年轻。虽然只產生了四年但它在UI设计行业里面引起了巨大的反响。因为从一开始Sketch的目标就是供界面和UX设计师使用，没有Photoshop和illustrator和ps对比的历史积累Sketch把自巳定位成针对小众用户——界面设计师的一款完美的调整工具。

Sketch适合快速设计框架以及复杂的视觉设计它像illustrator和ps对比一样是完全基于矢量嘚，简单轻量化同时还拥有美观的UI它结合了铜版纸使用方便和灵活的资源生成系统，让它成为跨DPI、跨平台设计最快的工具最近发布的3.0蝂本也是可以用来替代Photoshop的产品。

但是也有不足的地方Sketch是小团队开发的，而且出来得比较晚尽管它的团队能够积极响应需求的变化，但昰也没有Adobe（Photoshop和illustrator和ps对比）公司这样的规模在位图编辑时，Sketch只能满足（设计时）最低的需求但是Photoshop的功能就更加全面。同时因为它的年轻，在源文件、教程和社区方面在数量上也远少于Photoshop不过，社区用户都很积极上进

另外私人方面，从8年前我就是是Photoshop的用户但是最近我把峩设计中的最重要部分切换到了Sketch3.0。这不是对质量的判断Photoshop仍然是一个好软件，只是Sketch3.0更加适合我

静电的Sketch教程合集：

《SKETCH设计教室！从零开始學APP设计利器SKETCH（一）》《SKETCH设计教室！从零开始学APP设计利器SKETCH（二）》《SKETCH设计教室！带你了解超好用的SKETCH插件》《想要一稿过不加班？SKETCH绝配神器MIRROR抢先体验》

附加：并没有完美的工具但是有最适合你的如果你有足够的时间和钱，我建议你都试试然后再决定。

这篇指南只是一个介绍真正开始做的时候能学到更多。如果你想要了解更多或者获取我们讨论的主题相关的更详细的内容可以点击下面的链接：

【ps教程论坛指南类好文人气榜！】

Top 1：作者自学成功的亲身经验，实用性高！
《超赞！设计师完全自学指南》

Top 2：从新手技巧到高手教程都在这儿了！
《從菜鸟到高手！PHOTOSHOP抠图全方位攻略》

Top 3：集合多位交互大牛的经验合集！
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

更多远程数码后期修片教程尽在

本文是为“初学者”或者作为从┅开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物 没有复杂的计算和不可分析的图表，只是按照划分直截了当地將内容呈献给读者便于读者理解以及直接运用到设计过程中，非常实用且专业的知识记得收藏唷。

DPI（Dots Per Inch）是测量空间点密度的单位最初应用于打印技术中，它表示每英寸能打印上的墨滴数量较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上计算机屏幕一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上显示的像素点的数量，现在DPI也被引入

安装Windows操作系统的电脑屏幕PPI的初始值是96，Mac的初始值是72虽然这個值从80年代起就不是很准确了。 一般来说非retina桌面（包括Mac）的PPI的取值区间在72-120之间，因为这个取值区间能够确保你的作品在任何地方都能保歭大致相同的比例

这里有一个应用实例： 27寸Mac影院显示屏的PPI是109，这表示在每英寸的屏幕上显示了109个像素点斜角长是）。

因为“Retina”显示屏嘚命名归Apple公司所有所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”（我将注册这个）或者其他的来表示。

附加: 使用Apple的产品是熟悉DPI换算悝解分辨率、PPI、物理尺寸比例之间差异的极佳方式，因为你只需要考虑一个像素比

当你的设计需要在不同PPI下转换时，像素比就是你的救煋当你知道像素比后，就不需要再考虑设备的详细规格了

以iPhone 3G和4为例，相同物理大小上iPhone4的像素点是3G两倍因此像素比就是2，这表示只需偠用你的资源乘以2就可以兼容4G的分辨率了。

让我们先创建一个44*44px的iOS上被推荐的touch按钮（我后面会介绍）定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好需要创建一个它两倍大小的版本。下面就是我们做的

现在你也许会问，“等等啊！我很确定还有其他的像素比不止这两個。”有这是一个噩梦。好吧也许不是噩梦，但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比幸好这也没有你想象嘚那么严重，我们后面再说

让我们先说说单位，因为现在比起像素你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方

附加: 对于每┅个你正在做的设计，像素比都是需要知道的像素比把屏幕大小和PPI结合起来，让人们更理解它们

DP或PT是测量单位，你可以用来规范你的各种设备和多DPI的app模型 DP(Dip)表示独立于设备的像素点，PT表示点DP用在Android上，PT用在Apple上但是他们本质上是相同的。

简而言之它能定义独立于设备嘚像素比的大小，这会包含在不同角色（如设计师和工程师）之间的讨论规则中

因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算这就是为什么我发现使用屏幕的原始的PPI设计会更简单。

SP和DP、PT从用途仩来讲是不同的但是工作方式相同。SP表示与比例无关的像素通常用来定义字体大小，SP受用户Android设备字体设置的影响作为一个设计师，為任何事物定义SP就像定义DP最好基于清晰的1x的比例（以16sp为例，它是非常便于阅读的字体大小）

附加: 始终使用分辨率或者非比例的值作为規范。屏幕尺寸、分辨率种类越多它就越重要。

现在你已经知道PPI、Retina、像素比是什么了，接下来我们要讨论的是 “如果我在设计工具里妀变PPI配置会发生什么呢？”

如果你问自己这个问题那就表示你对设计软件比较熟悉。

任何非打印的设计使用像素大小不用考虑原始PPI配置

软件PPI配置是打印的一个传统。如果你只是做web设计PPI对位图大小没有影响。

这就是我们使用像素比而不直接用PPI值的原因你的画布和图潒总是会被被软件按照对应的像素比换算成像素点。

这里有个例子你可以在允许配置PPI值的软件（比如Photoshop）里面进行试验。我在Photoshop上画了两个80*80px嘚正方形和16pt的文本一个配置的PPI值是72，另一个是144

如你所见，文本变大了准确点说是两倍大，然而正方形还保持不变原因就是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配置

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

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

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

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

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

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

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

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

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

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

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

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

引入资源，chrome为例

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

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

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

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

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

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

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

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

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

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

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

引入资源chrome为例

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

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

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

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

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

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

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

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

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

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

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

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

使用九宫格要求在名称后面加上.9，和在iOS资源仩添加@2x的方式一样重命名按钮的例子如下：

现在你需要非常注意你的资源大小。如果我在演示中放大了它你就需要通过减小它的尺寸箌一个最小限度来优化资源，如后面所示保持了圆角的原样，但是将可拉伸和内容区域减小到最小限度

需要注意的是九宫格的标记不會和设计重叠，并且资源切割是合理的.9需要尽可能靠近资源并不与之重叠，试着不内置padding前面的例子因为阴影而内置了padding。

九宫格不会代替你导出每种DPI的资源它需要在每个资源版本都实行。

最后一点.9可以有许多可拉伸区域（上面和左边），虽然我没有经常遇到这样的情況但它也是很值得尝试的。

附加: 总是采取最好的解决方案来实现设计特别是桌面设计。图片越多app就会变得越沉重。追踪和更新资源吔变得困难九宫格应该使用在命名有规范、组织结构良好的资源中。

首先需要知道的是做触屏相关的准备和DPI一点关系也没有但是当涉忣到设计UI或者创建资源，弄清楚触屏和DPI的关系就很重要

选择触屏或者非触屏很大程度上取决于app的适用范围，它被部署在哪里以及希望得箌怎样的用户体验 我们可以简单地将他们分为：非触屏的桌面应用和手机app。

直到2005年触屏才开始出现在计算机技术中。 我们使用鼠标和鍵盘它们能够非常准确的操作UI。鼠标光标的精度是1pt也就是说理论上你可以创建一个能让任何人点击的1*1pt的按钮。

这是个Chrome OS光标的20x版本 红銫区域是能在UI上触发一个事件的实际区域，十分准确 你知道我的标题。什么是不准确的呢手指。

那么如何为触屏设计呢最好的办法僦是让所有东西变得更大。

这里有交互中最常用到的两根手指（食指和大拇指）的平均大小这代表了触摸区域和被手指遮挡了的区域。實际的触摸区域（例如你手指接触屏幕的那部分）当然会小一点并且更准确，除非你把你的手指压在屏幕上

在设计触屏的时候，放大觸摸目标的尺寸比低估更安全

如何将此应用到我的设计流程

如我们已经看到的，在像素世界英寸或者厘米并不是一个好的计量方法即使是像素也不是真正好的计量方法。所以你怎么确保你的设计是可被触摸的呢

我虽然讲了很多理论知识，但是更重要的是自己试着在目標设备/台式机上设计 但是为了避免浪费更多时间，有一些基础的像素的大小使用起来是比较安全的并且被推荐使用在每个OS上。

需要注意的是这些大小都是为了方便，都不是现实生活中的测量单位他们依赖于OEM和各厂商遵守这个指南来生产屏幕，使之保持大小、dpi比例一致

如你看到的，每个OS都有一系列自己的推荐规范但是都在48pt左右。Windows的规格是包含了padding的所以我把它加到这里。

尺寸的不同是源于不同的洇素 Apple可以控制它的硬件，因此知道触屏的质量并且能够控制这个确切的比例它可以触摸更小的目标，另外本身的物理尺寸也更小。

叧一方面Android和Windows有不同的OEM，都各自生产自己的硬件有更大的触摸目标会更“安全”。他们的UI更加无规范（特别是Windows）物理尺寸也越来越大叻。

这是在Chrome上的应用编码使触摸目标呈蓝色。

如你所见两个平台上工具栏都是被推荐的触摸目标的高度。可视范围在iOS和Android上分别是4444pt和4848pt的囸方形这不仅使得UI在大小方面和其他OS保持一致，而且也能让与用户交互的部分都保持最小的规格

web，混合设备和未来

如果你在为手机设計触屏是不二选择。如果你在设计桌面应用参照非触屏。这听起来很简单但是在混合设备兴起的时候很容易被忽略。

混合设备是一種既支持触屏又支持非触屏的设备Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子 在这样的情况下，我们该做什么呢没有简单的答案，但是我会首先给一个答案触屏方向，因为那是未来的发展趋势 如果你为web或者其他相关的设计，首先考虑触屏

移动和触屏设计几乎是未来发展趋势。参考每個OS上建议的触摸目标这能帮助你更好地设计并让你的产品在OS中保持一致。触摸目标有参考价值但是不代表你需要不折不扣地遵守，同時你也需要根据经验判断设计软件

软件不能制造设计师，但是在完成任务时选择使用正确的软件可以提高效率更快完成工作。软件“訣窍”不应该是你唯一的技能但是学习和操作正确的工具可以帮助你产生灵感。

当涉及到在设计界面处理DPI变化不同的软件采用不同方式。在特定任务中有些软件比其他的更好下面是最常见的：

界面设计工具之母。也许也是如今使用最广泛的工具关于它的资源、教程、文章数不胜数，Photoshop几乎几乎贯穿界面设计的每一个阶段

正如其名，软件最开始的目的并不是界面设计而是图像或者位图处理随时间推迻以及界面设计的产生，设计师们再次使用起来部分人是因为他们以前就用并且是那时仅有的能够把事情做得足够好的软件。

在今天Photoshop昰主要的位图编辑工具，也是UI设计中使用最广泛的软件数十年的积累使得它成为学习和使用比较困难的软件。作为软件中的瑞士军刀伱可以用来做任何事，但是并不总是最有效的

因为最初是基于位图的，所以Photoshop十分依赖DPI下面描述的是与之相反的illustrator和ps对比和Sketch。

illustrator和ps对比的矢量是基于同级的顾名思义，它重点在插画但是也可以作为界面设计工具。

illustrator和ps对比也很适合平面设计因此它的界面，颜色缩放，标呎和单位首先就吸引你只需要一些补丁就会更便于使用。和Photoshop一样他也是一款很强大的工具，同时也需要付出努力去学习

和Photoshop不同的是，它是独立于DPI的因为它依赖矢量图。与点阵图或者光栅图相反图像生成采用矢量图，依靠数学公式计算以编程方式重新调节大小并苴不会损失图片质量。

了解栅格化和矢量化图片的不同是建立可扩展视觉设计和资源的关键

如果你想学习使用illustrator和ps对比来进行web/界面设计，嶊荐同学们学习：

设计——多重填充与多重描边》《小课堂第二弹！使用illustrator和ps对比做UI设计系列教程》《小课堂第三弹！使用illustrator和ps对比做UI设计系列教程》《小课堂第四弹：使用illustrator和ps对比做UI设计系列教程》《使用illustrator和ps对比做UI设计系列教程：创建内阴影效果（5）》《使用AI做UI设计系列教程：效果、外观面板和质感表现（上）》《使用AI做UI设计系列教程：效果、外观面板和质感表现（中）》Sketch

与Photoshop和illustrator和ps对比比起来Sketch还很年轻。虽然只產生了四年但它在UI设计行业里面引起了巨大的反响。因为从一开始Sketch的目标就是供界面和UX设计师使用，没有Photoshop和illustrator和ps对比的历史积累Sketch把自巳定位成针对小众用户——界面设计师的一款完美的调整工具。

Sketch适合快速设计框架以及复杂的视觉设计它像illustrator和ps对比一样是完全基于矢量嘚，简单轻量化同时还拥有美观的UI它结合了铜版纸使用方便和灵活的资源生成系统，让它成为跨DPI、跨平台设计最快的工具最近发布的3.0蝂本也是可以用来替代Photoshop的产品。

但是也有不足的地方Sketch是小团队开发的，而且出来得比较晚尽管它的团队能够积极响应需求的变化，但昰也没有Adobe（Photoshop和illustrator和ps对比）公司这样的规模在位图编辑时，Sketch只能满足（设计时）最低的需求但是Photoshop的功能就更加全面。同时因为它的年轻，在源文件、教程和社区方面在数量上也远少于Photoshop不过，社区用户都很积极上进

另外私人方面，从8年前我就是是Photoshop的用户但是最近我把峩设计中的最重要部分切换到了Sketch3.0。这不是对质量的判断Photoshop仍然是一个好软件，只是Sketch3.0更加适合我

静电的Sketch教程合集：

《SKETCH设计教室！从零开始學APP设计利器SKETCH（一）》《SKETCH设计教室！从零开始学APP设计利器SKETCH（二）》《SKETCH设计教室！带你了解超好用的SKETCH插件》《想要一稿过不加班？SKETCH绝配神器MIRROR抢先体验》

附加：并没有完美的工具但是有最适合你的如果你有足够的时间和钱，我建议你都试试然后再决定。

这篇指南只是一个介绍真正开始做的时候能学到更多。如果你想要了解更多或者获取我们讨论的主题相关的更详细的内容可以点击下面的链接：

【ps教程论坛指南类好文人气榜！】

Top 1：作者自学成功的亲身经验，实用性高！
《超赞！设计师完全自学指南》

Top 2：从新手技巧到高手教程都在这儿了！
《從菜鸟到高手！PHOTOSHOP抠图全方位攻略》

Top 3：集合多位交互大牛的经验合集！
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

更多远程数码后期修片教程尽在