干货：屏幕分辨率那些事儿

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倍。

再举个栗子。