Android支援太多手機,造成開發者必須因應不同的手機螢幕設計UI.
同樣是4.3吋的螢幕,有800*480的解析度,也有1280*720的解析度。
又或者一樣是1280*720解析度,但螢幕尺寸有5.5吋,也有7吋的。
在這麼錯縱複雜的螢幕下,如何設計出清晰且正常比例的UI呢?
首先要釐清一些概念與名詞。
像素 (Pixel)
也稱畫素,螢幕呈現影像的最小單位,也可說是點陣圖的最小單位。
數位影像尺寸通常是以像素計算,例如: 48*48 pixel 就是一個正方形的影像大小。
因為像素是數位影像的最小單位,可以想像成一個像素就是一個點,
48*48 pixel就是長和寬都由48個點所組成的。如下圖:
螢幕尺寸
也就是我們大家熟知的幾吋幾吋,手機是4吋的,
電腦螢幕是22吋的,電視螢幕是32吋的。
像素與螢幕尺寸的關係
請問,48*48 pixel的影像到底有多大? 他是一個正方形,長與寬相同,
不過你能告訴我長寬是幾公分嗎? 或是幾英寸呢? 不知道。
前面提到像素是最小單位,最小單位總也有個長度吧?
你會發現找了一堆資料,沒有人跟你說一像素是多大,只會說是最小單位。
其實48*48 pixel的圖片,它可以是長寬10公分,也可以是1公分。
取決於像素和螢幕尺寸的關係。
現在有兩支手機如下:
手機A,4.3吋,解析度800*400
手機B,4.3吋,解析度1280*720
手機A,請問800*480是什麼單位?
其實就是像素 (Pixel), 我個人覺得我們濫用了解析度這個詞。
800*480就是Pixel單位,它說明4.3吋的手機螢幕中,長有800個像素填充,
寬有480個像素填充。手機B解析度則較高,
因為它的長有1280個像素填充,寬有720個像素填充。
你可以把像素想成點,這兩支手機螢幕尺寸都是4.3吋,
可是兩支手機填充的像素不同,同樣尺寸下,像素填充越多,
解析度就越高。
這兩支手機如果顯示一張圖48*48 pixel會怎麼樣呢?
手機A會比較大張,手機B會比較小張,請看下圖:
圖中的鉛筆都是48*48 pixel,同樣是4.3吋手機A和手機B,
手機A,800個點(Pixel)填滿4.3吋的長,
手機B,1280個點(Pixel)填滿4.3吋的長,
它們的長一樣,使得手機A的點(Pixel)比手機B的點還要大點。
也就是你比較容易用肉眼看到手機A的一格格的畫格 (Pixel),
所以同樣Pixel的圖,手機A會比較大張,手機B比較小張。
手機A解析度比較低,手機B解析度比較高。
PPI
800*400就是填充像素,我會說解析度800*400濫用,
是因為螢幕解析度跟螢幕尺寸與填充像素有關,而不是只和填充像素有關。
1280*720的解析度一定比800*400高嗎? 如果同樣的螢幕尺寸是對的,
但不同的螢幕尺寸就不一定了喔。PPI才是正確拿來描述解析度的,請看下圖:
此圖來自iPhone官方網站,從左至右為iPhone 6 Plus, iPhone 6, iPhone 5s, iPhone 5c.
可以發現iPhone 6和iPhone 5s的螢幕尺寸與像素皆不同,但解析度都是326 ppi.
ppi的公式為
√(像素長度2+像素寬度2)/ 螢幕尺寸 ,將iPhone 5s和iPhone 6套用公式如下:
- iPhone 5s,√(1136*1136 + 640*640) / 4 = 325.96
- iPhone 6 ,√(1334*1334 + 750*750) / 4.7 = 325.61
iPhone 6雖然填充像素增加,但螢幕尺寸也增加,所以與iPhone 5的解析度相同。
也因為兩支手機的解析度相同,所以使用同樣像素尺寸的icon即可。
例如iPhone 6使用128*128的圖片,iPhone 5s也是要使用128*128的圖片,
如此圖片就會在這兩支手機中有相同的顯示比例。
所以,PPI的值越大,需要的圖片要越大張。
另外,DPI通常用於列印出版用,在螢幕的世界裡,DPI = PPI.
讓Android自行選擇適合的圖片大小
螢幕世界中,DPI = PPI ,由於官方文件都使用DPI,
所以在此段落我們一概使用DPI當作解析度,但意思跟PPI是一樣的。
寫過Android程式就知道透過不同的drawable資料夾可以支援多尺寸螢幕。
現在我們知道PPI才是決定圖片大小,而非螢幕尺寸,也非像素填充。
資料夾的命名應該如下:
- drawable-ldpi
- drawable-mdpi
- drawable-hdpi
- drawable-xhdpi
- drawable-xxhdpi
別再使用small, normal, large等螢幕尺寸來規劃圖片大小,
資料夾間,圖片大小相對比例應該為何呢? Google也有提供說明如圖:
這些倍率是怎麼算出來呢? Android有自己的圖片單位Density-independent pixel(dp),
在layout中UI的單位建議使用dp,因為它會幫你算出正確的pixel大小,公式如下:
由此可見,當dpi = 160 (也就是mdpi)時,pixel = dp. 更大的dpi只要透過此公式,
便可算出需要比mdpi使用多大的比例的圖。
DPI與PPI的差別
PPI = Pixel Per Inch,每英吋使用多少像素,用於螢幕。
DPI = Dot Per Inch,每英吋使用多少點,用於印刷。
在螢幕的世界裡,最小單位就是像素,
也就是點(所以前面才提到可以想像成點)。
嚴格來說,在螢幕上解析度應該都要說PPI,
只是現在都混用,所以只能說在螢幕中,
PPI = DPI。
在印刷中,是以一英吋裡可以噴出幾滴油墨計算,
一滴油墨就是一個點,所以使用DPI作為單位。
當影像由螢幕要列印出來時,PPI和DPI是不同的。
因為印刷機的不同,一像素未必等於一滴油墨(點)。
結論
- 螢幕解析度由PPI決定,而不是螢幕尺寸也不是像素填充
- PPI越高,所需要的圖案也越大,才能顯示相同比例的UI
- drawable應該要以ldpi, mdpi, hdpi來分類,而不是small, normal, large來分類
- 螢幕使用PPI,印刷使用DPI,只有在螢幕世界中PPI = DPI.