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 用啊! 1721160 會一樣大嗎?尺寸明顯差很多好嗎!

會出事的文字尺寸

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

pt 這個單位在不同 dpi 情況下,顯示出來的尺寸是不同的,如上圖。

iOS 的 64pt 在 Android 會變成 28.8sp。如果工程師直接拿 iOS 的 64pt 當成是 Android 的文字尺寸,字體會變得非常大。

pt 換算 sp 公式$$pt * 72 / 160 = sp
$$

例:64 pt x 72 / 160 = 28.8sp

網路上換算工具非常多,比如 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。

comments powered by Disqus