「像素」「渲染像素」以及「物理像素」是什么东西?它们有什么联系?

看到这幅图后彻底凌乱了啊!有没有… [图片]
关注者
198
被浏览
29,882

3 个回答

先讨论非 iPhone 6 (Plus) 的情况。

这张图中第一行的「像素」(Points) 就是所谓的「逻辑像素」。在 iPhone 4 前的时代,逻辑像素和物理像素是一一对应的——即,设计中的一个点对应屏幕硬件上的一个像素点。而 iPhone 4 之后,Retina 屏幕出现。在 Retina 屏幕上,使用 4 个硬件上的像素点 (2 x 2) 来表示一个逻辑像素点。举个例子——

  • 在开发环境中,使用 12 pt 的字体,在非 Retina 屏幕上字面高度为 12 个物理像素点;而同样是 12 pt 的字体,在 Retina (@2x) 屏幕上的字面高度,是 24 个像素点。
  • 同样,使用代码来生成的一个 20 pt x 30 pt 尺寸的举行,在非 Retina 屏幕中尺寸为 20 x 30 个物理像素;而在 Retina (@2x) 屏幕上,其尺寸为 40 x 60 个物理像素。

在 Retina 屏幕上进行设计,文字尺寸、空间大小等等都应该遵照逻辑像素进行。比如,为 iPhone 4/4s (逻辑像素 320 pt x 480 pt,物理像素 620 px x 960)设计,则界面中各个元素的尺度应当以 320 x 480 为准;在 Retina 屏幕上的「2x」,可以理解为元素的精细度翻了一倍。换言之,多出来的那些像素并不是用来显示更多内容的,而是用来提高这些内容的精细程度的。这样,同样界面在 iPhone 4/4s 和旧设备上的差别,就仅在于画面的精细程度,而非内容的多寡。使用设计软件制作界面元素时尺寸的翻倍,也是为了提高精细度;在开发环境中,仍是按照 @1x 的逻辑来设计界面;如果误用 @2x 的尺度,则会导致文字、控件等过小。

用 pt (points) 这个单位,也是强调了逻辑像素与物理像素不应等同理解。

------

而渲染像素,在 iPhone 6 之前的设备不需在意——因为 Display Zoom 这个功能是从 iPhone 6 (Plus) 才开始加入,而 Downscale 的问题也只是在 iPhone 6 Plus 中会存在。

先讨论 iPhone 6.

  • 从问题附图可看到,iPhone 6 在未使用 Display Zoom 功能时,与之前的设备相同,使用四个物理像素表示一个逻辑像素,「渲染像素」也与物理的像素完全对应。其逻辑像素为 375 pt x 667 pt, 即可以显示的内容比 iPhone 5 系增加。
  • 而开启 Display Zoom 功能时,逻辑像素与 iPhone 5 系列相同,即 320 pt x 568 pt. 而「渲染像素」也是直接进行 @2x 处理。所谓「渲染像素」,即系统处理出来的原始画面的尺寸。但 iPhone 6 的物理像素为 750 px x 1334px, 比「渲染像素」要高。所以,会将画面「拉大」显示。这样的画面是会模糊的——想想在实际分辨率为 1024 x 768 的液晶屏幕上显示 800 x 600 的图像,即可知道。

而 iPhone 6 Plus, 情况更复杂一些。

  • iPhone 6 Plus 的逻辑像素为 414 pt x 736 pt, 而其使用了新一代的 Retina 屏幕 (@3x),换言之,如果按照上述的显示方式,物理像素理应为 1242 px x 2208 px. 从图中 iPhone 6 Plus 的「渲染像素」亦可以看到这一个值。但是,不知是因为产能还是技术的限制,Apple 未能在此代 iPhone 6 Plus 中使用 1242 px x 2208 px 的屏幕,而仅使用了 1080p 屏幕。这就导致了,iPhone 6 显示的画面也是有一定的模糊的——想想将 1024 x 768 的画面压缩到 800 x 600 的显示器中进行现实,即可得知。不过,因为 iPhone 6 Plus 像素密度已然颇高,所以模糊并不显著。
  • 而使用 Display Zoom 的情况,与 iPhone 6 类似,不再赘述。
  • 虽然 1080p 屏幕也可以作为 @3x 的 Retina 屏幕 (360 pt x 640 pt @3x),但估计现有的逻辑分辨率是根据 iPhone 6 Plus 屏幕的物理尺寸(对角线长度 5.7 英寸)而选取的。所以,唯有在本代产品进行 downscale. 等技术 / 产能问题解决,估计就会使用物理像素为 1242px x 2208 px 的屏幕了。

------

总而言之,图中的「像素」(即,所谓逻辑像素)是设计时应当参考的尺度;而「渲染像素」,则是系统基于「逻辑像素」进行对应倍增(1x、2x 或 3x)而得的结果;物理像素,则是设备屏幕实际具有的像素数目。

理解逻辑像素,搞定设计尺寸

2016-10-31 18:36 | 信息交互设计与用户体验创新

w6.sanwen8.cn/mmbiz/HkP

初衷起始于第一次写移动端的网页,当时涉世未深,学得也很浅,被尺寸问题折磨了好久,却始终以为是代码中出了BUG。最终尝够了闭门造车的痛苦,无论如何都解决不了布局元素超出屏幕范围的问题。后来查过之后才知道是逻辑像素的问题,几经折腾,才搞明白其中的原委。有趣的是,发现身边很多人也都并不知道这部分知识,也有些同僚稍微知道一些,但是并不清楚其中的原理。那么,要讨论问题产生的根源,我们不得不先来搞清楚两个概念:逻辑大小像素大小

逻辑大小

人眼视觉对于对象尺寸的判断是基于逻辑大小的,以1元硬币为例,不论这枚硬币离我们多远或多近,在认知当中,我们认为其大小就是直径25毫米,也就是说,这是它的真实大小。所以我们姑且把人对于物体真实尺寸的认知称之为逻辑大小。

w6.sanwen8.cn/mmbiz/HkP

像素大小

像素大小是基于显像单元的数量来描述的,也就是说,不在乎其真实大小是多少,只关心使用了多少个方块单元来显示。以下图为例,用相同数量的方块单元来绘制一条斜线,下面4幅图,他们的真实大小不一样,但是其使用的显示单元的数量是一样的,即使最后一张图已经小到人眼难以分分辨单元的大小,我们也不得不说,这4张图中的斜线的像素大小都相同,都是10px。

w6.sanwen8.cn/mmbiz/HkP

从以上的描述来看,似乎只是阐述了两个人尽皆知的现象,显得很白痴,但是却着实已经讲明了问题的玄机。其实这正是悄然的在我们熟知的显示屏中作怪的关键所在,用一个简单的例子就可以讲清楚。假设我们有这样一个十字形的符号,它的参数如下图所示:

w6.sanwen8.cn/mmbiz/HkP

现在我们需要将我们看到的这个红十字显示到一个屏幕上去,这时就会产生两种显示方案,在屏幕上显示的红十字保持原来的逻辑大小或者保持原来的像素大小:

w6.sanwen8.cn/mmbiz/HkP

显然,两种方式就产生了差异,可以看出,后者已经将红十字缩小了数倍,很显然这种效果与我们的认知是相悖的,极端情况是,如果屏幕分辨率再增大几个数量级,那这个红十字在哪儿我们或许都找不到。所以,为了良好的反应红十字的大小,这个屏幕将5个像素当做1个像素使用来还原显示这个符号是更好的选择,而这当中就衍生了我们需要进一步区分的两个概念:逻辑像素和实际像素——在这个屏幕中,红十字显示的实际像素是15px,而逻辑像素是:3px。

现在再来回想一下,作为设计师,当你在iPhone6的屏幕上看见一条水平横线的时候,第一反应是什么?1px应该是正常的反应,但是细想一下这个1px,你就会发现,脑子里形成的这个 “1px” 的概念其实正是逻辑像素,很显然,iPhone6的分辨率非常之高,以至于人眼已经分辨不出一个显像单元的大小,所以如果用实际的1px来显示一条线的话,应该没人能认得出来。

w6.sanwen8.cn/mmbiz/HkP

在理清了必要的概念之后,来说说实际生活中的屏幕,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854,540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640×960, 640×1136, 750×1334,1242×2208。看到这些,作为设计师不禁就要感到头疼,一个设计稿要适应多种尺寸真不是个简单的活儿。然而这其中也是有规律可循的,理解了这些规律,尺寸的问题才能得心应手的解决。

像素密度

要知道,屏幕是由很多方形的显像单元组成的。之前提到那么多种分辨率,其实指的都是手机屏幕的实际像素。比如480×800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的真实尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320×480,iPhone 4s的屏幕像素是640×960。刚好两倍,然而两款手机屏幕的实际大小却都是3.5英寸。

所以,我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。

w6.sanwen8.cn/mmbiz/HkP

Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。

倍率和逻辑像素

再用iPhone 3gs和4s来举例。假设有个邮件列表界面,我们不妨按照普通的设计思维来想象,如果我们按照实际像素大小来显示,3gs上大概只能显示4-5行,4s就能显示9-10行,而且每行会变得特别宽。如下图所示:

w6.sanwen8.cn/mmbiz/HkP

但如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字,因为元素的实际大小缩小了1倍。所以,会采用逻辑像素的方式来显示这个界面,而两款手机的逻辑像素是相同的,这意味着两款手机显示的效果,从实际大小这个角度来看是相同的,因为Retina屏幕把2×2个像素当1个像素使用:

w6.sanwen8.cn/mmbiz/HkP

可能会有人(估计是没有的)有这样的疑问:既然逻辑像素都一样,那么有什么样的区别呢?这个问题显得有点傻,但是却十分重要,因为即使是设计师,在作图的时候也经常处于疏忽的犯下这个错误。对于这个问题,也可简单的用下图来解答,同样一个圆,高分辨率的屏幕显示的效果更佳清晰,视觉效果更棒:

w6.sanwen8.cn/mmbiz/HkP

这个问题反映出一个每个设计师都应熟知的技巧:设计的时候,应该优先保证高分别率的效果。在以前,iOS应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带@2x字样,有的不带。其中不带@2x的用在普通屏上,带@2x的用在Retina屏上。只要图片准备好,iOS会自己判断用哪张,Android道理也一样。

由此可以看出,苹果以普通屏为基准,给Retina屏定义了一个2倍的倍率(iPhone 6plus除外,它达到了3倍)。实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示的元素实际大小就是相同的。

w6.sanwen8.cn/mmbiz/HkP

Android的解决方法类似,但更复杂一些。因为Android屏幕尺寸实在太多,分辨率高低跨度非常大,不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间,给不同范围的设备定义了不同的倍率,来保证显示效果相近。像素密度概念虽然重要,但用不着我们自己算,iOS与Android都帮我们算好了。

w6.sanwen8.cn/mmbiz/HkP

如图所示,像素密度在120左右的屏幕归为ldpi,160左右的归为mdpi,以此类推。这样,所有的Android屏幕都找到了自己的位置,并赋予了相应的倍率:

ldpi——0.75倍

mdpi——1倍

hdpi——1.5倍

xhdpi——2倍

xxhdpi——3倍

xxxhdpi——4倍

各型号iPhone的倍率比较简单,我们后面会讲到。那么Android手机那么多,具体怎么分?哪些手机是几倍的倍率呢?先看一张表,这是2014年10月到2015年03月的数据:

w6.sanwen8.cn/mmbiz/HkP

就目前市场状况而言,各种手机的分辨率可以这样粗略判断。虽然不全面,但至少在1年内都还有一定的参考意义:

ldpi(如今已绝迹,不用考虑)

mdpi[320x480](市场份额不足5%,新手机不会有这种倍率,屏幕通常都特别小)

hdpi[480x800、480x854、540x960](早年的低端机,屏幕在3.5英寸档位;如今的低端机,屏幕在4.7-5.0英寸档位)

xhdpi[720x1280](早年的中端机,屏幕在4.7-5.0英寸档位;如今的中低端机,屏幕在5.0-5.5英寸档位)

xxhdpi[1080x1920](早年的高端机,如今的中高端机,屏幕通常都在5.0英寸以上)

xxxhdpi[1440x2560](极少数2K屏手机,比如Google Nexus 6)

自然地,以1倍的mdpi作为基准。像素密度更高或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率近似的显示效果。

不过需要注意的是,Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920,它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到逻辑像素为320×533和360×640。很显然,后者更宽更高,能显示更多内容。所以,即使有倍率的存在,各种Android设备的显示效果仍然无法做到完全一致。

单位

不难发现,真正决定显示效果的,是逻辑像素尺寸。为此,iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt,Android的尺寸单位为dp。说实话,两者其实是一回事。

单位之间的换算关系随倍率变化:

1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

1.5倍:1pt=1dp=1.5px(hdpi)

2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

3倍:1pt=1dp=3px(xxhdpi、iPhone 6 plus)

4倍:1pt=1dp=4px(xxxhdpi)

单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。

无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。

Web开发

web页面的绝对单位仍然是px,至少代码里这么写,但它的道理也和app一样。由于像素密度是设备本身的固有属性,它会影响到设备中的所有应用,包括浏览器。前端技术可以善加利用设备的像素密度,只需一行代码,浏览器便会使用app的显示方式来渲染页面。根据像素密度,按相应倍率缩放。也就是说,在2倍率的屏幕上,如果定义CSS样式为1px,那么实际显示出来的其实是2px。

以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。

iPhone

iPhone的屏幕尺寸各不相同,我说的是逻辑像素,这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone,就要选择逻辑像素折中的机型。

从市场占有率数据来看,目前最多的是iPhone5/5s的屏幕。倍率为2,逻辑像素320×568。上升势头最猛,未来有望登上第一的是iPhone 6的屏幕。倍率为2,逻辑像素375×667。

按照这两种尺寸来设计,都是比较主流的做法。可以兼顾短一些的iPhone 4s,大一点的6 plus也不会过于空旷。

不过在作图的时候要注意,由于iPhone 6 plus的3倍图是由2倍图放大而来,所以位图要注意保证清晰。Andriod

都说Android碎片化严重,但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了:360×640,就看你设成几倍了。想以xhdpi为准,就把DPI设成72×2=144。想以xxhdpi为准,就把DPI设成72×3=216。

对于那些比较老的低端机,宽度是480px的那批,画面确实会小一些,显示内容会更少。稍微留意一下,重要内容尽量保持在界面中上部分。当然,这些机型不出一年就会被边缘化,基本淘汰。现在能运转的也是当作功能机在用,软件多了必卡无疑,用户体验无从谈起。不作考虑也是OK的。Web

手机端网页就没有统一标准了,比较流行的做法是按照iPhone 5的尺寸来设计。倍率2,逻辑像素320×568。

这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。当然,缺点就是在倍率3的设备上看,图片不是特别清晰。如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸,倍率3,逻辑像素414×736。

总 结

移动端的尺寸比PC端复杂,关键就在倍率。但也正因为倍率的存在,把**小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。

科普Retina屏 所谓“Retina”是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的显像单元,也被称为视网膜显示屏。

第三代iPad发布会上,苹果给出了Retina设计标准的公式:

w6.sanwen8.cn/mmbiz/HkP

a代表人眼视角,h 代表像素间距,d代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点。这样的IPS屏幕就可被苹果称作“Retina显示屏”。将通常使用距离代入上公式可知:手机屏幕像素密度达到或高于300ppi就不会再出现颗粒感;手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感,而苹果电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的显像单元。 绕来绕去:虽然定义很抽象,但是简单一句话描述可以粗暴的理解为:在正常使用中,人眼恰好分辨不出显像单元的屏幕就是Retina屏。 从彩色显示器产生至今,人们一直追求着提升屏幕清晰度。于是所谓的“高清屏”一直就是所有带有显示设备的产品必然追捧的噱头。从最开始的像素机到现在,我们这代人正好目睹了屏幕显示技术的发展和进步。显示清晰度越来越高,越来越细,到目前为止,Retina技术似乎给这个趋势划上了一个句号,因为超出人眼分辨的能力,所以更精细的显像单元已经没有太大的意义。随着该技术的普及,图形的设计标准也有望被拉回相同的水平,试想所有的屏幕都采用与iPhone6相同的Retina技术,那我们只需轻松的按照2倍率来设计,就能满足所有的显示需求了,而我们设计师的忧虑也会有所减小。

- END -


IXTB(Interactiion Experience Talent Base)信息交互设计与用户体验创新人才培训基地是北京市文化创意产业人才培训基地之一,是由北京邮电大学数字媒体与设计艺术学院管理的专业设计媒体。


联系我们

电话:010-6****288

邮箱:s***@bupt.edu.cn

地址:北京市海淀区西土城路10号北京邮电大学教二楼一层东侧