新功能:智能动画 — 为您的原型添加动画。 了解更多

跳过导航

Sketch 中的文字图层是用点还是像素来衡量的?

上次更新时间:2023 年 8 月 17 日
阅读时间:3 分钟

Sketch 使用 macOS 坐标系,以点(显示点)为单位。在 Sketch 中,所有内容都是以点为单位进行测量的,包括文字图层。

什么是点(显示点)?

随着 2010 年 Retina 显示屏的引入,Apple 在 x 轴和 y 轴上将所有像素缩减了一半。现在一个像素是四个物理像素,而屏幕尺寸保持不变。这使分辨率提高了两倍,通常写为 @2x

这种分辨率的提高提高了文字的可读性,但也意味着屏幕上的物体需要在像素上大一倍才能显示为相同的尺寸。选定的解决方案是从硬件中抽象出像素,而一个像素不再是屏幕上的一个像素。为了澄清,像素是点。

An illustration of @1x and @2x resolutions.

@1x 和 @2x 分辨率的示意图。左侧是一个表示一个像素的正方形,标记为 1pt = 1px。右侧是同一个正方形,被分成四个相同大小的更小的正方形。标签显示 1pt = 2px。

显示器被分类为分辨率类别;这表示它们的分辨率相对于 2010 年之前常见的标准(72 ppi)的缩放因子。

这些类别是 @1x(不缩放)、@2x(像素加倍)、@3x(像素加倍)、等等。Apple 设备始终是 @2x 或更高,iPhone 13 使用 @3x 显示屏。Sketch 会自动根据您的 Mac 上显示屏使用的分辨率渲染画布。

这对我的设计有什么影响?

Sketch 中的一个点在 @1x 显示屏上转换为一个物理像素,但在 @2x 显示屏上转换为四个物理像素。由于所有内容都是根据您的显示屏进行缩放的,包括 macOS 和 Sketch 本身,因此您在设计时无需关注这一点——事物看起来会更好。

当您导出图层时,您可以设置 Sketch 导出画板的比例。如果您以 @2x 的比例导出资产或画板,则一个点将等于四个物理像素,因为 Sketch 会在 x 轴和 y 轴上将其加倍。以 @3x 的比例导出将等于九个像素(3x3 个物理像素),等等。

所有这一切都发生在 Sketch 中显示的尺寸保持不变的情况下。一个很好的例子是 iPhone 屏幕尺寸。iPhone 13 的大小为 390 x 844 点,分辨率为 1170 x 2532 像素——它具有 @3x 显示屏。

在 Retina 显示屏上为 @1x 显示屏设计

Sketch 会根据您的显示屏的像素密度渲染您的画布。当在现代 Mac 上为具有非 Retina 像素密度(低于 @2x)的显示屏设计时,您将看到比用户看到的更多细节。我们建议您打开 视图 > 画布 > 在缩放时显示像素。 Sketch 会以实际的 @1x 分辨率渲染您的设计,而您将其缩放至 100% 以外的任何比例。如果您知道目标硬件的物理尺寸,请在 Sketch 中设置缩放级别,以便您 Mac 显示屏上的画板与您的目标硬件具有相同的尺寸——这不太可能是 100%。

点和 CSS

如果您从 Mac 上的 Sketch 或我们的 Web 应用中复制 CSS 属性,它们将以 px(CSS 像素)为单位进行测量,这与 macOS 上的点的工作方式相同。例如,Sketch 中的 3pt 边框将在 CSS 中导出为 3px 边框。CSS 中的 1px 是 Sketch 和 macOS 中的 1pt(点)。

您可以在 W3C 网站上关于 CSS:em、px、pt cm、in… 的文章中了解更多关于 CSS 像素的信息。