如何做跨DPI设计
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 英寸，用像素/厘米能更精确点。我就是举个栗子，你懂的。
屏幕分辨率
屏幕分辨率对用户感知你的设计影响老大了。幸好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倍。原来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使用的。 你可能会纳闷：“肯定不止只有这一种转换比例。”有啊，必须必的有啊，而且有多少比例就有多少噩梦。好了啦，不吓你们了。我确定一定以及肯定
注意：
不知道转换系数还好意思说自己是射基湿，转换系数是混乱的屏幕尺寸和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屏幕设计时
在上图中“赵四”的大小是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。
72ppi
144ppi
你看，144PPI的画布上字比72PPI上大了1倍，但方块的大小基本没变化。因为Photoshop中PT的显示会根据PPI的值来决定，在2倍的PPI上就有2倍大的文本。那什么情况是以像素作为定义标准呢，看那个蓝色方块，它的大小就没变。一个像素就是一个像素，
怎么搞？
坚定的使用一种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系统（这跟设计有什么关系？），只有iPa
iPadmini
小结
对于桌面电脑，我们不可能覆盖到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。
LDPI
MDPI
TVDPI
HDPI
XHDPI
XXHDPI
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图，实在翻译不明白。
.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设计，也最好提早考虑触控的支持。
建议：
- 以后做设计时一定要考虑移动端，考虑支持触控。
- 使用每个平台的建议触控识别区域大小，这能帮助你做更好的设计，保证在不同平台上有好的体验。但这只是个建议，不代表你必须只能按照这个要求去做，最终还是要根据你的经验去做设计。
评论（5）