设备屏幕全解:设计师,你不该对你的屏幕一无所知
我们自称 UI/UX/PD/etc. 设计师,但是我们对自己手头上设备的屏幕去一无所知 — 沃兹基·硕德 什么是 DPI,什么又是 PPI ?dpi、ppi、dp、pt、sp 等等这些个单位我们天天接触,但是真正理解这些单位的设计师恐怕并不太多,毕竟真的有点儿复杂,别说学美术出身的设计师了,很多程序员都搞不太懂。但是作为一名 UI/UX/PD/etc. 设计师,因为不了解这些知识而闹笑话的事情几乎每天都在发生,不知道这些甚至连自己的做设计的电脑屏幕都不了解你觉得真的好吗? 本次分享将在尽量不涉及数学,尽量用最简单的语言,尽量使用最贴近生活的例子来为在座各位患者朋友将心头这些个疑虑全部消除。 DPI 是英文 Dots(点) Per Inch 的缩写,在最早的时候,这个单位是用来描述打印机的性能的,意思就是这台打印机最多能用多少个墨点来打印一寸的内容。目前市面上常见的家用黑白打印机普遍都去到了 600*600 dpi 而家用彩色照片打印机则能去到 5760*1440 dpi。DPI 越高,每英寸内的墨点就越多,你打印出来的东西就会越清晰锐利。 PPI 是英文 Pixels Per Inch 的缩写,意味每寸能容纳多少颗像素,用于描述屏幕的像素密度。我们上面提到的印刷物以无数多的墨点来构成图像,而屏幕同样也是以一定数量的发光点来构成图像。见过街上那些走红字的 LED 显示屏么?上面的那一颗颗的 LED 灯就是这块屏幕的发光点,我们使用的 MacBook 的 Retina 显示屏的原理也跟这些看起来十分粗糙的走红字显示屏是一样的,只不过 Retina 显示屏的发光点密度非常高,人眼已经看不出来颗粒感而已。对于屏幕来说 PPI 是用于描述每英寸发光点数量的,它表明了一块屏幕发光点密度的高低,这些发光点我们更常称之为像素,一块屏幕宽高有几寸是在生产的时候就被定好的,而宽高各能容纳下多少颗像素,也是在生产的时候就被定好的,所以我们所说的 PPI 可以说是一个物理单位。 简单举个例子吧,我们手头上的 iPhone(6~7) 宽为 2.3 英寸,高为 4.1 英寸,**根据勾股定理得出这块屏幕的尺寸(屏幕对角线距离)是 4.7 英寸。**同时,iPhone(6~7)屏幕宽(每行)有 750 个像素(发光点),高(每竖)有 1334 个像素(发光点)。 分辨率、像素和屏幕尺寸PPI 说的是像素密度,而分辨率说的是块屏幕的像素尺寸,譬如说 1334*750 就是 iPhone(6~7)的分辨率,说 iPhone(6~7)的分辨率是 326 是错误的表述,326 是它的像素密度,单位是 PPI。 询问别人一粒像素有多大是一个非常鸡贼的问题(小心面试遇到这样的题),虽然我们说像素是构成屏幕的发光的点,是物理的,但是像素在脱离了屏幕尺寸之后是没有大小可言的,你可以将 1920px * 1080px 颗像素放到一台 40 寸的小米电视机里面,也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去,那么对于 40 寸的电视而言,每个像素颗粒当然会大于 5.5 寸的手机的像素。所以光看屏幕像素尺寸对于设计师来说是不具备多少实际意义的,通过分辨率计算得出的像素密度(PPI)才是我们设计师要关心的问题,我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。 再次使用 iPhone(6~7)作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 ,且横向具有 750 颗像素,根据下面的公式,我们能够算出 iPhone(6~7)的屏幕是 326 PPI,意为每寸存在 326 颗像素。 其实不论我们怎么除,计算得出来的像素密度(PPI)都会是这个数,宽存在像素除以宽物理长度,高存在像素除以高物理长度,得数都接近于 326。 对设计会造成什么样的影响一块 326*326px 的正方形色块在一台 iPhone 7 上面展现出来的物理尺寸将会会是 1*1 英寸。这是因为该屏幕每英寸能容纳 326 颗像素,所以 326px 凑在一起刚好就是 1 英寸。假设我们能将 iPhone 7 手机屏幕 PPI 调低 50% 变为 163,那么这个色块的物理尺寸就会变成 2*2 英寸,同样多的像素,看起来却大了一倍。咦!这是为啥? 因为我们的色块是 326*326px 大小的,而这台 163PPI 的假 iPhone 7 每英寸上面只有 163 颗像素,为了要展示 326*326px 的色块,它就要多用 1 英寸的屏幕,所以这个色块在屏幕上面看起来就“长大了”一倍。 小结像素本身没有尺寸,你可以将1920px * 1080px 颗像素放到一台 40 寸的小米电视机里面,也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去。只有跟屏幕尺寸一起的时候,谈论像素才有意义,因为我们能够算出该屏幕的 PPI。DPI 跟 PPI 虽然概念相近,但是我奉劝你还是不要拿着他们俩混用,虽然可能好多人告诉你这样没啥关系。在设计过程中,我们并不见得真的要去计算各种东西的实际尺寸,但是对于原理的把握能让你心里有个低,或许就是我们常说的“意识”。别以为每个人的屏幕上显示的都会跟你屏幕上显示的是一样的。什么是 dp、pt、sp?DP 或者说 DiP 是 Device independent Pixel 的缩写,而 PT 是 Point 的缩写,DP 用于安卓系统开发,而 PT 用于 iOS 系统开发。但从根本来讲它们都是一个意思。 上一篇文章我们仔细地对屏幕最基础的几个属性——分辨率、PPI、和物理尺寸,似乎我们只要知道了这几个东西那我们的设计就怎么样也不会错。但是聪明的童鞋可能发现了一些不对,我们不可能对每一块屏幕都进行了解,然后专门针对这块屏幕再进行一次设计吧?世界上那么多屏幕,那一个界面我要画多少个稿啊!! 没错,假如真是这样的话,那么面对不同的屏幕,不仅要从新设计,连程序都可能要重新写一回,这显然是不可能的事情。不过这个问题不仅我们想到了,那些计算机、智能手机的生产商也想到了,为了让广大程序员和设计师朋友能够更加容易地解决适配问题,让更多的开发者来来为他们开发软件,他们使用了一种很聪明的方法,同时这也是为什么我们又多了 DP、PT、SP 等那么多“杂七杂八”的单位的原因。 解析这几个单位的必要,可能要从开发的角度来讲会比较清晰一点。 (编辑:ASP站长网) |