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

干货 ：屏幕分辨率那些事儿 小编推荐 ：你是否遇到过显示分辨率的问题 ？是否搞不清 那些DPI PPI 4 K px HD 等各类 名词的区别 ？是不是每次还在纠结各类屏幕间的关系 ？作为一个时常被抓去做设计的壮丁 ， 小编一听分辨率兼容就头疼 ，本文图文结合并且轻松愉快的讲解了有关分辨率、显示屏的专 有名词 ，妈妈再也不用担心我的界面不兼容了~yeah~ DPI和PPI DPI （Dot s Per Inch ）最初用于衡量打印物上每英寸的点数密度 ，就是说你的打印机可以在一英寸 内打多少个点。DPI值越小图片越不精细。 当DPI的概念用在计算机屏幕上时 ，就应称之为PPI （Pixels Per Inch ）。同理 ： PPI就是计算机屏 幕上每英寸可以显示的像素点的数量。你说 DPI大伙也能理解。 W indows系统默认PPI 为96 ， Mac O S系统默认PPI 为7 。 一般非视网膜屏幕的桌面电脑的 PPI在7 到1 0之间。使用 7 到1 0 之间的PPI进行设计基本可以 保证你的作品尺寸在大多数情况下看起来都差不多。 举个栗子 ： 7″Mac的PPI是109 ，意思是每英寸有109个像素。显示器宽度 （含边框 ）为 5.7英寸 ，屏幕纯宽度 差不多 3.5英寸 ，所以 3.5×109 ≈ 560 ，由此可知屏幕的分辨率为 560×144 0px。 *我知道 3.5×109不等于 560 ，实际上应该是 3.4 86 3853 英寸 ，用像素/厘米能更精确点。我就 是举个栗子 ，你懂的。 PPI在设计中的影响 假设你设计了一个109×109px的蓝色方块 ，并且这个方块的物理尺寸为1×1英寸。如果你的屏幕 是7 PPI的 ，那这个方块看起来就要比实际的物理尺寸更大点 ，因为7 PPI的屏幕要显示109px差不 多需要1.5英寸才行。 屏幕分辨率 屏幕分辨率对用户感知你的设计影响老大了。幸好CRT 显示基本已经被淘汰了 ，用户使用液晶显示 器时基本都使用显示器的原生分辨率 ，这样看起来更舒服嘛。 分辨率就是屏幕上的像素数 ，例如 560×144 0px的屏幕 ，屏幕横向有 560个像素 ，纵向有144 0个 像素 ，结合PPI的含义 ，你应该明白分辨率不是物理尺寸的定义。你可以有一个像你们家一面墙那 么大的屏幕或者像你的脚趾盖那么大的一块屏幕 ，它们的分辨率都是可以是 560×144 0px。 现在的液晶显示器都是有原生固定分辨率的 （译者 ：我一般称为点对点分辨率 ），这根CRT 显示器 的原理不同 ，在这就不细掰扯了。 咱的 7“Mac显示器有 560×144 0px的点对点分辨率 ，109PPI。如果把屏幕分辨率调低 ，你就会发 现屏幕上的窗口啊 ，ico n啊啥的东西都变大了 ，因为 3.5英寸上的像素变少了。 其实像素还是那么多像素 ，PPI还是那个PPI ，它们就在那里不多不少。我说像素变少了的意思是当 你把屏幕分辨率调低时 ，操作系统会通过拉伸来填充屏幕 ，这个时候CPU/GPU会用点对点的像素 计算出来一套新的分辨率。 如果你想把 7”Mac的分辨率设为1 80×7 0px ，GPU就会把4个像素当成1个像素用 （ × ）。这能 咋的 ？当然是变糊了 ！这还算好的呢 ，毕竟是可以整除的像素 ，如果你弄什么三分之一、四分之三 这种幺蛾子 ，换算出来就有小数 ，那就更糊 ！不信你看下面的图。 例如下面这个例子 ，在点对点屏幕上拉一条1px的线 ，然后把屏幕分辨率降低一半 ，为填充 屏幕 ，CPU必须以150%的形式展示视觉效果。相当于所有元素都变为之前的1.5倍 ，但是又没有半 个像素 ，所以只能通过减低填充像素颜色的纯度达到目的。 这就是为啥在你用ret ina屏的Macboo k Pro 时如果要更改分辨率 ，系统会提示你此分辨率下的视觉 效果 （如下图 ），用户可以直观的感受到分辨率的变化。 用像素代表物理尺寸是非常主观的表现 ，但他们觉得这不算忽悠。 记住 ：如果你想在查看设计时尽可能保持像素完美 ，一定要将屏幕分辨率设置为显示器的点对点原 生分辨率。虽然你可能觉得使用低分辨率更舒服些 ，但在像素层面查看设计时必须要尽可能精确。 悲剧的是 ，有的人为了看的更清 会使用辅助功能 ，这会让你的作品看起来丑的要死 ，好在这时候 用户是为了看的更仔细而不是为了扣细节。 4 K是啥 ？ 最近你可能经常听到有人说4 K ，4 K现在老时髦了。唠4 K之