基础知识学起来!为设计师量身打造的DPI指南.pdf

基础知识学起来！为设计师量身打造的 DPI 指南 本文是为 初学者“ ”或者作为从一开始就想要学习更多跨 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 ，因此 原始屏幕分辨率就是 x 。 我知道 23.5109 不是恰好等于 2560. 实际上是 23. 486238532 英寸。要是用每厘米的像素点计算，会 更加准确，但是这里你知道就行。 影响 在屏幕上设计一个前面我们讨论过的 109*109px 的蓝色正方形。 这个正方形在 1*1 英寸的屏幕上有一个初始的物理尺寸，但是如果用户的 PPI 是72 ，蓝色正方形就会 显得更大。因为 PPI 是72 时，屏幕需要大约 1英寸半的尺寸来展示 109px 的蓝色正方形。模拟效果如 下图所示： 附加： 不考虑颜色和分辨率差异，因为每个人看到的设计都是不同的。你应该力求达到平衡，满足 大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。 屏幕分辨率（原始分辨率） 屏幕分辨率对用户如何理解设计有很大的影响。幸运的是，自从 LCD 显示器代替了 CRT ，现在的用 户更趋向于使用原始分辨率，它保证了好的屏幕尺寸或者说 PPI 比例。 分辨率定义了屏幕上显示的像素数量（比如： 27 寸的显示器分辨率是 x ，2560 是宽， 1440 是高）。在了解了 PPI之后，我们就知道它不是一个测量物理大小的单位。你可以有一 屏幕，它能跟墙一般大，也可以跟脑袋一般小。 如今的 LCD 显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去 的CRT 显示器稍有不同，这里就不赘述了。 一个 27 寸的影院显示屏，原始分辨率为 2560*1440px ，PPI 为 109 。如果减小分辨率，元素将会显 示得更大，因为有 23.5 英寸的水平宽度需要数量远远不够的像素点来填满。 如例子所示，屏幕的原始分辨率是 2560*1440px 。如果分辨率减小，像素点还是被展示在 PPI 为 109 的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙，使得整个屏幕被填满。 GPU/CPU 会捕 获所有像素点并且使用新的比例重新计算他们。 如果想要设置 27寸屏幕分辨率为 1280*720 （之前宽的一半，高的一半）， GPU 会让一个像素点变 成原来的 2倍大来填充屏幕，那么结果就是会变 得模糊。在分辨率为原来一半的时候，因为有简单 分频器的存在可能看着还算可以。但