DPI、PPI、PX、PT总搞混？一文为你梳理常见设计单位！

一、全文速览图

Hello，这里是Clip设计夹，今天分享的是「设计单位概念梳理」。

关于dpi、ppi、px、pt、dp、sp这些单位的概念解释，网上的文章已经很多了。但把它们全部放到界面设计里实际落地时，到底该怎么处理？

二、先搞懂基础概念：dpi 与 ppi

1.dpi

全称Dots Per Inch，即每英寸长度内的「点」数，主要应用于印刷领域。

2.ppi

全称Pixels Per Inch，即每英寸长度内的「像素」数，也常被称为像素密度，主要用于显示器、屏幕场景。

虽然严格来说屏幕场景应该用ppi，但 iOS 和 Android 的官方文档里都统一写作「dpi」，所以下文我们也沿用「dpi」来指代屏幕分辨率相关的表述。

三、px 与 pt

1.px

全称Pixel，像素，是屏幕显示的最小单位。

下图有两个大方块，每个边长都是 1 英寸。前面说到 dpi 是每英寸的「点」数，所以左边方块里横向有 2 格，dpi 就是2；右边方块里横向有4格，dpi就是4。

而px是屏幕的最小单位，因此左图里「蓝色的一格」是1px，右图里「蓝色的一格」同样是1px。

2.pt

全称Point，点。1pt = 1/72英寸。

如果把1英寸横向均匀切成72格，那蓝色的一格是不是 1px？对应的 dpi 是不是72？

也就是说，在72dpi的画布条件下，图里蓝色的1格就是 1pt。

没错，72dpi下1pt = 1px的关系就是这么来的。

3.做iOS界面怎么用？

既然我们知道72dpi下1pt =1px，那我们结合iOS官方文档《Image Size and Resolution》来看就很清楚了。

为了适配不同分辨率的屏幕，设计师输出切图需要准备3 个版本，分别是@1x、@2x、@3x。

在72dpi的画布中，1pt=1px。也就是说，做图时只要建立72dpi的画布，就不用额外纠结pt和px之间的换算关系了。

四、dp 与 sp

1. dp

这是 Android 体系中的抽象长度单位，以160dpi屏幕为基准，160dpi 下 1dp = 1px。

官方文档里mdpi档位对应的分辨率就是160dpi，也就是一英寸横向排布 160 个像素。

2. sp

这是 Android 体系中的文字专用单位。默认情况下sp=dp：当用户系统字体设为「正常」时，1sp=1dp；但如果用户设为「大」或「超大」字号，1sp就会大于1dp。

所以在160dpi的基准下，1px＝1dp＝1sp。

3. 做Android界面怎么用？

不建议直接拿iOS的界面给Android用！1/72 和 1/160 的基准单位不一样，尺寸差挺多的。

4.文字尺寸容易踩坑

如果你习惯用 72dpi 做iOS界面、用 160dpi 做Android界面，两边分开制作，那字号一般不会出问题。如果还是出现尺寸偏差，大多是因为分辨率设置错误，导致标注尺寸出现落差。

pt这个单位在不同 dpi 下，呈现出的物理尺寸是不同的，如下图所示。

iOS里的36pt，换算到Android相当于80sp。如果工程师直接把iOS的36pt当成Android的文字尺寸来用，字会变得非常小。

pt转sp换算公式：

例如36 pt × 160 / 72 = 80sp。

最理想的做法是 iOS、Android 分开做设计；实在条件不允许的话，至少做完iOS稿之后复制一份，微调参数后再给 Android。

五、用Figma设计要考虑换算吗？

早年用 Photoshop 做设计时需要纠结 72dpi / 160dpi 和单位换算，本质是因为PS是位图软件，像素尺寸和 dpi 强绑定。

而 Figma 是面向 UI 的矢量设计工具，核心基于「逻辑像素」，行业也已经普遍形成了「1x 设计稿」的标准工作流，换算需求基本被弱化了。

1. iOS设计：1px = 1pt

Figma里按1x逻辑尺寸做设计（比如iPhone主流宽度390px），设计稿中标注的1px 就等于开发使用的1pt。不用再手动设置72dpi，只要和开发约定好 1x 基准，数值可以直接对齐。

2. Android设计：1px = 1dp

同理，按1x基准做设计（常用360px宽），设计稿里的1px直接对应Android的1dp。早年160dpi基准的换算逻辑，在1x矢量设计稿里已经被天然抹平，不用额外计算。

3. 文字单位：1px = 1pt = 1sp

设计稿里的字号（px）可以直接交付：iOS对应pt，Android对应 sp。用户调整系统字号属于系统层行为，设计侧不用介入换算。

4. 切图输出：自动倍率，无需手动缩放

Figma导出切图时，可以直接选择@1x/@2x/@3x等档位，工具会自动生成对应尺寸的资源，不用手动计算和缩放。

慢慢来比较快，如觉得有帮助，请点个赞，分享给更多的朋友，谢谢！