随着信息网络的发展,各种智能电子设备层出不穷,导致其屏幕的尺寸和清晰度的都不一样,为了追求设备更好的视觉体验;不同平台的规范了各种不同的尺寸单位,比如iOS pt,Android dp, web px;做为UI设计师,更是经常与屏幕的分辨率打交道;所以理解其单位由来的背景,可以更好便利设计;

 

像素密度

像素密度 (Pixel Density) 的意思是像素 (Pixel) 被压缩到压缩到某个实体面积(通常是英寸)。

电子设备通常以每英寸容纳的像素点,就是每英寸像素( 英语:Pixels Per Inch 缩写:PPI ),这个就是我们经常在手机参数里看到的,代表屏幕清晰度的指标参数。


比如说,这个手表的屏幕长宽都是1英寸,长宽各排列10个像素,这样我们描述屏幕清晰度,可以说:屏幕的像素密度是每英寸10px ,或者换句话说,手表的解析度是10ppi。

 

如何算出像素密度


以iphone7 为例子,屏幕宽度是 2.3 寸,横向排列了750个像素,每英寸容纳了 750/2.3 ≈ 326 个像素,所以我们说「iPhone7的解析度是 326 ppi」;

公式为:

在没有实体的手机的情况下,可以通过其参数算出,就是后面那个公式

 

iOS的pt单位

相同实体大小


假设你有两个苹果手表(在屏幕尺寸一样);一个为10ppi,一个为20ppi。

现实中为了保持UI控件的实体大小相同,相同物理尺寸大小红色小块(比如红色是按钮),在10ppi手表中宽度是1px,而在20ppi中宽度是2px;

 

这时候就遇到一个问题,由于设备太多,我们不能说在这个设备上宽度是1px,在其他设备上同时也是2px,这是因为px大小会变来变去的问题。

所以我们需要一个统一标尺单位来衡量,这就 pt (point 点 )的由来

苹果在Retina屏幕出现之前,将其 1pt=1px ;而在Retina屏幕上 1pt=2px;然后开发就可以pt写一张尺寸,就可以适配到不同手机上,最终显示的实体大小一样。

 

切图倍率

这也是为什么需要输出不同倍率的切图(@1x,@2x,@3x),因为相同的1pt,在不同机器上容纳像素数量不一样的,切几套图就不会出现图片模糊问题(@2x,对应retina屏幕 1pt=2px);

压缩像素

细心的朋友,会发现iphone6/7plus的ppi并不是其163ppi的3倍,而是2.61倍;为了开发和设计的方便,图片是使用3x的(使用逻辑尺寸来开发),最终呈现系统会自动压缩87%。应为ppi比较高,图片只缩小一点,肉眼看不出变化,整体还是很清晰。

 

Android的dp单位

Google 给自己家 Android 规定了密度单位规范,它们不叫做“pt”,而是”dips”( density-independent pixels,缩写是 dp。

而屏幕的密度不叫做ppi,而称为“dpi”(Dots Per Inch),就是指在一个inch的物理长度内有多少个dot;
dpi其实与ppi是一样的,很多安卓产商宣传也是直接使用ppi的。
然后dp的概念和iOS pt 概念一样。


来源:https://developer.android.com/design/style/devices-displays.html

Google对其dpi进行分类划分(与iOS @1x @2x一样),将屏幕解析度在160dpi左右,就叫为 MDPI(中等解析度;为基准点 1dp=1px); 如果在320dpi左右呢,就叫做 XHDPI (Extra-High:超高解析度,1dp=2px) ; 以此类推…;

 

dpi划分范围

由于安卓屏幕碎片化太严重,不是所有手机的dpi数字都能与官方规定在一样;所以为了简化适配工作,Android根据屏幕大小(inch)和屏幕密度(DPI)对设备做了如下划分:

来源:https://developer.android.com/guide/practices/screens_support.html

 

平台版本、屏幕尺寸密度分布

来源:https://developer.android.com/about/dashboards/index.html?hl=zh-cn

来源https://mta.qq.com/mta/data/device/os

查询移动设备的尺寸网站:uiiiuiii.com/screen/index.htmhttps://material.io/devices/

字体单位SP

SP 全称是 Scale-independent Pixels,Android字体大小单位。

 

网页设计的px单位

CSS像素(css pixel)

CSS像素指的是CSS样式代码中使用的逻辑像素。在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。

像素(px)是一个相对单位,是相对于显示器屏幕分辨率而言的,而这种像素长度和你在显示器上看到的文字屏幕像素无关。而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。px实际上是一个按角度度量的单位。

设备像素(device pixel):

显示屏中最小的物理单元。每个像素都按照操作系统的指示设置自己的颜色和亮度,而这些微小点之间的不可察觉的距离则会引起人们的注意。,就是我们经常讲的屏幕分辨率的大小(1366px*768px, 1920px*1080xp...)

 

设备像素与CSS像素之间的换算

一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。

所以,CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。

因为眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的。

下图就是imac上的css上写的是1000px ;但是截图确实1998px

 

这就为什么在做h5页面的时候,开发和我们理解的像素是不一样的。

因为开发写的是CSS像素数值写的,然后我们做设计师是按照设备像素(retina屏幕 750px*1334px)来做的,所以视觉稿上的像素要除于 2 才能换算成CSS的px像素。

总结

出现这些单位的目的,就是因为设备的碎片化,分辨率和物理尺寸的多样化;使用同一的设备单位来规范,是app在设备上看起来大小是差不多的。
但是是不是所以的设备按钮都得一样吗?答案是要看情况,但是综合考虑影响其大小的因素如下:。

  1. 输入方式的精准程度(触控还是鼠标)
  2. 屏幕的物理尺寸
  3. 操作时候,人与屏幕的距离

后面两个是密切相关,因为平板电脑的屏幕比手机大,所以观看距离就比较远;然后笔记本电脑、台式机、还有电视…屏幕越大,距离就越远。
所以电视上的一个按钮,实际大小可能跟你的手机一样大,这就是因为人与屏幕距离的关系,一定得这么做。
所以在做设计之前,一定要提前考虑设备的尺寸、使用的环境、以及操作时人与屏幕的距离。这样做好的话,后期实现的效果会有很大的帮助。

#

11/08/2017