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

基础知识学起来 ！为设计师量身打造的DP I指南 本文是为“初学者”或者作为从一开始就 要学习更多跨DPI和跨平台设计知识的中级设计师准备的序 言读物。 没有复杂的计算和不可分析的图表 ，只是按照划分直截了当地将内容呈献给读者 ，便于读 者理解以及直接运用到设计过程中 ，非常实用且专业的知识 ，记得收藏唷。 什么是DPI、PPI ？ DPI （Dot s Per Inch ）是测量空间点密度的单位 ，最初应用于打印技术中 ，它表示每英寸能打印上 的墨滴数量。较小的DPI会产生不清晰的图片。 后来DPI的概念也被应用到了计算机屏幕上 ，计算机屏幕一般采用PPI （Pixels Per Inch ）来表示一 英寸屏幕上显示的像素点的数量 ，现在DPI也被引入。 安装W indows操作系统的电脑屏幕PPI的初始值是96 ，Mac的初始值是72 ，虽然这个值从80年代起 就不是很准确了。 一般来说 ，非ret ina桌面 （包括Mac ）的PPI的取值区间在72- 120之间 ，因为这个 取值区间能够确保你的作品在任何地方都能保持大致相同的比 例。 这里有一个应用实例 ： 27寸Mac影院显示屏的PPI是109 ，这表示在每英寸的屏幕上显示了109个像 素点。斜角长是25 7英寸 （65cm ），实际屏幕的宽度大概是23 5英寸 ，23 5109约等于2560 ，因此 原始屏幕分辨率就是2560144 0px。 我知道23 5109不是恰好等于2560 实际上是23 4寸。要是用每厘米的像素点计算 ，会 更加准确 ，但是这里你知道就行。 影响 在屏幕上设计一个前面我们讨论过的109* 109px的蓝色正方形。 这个正方形在1* 1英寸的屏幕上有一个初始的物理尺寸 ，但是如果用户的PPI是72 ，蓝色正方形就会 显得更大。因为PPI是72时 ，屏幕需要大约1英寸半的尺寸来展示109px的蓝色正方形。模拟效果如 下图所示 ： 附加 ： 不考虑颜色和分辨率差异 ，因为每个人看到的设计都是不同的。你应该力求达到平衡 ，满足 大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。 屏幕分辨率 （原始分辨率 ） 屏幕分辨率对用户如何理解设计有很大的影响。幸运的是 ，自从LCD显示器代替了CRT ，现在的用 户更趋向于使用原始分辨率 ，它保证了好的屏幕尺寸或者说PPI比例。 分辨率定义了屏幕上显示的像素数量 （比如 ：27寸的显示器分辨率是2560144 0px ，2560 是宽 ，144 0是高 ）。在了解了PPI之后 ，我们就知道它不是一个测量物理大小的单位。你可以有一 个2560144 0屏幕 ，它能跟墙一般大 ，也可以跟脑袋一般小。 如今的LCD显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去 的CRT 显示器稍有不同 ，这里就不赘述了。 一个27寸的影院显示屏 ，原始分辨率为2560* 144 0px ，PPI为109。如果减小分辨率 ，元素将会显 示得更大 ，因为有23 5英寸的水平宽度需要数量远远不够的像素点来填满。 如例子所示 ，屏幕的原始分辨率是2560* 144 0px。如果分辨率减小 ，像素点还是被展示在PPI为109 的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙 ，使得整个屏幕被填满。GPU/CPU会捕 获所有像素点并且使用新的比例重新计算他们。 如果 要设置27寸屏幕分辨率为1280*720 （之前宽的一半 ，高的一半 ），GPU会让一个像素点变 成原来的2倍大来填充屏幕 ，那么结果就是会变 得模糊。在分辨率为原来一半的时候 ，因为有简单 分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4 ，最终会以小数点结束 ，就不能 等分一个 像素点了。我们来看下面的例子 ： 思考后面的例子 ：在原始分辨率的屏幕上画一条1px的线 ，然后设置分辨率为50%。为了填满 屏幕 ，CPU需要制造150%的视觉效果 ，所有像素点都要乘以1 5 ，1* 1 5= 1 5 ，但是因为不能有半个 像素点 ，这就使得填充周围的像素点的颜色只有一部分 ，便产生了模糊。 这就是为什么当你 要改变一台Ret ina Macboo k Pro 的分辨率的时候 ，系统会展示下面的窗口来让 你知道 （下面的屏幕截图 ）这个分辨率会“看着像”1280*800px ，它采用用户的分辨率经验来表达尺 寸比例。 这些描述带有浓重的主观色彩 ，因为它用像素分辨率作为衡量物理尺寸的单位 ，虽然不够严谨 ，但 至少他们觉得是对的。 附加 ：如果你希望你的设计精确到像素 ，那么最好不要改变原始分