产品经理要懂的设计尺寸

1,979 阅读6分钟
原文链接: mp.weixin.qq.com

对于产品经理来讲,掌握一些设计方面的知识,往往可以更轻松的和设计师交流。而首先我们应该了解的就是移动端设计尺寸规范。众所周知,当前移动端屏幕尺寸非常多,碎片化非常严重。不管是IOS还是安卓,有很多种分辨率。总结如下:

安卓主流的分辨率有以下几种:

480x800,480x854,540x960,720x1280,800x1280,1080x1920,2560x1440(2k屏)。

苹果主流的分辨率有以下几种:

640x960, 640x1136, 750x1334, 1242x2208。

那么在我们设计的时候要采用哪种分辨率才是最合适的呢?
要回答这个问题,我要先科普几个概念。

1)像素密度PPI

首先是像素密度也就是PPI(Pixels per inch)。要知道屏幕是由很多个像素点构成的,这些像素点的个数也就是屏幕的分辨率构成屏幕的像素尺寸。而手机屏幕的物理尺寸和像素尺寸是不成比例的。如下图:


iphone主流型号尺寸


可以看出,虽然iphone4和iphone3GS的物理尺寸都是3.5英寸,但是iphone4的屏幕分辨率为640x960px,而iphone3GS的分辨率为320x480px,刚好是iphone4的1/4。这也就是iphone3gs和iphone4的物理尺寸相同,但是像素尺寸不同,这个不同我们用一个概念来表述,也就是上面提到的像素密度。那么这个像素密度是怎么计算的呢?如下图:



如果你能够理解下面这个计算,我相信你就理解了iphone各个分辨率与参数之间的关系。


2)倍率与逻辑像素

在解释这个概念前?我想问问大家有没有想过为什么不同分辨率的手机,像iphone6plus和iphone6的显示内容会相同,比如同样一个邮件列表,两个屏幕显示的邮件数是相同的。按理说iphone6plus的分辨率更高,同样一张图片的话,在iphone6plus上不是应该看起来更小,所以显示的邮件数更多么?
这里就牵扯到一个概念也就是逻辑像素。如上图,iphone6plus的逻辑像素是414x736,它的分辨率是它的逻辑像素的3倍,也就是说它把3x3个像素当成一个像素来用,原本1个像素中显示的内容,现在用9个像素来显示,自然显示效果就非常细腻逼真了。同样iphone6的逻辑像素是375x667,它的分辨率是它的逻辑像素的2倍,也就是说在iphone6中,原本一个像素的内容用了2*2个像素点来显示。只要两个屏幕的逻辑像素相同,显示的画面就是相同的,屏幕分辨率不同的问题就用倍率解决了。


安卓把不同像素密度的设备划分了好几个范围,给不同范围的设备定义了不同的倍率,来保证不同设备显示效果的相同。



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

ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]

目前的市场状况:

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设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920,它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到逻辑像素为320x533和360x640。很显然,后者更宽更高,能显示更多内容。所以,即使有倍率的存在,各种Android设备的显示效果仍然无法做到完全一致。

3)单位:

不难发现,真正决定显示效果的,是逻辑像素尺寸。为此,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)
4倍:1pt=1dp=4px(xxxhdpi)

单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。

无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。



移动端web的单位是px,使用代码可以实现让浏览器用APP的渲染方式来显示页面,根据像素密度,按照相应倍率缩放。
制作页面时按照基准倍率制作,按照逻辑像素来设计和开发页面就好了。在准备图的时候可以准备逻辑像素2倍大小的图,通过代码缩成一倍,这样就会比较清晰了。
最后补充一点,电脑屏幕的分辨率一般为72px,因此在作图的时候,可以在PS中把分辨率设置为144Px,这样就是倍率为2的屏幕了。在ps中通常是控制DPI的大小,其实就是PPI,像素密度来控制设计倍率。
对于产品经理来讲,不过设计具体的UI界面。不过在设计产品原型的时候,我们要考虑按什么样的尺寸去设计,通常都是选择逻辑像素尺寸。