px、pt、dp、sp 大混戰

dpi、ppi、px、pt、dp、sp 之类的名词释义网路文章已经有很多，但全部混在一起运用到 Mockup 上时该怎么处理？
这个问题其实我也爬了满久的文，没翻到有比较完整的说法，所以自己整理了一篇。

dpi、ppi 解析度。

首先必需一定要有的概念：什么是 dpi？什么是 ppi?

dpi

Dots Per Inch，每一英吋裡的「点」数量。主要用于印刷。

ppi

Pixels Per Inch，每一英吋裡的「像素」数量，又被称为像素密度。主要用于显示器、萤幕。

虽然 ppi 才是给萤幕用的，但因为 iOS 和 Android 的官方文件都写「dpi」，所以之后的解析度都以「dpi」说明。

px、pt

px

Pixel 像素。萤幕上所显示的最小单位。

下图有 2 个大方块，各是 1 英吋。刚刚提到 dpi 是每一英吋裡的「点」数量，所以左边的方块裡一个横排有 2 格，dpi 是 2 。右边的方块裡一个横排有 4 格，dpi 是 4。

20180731-1.jpg

而 px 指的是萤幕上最小单位，所以上图左边的方块裡「红色的一格」是 1px。右方方块裡「红色的一格」也是 1px。

pt

Point 點。1pt＝1/72 英吋。

20180731-2.jpg

如上圖如果一英吋裡一個橫排切成 72 格，紅色的那一格是不是 1px？dpi 是不是 72？

也就是說，72dpi 的情況下，上圖紅色的 1 格就是 1pt…等等，剛剛不是說 1 格紅色是 1px 嗎？所以 72dpi 的情況下，1pt = 1px 是這樣來的。

（此為示意圖，一橫排要塞 72 格進去的比例絕對不是上圖那樣。）

製作 iOS 的 Mockup

好，當我們知道 72dpi 的情況下，1pt = 1px，那麼來看 iOS 的官方文件 Image Size and Resolution 這一篇。

ImageResolution-Graphic_2x.png

為了要給不同解析度的螢幕使用，設計師切圖的時候需要出 3 種版本的切圖，分別為 @1x、@2x、@3x。

72dpi 的情況下，1pt = 1px。也就是說如果我們製圖的時候開 72dpi，就可以不需要管 pt 和 px 之間的換算了。

dp、sp

dp

Android 上的抽象單位。對應 160dpi 螢幕上的 px 數量。160dpi 情況下 1dp = 1px 。

20180731-3.jpg

官方文件裡 mdpi 的解析度為 160dpi，也就是一橫排有 160 格。（當然上圖比例也不對，要塞 160 格進去會小到看不清楚，懂意思將就點看。）

sp

Android 上的文字單位。一般情況下 sp = dp。如果使用者設定文字尺寸是「正常」時 1sp = 1dp，但文字尺寸是「大」或「超大」時 1sp > 1dp。

所以在160 dpi 情況下，1px ＝ 1dp ＝ 1sp。

20180731-4.jpg

製作 Android 的 Mockup
不要拿 iOS 的 Mockup 給 Android 用啊！ 1⁄72 和 1⁄160 會一樣大嗎？尺寸明顯差很多好嗎！

會出事的文字尺寸

如果你習慣開 72dpi 做 iOS Mockup，另外開 160dpi 做 Android Mockup，兩邊分開做，那字級通常不會出什麼事，還出事的話大多卡在解析度設定錯誤造成標示尺寸上的落差。

20180731-5.jpg

如果你習慣開 72dpi 做 iOS Mockup，另外開 160dpi 做 Android Mockup，兩邊分開做，那字級通常不會出什麼事，還出事的話大多卡在解析度設定錯誤造成標示尺寸上的落差。
**sp=pt × 160/dpi
例：36 pt x 160 / 72 = 80sp

網路上換算工具非常多，比如 Android Pixel Calculator，大家可以自行找順眼的。

最好的情況下是 iOS 、Android 分開做，真的不行起碼完成 iOS 稿後複製一份微調後再給 Android。千萬不要直接拿 iOS 的標示文件給 Android，尺寸落差會大到不是什麼「差幾 px 沒關係啦」的程度。

如果你懶得換算…

現在有很多向量製圖工具讓你不用在那邊算數學，通通做 @1x 尺寸的圖，扔進專門用來切圖和標示尺寸的軟體裡，頂多把圖片切出來，尺寸什麼的就是工程師自己會去看的事了。

順帶一提，我知道現在流行使用 Sketch，但不是每間公司都願意花錢訂，也不是每間公司都用 MAC，仍以 Photoshop 甚至 Illustrator 為設計主力的還是不少。

如果你使用 Photoshop 的話，有非常多種工具可以讓你避開算解析度、算 1x2x3x 尺寸的數學困難。較知名的有這 3 款，皆支援 MAC 和 WIN 的切圖標示工具：

1. Zeplin

2. Avocode

3. Sympli

參考 Avocode 的教學 General Design settings。做好 PSD 檔後上傳，設定製圖時的設計比例，如 @1x 後，這些工具會自動算好尺寸間距字級等等，不用煩惱了。記得使用向量製圖，不要用像素（放大縮小會糊，這應該不用多提了）。

喔對，這些工具大部份都不支援 Illustrator，想用上述工具省事的話不要拿 Illustrator 來做 Mockup。考慮一下 Affinity Designer 或免費的 Adobe XD。

转载文章https://blog.akanelee.me/2018/07/31/dpi-px-pt-dp-sp/