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。
而 px 指的是螢幕上最小單位，所以上圖左邊的方塊裡「紅色的一格」是 1px。右方方塊裡「紅色的一格」也是 1px。
pt
Point 點。1pt＝1/72 英吋。
如上圖如果一英吋裡一個橫排切成 72 格，紅色的那一格是不是 1px？dpi 是不是 72？
也就是說，72dpi 的情況下，上圖紅色的 1 格就是 1pt…等等，剛剛不是說 1 格紅色是 1px 嗎？所以 72dpi 的情況下，1pt = 1px 是這樣來的。
（此為示意圖，一橫排要塞 72 格進去的比例絕對不是上圖那樣。）
製作 iOS 的 Mockup
好，當我們知道 72dpi 的情況下，1pt = 1px，那麼來看 iOS 的官方文件 Image Size and Resolution 這一篇。
為了要給不同解析度的螢幕使用，設計師切圖的時候需要出 3 種版本的切圖，分別為 @1x、@2x、@3x。
72dpi 的情況下，1pt = 1px。也就是說如果我們製圖的時候開 72dpi，就可以不需要管 pt 和 px 之間的換算了。
dp、sp
dp
Android 上的抽象單位。對應 160dpi 螢幕上的 px 數量。160dpi 情況下 1dp = 1px 。
官方文件裡 mdpi 的解析度為 160dpi，也就是一橫排有 160 格。（當然上圖比例也不對，要塞 160 格進去會小到看不清楚，懂意思將就點看。）
sp
Android 上的文字單位。一般情況下 sp = dp。如果使用者設定文字尺寸是「正常」時 1sp = 1dp，但文字尺寸是「大」或「超大」時 1sp > 1dp。
所以在160 dpi 情況下，1px ＝ 1dp ＝ 1sp。
製作 Android 的 Mockup
不要拿 iOS 的 Mockup 給 Android 用啊！ 1/72 和 1/160 會一樣大嗎？尺寸明顯差很多好嗎！
會出事的文字尺寸
如果你習慣開 72dpi 做 iOS Mockup，另外開 160dpi 做 Android Mockup，兩邊分開做，那字級通常不會出什麼事，還出事的話大多卡在解析度設定錯誤造成標示尺寸上的落差。
pt 這個單位在不同 dpi 情況下，顯示出來的尺寸是不同的，如上圖。
iOS 的 36pt 在 Android 會變成 80sp。如果工程師直接拿 iOS 的 36pt 當成是 Android 的文字尺寸，字體會變得非常小。
pt 換算 sp 公式$$sp = pt \times \frac{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 的切圖標示工具：
參考 Avocode 的教學 General Design settings 。做好 PSD 檔後上傳，設定製圖時的設計比例，如 @1x 後，這些工具會自動算好尺寸間距字級等等，不用煩惱了。記得使用向量製圖，不要用像素（放大縮小會糊，這應該不用多提了）。
喔對，這些工具大部份都不支援 Illustrator，想用上述工具省事的話不要拿 Illustrator 來做 Mockup。考慮一下 Affinity Designer 或免費的 Adobe XD。
