本文是為“初學(xué)者”或者作為從一開始就想要學(xué)習(xí)更多跨DPI和跨平臺(tái)設(shè)計(jì)知識(shí)的中級(jí)設(shè)計(jì)師準(zhǔn)備的序言讀物。 沒有復(fù)雜的計(jì)算和不可分析的圖表，只是按照劃分直截了當(dāng)?shù)貙?nèi)容呈獻(xiàn)給讀者，便于讀者理解或是直接運(yùn)用到設(shè)計(jì)過程中。

本文分為上下兩篇，在上篇中我們將會(huì)為設(shè)計(jì)師們介紹DPI與PPI的基礎(chǔ)知識(shí)以及數(shù)字設(shè)計(jì)的入門規(guī)范。

在明天將會(huì)發(fā)布的下篇中，我們將為設(shè)計(jì)師們帶來PPI在iOS與Android平臺(tái)上的實(shí)操處理知識(shí)。

原文：DESIGNER'S GUIDE TO DPI
來源： w3ctech
數(shù)英網(wǎng)對(duì)原文有刪減

一、什么是DPI、PPI

DPI(Dots Per Inch)是測(cè)量空間點(diǎn)密度的單位，最初應(yīng)用于打印技術(shù)中，它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會(huì)產(chǎn)生不清晰的圖片。

后來DPI的概念也被應(yīng)用到了計(jì)算機(jī)屏幕上，計(jì)算機(jī)屏幕一般采用PPI（Pixels Per Inch）來表示一英寸屏幕上顯示的像素點(diǎn)的數(shù)量，現(xiàn)在DPI也被引入。

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96，Mac的初始值是72，雖然這個(gè)值從80年代起就不是很準(zhǔn)確了。 一般來說，非retina桌面（包括Mac）的PPI的取值區(qū)間在72-120之間，因?yàn)檫@個(gè)取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。

這里有一個(gè)應(yīng)用實(shí)例： 27寸Mac影院顯示屏的PPI是109，這表示在每英寸的屏幕上顯示了109個(gè)像素點(diǎn)。斜角長(zhǎng)是25.7英寸（65cm），實(shí)際屏幕的寬度大概是23.5英寸，23.5109約等于2560，因此原始屏幕分辨率就是25601440px。

我知道23.5109不是恰好等于2560.實(shí)際上是23. 486238532英寸。要是用每厘米的像素點(diǎn)計(jì)算，會(huì)更加準(zhǔn)確，但是這里你知道就行。 

在屏幕上設(shè)計(jì)一個(gè)前面我們討論過的109*109px的藍(lán)色正方形。

這個(gè)正方形在1*1英寸的屏幕上有一個(gè)初始的物理尺寸，但是如果用戶的PPI是72，藍(lán)色正方形就會(huì)顯得更大。因?yàn)镻PI是72時(shí)，屏幕需要大約1英寸半的尺寸來展示109px的藍(lán)色正方形。模擬效果如下圖所示： 

二、屏幕分辨率（原始分辨率）

屏幕分辨率對(duì)用戶如何理解設(shè)計(jì)有很大的影響。幸運(yùn)的是，自從LCD顯示器代替了CRT，現(xiàn)在的用戶更趨向于使用原始分辨率，它保證了好的屏幕尺寸或者說PPI比例。

分辨率定義了屏幕上顯示的像素?cái)?shù)量（比如：27寸的顯示器分辨率是25601440px，2560是寬，1440是高）。在了解了PPI之后，我們就知道它不是一個(gè)測(cè)量物理大小的單位。你可以有一個(gè)25601440屏幕，它能跟墻一般大，也可以跟腦袋一般小。

一個(gè)27寸的Cinematic顯示屏，原始分辨率為2560*1440px，PPI為109。如果減小分辨率，元素將會(huì)顯示得更大，因?yàn)橛?3.5英寸的水平寬度需要數(shù)量遠(yuǎn)遠(yuǎn)不夠的像素點(diǎn)來填滿。 

如例子所示，屏幕的原始分辨率是2560*1440px。如果分辨率減小，像素點(diǎn)還是被展示在PPI為109的屏幕上。你的操作系統(tǒng)會(huì)自動(dòng)拉伸所有元素來填補(bǔ)間隙，使得整個(gè)屏幕被填滿。GPU/CPU會(huì)捕獲所有像素點(diǎn)并且使用新的比例重新計(jì)算他們。

如果想要設(shè)置27寸屏幕分辨率為1280*720（之前寬的一半，高的一半），GPU會(huì)讓一個(gè)像素點(diǎn)變成原來的2倍大來填充屏幕，那么結(jié)果就是會(huì)變得模糊。在分辨率為原來一半的時(shí)候，因?yàn)橛泻?jiǎn)單分頻器的存在可能看著還算可以。但是如果使用原來的1/3或者3/4，最終會(huì)以小數(shù)點(diǎn)結(jié)束，就不能等分一個(gè)像素點(diǎn)了。我們來看下面的例子： 

在原始分辨率的屏幕上畫一條1px的線，然后設(shè)置分辨率為50%。為了填滿屏幕，CPU需要制造150%的視覺效果，所有像素點(diǎn)都要乘以1.5，1*1.5=1.5，但是因?yàn)椴荒苡邪雮€(gè)像素點(diǎn)，這就使得填充周圍的像素點(diǎn)的顏色只有一部分，便產(chǎn)生了模糊。

這就是為什么當(dāng)你想要改變一臺(tái)Retina Macbook Pro的分辨率的時(shí)候，系統(tǒng)會(huì)展示下面的窗口來讓你知道（下面的屏幕截圖）這個(gè)分辨率會(huì)“看著像”1280*800px，它采用用戶的分辨率經(jīng)驗(yàn)來表達(dá)尺寸比例。

如果你希望你的設(shè)計(jì)精確到像素，那么最好不要改變?cè)挤直媛?。你也許覺得使用小的比例會(huì)更舒服，但是當(dāng)涉及到像素點(diǎn)時(shí)，這樣會(huì)影響精確性。有些時(shí)候，用戶會(huì)把調(diào)整分辨率當(dāng)作在控制屏幕（特別是桌面）美觀程度的方式，這樣雖然會(huì)讓設(shè)計(jì)看起來不太好，但是可以滿足用戶對(duì)易讀性的需求。

三、什么是4K

你也許聽到過很多次4K，它在最近非常流行。在了解它是什么之前，我們需要先弄明白“HD”的含義。它適用于從1280*720px或720p開始的720水平的任何分辨率。一些地方也將這個(gè)分辨率SD叫做標(biāo)清。

FULL HD全高清適用于1920*1080px的屏幕。大多數(shù)的TV以及越來越多的高端手機(jī)（Galaxy SIV, HTC one, Sony Xperia Z, Nexus5）都是這個(gè)分辨率。

4K始于3840*2160像素，它也叫做Quad HD，被稱為UHD超高清。簡(jiǎn)而言之，你可以放4個(gè)1080p的像素點(diǎn)在4K的屏幕上。

另外一個(gè)4K的分辨率是4096*2160，這個(gè)稍微大一點(diǎn)，一般用在投影儀和大畫幅相機(jī)上。

最新的OS不再參照4K的比例，這意味著給Chromebook或者macbook外接一個(gè)4K顯示器，將會(huì)使用最高的DPI。假如這樣，200%或者@2x，按照正常比例展示就會(huì)看起來很好但是有點(diǎn)小。如果你外接一個(gè)12寸4k屏幕到12寸高清屏幕（2x）的電腦，所有東西都會(huì)顯得小了兩倍。

四、什么是視網(wǎng)膜顯示屏

“Retina（視網(wǎng)膜）顯示屏”是Apple公司在發(fā)布iPhone 4時(shí)引入的。之所以叫做Retina是因?yàn)樵O(shè)備的PPI非常高以至于人的視網(wǎng)膜也不能在屏幕上分辨出像素點(diǎn)來。這個(gè)說法在現(xiàn)在的設(shè)備的屏幕范圍內(nèi)是正確的，但是隨著屏幕越來越好，我們的眼睛也會(huì)被訓(xùn)練得足夠感知像素點(diǎn)，特別是圓形的UI元素。從技術(shù)的角度來講，他們做的就是在完全相同的物理大小上展示比原來高和寬多一倍的像素點(diǎn)。

iPhone 3G/S是3.5英寸的，分辨率為480320px，PPI為163。 iPhone 4/S是3.5英寸的斜角，分辨率為960640px，PPI為326。 正好是兩倍的關(guān)系，同樣的物理大小，屏幕上的元素卻有兩倍的清晰度，因?yàn)樗麄冇袃杀兜南袼攸c(diǎn)。1個(gè)標(biāo)準(zhǔn)的像素＝4個(gè)Retina像素，像素的四倍。

圖注：在第三方設(shè)備上很難模擬出來自不同設(shè)備的不同圖片質(zhì)量，如上圖所示，Retina的音樂播放器雖然與iPhone 4的音樂播放器有相同的物理空間，但圖片質(zhì)量看上去比iPhone 4好了兩倍并且更清晰。

因?yàn)椤癛etina”顯示屏的命名歸Apple公司所有，所以其他公司使用“HI-DPI”或者“超大像素sp33d顯示器”（我將注冊(cè)這個(gè)）或者其他的來表示。

附加: 使用Apple的產(chǎn)品是熟悉DPI換算，理解分辨率、PPI、物理尺寸比例之間差異的極佳方式，因?yàn)槟阒恍枰紤]一個(gè)像素比。

五、什么是像素比

當(dāng)你的設(shè)計(jì)需要在不同PPI下轉(zhuǎn)換時(shí)，像素比就是你的救星。當(dāng)你知道像素比后，就不需要再考慮設(shè)備的詳細(xì)規(guī)格了。

以iPhone 3G和4為例，相同物理大小上iPhone4的像素點(diǎn)是3G兩倍，因此像素比就是2，這表示只需要用你的資源乘以2，就可以兼容4G的分辨率了。

讓我們先創(chuàng)建一個(gè)44*44px的iOS上被推薦的touch按鈕（我后面會(huì)介紹），定義為典型按鈕“Jim”。 為了讓Jim在iPhone 4上看起來更好，需要?jiǎng)?chuàng)建一個(gè)它兩倍大小的版本。下面就是我們做的。 

很簡(jiǎn)單?，F(xiàn)在的Jim，一個(gè)是標(biāo)準(zhǔn)PPI（iPhone 3）的Jim.png版本，一個(gè)是200%PPI（iPhone 4）的Jim@2x.png版本。

現(xiàn)在你也許會(huì)問，“等等?。∥液艽_定還有其他的像素比，不止這兩個(gè)?！庇?，這是一個(gè)噩夢(mèng)。好吧，也許不是噩夢(mèng)，但是我很肯定你寧愿花一天時(shí)間熨襪子也不想處理無數(shù)的像素比。幸好這也沒有你想象的那么嚴(yán)重，我們后面再說。

讓我們先說說單位，因?yàn)楝F(xiàn)在比起像素，你更需要單位來規(guī)范多DPI設(shè)計(jì)。這就是DP和PT起作用的地方。對(duì)于每一個(gè)你正在做的設(shè)計(jì)，像素比都是需要知道的。像素比把屏幕大小和PPI結(jié)合起來，讓人們更理解它們。

六、什么是DP、PT、SP

DP或PT是測(cè)量單位，你可以用來規(guī)范你的各種設(shè)備和多DPI的app模型。 DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn)，PT表示點(diǎn)。DP用在Android上，PT用在Apple上，但是他們本質(zhì)上是相同的。

簡(jiǎn)而言之，它能定義獨(dú)立于設(shè)備的像素比的大小，這會(huì)包含在不同角色（如設(shè)計(jì)師和工程師）之間的討論規(guī)則中。

繼續(xù)說前面“Jim”按鈕的例子。 Jim在標(biāo)準(zhǔn)的非Retina屏幕上寬度為44px，在Retina屏幕上是88px。從技術(shù)上給Jim添加20px的padding，在Retina上padding是40px。但是，當(dāng)你基于非Retina屏幕設(shè)計(jì)時(shí)計(jì)算Retina的像素值并沒什么意義。

因此我們需要做的就是以標(biāo)準(zhǔn)的100%非Retina比例作為一切設(shè)計(jì)的基礎(chǔ)。 

在這種情況下，Jim的大小就是4444DP（PT），padding為20DP（PT）。你可以在任何PPI上執(zhí)行你的規(guī)范，Jim仍然是4444dp/pt.

Android和iOS會(huì)調(diào)整自身大小適應(yīng)屏幕并且使用正確的像素比來進(jìn)行換算，這就是為什么我發(fā)現(xiàn)使用屏幕的原始的PPI設(shè)計(jì)會(huì)更簡(jiǎn)單。

SP和DP、PT從用途上來講是不同的，但是工作方式相同。SP表示與比例無關(guān)的像素，通常用來定義字體大小，SP受用戶Android設(shè)備字體設(shè)置的影響。作為一個(gè)設(shè)計(jì)師，為任何事物定義SP就像定義DP，最好基于清晰的1x的比例（以16sp為例，它是非常便于閱讀的字體大?。?。

七、PPI配置

你已經(jīng)知道PPI、Retina、像素比是什么了，接下來我們要討論的是 “如果我在設(shè)計(jì)工具里改變PPI配置，會(huì)發(fā)生什么呢？”

如果你問自己這個(gè)問題，那就表示你對(duì)設(shè)計(jì)軟件比較熟悉。

任何非打印的設(shè)計(jì)使用像素大小不用考慮原始PPI配置。軟件PPI配置是打印的一個(gè)傳統(tǒng)。如果你只是做web設(shè)計(jì)，PPI對(duì)位圖大小沒有影響。這就是我們使用像素比而不直接用PPI值的原因。你的畫布和圖像總是會(huì)被被軟件按照對(duì)應(yīng)的像素比換算成像素點(diǎn)。

這里有個(gè)例子。你可以在允許配置PPI值的軟件（比如Photoshop）里面進(jìn)行試驗(yàn)。我在Photoshop上畫了兩個(gè)80*80px的正方形和16pt的文本，一個(gè)配置的PPI值是72，另一個(gè)是144。 

如你所見，文本變大了，準(zhǔn)確點(diǎn)說是兩倍大，然而正方形還保持不變，原因就是Photoshop按照PPI值放大了pt值，結(jié)果在PPI值變?yōu)閮杀兜那闆r下文本大小增加為原來兩倍。而用像素定義的藍(lán)色正方形，保持了原來大小。像素就是一個(gè)像素點(diǎn)，不管PPI怎么配置它會(huì)一直保持一個(gè)像素。造成這個(gè)差異的是用來顯示它的屏幕的PPI值。

我們需要記住的是在做數(shù)字化設(shè)計(jì)的時(shí)候，PPI只會(huì)影響你對(duì)設(shè)計(jì)的感知、你的工作流和以pt為單位的圖案例如字體。如果你在工作資源文件里包含了各種PPI配置，程序就會(huì)根據(jù)接收到的文件的PPI比例在不同的文件里調(diào)整轉(zhuǎn)移視覺的大小，這會(huì)成為一個(gè)需要解決的問題。

那么，解決方案是什么呢？就是堅(jiān)持使用PPI（對(duì)于1x設(shè)計(jì)，最好控制在72-120之間）。我個(gè)人使用72PPI，因?yàn)檫@是Photoshop的默認(rèn)配置，我的同事也是。

注意

• PPI配置對(duì)輸出到web上的設(shè)計(jì)毫無影響。

• PPI配置只對(duì)基于PPI獨(dú)立計(jì)量（比如PT）產(chǎn)生的圖案有影響。

• 像素是任何數(shù)字化設(shè)計(jì)的度量單位

• 保持像素比以及設(shè)計(jì)的目標(biāo)，而不是PPI

• 在進(jìn)行數(shù)字化設(shè)計(jì)時(shí)使用實(shí)際的PPI配置，你會(huì)感受到它在目標(biāo)設(shè)備上的樣子（以1x的web/桌面設(shè)計(jì)72-120ppi為例）。

• 在你的文件中自始至終保持相同的PPI配置