在移動(dòng)端 UI 設(shè)計(jì)中，經(jīng)常會(huì)用到的單位有 4 種：px、pt、dp 和 sp，很多人分辨不清這幾種單位及其換算關(guān)系，以及 iOS 和 Android 的切圖要求，我在這里做下簡單的介紹，希望大家讀完后能有所收獲（如有錯(cuò)誤，歡迎糾正）。
一、常用單位
1. px (像素)
px 即 pixel，像素點(diǎn)，電子屏幕上組成圖像的最基本單位，在描述屏幕分辨率時(shí)也會(huì)使用該單位。1px 表示一個(gè)像素，例如 iPhone 8 的尺寸為 750px × 1334px，表示在該手機(jī)屏幕上，水平方向每行有 750 個(gè)像素點(diǎn)，垂直方向每列有 1334 個(gè)像素點(diǎn)。
2. pt (磅)
pt 即 point，有兩個(gè)含義：一是印刷行業(yè)常用單位，是一個(gè)標(biāo)準(zhǔn)長度單位，絕對大小，1pt = 1/72 英寸 = 0.35mm；二是 iOS 開發(fā)用的基本單位，當(dāng)設(shè)計(jì)師以 1 倍尺寸進(jìn)行設(shè)計(jì) (375pt × 667pt) 并給出標(biāo)注稿時(shí)，開發(fā)人員無需除以 2 便可直接使用。
3. dp (也稱 dip)
dp 是安卓開發(fā)用的基準(zhǔn)單位，在 dpi (屏幕像素密度，即每英寸包含的像素點(diǎn)) 為 160 的屏幕為上，1dp = 1px。為了簡單起見，Android 把屏幕密度分為了 5 種：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，下文會(huì)詳細(xì)介紹其換算關(guān)系。
4. sp (可縮放獨(dú)立像素)
在安卓系統(tǒng)里，sp 與 dp 類似，不同的是 sp 可以根據(jù)用戶的字體大小首選項(xiàng)進(jìn)行縮放，而 dp 則不會(huì)。 盡量使用 dp 作為空間大小單位，sp 作為文字相關(guān)大小單位，例如：新聞?lì)惡投绦蓬惖却笃谋荆扑]使用 sp 為單位。
二、pt 與 px 換算
1. pt = (ppi / dpi) px
在 iOS 開發(fā)中，不同機(jī)型的 iPhone 設(shè)備需要用到不同倍率的切圖，下表格為各 iPhone 機(jī)型顯示屏參數(shù)對比：
| 機(jī)型 | X | 8+/7+/6+ | 8/7/6/6s | 5/5s | 4/4s |
|---|---|---|---|---|---|
| 屏幕尺寸(inch) | 5.8 | 5.5 | 4.7 | 4 | 3.5 |
| 物理尺寸(px) | 1125 × 2436 | 1080 × 1920 | 750 × 1334 | 640 × 1136 | 640 × 960 |
| 設(shè)計(jì)尺寸(px) | 1125 × 2436 | 1242 × 2208 | 750 × 1334 | 640 × 1136 | 640 × 960 |
| 開發(fā)尺寸(pt) | 375 × 812 | 414 × 736 | 375 × 667 | 320 × 568 | 320 × 480 |
| ppi | 458 | 401 | 326 | 326 | 326 |
| dpi | 163 | 154 | 163 | 163 | 163 |
| 倍率 | @3x | @3x | @2x | @2x | @2x |
這里再簡單了解下兩個(gè)概念，ppi 和 dpi。
ppi (iOS)：即 pixel per inch，屏幕像素密度，表示每英寸所包含的像素點(diǎn)，該值越高，屏幕越細(xì)膩。
dpi (iOS) ：開發(fā)像素密度，表示每英寸所包含的開發(fā)像素點(diǎn)。
在 iOS 開發(fā)中，規(guī)定以 ppi = 163，dpi = 163 作為開發(fā)基準(zhǔn)，
當(dāng) ppi = 163，dpi = 163 時(shí)，則 1pt = 1px；
當(dāng) ppi = 326，dpi = 163 時(shí)，則 1pt = 2px；
當(dāng) ppi = 401，dpi = 154 時(shí)，則 1pt = 2.6px ≈ 3px。
(為什么 iPhone 8+/7+/6+ 的開發(fā)基準(zhǔn)是154？可能要問問蘋果了...)
依此類推，得出換算公式一：
pt = (ppi / dpi) px
若有小數(shù)，四舍五入即可。
2. iOS 切圖要求
在 iOS 開發(fā)中，目前只需要 @2x 和 @3x 兩種切圖，所以導(dǎo)出 2 倍和 3 倍的 png 圖片即可。導(dǎo)出前注意檢查切圖是否存在半像素、毛邊等情況，保證對齊像素，這樣才能有效避免上線后頁面上的 icon 出現(xiàn)虛邊的問題，提高細(xì)節(jié)質(zhì)量。
另外補(bǔ)充一點(diǎn)：從整體開發(fā)尺寸看，iPhone 8 是 375 × 667 pt (@2x)，而 iPhone X 是 375 × 812 pt (@3x)，同樣的寬度，一個(gè)用 @2x 圖，一個(gè)用 @3x 圖，iPhone X 表現(xiàn)出了更高的清晰度，如圖 2-1 所示。
三、dp 與 px 換算
1. dp = (dpi / 160) px
在 Android 開發(fā)中，因?yàn)闄C(jī)型參差不齊，需要用屏幕密度來區(qū)分設(shè)計(jì)。
| 屏幕密度 | mdpi | hdpi | xhdpi | xxhpdi | xxxhdpi |
|---|---|---|---|---|---|
| 代表設(shè)計(jì)像素 | 320 × 480 px | 480 × 800 px | 720 × 1280 px | 1080 × 1920 px | 1440 × 2256 px |
| dpi | 160 | 240 | 320 | 480 | 640 |
| 基準(zhǔn)dpi | 160 | 160 | 160 | 160 | 160 |
| 倍率 | @1x | @1.5x | @2x | @3x | @4x |
注意，這里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念，dpi (iOS) 是開發(fā)像素密度，而 dpi (Android) 即 dot per inch，表示屏幕像素密度，類似 iOS 開發(fā)里的 ppi。
Android 中，規(guī)定以 dpi = 160 為開發(fā)基準(zhǔn)，
當(dāng) dpi = 160，基準(zhǔn)dpi = 160，1dp = 1px；
當(dāng) dpi = 240，基準(zhǔn)dpi = 160，1dp = 1.5px；
當(dāng) dpi = 320，基準(zhǔn)dpi = 160，1dp = 2px。
依此類推，得出換算公式二：
dp = (dpi / 160) px
2. Android 切圖要求
在設(shè)計(jì)圖標(biāo)時(shí)，對于 5 種主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 應(yīng)按照 2:3:4:6:8 的比例進(jìn)行縮放，如圖 3-1 所示。
例如，一個(gè)啟動(dòng)圖標(biāo)的尺寸為 48 × 48 dp，這表示在 mdpi 的屏幕上其實(shí)際尺寸應(yīng)為 48 × 48 px；在 hdpi 的屏幕上其實(shí)際大小是 mdpi 的 1.5 倍 (72 × 72 px)；在 xhdpi 的屏幕上其實(shí)際大小是 mdpi 的 2 倍 (96 × 96 px)，依此類推。
在某些況行下，還需要提供一種特殊的切圖：點(diǎn)九圖 (上圖所示)。點(diǎn)九圖是 Android 開發(fā)中用到的一種特殊格式的圖片，文件名以 “.9.png” 結(jié)尾。
這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)，比如對話框背景圖片就會(huì)用到點(diǎn)九圖。
--
以上是全部內(nèi)容，感謝你的閱讀！
End
