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

像素密度 (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 以上的時候，非整數縮放造成的模糊變得更難察覺到。所以我預測裝置廠商之後會更常用這種造假手法，我們只能希望縮放的效能缺陷讓這件事情慢點發生！