物理像素与逻辑像素

571 阅读4分钟

今天来说一点关于UI设计中像素的知识。像素是设计中的重要概念,物理像素和逻辑像素的区别以及常用的像素单位(px、pt、dp、sp),可以在设计和开发中更好地理解和应用。

1. 屏幕密度单位PPI

首先我们需要了解一下PPI的概念,PPI (Pixels Per Inch) 是指屏幕上每英寸的像素数,严谨的说是每英寸对角线上所拥有的像素数目,它是屏幕密度的单位,用于衡量屏幕分辨率。PPI的数值越高,表示屏幕单位尺寸上能够显示像素越多,图像和文本的细节也越清晰。比如,华为mate60的屏幕密度达到516ppi,相比于iPhone 15的458ppi,遥遥领先!🚀

UI设计中的物理像素&逻辑像素

‼️值得注意的是,我们在UI设计中所说的都是PPI,而不是DPI,DPI (Dots Per Inch) 是指每英寸显示的点数,通常用在打印领域,表示打印设备在每英寸上能够打印的点的数量。

2. 物理像素单位PX

接下来,介绍一下物理像素(Physical Pixel),物理像素是显示设备上的实际物理像素点,它是显示设备的最小显示单元,每个物理像素都可以显示不同的颜色和亮度,以组成屏幕上的图像。

在移动端UI设计中,我们使用PX (Pixels) 作为物理像素单位,1px表示屏幕上的一个物理像素点。

但是在开发时,如果使用物理像素去适配不同屏幕密度的设备,

将会导致的问题是:相同物理像素尺寸的UI元素在低屏幕密度屏幕上显得较大,而在高屏幕密度屏幕上则较小,为了解决这个问题,就需要引入逻辑像素的概念。

UI设计中的物理像素&逻辑像素

3. 逻辑像素单位PT

逻辑像素(Logical Pixels)是在应用层面使用的抽象概念,用于确定元素的大小和位置。逻辑像素是相对于设备的分辨率和屏幕密度而言的,它不一定等于物理像素的数值,比如:在高屏幕密度的设备上,一个逻辑像素可能等于多个物理像素。

逻辑像素的使用可以使得界面元素在不同设备上显示一致,无论设备的分辨率和屏幕密度如何。

逻辑像素可以让开发者开发过程中不需要考虑不同设备的物理像素差异,系统会根据设备的屏幕密度和分辨率自动进行适配,以确保元素在不同设备上显示的大小和比例一致。

首先,要介绍的逻辑像素单位是PT (points),PT仅在iOS设计中使用,不知道大家在查阅iOS hIG官方文档时注意过没有,在文档中都是使用pt作为单位的。

UI设计中的物理像素&逻辑像素

在iOS 1x、2x、3x尺寸屏幕密度下,PT与PX的换算关系分别为:1pt=1px,1pt=2px,1pt=3px,下面这个例子可以很直观 的看到,逻辑像素可以保证元素在不同分辨率屏幕上保持显示尺寸一致。

UI设计中的物理像素&逻辑像素

‼️这里需要注意的是,uI设计中的pt,与印刷行业中的pt不是一个概念,iOS中的pt翻译过来叫做点,它是逻辑像素;而印刷行业中的pt翻译之后叫做磅,是物理像素,不要混淆。

4. 逻辑像素单位DP

和PT一样,DP (Density-independent Pixels) 也是一种用于解决不同设备屏幕密度差异的逻辑像素单位,仅在开发Android应用时使用。

在屏幕密度为160ppi的屏幕上,1dp=1px,它与px的换算公式为:px=dp * (ppi / 160)

以下是Android常用的密度档位及其对应换算值:

UI设计中的物理像素&逻辑像素

5. 逻辑像素单位SP

最后,来说一下SP (Scalable pixels),它在我们平时的设计工作中并不常见,了解即可。SP和DP一样,也是仅在Android开发中使用的逻辑像素单位,dp是长度单位,sp是字号单位。在正常模式下1sp=1dp,但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等)。

但当用户在Android系统中自定义字号大小时,以sp为单位的字号将将根据用户的偏好设置进行缩放,这时以dp为单位的元素和文字将不会有缩放变化。