有关retina和HiDPI那点事

苹果公司在2010年的WWDC上发布了iPhone4,第一次向世人展示了retina屏幕,并在后续的几年内分别发布了new iPad、rMBP、5K iMac及2015年新款macbook等一系列r屏产品。当年乔帮主将这种高密度像素的屏幕命名为renita,主要是指在正常阅读距离下,人眼无法分辨屏幕上的像素颗粒,使得屏幕显示效果更为细腻平滑,如下图所示。


图1 WWDC 2010上非r屏与r屏显示效果对比

这里就涉及一个度量,也就是衡量屏幕“细腻平滑”的指标,叫做PPI(Pixels Per Inch),翻译过来就是每英寸长度里排列了多少个像素。两块面积相同而PPI不同的屏幕,自然是PPI大的那块总像素数量多,其展示细节的潜力和能力也越大,如下图所示,只用4x4个像素来表达一条曲线,自然不如8x8个像素更加细腻平滑:

图2 非r屏与r屏的显示细节

iPhone系列产品的PPI一直保持320以上,虽然iPad和Mac的r屏产品线是220左右,但相比PPI只有100左右的非r屏来说,也已是极佳的视觉体验了。

对于绝大多数人来说,有关屏幕更多听到的度量数据并不是PPI,而是“分辨率”,即具体的像素个数,比如960x640、1920x1080等。受windows操作系统的影响,多数人心中会产生这样的逻辑:分辨率越高,字会显得越小。可是,苹果的r屏产品并没有让显示的文字变得很小,这又是怎么回事呢?

首先,解释一下“分辨率越高,字越小”的逻辑是怎么来的。显示器的屏幕面积可分为两个部分:像素的面积,像素间距构成面积。据说,显示器厂商为了更大开口率和更多的背光通量,都会让像素的间距尽可能减小以实现节能。这就意味着,整个屏幕的面积主要由像素面积构成,即在相同面积下,分辨率越高,像素数量越多,单个像素的面积也一定越小。于是高分辨率就对应着小像素,而像素小,则由像素构成的文字就小。

那么接下来的问题就是,既然苹果的r屏所包含的像素数量约为同面积普通非r屏的4倍,每个像素尺寸是普通非r屏像素的1/4,那为什么显示出来的文字不是普通非r屏的1/4呢?

这里就涉及一个更加重要的因素,也是大家都不会留心的地方:操作系统HiDPI的渲染方式。渲染方式决定了一个文字或图标最终以多少个像素来表达。r屏的设备并没有让字体变小,其主要原因就在于,虽然r屏的像素尺寸是普通非r屏像素的1/4,但在表达文字时使用了4倍于非r屏的像素个数。于是最终渲染出来的文字和图标的大小与非r屏的相当,而这种渲染方式带来的一个最有利的结果,就是内容表达得更加细腻。

换句话说,r屏设备之所以视觉效果好,高PPI提供了硬件基础,HiDPI渲染方式提供了软件支持。

这种HiDPI的渲染效果在改善视觉方面到底有多大的提升?下面的“实战”图可以很好地解释这一点:

图3 rMBP(2880x1600)和MBP(1280x800)下的菜单栏

图3分别为rMBP和MBP的屏幕上的菜单栏截图。需要指出的是,两种渲染下都会在图标和文字的边缘处使用“灰色”像素来调和视觉,若整体可利用的像素数少,则渲染文字时,这种“灰色”像素的影响就会极为明显。现举图3中“文”的第一笔为例:

图4 “文”第一笔的渲染效果对比

由图4可知,在r屏HiDPI的渲染下,这一笔大约占用6x6个像素的区域,最终采用了11个纯黑像素加4个“灰色”像素来得到,而在非r屏的非HiDPI渲染下,这一笔只能在3x3个像素的区域来表达,最终采用1个纯黑像素加2个“灰色”像素来得到。可以明显地看到,HiDPI渲染下,笔划充实且细节丰富,而非HiDPI下由于可利用的像素数量少,只能依赖更多的“灰色”像素来间接补偿视觉效果。这就是为什么早在2010年的WWDC上,乔帮主就提醒大家:一旦你用上了r屏,你就再也回不去了。

有人会说,图3和图4中的显示效果的区别主要体现在PPI的差别上,HiDPI的作用并不明显。好,为了体现HiDPI渲染的作用,我们回到图2那张像素细节对比图,手动加几条线,让左边那个非r屏强行变成r屏,但是显示的内容依然按照非HiDPI的方式来渲染,也就是下图的样子:


图5 同样是r屏但渲染方式不同

可以看到,虽然左边的屏幕也具备了retina的硬件条件,可是在显示效果上完全没有体现出高PPI的优势,依然是非r屏的视觉效果。可见系统对内容的渲染方式在改善视觉效果上作用更为关键。

这种HiDPI的渲染能力并不是屏幕提供的,而是苹果公司的工程师们在操作系统中添加实现的,这需要在计算机输出给显示器之前就把一切文字图标等采用多倍的像素渲染成更细腻的样子。于是,这样的渲染会消耗更多的CPU与GPU运算,也就会消耗更多的能源。因此r屏对能源的消耗不光体现在4倍于非r屏的像素个数,还体现在操作系统的HiDPI渲染方式。而推出一款r屏产品往往需要对软硬件作全面综合的考虑,如处理器功耗与性能的平衡取舍、屏幕材料的选择与工艺设计、电池技术的革新、操作系统的优化等等。有时我们感觉苹果相继推出r屏产品只是顺着趋势必然推出,但工程师背后付出的辛苦和努力是我们难以想象的。

难道我们一定要购买r屏的设备才能体验到细腻平滑的视觉体验么?在非r屏上开启HiDPI会是什么效果呢?下面的图可以说明这个问题:

图6 渲染方式同为HiDPI但屏幕PPI不同

左边的图实际上就是由右边的图放大2倍而成,这意味着,在单位面积中,右边屏幕包含的像素数是左边的2倍,即右边的屏幕的PPI值是左边的屏幕的2倍。虽然这两块屏幕一个非r屏(左)一个r屏(右),但渲染曲线的方式都是HiDPI。从最终的渲染结果来看,左右两块屏具备完全相同的显示信息,谁也没比谁多显示细节。而它们唯一的差别仅在于,左边像素个头是右边的2倍,导致在显示相同的内容时,左边要占用更大的面积。

那是否可以消除这种整体尺寸的影响呢?我们知道,人眼对像素尺寸的感观与人眼到屏幕的距离反向相关,即人眼离屏幕越远,屏幕上的像素就会看起来越小。这里放出苹果给出的人眼的视角公式:

图7 Retina设计标准公式

简单来说,图7中iPhone的像素虽然比iPad上的像素尺寸小,但由于距离的原因,人眼对它们的视角是相同的,那么这两粒像素在人眼球的视网膜上成像的尺寸也是相同的。由于在现实中人眼离屏幕的距离(百毫米级)远大于像素的尺寸(百微米级),则通过公式计算得到的视角a是非常小的,于是我们可以近似认为,公式中的反正切三角函数在原点附近程线性特性。

基于以上分析,对于图6来说,假设我们看右边高PPI(像素边长为h)屏幕时,眼到屏幕距离为d,而我们看左边的低PPI(像素边长为2h)屏幕时,眼到屏幕距离为2d,则人眼的视角近似相等,在视网膜成像尺寸也近似相等,即最终从眼睛接收的视觉效果来看,二者并无区别。

举例说明,一台27寸的4k显示器,分辨率是3840x2160,PPI约为160,开启HiDPI模式后,以50cm的距离观看屏幕,视觉上与在25cm距离看326PPI的iPhone并无差异(320/50=160/25),而后者恰是retina屏幕的标准。也就是说,我以50cm的视距来观看HiDPI渲染下的27寸4k显示器会体验到大一倍的rMBP屏幕的感觉。

这里我们可以粗略地讲,在HiDPI的渲染下,只要适当增加人眼到屏幕的距离,普通非r屏也能给人眼以r屏的视觉体验。但这种HiDPI对于非r屏会带来副作用:内容尺寸变大,整个屏幕可显示的信息相对变少。例如,1920x1080分辨率的屏幕,经过HiDPI渲染之后,虽然所显示的内容都变得细腻无比,但屏幕看起来就像960x540一样,窗口经常显示不全。因此,若想HiDPI显示的同时又保证显示内容足够,则需要高分辨率的显示器来提供尽可能多的像素。对于外接显示器来说,最常见的就是将3840x2160的4k显示器HiDPI渲染成looks like 1920x1080的样子。

最后,Mac OS X操作系统在任何情况下都支持HiDPI渲染么?在r屏产品中自然是默认开启的;在非r屏中,显示器屏幕达2k及以上且系统为Yosemite时,会支持用户手动调整渲染等级,而在显示器分辨率小于2k时,则需要借助Quartz Debug强制开启HiDPI模式,并配合第三方插件SwitchResX或RDM来实现。此外,Mac对4k屏幕的支持是有硬件限制的,即目前只有部分Mac设备能够正常使用4K显示器,详细的说明可参见官方文档:
https://support.apple.com/zh-cn/HT202856

综上,总结两条:
1)PPI高,意味着像素更小更密集,它的作用主要体现在:让人在更短的视距内实现屏幕像素的“无颗粒感”;
2)细腻的显示效果还取决于操作系统是否开启了HiDPI模式渲染,它是屏幕上一个字符或图标显示得模糊或清晰的决定性因素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容

  • 什么是DPI、PPI? DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每...
    读品走思阅读 3,661评论 0 5
  • 我们先从一个听的最多的概念——PPI开始。PPI什么是PPIPPI的复杂之处在于如果他所处的上下文环境不同,意义也...
    garble阅读 656评论 0 1
  • 不觉光阴十五载,莺燕啭啼无数春。 庭院兰草香依旧,不见慈严笑花间。 瓷盏弦琴今还在,丝竹茶香不见亲。 思往事...
    茧语无声阅读 346评论 0 2