2019
02
13

像素密度解密[轉載自intersection]

關鍵字:UI

像素密度 (Pixel Density) 的意思是像素 (Pixel) 被壓縮到某個數量的實體面積(通常是英吋)。最初的 Mac 每吋有 72 個像素:聽起來好像很多,但是圖片只要符合以下這樣的粗顆粒像素就好了。

 

螢幕的技術之後進步非常多,現在即使是最基本的電腦螢幕,每英吋都有介於 115 到 160 個像素 (“ppi”, pixel per inch)。2010 年,蘋果公司推出搭載視網膜螢幕 (Retina Display) 的 iPhone,讓局面進入全新的一章:每英吋兩倍像素的超鮮豔螢幕,讓圖片達到前所未見地清晰。

 

為了保持 UI 的實體大小 (physical size) 相同,像素密度成為兩倍。高度 44px 的按鈕,現在是 88px。如果要相容於不同的裝置,設計師得同時提供 1x,也就是跟原本相同的圖片(例如:圖示)和全新的 2x 大小。但是這裡出現一個問題:你不能再說「嘿,這個按鈕高度應該是 44px。」因為在其他裝置上同時也是 88px。目前沒有一個專屬於像素密度的單位,現階段的解決方法是「Points(點)」,或簡稱 “pt”,在視網膜螢幕出現之前,1pt 代表 1px,而在 2x 的視網膜螢幕上代表 2px。這讓設計師可以說「嘿,這個按鈕的高度應該是 44pt。」,然後可以根據裝置各自的像素密度乘上去⋯像是 1x 或 2x,還有蘋果的 Plus 系列螢幕是 3x。

 

PT & DP

當然,這不僅限於蘋果的裝置。現在不管是哪種作業系統,桌面或是手持的,都支援高 ppi/dpi 螢幕。Google 有他們自己給 Android 用的密度單位規範。它們不叫做 “pt”,而是 “DIPs”,也就是 density-independent pixels(密度專屬像素,唸作 dips),縮寫是 dp。這跟 iOS 的 pt 其實不盡相同,但是背後的概念是一樣的,都是根據裝置的縮放比例(2x 或 3x 等),轉換為像素的單位。

 

你可能會好奇 1pt 的實體大小。其實對 UI 設計師來說,不用特別擔心這件事,因為我們幾乎無法掌控每個裝置的實體螢幕大小差異,設計師只要相信製造廠商有設定好適合的像素密度,然後專注在準備 1x、2x、3x 或其他比例的圖片。但是,如果你真的很好奇,只知道蘋果的裝置在 1 英吋和 1pt 之間沒有一定的轉換方式,也就是說,沒有任何一個像素密度的單位代表 1pt:每個裝置都不一樣(請看後面的「主觀尺寸」)。在 iOS 上,一個點代表每吋 132ppi 到 163ppi 之間;而在 Android,DIP 都固定在 160ppi。

 

有限的混亂

準備好看看現實情況。在早期的高解析度行動裝置,像素密度就只有簡單的 1x 和 2x。但是現在簡直是瘋了:要支援很多像素密度。Android 就是最佳代言:在本篇文章發佈的時候,來自各家廠商共有六種常見的像素密度。這代表圖示外觀要在這些螢幕上看起來一樣大,得做出六個不同的圖片。而蘋果的大致上要二或三種。

 

以向量設計;以 1x 設計

有兩個實用的小秘訣。首先,我們必須得用向量圖形設計,讓介面、圖示和圖片可以放大或縮小到任何比例。

 

第二個是我們必須以 1x 大小進行設計。也就是說,所有的單位都以「點」為基礎,然後在輸出的時候放大到各個像素密度⋯而不是以每個裝置的最終像素大小進行設計(2x、3x⋯等),這樣只會遇到各種麻煩。因為把 2x 的圖片放大至 150%,也就是 3x 的圖片,會讓邊緣模糊,但是 1x 的圖片放大到 200% 和 300% 仍然清楚。

 

標準大小的 iPhone 模型 (mockups) 應該是 375x667,而不是它們實際的大小 750x1334。大部份的設計工具都沒有把「點」與像素做區別(Flinto 是我注意到的唯一例外),所以就要勞駕設計師假裝像素是「點」,然後彈性輸出為兩倍或三倍大小。

 

暫時先造假

這部分屬於進階了,不過還是值得提一下:裝置有時候會造假。它們造假成常見的比率,像是 3x 其實是 2.61x。為求方便,圖片直接放大到 3x。這是目前 iPhone Plus 的做法:把 1242x2208 的介面縮到 1080x1920 的螢幕(手機的繪圖晶片即時處理這個縮小工作)。

 

因為圖片只縮小了一點點 (87%),看起來還是非常精緻:1px 的線條在將近 3x 的螢幕上仍然清晰又漂亮。雖然我沒有內線消息,但是之後只要能夠處理這樣誇張規格的硬體成為產品,蘋果有可能會推出真正的 3x iPhone Plus。

(Bruce Wang 針對 iPhone 6 Plus 的螢幕寫了一篇很棒的文章)

 

可以接受這樣非整數的縮放作法嗎?其實答案非常明顯,這裡不一一說明。縮放後的品質差距可以小到忽略嗎?許多 Android 裝置也有用這樣的縮放方法,藉此接近像素與「點」之間的標準轉換比率。只不過,很不幸地,有些做得非常差。那樣的縮放令人感到厭惡,因為你設計的素材,本來是清晰且符合完美像素 (pixel-perfect),在某些比例的時候會因為內插補點 (interpolation) 變得模糊(例如:1px 的直線變成 1.15px)。即使你不像我屬於完美像素的狂熱追求者,也不能否定設計元素為了看起來清晰,必須要符合整數像素。很不幸地,當像素密度達到 4x 以上的時候,非整數縮放造成的模糊變得更難察覺到。所以我預測裝置廠商之後會更常用這種造假手法,我們只能希望縮放的效能缺陷讓這件事情慢點發生!

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所