屏幕分辨率是干嘛的(干货屏幕分辨率那些事儿)

小编推荐：你是否遇到过显示分辨率的问题？是否搞不清楚那些 DPI PPI 4K px HD 等各类名词的区别？是不是每次还在纠结各类屏幕间的关系？作为一个时常被抓去做设计的壮丁，小编一听分辨率兼容就头疼，本文图文结合并且轻松愉快的讲解了有关分辨率、显示屏的专有名词，妈妈再也不用担心我的界面不兼容了~yeah~

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。