移动端UI设计的PPI,逻辑像素,作图尺寸及适配

 说明:本文主要从UI设计师角度,试图回答在移动产品UI设计过程中会遇到的以下问题:

1、如何理解「像素密度」和「逻辑像素」两个概念?

2、面对琳琅满目的手机型号和屏幕大小,应该选择何种倍率和尺寸进行作图?

3、基准设计稿完成后,如何进行屏幕适配? 

——1·像素密度:界面清晰度——

说明:本章涉及的概念有:屏幕尺寸、PPI、DPI、物理像素。

(一)像素密度:清晰度的表征

诺曼在《情感化设计》一书中提到愉悦感的四大类,其中第一类是:生理的愉悦,也就是本能的感官体验。画质的清晰、细腻、逼真是视觉感官体验的一部分。而画质是由屏幕性质决定的。

当前市场手机型号众多,如何判断不同屏幕清晰度质量的好坏?这里,我们需要引入一个重要概念。

我们知道,屏幕是由很多像素点组成的,每个点发出不同颜色的光,构成我们看到的画面。当我们眼睛的视杆细胞和视锥细胞接收到的光线越多,我们感知到的画面就会越丰富。而如果需要光线多,就需要保证像素点够多。

我们在计算「人口密度」时,会抓出一平方公里的地区,看里面塞了多少人,据此,判断人口的密集程度。同理,我们可以抓出一英寸的界面,看里面塞了多少个像素点,判断像素的密集程度,这就是「像素密度」。

(二)「像素密度」如何计算?

前面提到,「像素密度」表示一英寸界面中的像素点数,所以它跟两个参数有关:界面尺寸 和 像素。

一般手机的出厂配置信息中都标有「屏幕尺寸」,指的是屏幕的对角线长度,单位是inch(1英寸=2.54厘米,大约是食指最末端那根指节的长度)。设备长、宽的实际长度,即「物理尺寸」,用勾股定理计算可得屏幕尺寸。

我们也可以查到设备的分辨率,即在横纵切上的像素点数,也叫「物理像素」,单位是px。

拿到这两个参数,就可以计算出「像素密度」。

还有一种计算方法,是先算出「物理像素」的平方和,再开根号,最后除以「屏幕尺寸」。

从计算方法可以看出,像素密度就是pixels per inch,简称:PPI。

值得注意的是,在Android系统中,除了像素密度PPI,还有一个DPI,也是「像素密度」,全名为:Dots per inch,两者的区别是:

PPI:表示物理像素密度,是客观存在不会改变的。

DPI:表示软件像素密度,是软件参考了ppi后,人为指定的一个固定值,写在系统出厂配置文件上,保证在某一个区间的ppi在软件上使用同一个值,它是安卓特有的。

所以,可能有几款安卓手机的PPI不同,但是DPI相同。比如,有3款相同分辨率不同尺寸手机的ppi可能分别是430,440,450,那么在Android系统中,可能dpi会全部指定为480,以保证相同分辨率手机的表现一致。

苹果手机型号有限,所以没有DPI的概念,全部用PPI表示。

(三)像素密度有什么用?

「像素密度」是连接数字世界和物理世界的桥梁。它是设备的固有属性,反映了屏幕呈现影像细节的能力。像素密度越高,屏幕显示的密度越高,拟真度就越好。Retina屏比普通屏清晰,就是因为它的像素密度翻了一倍。

我们可以根据「像素密度」判断屏幕显示质量的好坏。iPhone 3gs和iPhone 4物理尺寸相同,但是后者的ppi为326,是前者163的两倍,分辨率也是两倍的关系,说明4的呈像能力更佳。同时也可以看出,手机屏幕的物理尺寸和像素尺寸是不成比例的。

总之:只要两款手机的「像素密度」相同,它们的显示「精细程度」就是相同的。 

——2·逻辑像素:空间容纳度——

说明:本章涉及的概念有:逻辑像素、倍率、逻辑像素密度。

(一)违背常识的显示效果

假如我们在界面A(1英寸,4x4 px)上放一个1×1像素的红方格,然后把它移动到同样尺寸、2倍像素密度的界面B(1英寸,8x8 px)上,如下图所示。

在界面B上,红方格还是涵盖了1×1像素,但是实际的物理尺寸却变小了。这是不符合一般人的常识的,为什么同一个内容在同样尺寸的界面上显示不一样?

如何解决这个问题?我们可以试着分析一下:

对比界面A和B,B的「像素密度」更大,「界面-物理像素」也更大。

红方格在移动过程中,方格的「物理像素」不变,方格的「物理尺寸」变小。

以上因素中,「物理尺寸」是我们唯一肉眼可以观察到的属性。我们的目标是让红方格的变化过程符合常识,也就是保持红方格的「物理尺寸」不变。根据「像素密度」的计算公式,红方格物理尺寸一定时,当像素密度变成2倍,在界面B中的红方格的物理像素就必须变成原来的2倍。

物理尺寸一样,红方格在界面A和界面B中显示的内容物的多少就是一样的。为了标记这种“不同分辨率界面呈现同样多内容显示效果”的能力,我们引入一个抽象概念,它就是「逻辑像素」。我们约定把界面A的物理像素作为基准,界面B可用对应的像素乘以倍数得出,A和B的显示范围是一样的。这个基准就是逻辑像素。

现在,我们再次把红方格,从界面A移到界面B,因为界面B的像素密度是界面A的2倍,为了红方格在两个界面中肉眼可见的大小排版一致,根据公式,红方格在界面B中占据的物理像素是界面A中的2倍,如下图所示:

(二)逻辑像素的单位

逻辑像素作为一组基准手机的分辨率尺寸,为了表达方便,需要有统一的单位。

由于iOS和Android的开发工具不同,逻辑像素在两个平台的单位名称也不同,iOS是pt, Android是dp, 设计师可以简单理解为:pt=dp

iOS 的 pt :point 表示点 。

Android 的 dp :Density-independent Pixels,指密度无关像素。

计量单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。

「逻辑分辨率」就是用逻辑像素描述屏幕的分辨率;「逻辑像素密度」是用“屏幕像素密度”相对于“基准屏幕密度”的倍数表示,即相对密度。

假设「逻辑像素密度」为n,那么 1 pt = 1 dp = n px。具体单位之间的换算关系随倍率变化:

@1×倍:1pt=1dp=1px

@1.5×倍:1pt=1dp=1.5px

@2×倍:1pt=1dp=2px

@3×倍:1pt=1dp=3px

@4×倍:1pt=1dp=4px

可以把「逻辑像素」和「物理尺寸】相关联,在分辨率较低的手机中,可能1pt=1px,而在分辨率较高的手机中,可能1pt=2px,这样的话,一个108*108pt的控件,在不同的手机中就能表现出肉眼观看的差不多的大小,只是分辨率高的展示的更加清楚。如下图所示。

知道了逻辑像素和单位,实际「物理像素」的计算公式:

iOS的分辨率:px=pt * 倍率.(其中pt是逻辑像素尺寸,iOS常用倍率为@2×,@3×)

Android的分辨率:px=dp * (dpi / 160).    (其中dp是逻辑像素尺寸, dpi是逻辑像素密度,160是规定的@1×的基准逻辑像素密度)。

(三)逻辑像素的作用

「逻辑像素」是人为约定的,会影响屏幕显示内容的多寡,与影响清晰度的「像素密度」无关。

物理分辨率:硬件所支持的。

逻辑分辨率:软件可达到的。

当两个设备逻辑像素一致,显示容量就一样;当逻辑像素不一致时,尺寸大的那个显示的内容多。

比如,以iPhone 3gs 和iPhone 4 为例,两者的物理尺寸一致,逻辑分辨率一致;物理分辨率3gs是320×480, 4是640×960,后者无论物理分辨率,还是像素密度都是前者的2倍。因为物理分辨率不同,4的硬件支持的呈像质量更高;因为逻辑分辨率相同,两者的软件可达的容纳物的多少是一致的。

再比如,有两台Android设备的屏幕尺寸为480x800px和720x1280px,它们分别属于hdpi和xhdpi,除以各自倍率1.5倍和3倍,得到逻辑像素为320×533dp和360×640dp。很显然,后者更宽更高,能显示更多内容。

逻辑分辨率的三大作用:

1、作为屏幕显示内容多少(也就是容积)的表征。逻辑像素尺寸大,显示的内容就多,和设备实际的分辨率尺寸、像素密度和倍率都无关。

2、保证控件在不同屏幕间切换符合人的常识和预期:屏幕显示内容的多少,和分辨率、像素密度无关,和屏幕的物理大小有关,这也符合人们的常识:屏幕越大,显示内容越多。

3、应用于设计和开发:我们不需要关注屏幕的像素密度,只需要关心逻辑分辨率即可,方便设计沟通。 

——3·倍率尺寸:作图的选择——

说明:熟悉了概念,下面进入实操:UI设计作图。

UI设计过程中,在我们决定采用哪一种手机屏幕的尺寸作图前,应该首先考虑选择何种倍率呢。

因为正是「倍率」,把大大小小的屏幕拉回到了同一水平线,得以保证一套设计稿适应各种屏幕。

另外,在为开发提供的设计资源图片中,同一张图通常有两个,甚至三个尺寸。文件名有的带@2x或@3x字样,有的不带。其中@2x,@3x就表示是倍率。不带的用在普通屏上,带的用在Retina屏上。只要图片准备好,iOS或Android会自己判断用哪张。

(一)选择何种倍率作图

我们可以直接选择逻辑像素尺寸(也就是x1倍率)进行设计作图。

但是,x1倍率的设备目前差不多已被淘汰。而我们通常会将做好的设计图导入对应设备查看效果,目前主流设备都采用x2、x3倍率,x1的设计图放入主流设备查看效果必须进行放大,粗略的放大会导致失真,影响效果查看。所以x1倍率在最终查看效果图时存在缺陷。

那x3倍率的怎么样?

在与程序员沟通、设计切图时,我们都会进行倍率之间的换算。x3切图换算不方便;

另外,程序员拿到标注图后,需要将其中的px转换成pt进行开发。(1)情况1:x2倍率下,将列表高120px, 头像高102px的标注转换成逻辑像素后为:60pt,52pt,两者是无法居中对齐的,会有1pt误差,最终设备呈现效果就会有2px的像素偏移;(2)情况2:假如将x3倍率的100px转换成逻辑像素,由于逻辑像素与物理像素一样,必须取整数,程序员只可能在33pt和34pt之间选取一个数值。如果采用33pt,最终呈现在设备上的尺寸是99x99px, 有1px误差;如果采用34pt,最终设备呈现的尺寸是102x103px, 有2px误差。所以,为确保设计图的落地效果,我们需要:

在x1倍率下,尺寸必须为 偶数;

在x2倍率下,尺寸必须为 4的倍数;

在x3倍率下,尺寸必须为 6的倍数。

可以看出,x3倍率的执行难度最高。

通过以上,我们也可以排除“x3倍率”作为我们的作图选择。

因为x1倍率、x3倍率都存在明显短板,常用倍率只剩下x2倍率。鉴于x2倍率各方面都比较均衡,所以:

选择x2倍率作为我们的作图尺寸。

(二)选择哪种屏幕做设计

选定作图倍率后,我们就可以选择具体的作图尺寸。    

目前iPhone的主流机型在x2倍率下的尺寸有5种,如下图:

其中,iPhone X 可以认为是iPhone 6 的加长版;iPhone XR 可以认为是iPhone 6P的加长版。如下图:

所以这4种尺寸可以归为2个类型:宽度为750和828的。

而Android系统逻辑像素已统一为360x640,x2倍率就是:720x1280.

最后,总结出双平台@2x倍率,共计4种屏幕尺寸。

大屏时代,用小屏为设计基准显然不合时宜。我们一般选择中间尺寸为基准进行适配,因为从中间向上或向下适配,调整幅度最小。

中间尺寸有两个分别是iOS和Android的,要选哪一个?

大多数设计师日常用的都是iPhone,对Android开发可能了解不够;同时Android验收不太受重视,设计师对Android的容错率较高,这也导致Android端常常容易出问题。根据“哪里问题多,从哪里着手”的原则,可选择以 720×1280 作为设计基准。

但是选择750×1334也没有毛病,很多比较倾向于iOS设计。两者都可以“一稿适配双平台”。

当然,很多团队都是同时出iOS和Android两套设计稿,那就可以:

同时把 750×1334 px 和 720×1280 px 作为设计基准。

(三)作图尺寸对设计规范的影响

为了发现作图尺寸和设计规范之间的关系,我们对比不同倍率的屏幕控件尺寸:

发现:控件高度随倍率等比放大/缩小。

(其中iPhone Xs Max只不过顶部状态栏在原来的20pt基础之上增加了24pt变为44pt,底部增加34pt的主页指示器。)

相同倍率,对比控件尺寸:

发现:相同倍率,控件大小不变。页面尺寸变化,不会对控件大小产生影响。

综上得出:控件大小只随倍率变化,与实际作图尺寸无关。也就是说:

作图尺寸对设计规范没有任何影响,设计规范就是组件规范。 

——4·屏幕适配:组件的调整——

说明:开始作图后,我们开始考虑更多的细节问题。

(一)适配的概念

什么是适配?

就是让同一套APP的UI设计,在不同尺寸分辨率比例的「移动终端设备」上都能正常显示。为此需要根据不同机型对构成界面的组件进行的一系列调整。

为什么要适配?为了在多样性的设备环境中追求体验的一致,保持理想的展示效果。适配只看3个参数:

渲染像素——屏幕截图的图片尺寸,单位 px

逻辑像素——程序员开发所用尺寸,单位 pt

倍       率——渲染像素/逻辑像素 得到的倍数关系,常见倍率有@2x、@3x。倍率决定切图。

(二)常规适配方法

1、等比缩放

界面元素按照屏幕大小整体等比例缩放,一般是界面版式特殊,布局不能变化的情况。比如图片墙、图片列表。适配时,控件尺寸大小随屏幕宽度变化自适应。屏幕越宽,单屏显示内容越少。

注意:界面缩放过程中,要保证资源图片在拉伸后的清晰度,避免降低产品品质。

2、弹性控件

对局部控件做调整,进行缩放或自适应。比如,图片列表控件中局部图片的放大,文字列表控件文字长度的自适应。

3、间距调整

如果界面不适合拉伸,或界面本来就有很多可扩展区域,可考虑将增加的空间分配到这些区域,增加元素的间距。比如,九宫格列表。

还有一些满屏界面,比如启动图、音乐播放器、活动H5页等。因为显示屏宽高比不同,拉伸会导致形变。可以通过调整背景间距增加延展性。

(三)全面屏适配:从「宽度」到「纵向」

我们平常讲的适配常常都是指宽度的适配,因为一般界面的内容总是在纵向存在超过一屏的滚动内容,可以不断往下滚动,所以纵向的适配设计常常被忽略。

但是,全面屏的出现,使我们不得不正视这个问题。因为全面屏刘海和屏幕圆角的问题,导致整体高度的变化,进而影响了比例的变化。

首先,iPhone全面屏出现了刘海和屏幕圆角设计,我们需要重新定义「安全区域」,确保页面内容不能超出安全区域。

具体的安全区高度=屏幕高度-44-34(单位:pt),如下图所示

以下就顶部、底部和满屏界面进行适配。

1、顶部适配

顶部区域,非全面屏状态栏高为20pt, 全面屏状态栏高为44pt, 两者存在24pt, 在设计顶部时,需要就差值作出适配。

一般顶部区域主要放置的控件以及应对策略:

2、底部适配

底部区域用于手势进入主屏或切换应用。如果将触发交互行为的按钮放在屏幕底部,会破坏APP的操作体验。除了一些无操作的信息流可以不用另外设置,常规做法都是将底部操作区全部提高34pt。

3、全屏适配

上文已经提到,正常全屏适配的常规做法就是间距调整,全面屏依然适用。需要注意的是一些全屏的视频播放,需要控制在安全区域内。

(四)折叠屏适配

马上即将迎来折叠屏手机,折叠屏的适配也需要纳入考虑范围。目前有华为和三星两家手机厂商即将发布折叠屏。相关尺寸参数如下:

目前淘宝设计推荐的方法是,采用内容流动的适配方式。

具体需要等正式上市,再进行专门适配。待续……

——5·附录:iOS和Android常见参数——

说明:以下提供iOS和Android两个平台一些常见的手机型号、屏幕尺寸、分辨率等参数。

(一)iOS平台

iOS常用的逻辑像素有:320×568 pt(5/5c/5s/se),375×667 pt(6/6s/7/8),375×812pt(X/Xs),414×736 pt(6p/6sp/7p/8p),414×896pt(XR/Xs Max),常用倍率有:@3x,@2x.

根据友盟数据,目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率为2,逻辑像素320x667 pt。上升势头最猛,未来有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率为2,逻辑像素414x736 pt。 

注意:iphone 6plus适配中,有设计版,物理版,放大版:    

因为plus屏幕有1080个像素点,但截屏后发现图像是1242像素,就是在一个物理有1080个像素点的屏幕里塞了个1242像素的内容。而放大版,就是iphone 6的尺寸等比放大1.5倍得出的分辨率。

在iPhone6的x2倍设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

疏远距离:比如,所有元素距离手机屏幕最左边的距离。

亲密距离:比如,左边图标与右边文字之间的距离。

(二)Android平台

安卓由于屏幕尺寸过多,分辨率跨度大,根据dpi分成几个范围区间:

像素密度为160dpi左右的称为mdpi, 240左右的为hdpi, 320左右的xhdpi…以此类推。这样,所有的安卓屏幕都找到了自己的位置,并赋予了相应的倍率。

Android约定:当dpi=160时,倍率为@1x,逻辑像素=320×480 dp  或 360×640 dp ,称之为mdpi,其它的都是基于此通过倍率转化:hdpi:1.5倍;xhdpi:2倍;xxhdpi:3倍;xxxhdpi:4倍。

如今的Android屏幕逻辑像素已经趋于统一,基准为:360x640 dp。

在实际操作中,我们要用「逻辑像素尺寸」思维来思考界面,把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面,把尺寸和文字的单位都改成点(Point)。这里的点也就是pt,无论设计iOS、Android还是Web应用,单位都用它。

要调节倍率,则通过图像大小里的DPI来控制。这个DPI,其实就是PPI,像素密度。有个常识大家都知道,屏幕上的设计DPI设成72,印刷品设计DPI设成300。

——6·总结——

本文从理论入手,先介绍了「像素密度」和「逻辑像素」两个重要概念,其中像素密度影响“屏幕的成像质量”,逻辑像素影响“界面的容积能力”;接着进入实际操作,设计作图应该选择何种倍率和屏幕尺寸;然后是细节的处理,常用的适配方法,以及全面屏的适配。最后是iPhone和Android手机的一些设计参数。

参考:

《APP适配攻略1-5》——广告设计与制作

《iPhone 2018 全面屏适配详解·含 XS、Max、MR》

《移动设计》

《超全面的移动端尺寸基础知识科普指南》

《苹果又出新尺寸!UI设计尺寸单位完全指南》 

封面图片:Final Test Results: iPhone XS and XS Max——consumer reports

推荐阅读更多精彩内容