本篇文章適用於：
- 設計的初學者
- 想要理解更多 DPI 的知識的設計師
這篇文章當中沒有複雜的計算和圖表，只希望可以直截了當地將內容呈獻給讀者，便於讀者理解以及直接運用到設計過程中，是設計領域中非常實用且專業的知識。
常見的誤區
有時候可以聽到客戶會說，我們要一個 800x600 像素的 banner，請幫我設置 300dpi，這樣比較清晰。
或是有人推銷他的素材是「300dpi 高清版本」，但是卻沒有給出物理上可測量的長寬，那簡直就是不知所云。
因為一張圖的 dpi 值要取決於印刷出來之後的圖像大小，一個 800x600 的 banner 是不是 300dpi，不是在 Photoshop 裡面輸入 300dpi 就可以解決的事情，而是顯示在螢幕上的大小，也就是說，一個 banner 的 dpi 是多少，是會隨著不同用戶的螢幕而改變的。
比如說 800x600px 的 banner 這個例子好了，如果今天原始的尺寸是 800x600px，那麼在一般的電腦上（解析度 72~109ppi）看都會是清晰的，但如果拿到 Retina 螢幕上面看，反而就變得模糊了。這是為什麼？
要解答這個問題，就要先從什麼是 dpi、ppi 開始說起。
什麼是 DPI、PPI？
DPI 或是 PPI 都是「密度」的單位，一定要有一個可測量的面積搭配才會有意義。就像是一個茶包，你可以只泡 100ml 的濃茶，也可以泡 2000ml 泡到根本喝不出來；DPI 也是這樣，光是有一個茶包，我們是無法判斷他會變成多濃的茶的。
DPI（Dots Per Inch，每英吋中的墨點）是測量單位面積內墨點密度的單位，最初應用於印刷技術中，它表示每英吋能印刷的的墨點數量。通常 DPI 愈小，表示印刷效果會愈不清晰。
後來 DPI 的概念也被應用到了電腦螢幕上，電腦螢幕一般採用 PPI（Pixels Per Inch，每英吋中的像素）來表示一英吋屏幕上顯示的像素點的數量，現在 DPI 也被引入。
安裝 Windows 操作系統的電腦屏幕 PPI 的初始值是 96，Mac 的初始值是 72，雖然這個值從 80 年代起就不是很準確了。 一般來說，非 retina 桌面（包括 Mac）的 PPI 的取值區間在 72-120 之間，因為這個取值區間能夠確保你的作品在任何地方都能保持大致相同的比例。
舉個例子： 27 吋 iMac 螢幕的 PPI 是 109，這表示在每英吋的屏幕上顯示了 109 個像素點。斜角長是 25.7 英吋（65cm），實際屏幕的寬度大概是 23.5 英吋，23.5109 約等於 2560，因此原始屏幕分辨率就是 2560x1440px。
一般印刷常用的 DPI 是多少？
通常我們會這樣分辨：
如果你要印刷拿在手上的東西，最好從 300dpi 開始，不要低於這個數字。
如果你要印刷貼在牆上的東西，大概可以是 100~250dpi，端看你的觀眾會從多遠看這個作品。如果是 A1 海報的話，最好還是 250dpi 以上比較妥當。
如果你是大圖輸出在大樓外牆、或是舞台背景、那麼可以設定 72dpi 左右，但是如果可以完全用向量格式處理，那是最好不過。
PPI 與螢幕解析度之間的關聯
如果對 Windows 95 有印象的朋友，應該記得 640x480、800x600、1024x768 的螢幕長什麼樣子。但如果用現在的螢幕切換成當年的解析度，總是會覺得好像比當年用的更模糊了。這是因為我們在更高解析度的螢幕上，運算了低解析度的畫面，使得電腦必須要強迫這些像素模糊，來填滿空白的部份。
什麼是視網膜螢幕
「Retina（視網膜）螢幕」是蘋果電腦在發佈 iPhone 4 時引入的。之所以叫做 Retina 是因為設備的 PPI 非常高以至於人的視網膜也不能在屏幕上分辨出像素點來。
這個說法在現在的設備的螢幕範圍內是正確的，但是隨著螢幕越來越好，我們的眼睛也會被訓練得足夠感知像素點，特別是圓形的 UI 元素。
從技術的角度來講，他們做的就是在完全相同的物理大小上展示比原來高和寬多一倍的像素點。
iPhone 3G/S 是 3.5 英吋的斜角，分辨率為 480x320px，PPI 為 163。 iPhone 4/S 是 3.5 英吋的斜角，分辨率為 960x640px，PPI 為 326。
事實證明正好是兩倍的關係，同樣的物理大小，螢幕上的元素卻有兩倍的清晰度，因為他們有兩倍的像素點。1 個標準的像素＝4 個 Retina 像素。
另外，因為「Retina」顯示器的名稱被蘋果註冊了，所以其他公司使用「HI-DPI」或是其他的來表示，但是說的大概都是同一種顯示方式。
像素比：關於 @2x @1.5x @3x 的那些事
當你的設計需要在不同 PPI 下轉換時，像素比就是你的救星。當你知道像素比後，就不需要再考慮設備的詳細規格了。
以 iPhone 3G 和 4 為例，相同物理大小上 iPhone4 的像素點是 3G 兩倍，因此像素比就是 2，這表示只需要用你的資源乘以 2，就可以兼容 4G 的分辨率了。
讓我們先創建一個 44*44px 的 iOS 按鈕。 為了讓這個按鈕在 iPhone 4 上看起來更好，我們需要一個放大兩倍的版本。
請注意，當我們要所有的單位都必須放大兩倍。
什麼是 DP、PT、SP
DP 或 PT 是測量單位，你可以用來規範你的各種設備和多 DPI 的 app 模型。 DP(Dip) 表示獨立於設備的像素點，PT 表示點。DP 用在 Android 上，PT 用在 Apple 上，但是他們本質上是相同的。
簡而言之，它能定義獨立於設備的像素比的大小，這會包含在不同角色（如設計師和工程師）之間的討論規則中。
繼續說前面「Jim」按鈕的例子。 Jim 在標準的非 Retina 屏幕上寬度為 44px，在 Retina 屏幕上是 88px。從技術上給 Jim 添加 20px 的 padding，在 Retina 上 padding 是 40px。但是，當你基於非 Retina 屏幕設計時計算 Retina 的像素值並沒什麼意義。
因此我們需要做的就是以標準的 100% 非 Retina 比例作為一切設計的基礎。
