屏幕适配那些事(01)屏幕适配和逻辑分辨率

屏幕适配是一个老生常谈的问题了,我用这三篇博客和大家讨论点屏幕适配相关的干货。


什么是屏幕适配?

我们先来给屏幕适配下一个定义:

屏幕适配是让一套UI在不同尺寸、不同分辨率和不同比例的屏幕上都能正常显示。

这里的“正常”两个字比较模糊,我来解释一下,设备的尺寸、分辨率、比例不同,但是系统在显示内容的时候,有一个虚拟的度量单位——逻辑像素——这也是我们下面一节要讨论的内容。我们姑且认为“更大的屏幕”(逻辑分辨率更高的屏幕)应该显示更多内容,拿iPhone/Android的内置应用的设计作为例子很合适,它们在不同的设备上都能“正常”显示。我们看一个例子,相同的一张图片,要求在屏幕中央显示,对比下面的第2/3/4张图,你会发现“正常”和“不正常”的区别。

normal_design

图二的开发者可能将设计师的意图理解为图片居中显示,大小为xxx px。

图三的开发者可能将设计师的意图理解为图片居中显示,距边框xxx dp。

图四的“不正常”可能不太明显,其和图三的做法类似,只不过在考虑和边框的距离时,使用了px单位而不是dp,这也将导致意外的结果,我们将马上讨论这一点。

对相同设计稿的不同理解可能导致意想不到的结果,真实设备的屏幕千差万别,每个元素都差一点点,整个界面的最终显示效果就会变得异常奇怪。

在深入讨论“如何构建具有很强适应能力的UI?”这个非常难的问题之前,让我们先清楚了解逻辑像素和它相关的概念。

逻辑像素、逻辑分辨率、逻辑像素密度

和上面一样,我们先给逻辑像素下一个定义:

逻辑像素是与屏幕像素密度无关的抽象“点”的概念,是设计和开发UI的一般单位,用dp表示。

iOS开发中使用pt表示密度无关像素,为了统一,这里使用表意更加明确的dp单位。

然后是逻辑像素相关的概念:

逻辑分辨率就是用逻辑像素描述屏幕的分辨率,例如360dp*640dp。(具有这个逻辑分辨率的手机型号非常多,大多数5英寸左右的Android手机,其逻辑分辨率都是这个值。)

逻辑像素密度使用屏幕像素密度相对于基准屏幕密度的倍数表示,即相对密度。常见的对于逻辑像素密度的描述比如iOS开发中常用的“2倍图”、“3倍图”。逻辑像素密度表示逻辑像素和物理像素之间的关系:

假设逻辑像素密度为n,那么1 dp = n px。

下面展示在三种具有不同像素密度的屏幕上显示相同物理大小(相同逻辑像素大小)的圆的情况,用以说明引入逻辑像素的意义。

density_circle

上面三个圆的直径和描边,用像素为单位表示,分别为8px/1px,16px/2px,32px/4px。可以这样解释,为了在具有不同像素密度的屏幕上呈现相同的物理尺寸,需要针对每种屏幕指定不同的尺寸。

Apple和Google都非常有预见性,他们让iOS和Android使用dp为单位度量屏幕上的UI元素。上面的情况,如果使用逻辑像素描述,均为8dp/1dp,这使得我们在设计和开发的时候,不需要关注这个屏幕的像素密度究竟是多少,只关心逻辑分辨率即可。这也就是密度无关像素——逻辑像素的由来和意义。

逻辑分辨率带来的另外一个好处是:屏幕显示内容的多少,和屏幕大小的关系更为紧密,而和屏幕分辨率、屏幕像素密度(ppi)的关系并不大。这是符合人们的常识的——屏幕越大,显示内容越多。目前的部分Android设备在这个问题上处理的并不是那么好,后面会提到。

如果你使用过不同尺寸的iPhone和不同尺寸的Android设备,你可能会有这样的感觉:iPhone的设计符合“屏幕越大,显示内容越多的常识”,而且是线性变化的;而Android设备则不然,越大的屏幕,并不一定显示更多的内容,比如三星S7和三星S7 edge,屏幕尺寸分别为5.1和5.5英寸,但是他们显示的内容是一样多的(逻辑分辨率一致)。

如果拿Android设备和iPhone进行对比,结果同样让人惊讶,Nexus5的屏幕尺寸为5英寸,iPhone6的屏幕尺寸为4.7英寸,按照常识,Nexus5应该比iPhone6显示更多的内容,但实际情况刚好相反,Nexus5显示的内容更少!因为Nexus5的逻辑分辨率为360 ×640(dp),而iPhone6/6s/7的逻辑分辨率为375×667(dp)。

下面这张图说明了上面例子中物理尺寸和逻辑分辨率上的差异。

nexus5_iphone7

通常我们看到手机介绍页面会大家宣传屏幕分辨率和屏幕密度,其实他们对于屏幕显示内容的多少并没有太大关系,因为它们的操作系统决定了它们显示内容的规则——逻辑分辨率决定了显示内容的多少,而逻辑像素和屏幕的物理尺寸关系更加密切。

屏幕分辨率和屏幕密度更加明显的影响是对清晰程度的影响,相同屏幕尺寸,分辨率越高,屏幕密度越高,显示越清晰。但是有一个常识,300ppi的屏幕已经足以让眼睛在正常使用的时候无法区分单个像素点,也就是乔布斯提出的“视网膜屏幕”概念,400ppi的屏幕足以让人眼在近距离观察屏幕时无法区分单个像素点。也就是说,除非你使用放大镜观察屏幕,正常使用的话,400ppi以上的屏幕没啥必要了,甚至300ppi就已经足够了。

上面这段话针对LCD屏幕,如果是LED屏幕的话,受排列方式影响,300ppi是远不够达到视网膜屏幕水平的,三星S7edge的ppi达到了534,才能称之为优秀。不过这不是这篇博客讨论的内容,如果你想继续了解的话,可以去查一下。

更多设备的逻辑分辨率参考:Devices

下篇文章我们将讨论Android的逻辑分辨率是怎么计算得出的。