/*

在知乎上看到这篇的英文版，没有仔细看便决定尝试第一次翻译，主要目的是通过翻译让学习的印象更深，也当做是一种锻炼和积累，由于当初没有先完整的浏览内容，首先低估了文章的信息量，每天下班后翻译一点，弄了整整一星期。其次原本以为知乎推荐应该是饱含干货，翻译过程发现实用性并不是很高，但既然开始，就应该坚持下去，况且或多或少都会有些收获。整体看下来该文章图片中的价值比文字更大一些，可结合文字仔细浏览图片。

由于该文章涉及内容主要是UI/GUI设计师的工作，而我是个小PM，故在翻译时对有些内容理解的并不深，翻译的可能不够准确，如有表意不清或翻译不准请指正。

*/

DPI和PPI

DPI（Dots Per Inch）最初用于衡量打印物上每英寸的点数密度，就是说你的打印机可以在一英寸内打多少个点。DPI值越小图片越不精细。

当DPI的概念用在计算机屏幕上时，就应称之为PPI（Pixels Per Inch）。同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。你说 DPI大伙也能理解。

Windows系统默认PPI 为96， Mac OS系统默认PPI 为72。

一般非视网膜屏幕的桌面电脑的 PPI在72 到120之间。使用 72到120 之间的PPI进行设计基本可以保证你的作品尺寸在大多数情况下看起来都差不多。

举个栗子：

27"Mac的PPI是109，意思是每英寸有109个像素。显示器宽度（含边框）为25.7英寸，屏幕纯宽度差不多23.5英寸，所以23.5×109 ≈2560，由此可知屏幕的分辨率为2560×1440px。

*我知道23.5×109不等于2560，实际上应该是23.486238532 英寸，用像素/厘米能更精确点。我就是举个栗子，你懂的。

PPI在设计中的影响

假设你设计了一个109×109px的蓝色方块，并且这个方块的物理尺寸为1×1英寸。如果你的屏幕是72PPI的，那这个方块看起来就要比实际的物理尺寸更大点，因为72PPI的屏幕要显示109px差不多需要1.5英寸才行。

屏幕分辨率

屏幕分辨率对用户感知你的设计影响老大了。幸好CRT显示基本已经被淘汰了，用户使用液晶显示器时基本都使用显示器的原生分辨率，这样看起来更舒服嘛。

分辨率就是屏幕上的像素数，例如2560×1440px的屏幕，屏幕横向有2560个像素，纵向有1440个像素，结合PPI的含义，你应该明白分辨率不是物理尺寸的定义。你可以有一个像你们家一面墙那么大的屏幕或者像你的脚趾盖那么大的一块屏幕，它们的分辨率都是可以是2560×1440px。

现在的液晶显示器都是有原生固定分辨率的（译者：我一般称为点对点分辨率），这根CRT显示器的原理不同，在这就不细掰扯了。

咱的27“Mac显示器有2560×1440px的点对点分辨率，109PPI。如果把屏幕分辨率调低，你就会发现屏幕上的窗口啊，icon啊啥的东西都变大了，因为23.5英寸上的像素变少了。

其实像素还是那么多像素，PPI还是那个PPI，它们就在那里不多不少。我说像素变少了的意思是当你把屏幕分辨率调低时，操作系统会通过拉伸来填充屏幕，这个时候CPU/GPU会用点对点的像素计算出来一套新的分辨率。

如果你想把27”Mac的分辨率设为1280×720px，GPU就会把4个像素当成1个像素用（2×2）。这能咋的？当然是变糊了！这还算好的呢，毕竟是可以整除的像素，如果你弄什么三分之一、四分之三这种幺蛾子，换算出来就有小数，那就更糊！不信你看下面的图。

例如下面这个例子，在点对点屏幕上拉一条1px的线，然后把屏幕分辨率降低一半，为填充屏幕，CPU必须以150%的形式展示视觉效果。相当于所有元素都变为之前的1.5倍，但是又没有半个像素，所以只能通过减低填充像素颜色的纯度达到目的。

这就是为啥在你用retina屏的Macbook Pro时如果要更改分辨率，系统会提示你此分辨率下的视觉效果（如下图），用户可以直观的感受到分辨率的变化。

用像素代表物理尺寸是非常主观的表现，但他们觉得这不算忽悠。

记住：如果你想在查看设计时尽可能保持像素完美，一定要将屏幕分辨率设置为显示器的点对点原生分辨率。虽然你可能觉得使用低分辨率更舒服些，但在像素层面查看设计时必须要尽可能精确。悲剧的是，有的人为了看的更清楚会使用辅助功能，这会让你的作品看起来丑的要死，好在这时候用户是为了看的更仔细而不是为了扣细节。

4K是啥？

最近你可能经常听到有人说4K，4K现在老时髦了。唠4K之前，咱们还是先说说HD（高清）是啥吧。

注意，HD其实是个很宽泛的简称，咱们只说说常见的分辨率。HD没有固定标准，基本上宽度为720px的都算是HD，有的分辨率也成为标准定义简称SD。

full HD（全高清）指的是1920×1080px分辨率的屏幕，大多数的电视和越来越多的高端手机都使用full HD分辨率（例如：此处无品牌赞助商）。

4K标准的最小分辨率是3840×2160px。4K也叫做QHD或者UHD（超高清）。简单的说，一块4K屏幕可以摆下4个1080P的屏幕。

4K的另一个常见分辨率是4096×2160px，一般用在投影仪或者专业相机上。

如果我的电脑用了4K显示器会咋的？

目前的操作系统都不支持4K，如果你在一个Chromebook或者macbook上用4K屏幕，它们会使用最高DPI模式，这样会以2倍的比例显示元素（ 原文：it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio不知翻译的是否正确），虽然看起来不错但是特别的小。

请脑补：如果你把一个12寸的4K屏幕放在一个有12寸高分辨率屏幕的电脑上，所有元素看起来都会比以前小2倍。

- 4K就是4倍全高清.

- If current OS handles 4K but do not scale it. Meaning no 4K specific assets yet.（不知道如何翻译更通顺）

- 目前还没有4K分辨率的手机或平板电脑。

显示器的刷新频率

此章节可能在理论上存在一些疑问，仅供参考和娱乐。

咱们先从PPI和屏幕分辨率的话题跳出来说点别的。你可能注意过在屏幕分辨率设置附近还有个刷新率的设置，它跟PPI没关系，它指的是屏幕每秒显示的图像的帧数，60Hz的刷新率就是每秒显示60帧，120Hz就是每秒显示120帧，以此类推。

在UI设计中，刷新率决定了你所做的动画看起来是否平滑且细致。注意，刷新率是由处理图形的设备决定的，就算你把一个120Hz的显示器接在小霸王游戏机上，它也不可能达到120Hz。

这还理解不了的话就看看下面的栗子吧。一个非常努力的霸王龙小明从A点跑到B点。在60Hz的屏幕上可以显示9帧，在120Hz的屏幕上可以显示18帧，当然在120Hz的屏幕上霸王龙小明看起来跑的更优雅更努力了。

注意：有人说超过60Hz人眼是无法察觉出区别的。放屁！别听他不懂装懂，一定要尽情鄙视他 凸(‵.′)凸。

啥是视网膜屏幕？

视网膜屏幕是在iPhone4发布时进入大众视野的，叫视网膜是因为屏幕的PPI高到人的肉眼完全无法看到像素点。

在iPhone4刚出来那时候这个说法是合理的，但随着屏幕做的越来越好，我们的眼神被炼的已经能看到屏幕上的像素了，尤其界面上的圆形元素更容易看到。

从技术上讲就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素。

哇塞！不缩小元素的大小，相同尺寸屏幕上的元素精度提高了2倍。原来1个像素的空间现在有4个像素，像素数是原来的4倍。

再举个栗子。

图注：再其他的设备上很难表达出图上界面在iPhone 3GS和在iPhone 4上的区别。如果你想仔细对比，可以下载我这个demo放在两个手机里对比查看。

“Retina”是苹果公司的专有名词，其他公司只能用“HI-DPI”或者“超级劲爆极限像素显示屏”之类的词，或者完全不说这样的蠢话，只在你读设备说明的时候告诉你屏幕的尺寸和DPI。

注意：Apple产品的DPI转换和分辨率的差异非常好理解，因为只有一种倍数。

转换系数又是个啥？

当你的设计要在不同PPI的屏幕上展示时，转换系数简直就是葵花宝典。当你掌握了葵花宝典后，完全可以忽略设备的具体参数（也别完全忽略，毕竟大家都不是原作者这样的东方不败）。

咱们还是再把iPhone 3GS和iPhone 4请出来举举栗子。物理尺寸一样的屏幕长宽各塞进去2倍数量的像素，那这个转换系数就是2，就是说你的原件容纳了之前4倍数量的像素，所以你要把它的尺寸的长宽都扩大2倍。（这哥们车轱辘话真多啊，真的不是凑字骗稿费？）

假设你画了一个44×44px的iOS图标，然后给它赋予一个有生命力的名字，例如“赵四”。

为了让“赵四”在iPhone 4上看起来也很“赵四”，你要再画一个2倍大的，如下图。

是不是简单死了！现在“赵四.png”有两个版本的了，一个普通PPI下供3GS使用的，一个2倍大给iPhone 4使用的。

你可能会纳闷：“肯定不止只有这一种转换比例。”有啊，必须必的有啊，而且有多少比例就有多少噩梦。好了啦，不吓你们了。我确定一定以及肯定你们宁愿花一天时间洗袜子洗裤衩也不愿意去换算系数。幸好你们遇到了哥，有哥在就不用担心了。（才怪 =_=）

在谈跨DPI设计的规范前，要先说一下单位，讲一讲DP和PT的身世。

注意：

不知道转换系数还好意思说自己是射基湿，转换系数是混乱的屏幕尺寸和PPI世界的灯塔。

当我们谈3P时在谈些什么（DP、PT和SP）

DP和PT是用来定义应用在不同设备、不同DPI下的标准单位。

DP（叫DiP也行）就是Device independent Pixel（设备独立像素）的缩写，PT就是point。PT是apple家的东西，DP是android家的东西，其实就是一个人有两个名字。

总而言之言而总之，它能决定一个设备的转换系数。这在射基湿和程序猿讨（zheng）论（lun）设计标准时大有帮助。

我们再把之前做的按钮“赵四”请出来。

44px的“赵四”用在3GS上，88px的“赵四”用在retina屏上。在3GS上我们给“赵四”做一个20px的内边距，让它的地盘大一点，那么在retina屏上就要给出40px的内边距。在只做非retina屏幕设计时就不用算计retina屏幕应该用多少像素了。

所以我们先以非retina屏幕的按钮当成DP/PT的标准参照。

在上图中“赵四”的大小是44DP，内边距是20DP。在任何PPI的屏幕上，“赵四”都是44DP。

Android和iOS都会通过转换系数让控件适应屏幕的尺寸，这就是为啥使用你屏幕默认的PPI做设计会更好。（如果不是我翻译的错误，完全没有感受到这两句话的因果关系）

SP跟DP不一样，但用法基本一样，SP是用来专门定义文字大小的。SP受用户android设备字体设置的影响，作为射基湿定义SP跟定义DP一样，把清晰易读的大小作为标准（例如16SP的字号易读性就非常强）。

分辨率的花样越多，DP、SP就越凸显出其价值。

关于PPI的设置

之前已经介绍过了PPI、retina和转换系数。现在必须要谈谈你们这些小调皮们经常会问的问题：如果我改变了设计工具里的PPI，会发生什么？

如果你以前就考虑过这个问题，那说明你对你的设计工具还挺熟悉的。我非了挺大劲才理解了这里面一些非常重要的东西。

所有非打印用像素的初始PPI配置

软件中的PPI配置是从印刷品时代继承而来。如果你只做Web设计，那PPI对你的设计基本没什么影响。

软件会把你的设计通过转换系数转换为合适的像素，这就是为什么我们使用转换系数而不是直接使用PPI的具体数值。

再举个栗子，你可以在Photoshop中画一个80px的方块，旁边放一行16PT大小的字，一张72PPI，一张144PPI。

你看，144PPI的画布上字比72PPI上大了1倍，但方块的大小基本没变化。因为Photoshop中PT的显示会根据PPI的值来决定，在2倍的PPI上就有2倍大的文本。那什么情况是以像素作为定义标准呢，看那个蓝色方块，它的大小就没变。一个像素就是一个像素，无论在什么PPI配置下，一个像素还是一个像素，它只受屏幕点对点像素PPI的影响。

以下内容很重要：在进行数字设计时，PPI只会作用在你思考你的设计时，你的工作过程中和在使用PT这种单位时例如字体。如果你的设计源文件中包含了各种不同PPI的配置，项目中会包含各种根据不同PPI转换出来的文件，这是个很大的麻烦。

怎么搞？坚定的使用一种PPI作为设计标准（建议在72~120PPI为1x）。我个人用72PPI，因为这是Photoshop默认的值，而且我的大多数同事也用这个。

建议：

- PPI配置对做web设计基本没有影响。

- PPI配置只会影响那些需要测量独立PPI的单位，例如PT。

- 像素是任何数码的度量单位。

- 记住转换系数和你的设计目的，而不是PPI。

- 做设计时使用通用的PPI配置，这样能让你更容易感知这个设计在目标设备上的效果。

- 设计时使用相同的PPI配置。

读读这个挺有趣的StackExchange post。

驾驭iOS上的PPI

到了讨论特定平台设计的时候了。

让我们从iOS设备开始吧。

从屏幕尺寸和DPI上看，apple有2种尺寸的移动设备和2种尺寸的桌面设备。

移动设备上是iPhone和iPad。

在手机端，你要考虑3GS及更高版本的设备。只有3GS是非视网膜屏幕的。iPhone 5及iPhone 5s与4和4s的DPI相同，只不过脸更长。

如果做iPod touch端设计，按照iPhone去设计就可以了。4代及以下用非视网膜屏幕标准，5代及以上使用视网膜屏幕标准，屏幕尺寸与iPhone 5相同。

最后iPad上的设计除了iPad一代外，都支持iOS7系统（这跟设计有什么关系？），只有iPad2和iPad mini一代的屏幕是非视网膜屏幕。如果你对iPad mini该如何设计很迷茫，你就把它当成iPad 2就行了，只不过个头小点而已，因为mini跟2的分辨率相同，只不过屏幕大小从9.7缩小到7.9。使用相同的设计，在mini上只是看起来小了点。

对于桌面电脑，我们不可能覆盖到apple的每一个尺寸的屏幕。目前据大多数苹果桌面产品的屏幕都采用1x的转换系数例如（Macbook，Macbook Air，old Macbook Pros和台式机），只有13寸和15寸的Macbook Pro才有视网膜屏幕（视网膜屏幕才应该是以后的发展趋势啊，难道不是么。），使用2x的转换系数，这跟iPad和iPhone特别像。如果做桌面设计跟移动设计不一样，那你就要重复做2套适配不同屏幕的设计。

对于1x转换系数，创建一个iOS或者OSX的设计是很容易的。我建议使用1x创建设计，然后再翻倍，放到2x的屏幕上查看效果。这样你在两种系数之间切换查看效果更输入一些，你也可以直接设计2x的，然后再缩到1x，如果你是直接设计视网膜屏幕产品，这样效率更高一些。

Chrome为栗

如上图，我们每次需要准备两张图片。非视网膜屏幕的文件名是xxx.png，视网膜屏幕的文件名是xxx@2x.png。这是iOS设计中的一个通用惯例。

如果你只做iPad设计，我们一般的命名方式是xxx@2x~ipad.png。这是在Chrome中的惯例，在每个部件中重复此方式。不要企图用一个版本覆盖所有DPI。

iOS规则总结：

- @2x一定用在双倍比例的情况下。

- 视网膜屏幕设计图的文件名都加上@2x。

- 每次都创建100%大小和200%大小两种尺寸。

- 同一个切图使用相同的命名，用@2x和~ipad做区分。

- 用100%做设计，然后在放大。

- 存为png格式。

- 以PT为单位作为创建的标准。（个人理解大意是在1x的比例下，在脑子里把px当成pt）

驾驭Android上的PPI

android平台的设备范围可比iOS平台多太tm多了！因为android是开放平台的嘛，限制比较少嘛，追求民主和自由嘛，任何一个OEM厂商都可以在自己的设备上脑残的使用自己定制的android系统。所以你幸运的跳进了各种各样屏幕尺寸和DPI的海洋中。手机做的像平板电脑那么大！平板电脑做的像手机那么小！这！都！不！奇！怪！

因此android平台的设计要使用与iOS平台不同的设计方法。我们先谈一谈转换系数和DPI的种类。

与iOS相同的是你基本有两种设备：手机和平板。（电视呢？手表呢？手机那么大的平板和平板那么大的手机呢？）每种设备都有很多种DPI：ldpi，mdpi，tvdpi，hdpi，xhdpi, xxhdpi and xxxhdpi。（估计xxxxxxhdpi也不远了）

首先找到1x的标准，android系统上是MDPI。

让我们看看下面的转换系数表。

你以为就这些？图样图乃义务。至少还有一个，但不可能只剩这一个。

常见的DPI有四个：MDPI, HDPI, XHDPI and XXHDPI。（作者不严谨啊，一会大写一会小写，我严谨，但是懒，懒得改）

LDPI已经被淘汰了，TVDPI主要在智能电视上用，以及2012版的Nexus 7（奇葩）。这俩DPI你可以在做手机/平板设计时忽略掉（我觉得我们老板不会舍得放弃任何一个设备的用户，幸好他不知道TVDPI这回事）。小提醒，TVDPI（转换系数1.33x）也用在android平台的可穿戴设备上，例如LG G watch，稍后讨论这个。

让我们通过具体设备来看看对应的DPI。（UI设计师下班了，要不一定劳驾她把三星手机都换掉，XXHDPI用smartisan T1）

也许已经有设备使用XXXHDPI了（当然有），但仍然比较小众，如果你有闲工夫，可以考虑让你的app支持XXXHDPI。

Chrome栗再次登场

每个切图你都要提供从MDPI到XXHDPI4种尺寸，不用管LDPI。注意在下面例图中的Chrome，一共有5个尺寸的切图，其中包括了TVDPI。

如iOS设计一样，我建议你先做1x系数的设计图，然后再根据转换系数制作其他尺寸，尤其是android上奇葩的1.33和1.5两个转换系数。

Android上Chrome的后退按钮尺寸如下图所示

注：android官方设计向导中并没有说明建议在文件名后面加上对应的DPI。我们之前一直以此方式命名以便弥补设计工具在导出路径方面不够智能的不足。

考虑到一个切图文件可能会用到上百次，为了避免导出图片时重复命名的错误源文件目录结构将是如下样式：

- drawable-mdpi/asset.png

- drawable-hdpi/asset.png

- etc...

你可以看到，切图是一个32*32dp的方块。android转换系数的特色问题是非整数的转换系数。当你的系数是1.33或者1.5时，最后的结果很可能是一个非整数的像素，这时候你就要取个整数，例如32*1.33=42.56，所以我们取43px。（并没有提到必须使用四舍五入）

android的一些规则：

- android有7种DPI，你需要认真研究4种：mdpi,hdpi,xhdpi,xxhdpi。以及马上要支持的XXXHDPI。

- 以MDPI作为1x的设计基础。

- 在android上单位使用dp，其实与pt是一个意思。

- 1x设计中选择合理的像素数。

- 存为png格式。

- 与负责人确认命名规范与存放目录。

Mac和Chrome操作系统上的PPI

OSX和Chrome OS在PPI的处理上基本相同。

都是有两个PPI，一个1x，一个2x。跟apple的产品差不多。即使现在大多数用户使用的都是低分辨率OSX或者Chrome OS，我强烈提醒你未来一定是属于高分辨率屏幕的。未来在web-app或website设计时使用高分辨率设计才不会浪费时间。

目前有三种高分辨率设备，Macbook pro 13",15"和Chromebook Pixel，并且Chromebook Pixel的屏幕是触屏。

还是Chrome栗

Chrome浏览器的工具栏按钮是一个完美的栗子（三道杠完美在哪里？因为这是大队长？）。我们在跨平台上使用相同的设计，虽然代码不一样，但界面视觉是一样的，请仔细看图。

建议

- Chrome OS和OSX都有两个转换系数，1倍和2倍。

- 只有Chrome OS高分辨率屏幕才支持触屏。

可伸缩设计

无论你的app在移动端还是桌面端，你总会需要可伸缩设计的。

可伸缩时设计通过代码保证你需要的元素可以有伸缩到它适合的大小而不改变其质量。

它与可复用的元素使用方法不同，虽然有时候看起来是一样的。

看下面Chrome的例子，iOS上的工具栏实际是竖条像素不停的在X轴重复，直至填满屏幕。

让我们看看不同平台如何处理可伸缩元素。

iOS上的可伸缩元素

对于设计师来讲在iOS平台做可伸缩元素比较容易，因为可以在代码中实现，你只要准备好实现可伸缩元素的最小基本图像就可以了，然后控制它的伸展方向，横向纵向或者又横又纵随您意。看iOS上的Chrome的按钮如下。

Android上的可伸缩元素

Android上跟iOS上不太一样，在Android上更依赖设计师的能力。

在android平台上你就要用.9图了。.9图的方式是在元素四周布置4条线，它们要在传送图片时同时传送，直观的显示元素的规格。

这些线定义了两件事：可扩展的面积和可填充的区域。一旦定义了这两件事，代码就可以按照你的定义按要去拉伸元素。

仍然用android端的Chrome做示范。

如图所示，.9格式定义了一个#000000的bar，在任何DPI下都是1px，这是一个代码指令。拉伸区域不包括圆角，因为圆角难以重复（就算重复了也非常难看）。在栗子中我们给按钮加了一个10dp的填充，不过这个你不必规范。.9格式在切图时需要一个100%比例的透明切图，否则是不行的。

.9格式图片需要你在命名文件时在后面加上.9，例如下图。

你需要注意你的.9图片尺寸，如果我为了演示而把它做的很大，你必须通过把它的最小基本图像减小到最小以便优化元素的体积。I kept the corners as they were but reduced the stretchable and content area to a minimum.没做过.9图，实在翻译不明白。

Be careful that the 9-patch markings do not overlap your design and that the cut of the asset is correct. The .9 should be as close to the asset as possible without overlapping it, try not to build-in padding. The example before has built-in padding because of shadowing.

.9图不会在每种DPI下通用，所以你必须做多个版本的。

最后，.9图可以向多个方向延伸，虽然在我的工作中遇到的情况不多，但值得注意。

建议：及时询问负责项目的人，最佳的解决方案是什么，尤其是桌面设计。图片越多，应用的体积就会越大，在优化和更新程序时非常麻烦，要学会恰当使用.9图。

触摸行为和触摸目标

首先要清楚的是触摸与DPI没有关系，但是在做UI和元素设计时，必须要注意触摸与DPI的关系。

决定是否支持触摸由你所做的app决定。app如何定位，以及应该有什么样的用户体验。

我们简单划分一下：非触摸的桌面应用和可触摸的移动设备。

非触摸桌面设备

我们不回顾历史了，除非你是2005年之后才出生，你应该知道电脑的设计并不是以触摸为中心的。

我们使用键盘和鼠标这种精确控制工具，鼠标的精度是1pt，理论上你可以创建一个1x1pt的按钮，你也能点击到。

上图是把Chrome OS的鼠标放大20倍，红色区域就是点击识别控制区，非常的精准。

那什么点击是不精确的呢？你懂的，就是我们的手指。

那触摸设计该怎么做？把要点击的元素放大呗。

手指的大小

下面是两个鼠标点击和手指点击的常用大小示范，它们代表了触控时可识别的范围。实际的触控区域其实比可识别范围小，除非你把手指都贴在屏幕上。

当设计触控区域是，比较保险的办法就是在允许范围内尽量把识别区域做大，而不是做小。

如何运用在我的设计工作中

如我们所知道的，英寸和厘米在像素界都不是那么方便使用的，实际上用像素也不是特别好的办法。说来说去的，到底怎么设计触控识别区域？（卖关子卖上瘾了）

我的态度很明确，你需要不断的在你的目标设备上反复尝试，总结。

长话短说，在每种OS上都有一个触控识别的安全像素值。

各个设备上的建议触控识别区域

需要注意的是这些建议尺寸虽然具有参考性但都不代表真实的物理尺寸，它们用于设备制造商、OEM厂商在开发设备时的尽量保证体验一致性。

每种平台都有自己的建议尺寸，不过都是48pt左右，windows平台还包含了个内边距，我已经把它放在图上了。

尺寸的差异源于不同的因素。

Apple自己控制硬件制造，所以他们对于触控识别的质量有很可靠的保证，它们在小型设备上也能保证识别精度，并且apple确实设计了很多小尺寸设备。

Android和windows都有很多的OEM厂商，每个厂商都生产自己的设备，所以识别区域做大点更安全。在这两个平台上界面中的元素间距也比较大，并且一般设计的也都是大尺寸设备。

Chrome栗

蓝色区域就是触控识别区域。

如图所示每个平台的触控识别区域，iOS上是44x44pt，android上是48x48pt。其他的平台虽然不要求统一使用某种标准，但以上的尺寸是一个可参考的最小识别区域建议。

Windows 8 And Chrome OS

win8和Chrome OS都有触控和非触控两种支持，如果你设计win8的应用，建议参考guidelines for touch targets。

Chrome OS的设计规范也已经发布了，像素范围不大。由于Chrome OS的应用都是web app，所以我建议在设计时就考虑可触控识别，我的建议是参考Android touch targets guidelines。

Web，混合控制设备和畅想

如果你做移动端设计，毫无疑问要做触控支持。如果做桌面端设计，不用太考虑触控的支持。虽然听起来容易，但及其容易忽略新趋势：混合控制设备。

混合控制设备就是既可以触控又可以使用鼠标键盘的设备，例如Chromebook Pixel, the Surface Pro and the Lenovo Yoga。

这种设别该怎么设计，虽然没有绝对正确的设计标准，但我的建议是按照可触控设备的标准去做，这是技术进化的方向。

如果你做web设计，也最好提早考虑触控的支持。

建议：

- 以后做设计时一定要考虑移动端，考虑支持触控。

- 使用每个平台的建议触控识别区域大小，这能帮助你做更好的设计，保证在不同平台上有好的体验。但这只是个建议，不代表你必须只能按照这个要求去做，最终还是要根据你的经验去做设计。

以下软件介绍、参考文献和作者简介就不翻译了

Design software

The software doesn't make the designer, but choosing the right software for the task at hand can improve your productivity and ease of work by quite a bit. Software "know-hows" shouldn't be your only skill but learning and mastering the right tool will be a great asset to make your ideas happen.

When it comes to handling DPI variation in interface design, different software work in different ways. Some are better at particular tasks than others. Here are the most common:

Photoshop

The mother of interface design tools. Probably the most used tool out there today. There is an infinite amount or resources, tutorials, articles for it. Photoshop has been around almost since the beginning of interface design.

As its name suggests, the first intention of the program wasn't interface design but photo or bitmap retouching. It evolved over the year and with the birth of interface design, designers appropriated it and re-purposed it. Part of this was because they were used to it and because it was the only program around that was able to do things as good as needed.

Photoshop is, to this day, the master of Bitmap editing and is still the most used program out there for UI design. Its decades long legacy makes it a hard program to approach and learn though. As a gigantic swiss army knife of a software, you'll be able to do anything, but not always in the most efficient way.

As it it bitmap based initially, it is DPI dependent, the opposite of Illustrator and Sketch described below.

Illustrator

Photoshop's vector based sibling. As its name indicates, it is aimed at Illustrators but it is also usable as an interface design tool.

Illustrator is suited for print design as well so its interface, color management, scale, rulers and units may throw you off at first and it requires a few tweaks to be easily usable for interface design only. Like Photoshop, it is an incredibly powerful tool with a steep learning curve.

What differs from Photoshop is that it is DPI independent due to its reliance on vector shapes. Contrary to bitmap or raster images, graphics made using vector shapes, relying on mathematical formulas, will be rescaled programmatically without any quality loss.

Understanding the difference between rasterized and vectorized image is key to build scalable visual design and assets.

If you want to get started with using Illustrator for web/interface design, I recommend reading "My vector workflow" by @janoskoos.

Sketch 3.0

Sketch is new compared to Photoshop and Illustrator. With only 4 years of age, this program generated a lot of hype (in a good way) in the UI designer industry. The reason is that Sketch is aimed, from the start, to be used by interface and UX designers. Without the legacy of Photoshop or Illustrator, Sketch positions itself as the perfectly adapted tool for the niche audience that is interface designers.

Sketch is suited for fast wireframing as well as more complex visual design. It is entirely vector based, like Illustrator, with a minimal and well thought UI. The combination of artboards and the ease of use and flexibility of its asset generation system makes it the fastest tool for multi-DPI and multi-platform design. The recent release of its 3.0 version make it a very solid alternative to Photoshop.

On the downside, Sketch is supported by a smaller team and is still fairly recent. Its team is extremely reactive but doesn't have the scale of the Adobe (Photoshop and Illustrator) one. Sketch offers (by design) the bear minimum when it comes to bitmap edition. Photoshop will be more suited for this kind of job. Finally, due to its fairly still young life, the resources in term of source files, tutorials and overall community is orders of magnitude smaller than Photoshop. That being said, the community is very active and motivated.

On a more personal note, I've been a Photoshop user since I started design 8 years ago but I recently switch to Sketch 3.0 for the most part of my design process. This is not a judgement of quality, Photoshop is still a hell of a good program, it just suits my needs better.

If you want to learn more on my particular experience I encourage you to read my "A month with Sketch 3.0" article or my "Sketch tutorial_01".

Want to get even deeper and understand how vectors work in sketch ? Head to @pnowelldesign's article "Harnessing vector awesomeness in Sketch"

Takeaway:
There is no perfect tool for the job but the one you are comfortable using. If you can afford the time an money, I recommend you try them all to make up your own opinion.

Doc and resources

This guide was only an introduction, time to start doing and learn more. Here are a few links if you want to learn more or simply get more details about the subjects we discussed here:

Platform documentation
Android UI guidelines
Google Material guidelines
iOS7 UI guidelines
Windows UI guidelines
Google dev Principles of site design

Cheat-sheets and templates
Screen sizes, ratio and PPI
iOS7 designer cheat sheet
iOS7 design resource (requires Apple account)
App icons template, Android and iOS
Bjango blog (A design article gold mine)
iPhone GUI and iPad GUI(.psd) by @teehanlax

Tools
Density converter by @brdrck
Android asset generation by @brdrck
Android design tips by @destroywerk and @BPScott
9patch creation in Android by @romannurik
Android asset studio by @romannurik. Lots of great tools for Android specific asset creation.

Learn more and other reads
Device independent pixel formula for Mobile devices
More information about 4K by Cnet.com
More informations about touch targets by Smashing Mag
The Android Screen Fragmentation Myth

About

I'm Sebastien Gabriel aka @Kounterb and I'm a visual designer for @googlechrome. I like towrite things and create freebies.

One thing I wish I had when I started is a clear guide explaining to me what DPI is and what the challenges of multi-platform design were going to be. This is what I'm trying to do here. By designing Chrome for almost every platforms out there, I learned a lot about these subjects and this is my effort to try and deliver it in the simplest way possible. As mentionned in the intro, if you think I got anything wrong, if anything lacks detail or if you would like to learn more about something, send me a message at sgabriel.contact@gmail.com.