基礎(chǔ)知識(shí)！DPI指南(4)

本文是為“初學(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ì)過程中，非常實(shí)用且專業(yè)的知識(shí)，記得收藏唷。

什么是DPI、PPI？

DPI（Dots Per Inch）是測量空間點(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)。斜角長是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)色正方形。模擬效果如下圖所示：

附加： 不考慮顏色和分辨率差異，因?yàn)槊總�(gè)人看到的設(shè)計(jì)都是不同的。你應(yīng)該力求達(dá)到平衡，滿足大多數(shù)的用戶的需求就可以了。不要期待用戶擁有和你一樣好的屏幕。

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

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

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

如今的LCD顯示器有分辨率初始值或者原始分辨率來確定屏幕上展示像素點(diǎn)的數(shù)量。它和過去的CRT顯示器稍有不同，這里就不贅述了。

一個(gè)27寸的影院顯示屏，原始分辨率為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)橛泻唵畏诸l器的存在可能看著還算可以。但是如果使用原來的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á)尺寸比例。

這些描述帶有濃重的主觀色彩，因?yàn)樗孟袼胤直媛首鳛楹饬课锢沓叽绲膯挝�，雖然不夠嚴(yán)謹(jǐn)，但至少他們覺得是對(duì)的。

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

什么是4K

你也許聽到過很多次4K，它在最近非常流行。在了解它是什么之前，我們需要先弄明白“HD”的含義。

需要事先聲明的是，本文是簡化版本，所以這里只考慮最常見的分辨率。HD有不同的類別。

它適用于從1280*720px或720p開始的720水平的任何分辨率。一些地方也將這個(gè)分辨率SD叫做標(biāo)清。

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

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

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

如果我外接一個(gè)4k的顯示器到電腦會(huì)發(fā)生什么呢？

最新的OS不再參照4K的比例，這意味著給Chromebook或者macbook外接一個(gè)4K顯示器，將會(huì)使用最高的DPI。假如這樣，200%或者@2x，按照正常比例展示就會(huì)看起來很好但是有點(diǎn)小。

假設(shè)的例子：如果你外接一個(gè)12寸4k屏幕到12寸高清屏幕（2x）的電腦，所有東西都會(huì)顯得小了兩倍。

附加:

4k就是四倍全高清。如果現(xiàn)在的OS掌握了4k但是又不按照比例來，這說明現(xiàn)在還沒有特定的4k資源。如今沒有手機(jī)或者平板電腦使用4k.

顯示器赫茲

稍微從PPI和屏幕分辨率中休息一下，來看個(gè)小知識(shí)。你可能注意到在屏幕設(shè)置中靠近分辨率的地方有顯示器的Hz值，它和PPI沒什么關(guān)系，顯示器赫茲或者刷新頻率是顯示器每秒展示固定圖像或者幀的速度單位，比如一個(gè)60 Hz的顯示器每秒可以顯示60幀，同樣，一個(gè)120 Hz的顯示器每秒可以顯示120幀。

在UI環(huán)境中，顯示器赫茲（Hz）決定了動(dòng)畫的流暢和精細(xì)程度，大多數(shù)的屏幕都是60Hz。而每秒顯示的幀數(shù)依賴于設(shè)備處理圖像的能力，像在Atari 2600使用120Hz屏幕就沒有太大的用處。

下面這個(gè)例子，可以幫助大家更好地理解。T-rex同時(shí)在60Hz和120Hz的屏幕上以完全相等的步伐快速從A點(diǎn)到B點(diǎn)，60fps的屏幕上展示了9幀動(dòng)畫，而在相同時(shí)間內(nèi)120fps的屏幕展示了2倍幀數(shù)，并且動(dòng)畫在120Hz屏幕上會(huì)顯得更加流暢。

附加: 也許有人會(huì)說，每秒顯示60幀以上人眼是無法識(shí)別的，這是錯(cuò)誤的。

什么是視網(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。

事實(shí)證明正好是兩倍的關(guān)系，同樣的物理大小，屏幕上的元素卻有兩倍的清晰度，因?yàn)樗麄冇袃杀兜南袼攸c(diǎn)。1個(gè)標(biāo)準(zhǔn)的像素＝4個(gè)Retina像素，像素的四倍。

思考下面的例子，在復(fù)雜設(shè)計(jì)中如何直接應(yīng)用：

圖注：在第三方設(shè)備上很難模擬出來自不同設(shè)備的不同圖片質(zhì)量，如上圖所示，Retina的音樂播放器雖然與iPhone 4的音樂播放器有相同的物理空間，但圖片質(zhì)量看上去比iPhone 4好了兩倍并且更清晰。如果大家想在本地進(jìn)行驗(yàn)證，我會(huì)提供免費(fèi)的演示事例源碼，供大家下載（http://sebastien-gabriel.com）。

因?yàn)?ldquo;Retina”顯示屏的命名歸Apple公司所有，所以其他公司使用“HI-DPI”或者“超大像素sp33d顯示器”（我將注冊這個(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è)它兩倍大小的版本。下面就是我們做的。

很簡單。現(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è)噩夢。好吧，也許不是噩夢，但是我很肯定你寧愿花一天時(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是測量單位，你可以用來規(guī)范你的各種設(shè)備和多DPI的app模型。 DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn)，PT表示點(diǎn)。DP用在Android上，PT用在Apple上，但是他們本質(zhì)上是相同的。

簡而言之，它能定義獨(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ì)更簡單。

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

附加: 始終使用分辨率或者非比例的值作為規(guī)范。屏幕尺寸、分辨率種類越多，它就越重要。

PPI配置

現(xiàn)在，你已經(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配置

關(guān)于這個(gè)的額外趣味閱讀：StackExchange post

iOS上的PPI處理

是時(shí)候鉆研下特定平臺(tái)的設(shè)計(jì)了。

讓我們花點(diǎn)時(shí)間看看2014年年初時(shí)的iOS設(shè)備。 從屏幕大小和DPI的角度來看，iOS有兩種類型的手機(jī)設(shè)備和兩種類型的筆記本/臺(tái)式電腦屏幕。

對(duì)于手機(jī)，有iPhone和iPad。 在手機(jī)分類中，有過去的3GS（iOS6依舊支持）和更高版本，其中只有iPhone 3GS是非Retina。iPhone 5以及后來的都用了和iPhone 4/4s有相同DPI的更好的屏幕。讓我們來看看下面的列表：

2014年9月Apple宣布，現(xiàn)在又有2個(gè)新類別的iPhone：iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一點(diǎn)（0.7英寸左右），但是PPI相同。iPhone 6 Plus由于它的尺寸，5.5英寸，產(chǎn)生了iOS上新的像素比，@3x。

相較于其他iPhone，iPhone 6 Plus控制展示比較特殊的是：視覺效果降頻。

以為iPhone 6設(shè)計(jì)為例，設(shè)計(jì)的畫布為1334750px，手機(jī)上就呈現(xiàn)1334750的物理像素。當(dāng)為iPhone 6 Plus時(shí)，手機(jī)的分辨率小于渲染的圖像，因此你設(shè)計(jì)的分辨率為22081242px，展示時(shí)降頻為19201080px。如下圖：

物理分辨率比渲染分辨率小15%，會(huì)造成一些細(xì)節(jié)問題，比如半像素使得精細(xì)的地方變模糊。分辨率如此高也是很微妙的，除非你近距離觀察。因此，在2208*1242px的畫布上設(shè)計(jì)，需要注意設(shè)計(jì)中真正精細(xì)的地方，像是分隔符。模擬如下：

感謝Paintcode的說明，看看他們專門的頁面。點(diǎn)擊查看

在iPod touch分類中，iPod第四代出來的時(shí)候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7，它的屏幕大小與iPhone 5相同。

最后說說iPad。除了iPad 第一代，其余的都用的是iOS7，同時(shí)只有iPad2和iPad mini是非Retina屏幕。從設(shè)計(jì)的角度來看，iPad mini只是普通的iPad（一樣的PPI屏幕），但是物理體積更小，也就是說它們擁有相同的分辨率，只是大小從9.7英寸減小到了7.9英寸。保持同樣的比例，便會(huì)相應(yīng)地增大像素點(diǎn)的密度，你的虛擬資源就會(huì)顯得更小了。

至于臺(tái)式機(jī)和筆記本，我們不會(huì)全面討論Apple提供的各種尺寸的屏幕。在今天，Apple提供的幾乎都是1x像素比的Retina屏幕（Macbook，Macbook Air，舊版Macbook Pros，臺(tái)式機(jī)顯示器），Retina只應(yīng)用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。為臺(tái)式機(jī)設(shè)計(jì)與手機(jī)設(shè)計(jì)不同的是，你需要以相同方式設(shè)計(jì)來覆蓋這兩種不同類別的屏幕。

當(dāng)只使用一種像素比時(shí)，基于iOS和OSX的設(shè)計(jì)是非常簡單的。我建議開始設(shè)計(jì)時(shí)先用基礎(chǔ)的PPI（例如，100%/1x）然后增加到2x并在2x的屏幕上校驗(yàn)?zāi)愕脑O(shè)計(jì)并且生成2x的資源。當(dāng)你熟悉在1x和2x之間切換設(shè)計(jì)后，就能夠直接在2x上進(jìn)行設(shè)計(jì)了，低分辨率時(shí)資源更小。如果你正在為Retina屏幕設(shè)計(jì)的話（Macbook Pro），這就特別有用。

引入資源，chrome為例

如圖所示，每次請(qǐng)求資源需要傳送兩張圖片。非Retina下圖片名為name.png，Retina的圖片增加到@2x命名為@2x.png，這是iOS開發(fā)約定的命名規(guī)范。

如果你創(chuàng)建了一個(gè)圖片只用在iPad上，我們在.@2x后面加上~iPad，這僅僅只是chrome的約定。對(duì)需要的資源都這樣處理，不要只用一個(gè)版本的資源來覆蓋所有DPI。

附加, iOS規(guī)則集:

@2x的資源必須始終是1x資源的兩倍。Retina資源加上@2x.始終創(chuàng)建100%和200%比例的圖片。1x和2x的資源始終要保持名字相同。在100%比例下開始設(shè)計(jì)，然后做乘法。傳遞.png格式的圖片。使用pt創(chuàng)建規(guī)范而不是px。

Android上的PPI處理

Android平臺(tái)的設(shè)備種類比iOS多，因?yàn)槿魏蜲EM都可以生產(chǎn)設(shè)備并且?guī)缀鯖]有比例的限制，然后加上自己版本號(hào)。結(jié)果就是生產(chǎn)出幾乎無限制的屏幕大小和DPI種類，電話和平板電腦一樣大，或者電話和平板電腦一樣小的情況比比皆是。為此，你的設(shè)計(jì)總是需要做適配。

在這個(gè)部分，我們將采用不同于iOS的方法，我們先來討論下像素比和DPI分類。

Android設(shè)備可以分為兩類：手機(jī)和平板電腦。這兩種設(shè)備又可以按照不同DPI分為：ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。

幸好，有些比其他使用得更加頻繁，有些甚至已經(jīng)棄用了。

首先我們要找到等價(jià)于iOS上1x的基礎(chǔ)單位。在Android上，這個(gè)基礎(chǔ)單位就是MDPI。

讓我們看看下面列表的像素比。

是的，很多，而且還沒有完，還有一個(gè)落下了。

實(shí)際上，目前正在使用的DPI有4個(gè)：MDPI, HDPI, XHDPI和XXHDPI。 LDPI是過時(shí)的DPI，現(xiàn)在已經(jīng)不再使用，TVDPI是TV UI的特殊例子，在2012年版的Nexus 7中短暫使用過，在手機(jī)和平板電腦的使用中沒有考慮的必要。盡管如此，TVDPI的像素比（1.33x）還是被用在一些安卓系統(tǒng)的設(shè)備上，像是LG G手表，我們后面來討論這個(gè)。

讓我們結(jié)合帶著各自DPI的Android手機(jī)和平板電腦全面客觀地看待事物。

也許在現(xiàn)在這個(gè)時(shí)候有一個(gè)設(shè)備使用XXXHDPI的實(shí)際app資源，但也不是很常見。如果你能用額外時(shí)間生產(chǎn)XXXHDPI資源，你的app便不會(huì)過時(shí)。

引入資源，chrome為例

每次請(qǐng)求資源都需要傳遞一組4張圖片，從MDPI到XXHDPI，無需考慮LDPI。注意，在下面的chrome版本中，TVDPI的輸入在這個(gè)例子里的5張圖片里也很清楚。

和iOS一樣，我建議把100%或者1x的像素比作為你設(shè)計(jì)的基礎(chǔ)，這會(huì)讓設(shè)計(jì)在適配其他像素比的時(shí)候容易一點(diǎn)，特別是在像素比為1.33和1.5的安卓系統(tǒng)上。

看看下面安卓上chrome的返回按鈕的例子。

DPI后面跟著的建議名稱不是安卓官方指南強(qiáng)制要求的，這是我們?yōu)橘Y源取名的方式，因?yàn)楝F(xiàn)在有限的設(shè)計(jì)工具很難給每個(gè)資源定義一個(gè)路徑。 考慮到一個(gè)資源有時(shí)有上百個(gè)資源文件，站在設(shè)計(jì)師的角度來說這是使輸出過程不那么痛苦以及避免重命名錯(cuò)誤的一個(gè)途徑。資源在資源倉庫里面的存儲(chǔ)方式是有結(jié)構(gòu)的，參考后面：

drawable-mdpi/asset.pngdrawable-hdpi/asset.pngetc…

如你所見，資源被截成了3232dp的正方形，Android像素比也會(huì)是小數(shù)。當(dāng)用1.33或者1.5乘以一個(gè)數(shù)的時(shí)候，最后的結(jié)果很有可能就是小數(shù)。在這種情況下你需要通過四舍五入來讓數(shù)字變得有效。在這個(gè)例子中，321.33=42.56所以四舍五入之后是43px。

你需要注意以像素為單位的元素，比如筆畫。你需要確保你的筆畫既不是1px寬也不是2px同時(shí)也不像屏幕分辨率部分描述的那樣模糊。

附加, Android規(guī)則集:

Android有7種不同的DPI，你需要關(guān)注其中的4個(gè)：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未來，可以關(guān)注XXXHDPI。MDPI是基礎(chǔ)的DPI或者1x像素比Android使用dp代替pt當(dāng)作參數(shù)規(guī)格，但是他們是一樣的。用你最好的判斷來處理小數(shù)像素比。傳遞.png格式圖片。確保檢驗(yàn)命名約定，與執(zhí)行負(fù)責(zé)人共同完成輸出進(jìn)程。

Mac、Chrome OS上的PPI

Mac（OSX）和Chrome OS在處理PPI方面是十分相似的。 兩個(gè)OS都支持常規(guī)的PPI（100%）和hi-res/retina PPI(200%)。像iPhone和iPad，就只有2x像素比。

即使大多數(shù)的用戶都使用Mac和Chrome OS，但是也有用戶會(huì)在低分辨率的設(shè)備上使用，我強(qiáng)烈建議將你的app面向未來的高端屏幕。面向未來對(duì)于ChromeOS意味著為Web-app或者網(wǎng)站創(chuàng)建hi-res資源，那絕不是浪費(fèi)時(shí)間。當(dāng)前有3種筆記本處理PPI，13寸、15寸Macbook pro以及Chromebook Pixel。除此之外，Chromebook Pixel還處理了touch。

引入資源，chrome為例

Chrome的工具欄按鈕資源就是相似性最好的例子。我們在兩個(gè)平臺(tái)上使用完全相同按鈕，即使代碼不同，視覺上也是一樣的�？聪旅孢@個(gè)chrome菜單按鈕的例子。

附加:

Chrome OS和OSX像素比相同，都是2.Chrome OS高分辨率展示也處理touch。

可拉伸資源

不管你的app是在桌面或者手機(jī)上。你通常都會(huì)引入可拉伸資源。

可拉伸資源的建立會(huì)使代碼在沒有減少渲染的情況下比實(shí)際需要的多。

他們與可重復(fù)資源即使有的時(shí)候展示結(jié)果一樣，工作方式也是不同的。

看看下面這個(gè)Chrome的例子。iOS上的工具欄在整個(gè)屏幕上只用了一個(gè)在x軸上平鋪的超細(xì)資源。

現(xiàn)在這種方式已經(jīng)過時(shí)了，讓我們來看看不同平臺(tái)如何處理可拉伸資源。

iOS上的可拉伸資源

對(duì)iOS的設(shè)計(jì)師來說這個(gè)很簡單，因?yàn)槔煸诖a里面定義比資源片段或者標(biāo)記方式好。所有需要做的就是提供一個(gè)基礎(chǔ)圖片，如果你自己還沒有實(shí)現(xiàn)這個(gè)，可以將你的資源規(guī)范定義為水平或者豎直可擴(kuò)展，或者兩者均可�？纯聪旅孢@個(gè)iOS上Chrome的默認(rèn)按鈕的例子。

Android上的可拉伸資源

Android有和iOS不一樣的處理可拉伸資源的方式，它更依賴設(shè)計(jì)師一點(diǎn)。

在這個(gè)平臺(tái)你將采用九宮格，這些輔助線包括了4條圍繞資源本身的線。他們必須被當(dāng)作資源的一部分來傳遞片段/圖片，用它來準(zhǔn)確的呈現(xiàn)視覺規(guī)格。

他們定義了兩個(gè)區(qū)域：可拉伸區(qū)域和填充區(qū)域。一旦定義好，代碼就只會(huì)拉伸可拉伸區(qū)域，并把內(nèi)容放在你定義的填充區(qū)域。

看看下面的例子，就是你前面看到的Chrome默認(rèn)按鈕的Android版本。為了演示，我把他放大了。

如你所見，這個(gè)九宮格是一組4條純白色的bar。他們在任何DPI下都是寬1px，這是代碼表示的。可拉伸區(qū)域不包括圓角因?yàn)閳A角不能平鋪開（否則看起來很難看）。在這個(gè)例子中，我們給按鈕添加了規(guī)格允許范圍內(nèi)10dp的padding。.9也需要平鋪并且截?cái)嗖糠忠?00%透明。如果不這樣，他就不能正常工作，需要修改。

使用九宮格要求在名稱后面加上.9，和在iOS資源上添加@2x的方式一樣。重命名按鈕的例子如下：

現(xiàn)在你需要非常注意你的資源大小。如果我在演示中放大了它，你就需要通過減小它的尺寸到一個(gè)最小限度來優(yōu)化資源，如后面所示。保持了圓角的原樣，但是將可拉伸和內(nèi)容區(qū)域減小到最小限度。

需要注意的是九宮格的標(biāo)記不會(huì)和設(shè)計(jì)重疊，并且資源切割是合理的。.9需要盡可能靠近資源并不與之重疊，試著不內(nèi)置padding。前面的例子因?yàn)殛幱岸鴥?nèi)置了padding。

九宮格不會(huì)代替你導(dǎo)出每種DPI的資源。它需要在每個(gè)資源版本都實(shí)行。

最后一點(diǎn)，.9可以有許多可拉伸區(qū)域（上面和左邊），雖然我沒有經(jīng)常遇到這樣的情況，但它也是很值得嘗試的。

附加: 總是采取最好的解決方案來實(shí)現(xiàn)設(shè)計(jì)，特別是桌面設(shè)計(jì)。圖片越多，app就會(huì)變得越沉重。追蹤和更新資源也變得困難。九宮格應(yīng)該使用在命名有規(guī)范、組織結(jié)構(gòu)良好的資源中。

Touch和觸摸目標(biāo)

首先需要知道的是做觸屏相關(guān)的準(zhǔn)備和DPI一點(diǎn)關(guān)系也沒有。但是當(dāng)涉及到設(shè)計(jì)UI或者創(chuàng)建資源，弄清楚觸屏和DPI的關(guān)系就很重要。

選擇觸屏或者非觸屏很大程度上取決于app的適用范圍，它被部署在哪里以及希望得到怎樣的用戶體驗(yàn)。 我們可以簡單地將他們分為：非觸屏的桌面應(yīng)用和手機(jī)app。

臺(tái)式機(jī), 非觸屏

直到2005年，觸屏才開始出現(xiàn)在計(jì)算機(jī)技術(shù)中。 我們使用鼠標(biāo)和鍵盤，它們能夠非常準(zhǔn)確的操作UI。鼠標(biāo)光標(biāo)的精度是1pt，也就是說理論上你可以創(chuàng)建一個(gè)能讓任何人點(diǎn)擊的1*1pt的按鈕。

請(qǐng)看下面圖解。

這是個(gè)Chrome OS光標(biāo)的20x版本。 紅色區(qū)域是能在UI上觸發(fā)一個(gè)事件的實(shí)際區(qū)域，十分準(zhǔn)確。 你知道我的標(biāo)題。什么是不準(zhǔn)確的呢？手指。

那么如何為觸屏設(shè)計(jì)呢？最好的辦法就是讓所有東西變得更大。

手指大小

這里有交互中最常用到的兩根手指（食指和大拇指）的平均大小，這代表了觸摸區(qū)域和被手指遮擋了的區(qū)域。實(shí)際的觸摸區(qū)域（例如，你手指接觸屏幕的那部分）當(dāng)然會(huì)小一點(diǎn)并且更準(zhǔn)確，除非你把你的手指壓在屏幕上。

在設(shè)計(jì)觸屏的時(shí)候，放大觸摸目標(biāo)的尺寸比低估更安全。

如何將此應(yīng)用到我的設(shè)計(jì)流程

如我們已經(jīng)看到的，在像素世界英寸或者厘米并不是一個(gè)好的計(jì)量方法，即使是像素也不是真正好的計(jì)量方法。所以你怎么確保你的設(shè)計(jì)是可被觸摸的呢？

我雖然講了很多理論知識(shí)，但是更重要的是自己試著在目標(biāo)設(shè)備/臺(tái)式機(jī)上設(shè)計(jì)。 但是為了避免浪費(fèi)更多時(shí)間，有一些基礎(chǔ)的像素的大小使用起來是比較安全的，并且被推薦使用在每個(gè)OS上。

各平臺(tái)推薦的觸屏目標(biāo)

需要注意的是，這些大小都是為了方便，都不是現(xiàn)實(shí)生活中的測量單位，他們依賴于OEM和各廠商遵守這個(gè)指南來生產(chǎn)屏幕，使之保持大小、dpi比例一致。

如你看到的，每個(gè)OS都有一系列自己的推薦規(guī)范，但是都在48pt左右。Windows的規(guī)格是包含了padding的，所以我把它加到這里。

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件，因此知道觸屏的質(zhì)量并且能夠控制這個(gè)確切的比例，它可以觸摸更小的目標(biāo)，另外，本身的物理尺寸也更小。

另一方面，Android和Windows有不同的OEM，都各自生產(chǎn)自己的硬件，有更大的觸摸目標(biāo)會(huì)更“安全”。他們的UI更加無規(guī)范（特別是Windows），物理尺寸也越來越大了。

Chrome為例

這是在Chrome上的應(yīng)用，編碼使觸摸目標(biāo)呈藍(lán)色。

如你所見，兩個(gè)平臺(tái)上工具欄都是被推薦的觸摸目標(biāo)的高度�？梢暦秶趇OS和Android上分別是4444pt和4848pt的正方形，這不僅使得UI在大小方面和其他OS保持一致，而且也能讓與用戶交互的部分都保持最小的規(guī)格。

Windows 8以及Chrome OS

Windows 8和Chrome OS都支持觸屏和非觸屏的接口。如果你在為Windows 8 設(shè)計(jì)app，我強(qiáng)烈建議按照它們guidelines for touch targets來做。

Chrome OS準(zhǔn)則目前尚未發(fā)布，但是Pixel使用問題不大。因?yàn)樗蠧hrome OS的app都是基于web開發(fā)，我的建議是按照觸屏設(shè)計(jì)并且遵照Android touch targets guidelines來進(jìn)行開發(fā)。

web，混合設(shè)備和未來

如果你在為手機(jī)設(shè)計(jì)，觸屏是不二選擇。如果你在設(shè)計(jì)桌面應(yīng)用，參照非觸屏。這聽起來很簡單但是在混合設(shè)備興起的時(shí)候很容易被忽略，。

混合設(shè)備是一種既支持觸屏又支持非觸屏的設(shè)備。Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子。 在這樣的情況下，我們該做什么呢？沒有簡單的答案，但是我會(huì)首先給一個(gè)答案，觸屏方向，因?yàn)槟鞘俏磥淼陌l(fā)展趨勢。 如果你為web或者其他相關(guān)的設(shè)計(jì)，首先考慮觸屏。

附加:

移動(dòng)和觸屏設(shè)計(jì)幾乎是未來發(fā)展趨勢。參考每個(gè)OS上建議的觸摸目標(biāo)。這能幫助你更好地設(shè)計(jì)并讓你的產(chǎn)品在OS中保持一致。觸摸目標(biāo)有參考價(jià)值，但是不代表你需要不折不扣地遵守，同時(shí)你也需要根據(jù)經(jīng)驗(yàn)判斷。

設(shè)計(jì)軟件

軟件不能制造設(shè)計(jì)師，但是在完成任務(wù)時(shí)選擇使用正確的軟件可以提高效率，更快完成工作。軟件“訣竅”不應(yīng)該是你唯一的技能，但是學(xué)習(xí)和操作正確的工具可以幫助你產(chǎn)生靈感。

當(dāng)涉及到在設(shè)計(jì)界面處理DPI變化，不同的軟件采用不同方式。在特定任務(wù)中有些軟件比其他的更好。下面是最常見的：

Photoshop

界面設(shè)計(jì)工具之母。也許也是如今使用最廣泛的工具。關(guān)于它的資源、教程、文章數(shù)不勝數(shù)，Photoshop幾乎幾乎貫穿界面設(shè)計(jì)的每一個(gè)階段。

正如其名，軟件最開始的目的并不是界面設(shè)計(jì)而是圖像或者位圖處理。隨時(shí)間推移以及界面設(shè)計(jì)的產(chǎn)生，設(shè)計(jì)師們再次使用起來。部分人是因?yàn)樗麄円郧熬陀貌⑶沂悄菚r(shí)僅有的能夠把事情做得足夠好的軟件。

在今天，Photoshop是主要的位圖編輯工具，也是UI設(shè)計(jì)中使用最廣泛的軟件。數(shù)十年的積累使得它成為學(xué)習(xí)和使用比較困難的軟件。作為軟件中的瑞士軍刀，你可以用來做任何事，但是并不總是最有效的。

因?yàn)樽畛跏腔谖粓D的，所以Photoshop十分依賴DPI，下面描述的是與之相反的Illustrator和Sketch。

Illustrator

Illustrator的矢量是基于同級(jí)的。顧名思義，它重點(diǎn)在插畫，但是也可以作為界面設(shè)計(jì)工具。

Illustrator也很適合平面設(shè)計(jì)，因此它的界面，顏色管理，縮放，標(biāo)尺和單位首先就吸引你，只需要一些補(bǔ)丁就會(huì)更便于使用。和Photoshop一樣，他也是一款很強(qiáng)大的工具，同時(shí)也需要付出努力去學(xué)習(xí)。

和Photoshop不同的是，它是獨(dú)立于DPI的，因?yàn)樗蕾囀噶繄D。與點(diǎn)陣圖或者光柵圖相反，圖像生成采用矢量圖，依靠數(shù)學(xué)公式計(jì)算，以編程方式重新調(diào)節(jié)大小并且不會(huì)損失圖片質(zhì)量。

了解柵格化和矢量化圖片的不同是建立可擴(kuò)展視覺設(shè)計(jì)和資源的關(guān)鍵。

如果你想學(xué)習(xí)使用Illustrator來進(jìn)行web/界面設(shè)計(jì)，推薦同學(xué)們學(xué)習(xí)：

《使用 Adobe Illustrator 做 UI 設(shè)計(jì)——多重填充與多重描邊》《小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》《小課堂第三彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》《小課堂第四彈：使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》《使用ILLUSTRATOR做UI設(shè)計(jì)系列教程：創(chuàng)建內(nèi)陰影效果（5）》《使用AI做UI設(shè)計(jì)系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（上）》《使用AI做UI設(shè)計(jì)系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（中）》

Sketch 3.0

與Photoshop和Illustrator比起來，Sketch還很年輕。雖然只產(chǎn)生了四年，但它在UI設(shè)計(jì)行業(yè)里面引起了巨大的反響。因?yàn)閺囊婚_始，Sketch的目標(biāo)就是供界面和UX設(shè)計(jì)師使用，沒有Photoshop和Illustrator的歷史積累，Sketch把自己定位成針對(duì)小眾用戶——界面設(shè)計(jì)師的一款完美的調(diào)整工具。

Sketch適合快速設(shè)計(jì)框架以及復(fù)雜的視覺設(shè)計(jì)。它像Illustrator一樣是完全基于矢量的，簡單輕量化同時(shí)還擁有美觀的UI。它結(jié)合了銅版紙使用方便和靈活的資源生成系統(tǒng)，讓它成為跨DPI、跨平臺(tái)設(shè)計(jì)最快的工具。最近發(fā)布的3.0版本也是可以用來替代Photoshop的產(chǎn)品。

但是也有不足的地方，Sketch是小團(tuán)隊(duì)開發(fā)的，而且出來得比較晚。盡管它的團(tuán)隊(duì)能夠積極響應(yīng)需求的變化，但是也沒有Adobe（Photoshop和Illustrator）公司這樣的規(guī)模。在位圖編輯時(shí)，Sketch只能滿足（設(shè)計(jì)時(shí)）最低的需求，但是Photoshop的功能就更加全面。同時(shí)，因?yàn)樗哪贻p，在源文件、教程和社區(qū)方面在數(shù)量上也遠(yuǎn)少于Photoshop，不過，社區(qū)用戶都很積極上進(jìn)。

另外私人方面，從8年前我就是是Photoshop的用戶，但是最近我把我設(shè)計(jì)中的最重要部分切換到了Sketch3.0。這不是對(duì)質(zhì)量的判斷，Photoshop仍然是一個(gè)好軟件，只是Sketch3.0更加適合我。

靜電的Sketch教程合集：

《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

附加：并沒有完美的工具但是有最適合你的。如果你有足夠的時(shí)間和錢，我建議你都試試，然后再?zèng)Q定。

文檔和資源

這篇指南只是一個(gè)介紹，真正開始做的時(shí)候能學(xué)到更多。如果你想要了解更多或者獲取我們討論的主題相關(guān)的更詳細(xì)的內(nèi)容，可以點(diǎn)擊下面的鏈接：

平臺(tái)文檔

Android UI guidelines

Google Material guidelines

iOS7 UI guidelines

Windows UI guidelines

Google dev Principles of site design

速查表和模板

iPhone 6 Screens Demystified

Ultimate guide to iphone resolutions by PaintCodeApp

Screen sizes, ratio and PPI

iOS7 designer cheat sheet

iOS7 design resource (requires Apple account)

App icons template, Android and iOS

Bjango blog (A design article gold mine)

iPhone GUI and iPad GUI(.psd) by @teehanlax

工具

Density converter by @brdrck

Android asset generation by @brdrck

Android design tips by @destroywerk and @BPScott

9patch creation in Android by @romannurik

Android asset studio by @romannurik

【ps教程論壇指南類好文人氣榜！】

Top 1：作者自學(xué)成功的親身經(jīng)驗(yàn)，實(shí)用性高！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

Top 2：從新手技巧到高手教程都在這兒了！
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

Top 3：集合多位交互大牛的經(jīng)驗(yàn)合集！
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

原文地址：sebastien-gabriel
譯文地址：w3ctech