DPI指南  文章结尾有很多资源

【基础概念】

DPI（Dots Per Inch）

图像分辨率所使用的单位：在图像中每英寸所表达的像素数目。

PPI（Pixels Per Inch）

打印分辨率使用的单位：每英寸所表达的打印点数。

px=pixel  “相对大小”

px是一个点，它不是自然界的长度单位

如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。

pt=point  “绝对大小”

是印刷行业常用单位，等于1/72英寸

使用px定义文字，无论用户怎么设置，都不会改变大小；

使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。

px = pt * DPI / 72

px/pt=96/72=4/3(DPI=96时)

px/ppi=inch;左边正好1英寸，右边需要1.5英寸来显示 屏幕PPI固定时，调整屏幕分辨率，物体会被放大

屏幕的原始分辨率是2560*1440px。如果分辨率减小，像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙，使得整个屏幕被填满。

如果想要设置27寸屏幕分辨率为1280*720（之前宽的一半，高的一半），GPU会让一个像素点变成原来的2倍大来填充屏幕，那么结果就是会变得模糊。

在原始分辨率的屏幕上画一条1px的线，然后设置分辨率为50%。

为了填满屏幕，CPU需要制造150%的视觉效果，所有像素点都要乘以1.5，1*1.5=1.5，但是因为不能有半个像素点，这就使得填充周围的像素点的颜色只有一部分，便产生了模糊。

如果你希望你的设计精确到像素，那么最好不要改变原始分辨率。

什么是像素比

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

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

一个是标准PPI（iPhone 3）的Jim.png版本，一个是200%PPI（iPhone 4）的Jim@2x.png版本。

什么是DP、PT、SP

DP(Dip)表示独立于设备的像素点，PT表示点。

DP用在Android上，PT用在Apple上，但是他们本质上是相同的。

SP表示与比例无关的像素，通常用来定义字体大小。

从技术上给Jim添加20px的padding，在Retina上padding是40px。

但是，当你基于非Retina屏幕设计时计算Retina的像素值并没什么意义。

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

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算。

这就是为什么我发现使用屏幕的原始的PPI设计会更简单。

什么是视网膜显示屏

“Retina（视网膜）显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。

这个说法在现在的设备的屏幕范围内是正确的，但是随着屏幕越来越好，我们的眼睛也会被训练得足够感知像素点，特别是圆形的UI元素。

从技术的角度来讲，他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。

“如果我在设计工具里改变PPI配置，会发生什么呢？”

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

你的画布和图像总是会被被软件按照对应的像素比换算成像素点。

这就是我们使用像素比而不直接用PPI值的原因。

在PS里更改PPI 后，图形大小不变，文本大小改变

原因就是Photoshop按照PPI值放大了pt值，结果在PPI值变为两倍的情况下文本大小增加为原来两倍。

而用像素定义的蓝色正方形，保持了原来大小。

像素就是一个像素点，不管PPI怎么配置它会一直保持一个像素。

造成图形（像素定义）大小变化的是用来显示它的屏幕的PPI值。

PPI配置对输出到web上的设计毫无影响。

PPI配置只对基于PPI独立计量（比如PT）产生的图案有影响。

像素是任何数字化设计的度量单位

保持像素比以及设计的目标，而不是PPI

在进行数字化设计时使用实际的PPI配置，你会感受到它在目标设备上的样子

在你的文件中自始至终保持相同的PPI配置

---

如图所示，每次请求资源需要传送两张图片。

【iOS规则集】

@2x的资源必须始终是1x资源的两倍。

Retina资源加上@2x.

始终创建100%和200%比例的图片。

1x和2x的资源始终要保持名字相同。

在100%比例下开始设计，然后做乘法。

传递.png格式的图片。

使用pt创建规范而不是px。

---

Android设备按照不同DPI分为：ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi 每次请求资源都需要传递一组4张图片:MDPI, HDPI, XHDPI和XXHDPI

【Android规则集】

Android有7种不同的DPI，你需要关注其中的4个：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未来，可以关注XXXHDPI。

MDPI是基础的DPI或者1x像素比

Android使用dp代替pt当作参数规格，但是他们是一样的。

用你最好的判断来处理小数像素比。

传递.png格式图片。

确保检验命名约定，与执行负责人共同完成输出进程。

在像素世界英寸或者厘米并不是一个好的计量方法，即使是像素也不是真正好的计量方法。

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

Adobe Illustrator也很适合平面设计，也是一款很强大的工具，需要付出努力去学习。和Photoshop不同的是，它是独立于DPI的，因为它依赖矢量图。与点阵图或者光栅图相反，图像生成采用矢量图，依靠数学公式计算，以编程方式重新调节大小并且不会损失图片质量。

Sketch是小团队开发的，而且出来得比较晚。从一开始，Sketch的目标就是供界面和UX设计师使用，没有Photoshop和Illustrator的历史积累，Sketch把自己定位成针对小众用户——界面设计师的一款完美的调整工具。

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