上一章节说到,因为平台的多样性,导致了我们需要考虑许多种适配方案,本章节我们就详细讨论,有哪些方式可以适配这么多屏幕,这些方式我们该如何取舍

屏幕的多样性

传统平面设计,仅需考虑纸面的尺寸,PC网页设计,也很少考虑不同屏幕尺寸,屏幕缩放主要由前端及浏览器适配完成。
然而,由于移动端屏幕碎片化这个大坑,在设计层面,不得不要求设计对屏幕适配有足够的把握。
首先,我们需要了解一些基本概念:

基本概念

物理像素(physical pixel)

也叫做:设备像素(device pixel)。
可以理解为屏幕上的点,这个是跟硬件有关系,跟Web软件语言没一毛钱关系。
你见过霓虹灯吗?LED灯?对!就是那上面一个个会发光的颗粒。
这个概念大家一般喊中文,貌似没见过缩写(当然你可以叫它:pp),因为在软件方面我们很少关注硬件嘛!自然这个概念也就没多大用啦!


分辨率(resolution)

这也是一个物理概念,其实就是指一个设备上横竖的点数。
比如:一个LED灯上面,横着放3个灯泡,竖着放4个灯泡,那么这个LED设备的分辨率就是:3 x 4。
当然对应到PC上的显示器上,或者手机端的屏幕行,这一个个的小点,就不是灯泡啦,而是一种新型的发光原件,而且由于排列密集,所以你肉眼根本看不见具体的一个个的点啦而已。
举个栗子:
iPhone手机的主屏:4.7英寸1334x750,就是指:对角线4.7英寸长,高1334个物理像素数,宽750个物理像素数。


CSS像素(css pixel)

是Web编程的概念,指的是CSS样式代码中使用的逻辑像素(或者叫虚拟像素)。
而我们知道,软件的开发离不开硬件的支持,就比如你要在浏览器看到显示效果,就得浏览器支持你呀!
在CSS规范中,长度单位可以分为绝对单位和相对单位,比如:px 是一个 相对单位 ,相对的是 物理像素(physical pixel),这也就是说到底我们平常开发中的 1px 在每个屏幕上怎么显示,完全取决于这个设备!
所以,问题就来了,到底CSS像素如何在硬件设备的物理像素上显示呢?往下看。


先纠正一个概念(dips)

有些人把 CSS像素 又叫做 设备无关像素(dips)(比如:这里),又说这个概念跟真正的 dip/dp 不是一回事!真实气愤!就是这个概念的含糊不清,搞的我也头晕目眩的。
这里纠正一下,以后大家说到 设备无关像素 就是指 dip/dp ,是我下文专门有一节讲述的概念,它就是以 160ppi 为基准的一个相对单位,用来解决Android上面屏幕不统一问题的。
其余的说法,就是 物理像素 和 CSS像素,分别代表 硬件 和 软件的单位,别再搞错了。

捅破这层窗户纸

下面这部分是直接复制的,简单看看就好

在以前的显示设备上,一个物理像素就显示一个CSS像素,这没什么好争议的,大家也理所当然的认为该这么处理,于是大家都在噪点中度过。
然而在2010年,搭载 Retina(高清屏) 的 iPhone4 出现了!也就是从这时候起,手机屏幕的竞赛才真正开始啦,大家都争先空后的朝着更大尺寸、更高分辨率的方向前进。
那么 Retina 到底有什么突破呢?原来,它增加了一倍的手机屏幕的物理像素,用2个物理像素点,显示一个CSS像素。OMG,多么有创意的想法!于是还是原来的样子,还是那时的模样,但是由于屏幕点数增多了,所以看着就更加清晰啦。
没有对比就没有伤害:

看出来为什么上面的明显比底下的清晰,噪点少吗?因为它的网格更密集,其实也就是物理像素更多,但是CSS像素没变(比如:苹果的LOGO大小没变,文字大小没变)。
好了,弄明白了这点,我们再往下看一些其它的概念。


设备像素比(device pixel ratio)

简写:dpr
公式:物理像素数(硬件) / 逻辑像素数(软件),它是设备的属性,而不是一个单位。
其实,比值就是前面说的 物理像素数 除以 CSS像素数。
在javascript中,可以通过 window.devicePixelRatio 获取到当前设备的 dpr。
在css中,可以通过 -webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询,对不同dpr的设备,做一些样式适配。
举个栗子:
当 dpr=2 时,表示:1个CSS像素 = 4个物理像素。因为像素点都是正方形,所以当1个CSS像素需要的物理像素增多2倍时,其实就是长和宽都增加了2倍。
没有对比就没有伤害:


像素密度(pixers per inch)

简写:ppi,当然也叫做:dpi。

ppi pixers per inch,出现于计算机显示领域(当然也是Android中的习惯叫法)
dpi dots per inch,出现于打印或印刷领域(当然也是iOS中的习惯叫法)

其实,从概念中大家也能知道,它表示了一种从逻辑单位到实际单位的换算。这句话怎么理解呢?
因为大家在实际生活中,已经大体知道1米是多长,1斤是多重,而这种单位就是实际单位。

那么我告诉你:我手机屏幕是4.7英寸的,你大概有点感觉是吧?(1英寸=2.54厘米)!
但是如果为告诉你:我手机屏幕是320像素的,你是不是就懵逼了?

所以,有了像素密度这个说法,你用英寸来说明屏幕尺寸是一样的。

我的iphone5屏幕上每2.54厘米上有320个小灯泡(ppi=320)
我的iphone7屏幕上每2.54厘米上就有375个小灯泡(ppi=375)

你是不是明显觉得iphone7更亮!
记住:ppi 说的都是物理像素。
那么,ppi 如何计算呢?因为行业内大家说的手机屏幕都是对角线,比如:4.7英寸,指的是手机屏幕对角线的长度(仅仅是显示的屏幕哦,不包括边框),大家都并没有说手机的宽是多少英寸,高是多少英寸。所以,你计算 ppi 只能用对角线的物理像素数来除以对角线的实际单位啦。
那么计算ppi,首先得计算出对角线的物理像素数,使用勾股定理,即:ppi = 根号下(1920平方+1080平方)/5.2 约等于 294。
那么是不是ppi越大,越清晰呢?理论上是!但是,这得有个取舍。
没有对比就没有伤害:

2英寸1920x1080的主屏,ppi=765(瞎写的)
4英寸1920x1080的主屏,ppi=382(YY的)
4.7英寸1920x1080的主屏,ppi=326(vivo x7)
5.2英寸1920x1080的主屏,ppi=294(HTC One)

来吧,感受下2英寸上,给你放1920x1080个物理像素,是不是一团漆黑了?有人喜欢大屏,也有人喜欢小屏,所以嘛这个值只是个参考,你可以对比相同尺寸下的ppi,但是千万不要对比不同尺寸下的,这样你会受伤的!


设备独立像素(density-independent pixel)

也叫做:密度无关像素。
指Google提出的用来适配Android海量奇怪屏幕的,之前iOS没有设备独立像素一说,因为之前它的CSS像素都是320px,但是随着iPhone6(375px)、iPhone6 Plus(414px)等不同手机型号出现,导致了手机上能看到的CSS像素点也增加的情况下,也得考虑了。
简写:dips or dp
为什么Google提出这个概念能解决不同设备(或不同密度)下的显示问题呢?
原因是:不同的手机屏幕上 CSS像素 个数可能不一样,虽然大多数是320px!
举个栗子:

iPhone3GS,物理像素320,dpr=1,所以决定了它的CSS像素320;
iPhone4,物理像素640,dpr=2,所以,决定了它的CSS像素还是320;

假如这时候我们有个正方形是 30x30px,这是CSS像素,再上面的2个机器上看到的大小都一样,只是在iphone4上更清晰些,因为它用4个物理像素显示1个CSS像素。换句话说,如果大家都是手机都是320的CSS像素,那么我们就只管用 px 这个单位就可以了,在每个设备上的看到的大小都一样。
如果在iphone5s之前,iOS都不需要关心这个概念,因为你能看到的手机屏幕的CSS像素都是320px。但是,随着iPhone6/plus的出现,就让我们心塞了。
举个栗子:

你有个 160px x 160px 的元素,在iphone5s下面看起来宽度正好是 半个屏幕 大小;
在iphone6plus下面,看起来宽度貌似只占了屏幕宽度的 不到一半屏幕 大小!Why?因为人家像素数量多啊!

明白了吗?就是由于不同的设备屏幕,它所支持的屏幕显示的 CSS像素 个数不同(跟物理像素无关),所以,我们如果用 像素(px) 这个单位去WEB开发的话,在不同的手机下面就显得元素不一样大,这就是 dip 的作用,它的出现也就是为了解决这个问题的。
那么,dip 如何解决这个问题呢?

Google规定:ppi = 160时,1px = 1dip(dip在Android下面是一个单位哦!)
那么,我们就能知道,像素数px = dip * ppi / 160

那么,回到刚才的那个栗子:

将 80px x 80px 的元素,单位换为 80dip x 80dip ,在iphone5s下宽度是 163px x 163px(由前2行公式得,163px = 80 * 326 / 160);
而这个元素在iphone6plus下,宽度是 207px x 207px(163px = 80 * 414 / 160);

如果我们使用 dip 作单位,那么在2台机器上,显示出来的效果,差不多都等于2台机器宽度的一半!目的就达到了。
另外,dip 作为 单位 仅仅适用于Android,但是思想可以用到 iOS 和 Windows 等平台。比如:Windows中修改屏幕分辨率,其实修改的是 dpr ,又由于物理像素不变,其实就等于修改了屏幕中 CSS像素 的个数,这也就是为什么修改了分辨率后,有些东西看着明显变大或者变小的原因了。

几种适配方案

方式一:客户端适配

首先,我们先不考虑全面屏,先考虑简单的手机页面。

用户可以看到的界面,首先要扣除顶部标题栏的尺寸。
以ios为例:
iPhone 6/7/8 尺寸:375 x 667 px(750 x 1334 px @2x
顶部通栏 + 微信导航条高度:20 px + 44 px = 64 px( 128 px @2x
H5页面区高度:667 px -64 px = 603 px(1206 px @2x
而 iPhone 6/7/8 PLUS 尺寸 414 x 736 px 为非PLUS版本扩大1.104倍,故无需单独设计。
而在ios端,因版本更新,底部又增加了导航栏,故还要额外扣除 44 px

即:H5页面区高度:603 px -44 px = 559 px(1118 px @2x
(配图)
我们通常认为这个尺寸即为标准安全区(不考虑iPhone 5及以下,不考虑安卓较老机型)。
为什么选择这个作为安全区,我们可以通过最近一期Chanel H5打开人数的统计数据得到答案:

可以看到,ios 16:9(iPhone 678 & Plus )占比 65%。

方式二:iPhone及全面屏的客户端适配

上一节,我们完成了简单页面的适配,随着全面屏作为手机屏幕的主流趋势,我们也要考虑全面屏的适配情况。
这一节,我们采用一种相对简单的方法。

圆角的处理

首先,全面屏底部圆角,经常会造成一些元素显示不全。

我们建议在设计页面时,底部尽量不要在两端放置主要元素,如客户logo等;
同时,底部34px像素内,我们建议独立设置一个适配层,如上图显示,圆角区域有一个纯色的图层。
如果,页面增加这个适配层会导致很丑,则应考虑将底部元素居中放置(但应考虑误触的问题),或将此元素避开底部34PX.

安全区的选择

最简单是方法就是底部留白;
如何让整个页面均有元素,且可以通过一个设计稿适配所有情况,我们将在下一节完整介绍。

方式三:画布适配

相对于客户端适配,画布适配要更复杂一些,主要体现在,需要设计及开发人员,能够将静态的元素动态的放置在动态的屏幕尺寸中,简单来说就是:
元素间距的设计。

我们已Chanel Lem的小程序为例。

这一个页面,是很常见的一个页面,如果使用客户端适配,则底部留白过大,导致用户体验不好。
所以,在做这个页面时,客户提供了画布适配的方案。
(找不到图了,之后补吧)

那么,如何给出这样的一个适配方案呢?

元素的分类

首先,我们要将一个页面中的元素,做一个分类。
可以大致分为:

  • 背景
  • 动态内容
  • 静态内容
  • 交互区域
    背景
    我们建议背景使用纯色、可延展的底纹,而不要实体的元素,即,背景图片,可以随时被截断。
    如果上述做不到,也尽量保证画布底部可随时截断。
    动态内容
    在本例中,Day 1 及第一阶段基础培训,即为动态内容。
    动态内容,主要有文字、图片、视频、输入框等。
    称其动态的主要原因为:元素的长短、大小、换行均不固定,比如文字的大小、换行;图片、视频的比例;
    引起动态的变化,会导致页面长短变化不一。
    静态内容
    本例中,对勾及您已成功签到,即为静态内容。
    静态内容,代表着,他们不会随意改动,不会引起页面长短的变化。
    交互内容
    一般为按钮,如本例中的:完成。
    交互内容,一般位于页面的底部,由于其上各类元素所导致的页面长度变化,这些按钮距页面底部的位置,是在实际操作中,经常会出现的问题。
计算元素的单位

我们通常使用px作为定位元素的单位;
但是,在画布适配的方法中,我们要引入百分比的概念。
即,这个元素位于页面的百分之多少。

比如,本例中,中间静态页面,就位于页面顶部的38.7%,无论屏幕多长,他都可以保持相对中心的位置

再如,底部的交互按钮,位于页面底部的8%,这样就可以保证页面页面底部不会太空。

如何运用

在了解了上面两个基本概念后,我们就可以使用画布适配来完成页面的适配。
还是以这页为例:
我们确定了,中心元素及底部元素的定位。
其他元素,就可以使用常规的PX来相对与已经确定的元素做定位

如上面的动态内容的底部距离中心按钮80px。

提示文字的静态内容,距底部按钮96px。(也可以是距离,中心80px,这个要看设计如何分配空间)
所以,如果需要画布适配,就需要设计做好图层的规划及标注。
图层的规划较为繁琐,他将直接影响切图的效率,我们将用单独的章节来讲;
切图及标注,均可以通过蓝湖来实现,我们将用单独的章节来介绍。

方式四:多稿适配

这是一种终极的适配方式,针对不同屏幕,提供不同的设计图,程序员通过多套css样式,完成不同机型显示不同内容的方式。
有点在于,只要做了这个机型,就一定100%还原,缺点在于,及其繁琐。

如何选择适配方案

(之后画表格)
客户端适配,是最简单,成本最低廉的;
画布适配,相对复杂,成本也可控,但需要设计能够良好把控元素的分布;
多稿适配,由于屏幕碎片化,屏幕分辨率极多,故成本较高,如,网易出品的H5均使用了这一种适配方式;

总结

综上所述,我们在实践中,常常3种方案混用,即,静态元素较多的,我们直接使用客户端适配,有一定交互的,使用画布适配;而布局较复杂的,我们会对iPhone 7 及 X 或者客户老板手机,单独做一稿,其余的尺寸用画布适配的方式尽量调整布局。

文档更新时间: 2019-01-10 15:24   作者:admin