上一章 移动端的规范认识

屏幕和分辨率的规范

UX百科编辑部2023-12-13 发布
1893人在学·9条笔记
收藏

屏幕的分辨率

首先,UI 设计师产出的内容,都是在电子屏幕中显示的,是数字化的图形,而不是要打印喷绘出来的三维世界实物。所以,屏幕显示规则决定了图形的显示方式。

电子屏幕成像的基本原理,即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数,如 1920*1080,指的就是这块屏幕 XY 轴包含的像素点数量。

像素点是图像显示的最小单位(通道不算),每个像素点可以显示一个颜色,我们看见的电子图像,就是由这一个个色彩的 “小点” 拼装而成。

屏幕的分辨率参数是物理特征,任何电子屏幕出厂时都具备对应的物理长宽和分辨率参数、像素点总数,以此形成另一个重要的参数 —— 像素密度 PPI(Pixels Per Inch ),即每英寸所包含的像素点数量。像素密度越高,则画面越清晰,密度越低,则画面显示越模糊。

但是,不管显示器用什么分辨率,我们都可以在系统设置中更改分辨率,这种更改无法修改硬件的实际参数,只是对系统输出给屏幕的画面做出调整。

所以分辨率还可以进一步区分:

物理分辨率:硬件真实的分辨率参数,无法被修改

逻辑分辨率:系统指定给硬件显示的分辨率效果,可以任意修改

理解这个概念是 UI 设计的前提,因为移动端 UI 设计中的所有参数应用是基于逻辑分辨率,而不是物理分辨率制定的。

屏幕的显示倍率换算

在 iOS 和 Android 开发中,是没有 “像素/px” 这个单位的。苹果用的长度单位叫 PT,安卓的是 DP 和 SP。这些单位都是逻辑单位(矢量单位),并不是物理像素的单位。

对于逻辑分辨率而言,后面的单位仅仅是个称谓,没有实际意义,所以 UI 设计软件中的尺寸设置都是没有单位标识的。

虽然逻辑单位不是物理单位,但是内容最终还是会显示到屏幕上,也就是最终显示的效果一定是由物理像素组成的。所以这中间就有个转化过程,从逻辑单位长度,换算成物理单位长度。

比如我们在设计软件中完成了一个 44 长宽的图标,那么在 iPhone3GS 中,就会以 1:1 的比例显示为 44px 长宽,如果在 iPhoneSE 中,就会以 1:2 的比例显示为 88px,在 iPhone15pro 中,就会以 1:3 的比例显示未 132px 长宽。

这个显示的依据,就是根据屏幕的密度决定的,因为屏幕本身的尺寸大小差别不多,但是实际分辨率的差异巨大,如果用像素单位 44px,那么在不同密度中就无法获得良好的展示效果。

所以,系统会根据显示的需要对设置的尺寸进行比例的换算,在不同设备间获得接近的、正常的显示效果。换算依据是什么,前期可以不用深究。只要知道用 PT 给出的数值是万能的,程序员写代码用这个单位,系统也根据这个单位计算像素值。

在我们使用 UI 设计软件中,导出功能的 1x、2x、3x选项,就是将设计稿从逻辑单位转化成像素单位的过程。

同时,逻辑单位只能在矢量软件中运用,不管 AI 还是 Figma、Sketch、即时设计等,都是矢量软件,而 PS 则是位图软件,不支持逻辑单位的应用,所以它的画布创建是以像素为单位实现的,比如 iPhoneX 在 UI 设计师软件中就是 375*812而在 PS 中则是 3x 的 1125*2436。

1893人在学·9条笔记
收藏
已学会
62人已学会
下一篇设计的单位和格式
设计中的图像类型 前面提到过,iOS 和 Android 分别使用了 pt、dp、sp 三种长度单位,但在整个 UI 的领域中,还不止这些单位,包括网页的 em、rem,小程序的 rpx、vw 等。所有长度单位我们都可以分成两种类型,物理单位和逻辑单位。 物理单位是要作用到现实世界的,我们说的厘米、...
本章笔记
仅看自己
logo
凯尔队长发布于 2024-02-18
画质就是指这个……
像素密度 PPI(Pixels Per Inch ),即每英寸所包含的像素点数量。像素密度越高,则画面越清晰,密度越低,则画面显示越模糊。
回复
hyy发布于 2024-02-08
像素点是图像显示的最小单位(通道不算),每个像素点可以显示一个颜色,我们看见的电子图像,就是由这一个个色彩的 “小点” 拼装而成。
像素点是图像显示的最小单位(通道不算),每个像素点可以显示一个颜色,我们看见的电子图像,就是由这一个个色彩的 “小点” 拼装而成。
回复
hyy发布于 2024-02-08
屏幕的分辨率参数是物理特征,任何电子屏幕出厂时都具备对应的物理长宽和分辨率参数、像素点总数,以此形成另一个重要的参数 —— 像素密度 PPI(Pixels Per Inch ),即每英寸所包含的像素点数量。像素密度越高,则画面越清晰,密度越低,则画面显示越模糊。
屏幕的分辨率参数是物理特征,任何电子屏幕出厂时都具备对应的物理长宽和分辨率参数、像素点总数,以此形成另一个重要的参数 —— 像素密度 PPI(Pixels Per Inch ),即每英寸所包含的像素点数量。像素密度越高,则画面越清晰,密度越低,则画面显示越模糊。
回复
hyy发布于 2024-02-08
电子屏幕成像的基本原理,即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数,如 1920*1080,指的就是这块屏幕 XY 轴包含的像素点数量。
电子屏幕成像的基本原理,即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数,如 1920*1080,指的就是这块屏幕 XY 轴包含的像素点数量。
回复
sumi发布于 2024-01-31
苹果用的长度单位叫 PT,安卓的是 DP 和 SP。这些单位都是逻辑单位(矢量单位)
在 iOS 和 Android 开发中,是没有 “像素/px” 这个单位的。苹果用的长度单位叫 PT,安卓的是 DP 和 SP。这些单位都是逻辑单位(矢量单位),并不是物理像素的单位。
回复
sumi发布于 2024-01-31
清晰度看ppi,越大像素密度越高画面越清晰
屏幕的分辨率参数是物理特征,任何电子屏幕出厂时都具备对应的物理长宽和分辨率参数、像素点总数,以此形成另一个重要的参数 —— 像素密度 PPI(Pixels Per Inch ),即每英寸所包含的像素点数量。像素密度越高,则画面越清晰,密度越低,则画面显示越模糊
回复
开挂大师发布于 2024-01-15
也就是说屏幕大小与清晰度没有关系 ,有关系是一英寸里面的像素大小
回复