鲁达 本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表，只是按照划分直截了当地将内容呈献给读者，便于读者理解以及直接运用到设计过程中，非常实用且专业的知识，记得收藏唷。
什么是DPI、PPI？
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个像素点。斜角长是25.7英寸（65cm），实际屏幕的宽度大概是23.5英寸，23.5109约等于2560，因此原始屏幕分辨率就是25601440px。
我知道23.5109不是恰好等于2560.实际上是23. 486238532英寸。要是用每厘米的像素点计算，会更加准确，但是这里你知道就行。
影响
在屏幕上设计一个前面我们讨论过的109*109px的蓝色正方形。
这个正方形在1*1英寸的屏幕上有一个初始的物理尺寸，但是如果用户的PPI是72，蓝色正方形就会显得更大。因为PPI是72时，屏幕需要大约1英寸半的尺寸来展示109px的蓝色正方形。模拟效果如下图所示：
附加： 不考虑颜色和分辨率差异，因为每个人看到的设计都是不同的。你应该力求达到平衡，满足大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。
屏幕分辨率（原始分辨率）
屏幕分辨率对用户如何理解设计有很大的影响。幸运的是，自从LCD显示器代替了CRT，现在的用户更趋向于使用原始分辨率，它保证了好的屏幕尺寸或者说PPI比例。
分辨率定义了屏幕上显示的像素数量（比如：27寸的显示器分辨率是25601440px，2560是宽，1440是高）。在了解了PPI之后，我们就知道它不是一个测量物理大小的单位。你可以有一个25601440屏幕，它能跟墙一般大，也可以跟脑袋一般小。
如今的LCD显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去的CRT显示器稍有不同，这里就不赘述了。
一个27寸的影院显示屏，原始分辨率为2560*1440px，PPI为109。如果减小分辨率，元素将会显示得更大，因为有23.5英寸的水平宽度需要数量远远不够的像素点来填满。
如例子所示，屏幕的原始分辨率是2560*1440px。如果分辨率减小，像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙，使得整个屏幕被填满。GPU/CPU会捕获所有像素点并且使用新的比例重新计算他们。
如果想要设置27寸屏幕分辨率为1280*720（之前宽的一半，高的一半），GPU会让一个像素点变成原来的2倍大来填充屏幕，那么结果就是会变得模糊。在分辨率为原来一半的时候，因为有简单分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4，最终会以小数点结束，就不能等分一个像素点了。我们来看下面的例子：
思考后面的例子：在原始分辨率的屏幕上画一条1px的线，然后设置分辨率为50%。为了填满屏幕，CPU需要制造150%的视觉效果，所有像素点都要乘以1.5，1*1.5=1.5，但是因为不能有半个像素点，这就使得填充周围的像素点的颜色只有一部分，便产生了模糊。
这就是为什么当你想要改变一台Retina Macbook Pro的分辨率的时候，系统会展示下面的窗口来让你知道（下面的屏幕截图）这个分辨率会“看着像”1280*800px，它采用用户的分辨率经验来表达尺寸比例。
这些描述带有浓重的主观色彩，因为它用像素分辨率作为衡量物理尺寸的单位，虽然不够严谨，但至少他们觉得是对的。
附加：如果你希望你的设计精确到像素，那么最好不要改变原始分辨率。你也许觉得使用小的比例会更舒服，但是当涉及到像素点时，这样会影响精确性。有些时候，用户会把调整分辨率当作在控制屏幕（特别是桌面）美观程度的方式，这样虽然会让设计看起来不太好，但是可以满足用户对易读性的需求。
什么是4K
你也许听到过很多次4K，它在最近非常流行。在了解它是什么之前，我们需要先弄明白“HD”的含义。
需要事先声明的是，本文是简化版本，所以这里只考虑最常见的分辨率。HD有不同的类别。
它适用于从1280*720px或720p开始的720水平的任何分辨率。一些地方也将这个分辨率SD叫做标清。
全高清适用于1920*1080px的屏幕。大多数的TV以及越来越多的高端手机（Galaxy SIV，HTC one，Sony Xperia Z，Nexus5）都是这个分辨率。
4K始于3840*2160像素，它也叫做Quad HD，被称为UHD超高清。简而言之，你可以放4个1080p的像素点在4K的屏幕上。
另外一个4K的分辨率是4096*2160，这个稍微大一点，一般用在投影仪和大画幅相机上。
如果我外接一个4k的显示器到电脑会发生什么呢？
最新的OS不再参照4K的比例，这意味着给Chromebook或者macbook外接一个4K显示器，将会使用最高的DPI。假如这样，200%或者@2x，按照正常比例展示就会看起来很好但是有点小。
假设的例子：如果你外接一个12寸4k屏幕到12寸高清屏幕（2x）的电脑，所有东西都会显得小了两倍。
附加:
- 4k就是四倍全高清。
- 如果现在的OS掌握了4k但是又不按照比例来，这说明现在还没有特定的4k资源。
- 如今没有手机或者平板电脑使用4k.
显示器赫兹
稍微从PPI和屏幕分辨率中休息一下，来看个小知识。你可能注意到在屏幕设置中靠近分辨率的地方有显示器的Hz值，它和PPI没什么关系，显示器赫兹或者刷新频率是显示器每秒展示固定图像或者帧的速度单位，比如一个60 Hz的显示器每秒可以显示60帧，同样，一个120 Hz的显示器每秒可以显示120帧。
在UI环境中，显示器赫兹（Hz）决定了动画的流畅和精细程度，大多数的屏幕都是60Hz。而每秒显示的帧数依赖于设备处理图像的能力，像在Atari 2600使用120Hz屏幕就没有太大的用处。
下面这个例子，可以帮助大家更好地理解。T-rex同时在60Hz和120Hz的屏幕上以完全相等的步伐快速从A点到B点，60fps的屏幕上展示了9帧动画，而在相同时间内120fps的屏幕展示了2倍帧数，并且动画在120Hz屏幕上会显得更加流畅。
附加: 也许有人会说，每秒显示60帧以上人眼是无法识别的，这是错误的。
什么是视网膜显示屏
“Retina（视网膜）显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。
这个说法在现在的设备的屏幕范围内是正确的，但是随着屏幕越来越好，我们的眼睛也会被训练得足够感知像素点，特别是圆形的UI元素。
从技术的角度来讲，他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。
iPhone 3G/S是3.5英寸的斜角，分辨率为480320px，PPI为163。 iPhone 4/S是3.5英寸的斜角，分辨率为960640px，PPI为326。
事实证明正好是两倍的关系，同样的物理大小，屏幕上的元素却有两倍的清晰度，因为他们有两倍的像素点。1个标准的像素＝4个Retina像素，像素的四倍。
思考下面的例子，在复杂设计中如何直接应用：
图注：在第三方设备上很难模拟出来自不同设备的不同图片质量，如上图所示，Retina的音乐播放器虽然与iPhone 4的音乐播放器有相同的物理空间，但图片质量看上去比iPhone 4好了两倍并且更清晰。如果大家想在本地进行验证，我会提供免费的演示事例源码，供大家下载（）。
因为“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上看起来更好，需要创建一个它两倍大小的版本。下面就是我们做的。
很简单。现在的Jim，一个是标准PPI（iPhone 3）的Jim.png版本，一个是200%PPI（iPhone 4）的Jim@2x.png版本。
现在你也许会问，“等等啊！我很确定还有其他的像素比，不止这两个。”有，这是一个噩梦。好吧，也许不是噩梦，但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比。幸好这也没有你想象的那么严重，我们后面再说。
让我们先说说单位，因为现在比起像素，你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方。
附加: 对于每一个你正在做的设计，像素比都是需要知道的。像素比把屏幕大小和PPI结合起来，让人们更理解它们。
这是上半部分的内容。记得关注我继续看下半部分。
原文地址：photoshoptutorials