前情提要：

知識解答：基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南（上）

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

在昨天上篇中我們講解了設(shè)計師們介紹DPI與PPI的基礎(chǔ)知識以及數(shù)字設(shè)計的入門規(guī)范。

本篇我們將為設(shè)計師們帶來PPI在iOS與Android平臺上的實操處理知識。

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

八、iOS上的PPI處理

讓我們花點時間看看2014年年初時的iOS設(shè)備。 從屏幕大小和DPI的角度來看，iOS有兩種類型的手機設(shè)備和兩種類型的筆記本/臺式電腦屏幕。對于手機，有iPhone和iPad。 在手機分類中，有過去的3GS（iOS6依舊支持）和更高版本，其中只有iPhone 3GS是非Retina。iPhone 5以及后來的都用了和iPhone 4/4s有相同DPI的更好的屏幕。讓我們來看看下面的列表： 

2014年9月Apple宣布，現(xiàn)在又有2個新類別的iPhone：iPhone 6和iPhone 6 Plus。iPhone 6比5要大一點（0.7英寸左右），但是PPI相同。iPhone 6 Plus由于它的尺寸，5.5英寸，產(chǎn)生了iOS上新的像素比，@3x。 

相較于其他iPhone，iPhone 6 Plus控制展示比較特殊的是：視覺效果降頻。以為iPhone 6設(shè)計為例，設(shè)計的畫布為1334750px，手機上就呈現(xiàn)1334750的物理像素。當(dāng)為iPhone 6 Plus時，手機的分辨率小于渲染的圖像，因此你設(shè)計的分辨率為22081242px，展示時降頻為19201080px。如下圖： 

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

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

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

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

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

引入資源，chrome為例

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

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

iOS規(guī)則集:

• @2x的資源必須始終是1x資源的兩倍。

• Retina資源加上@2x.

• 始終創(chuàng)建100%和200%比例的圖片。

• 1x和2x的資源始終要保持名字相同。

• 在100%比例下開始設(shè)計，然后做乘法。

• 傳遞.png格式的圖片。

• 使用pt創(chuàng)建規(guī)范而不是px。

九、Android上的PPI處理

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

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

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

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

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

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

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

以下是帶著各自DPI的Android手機和平板電腦，相當(dāng)直觀：

引入資源，chrome為例

每次請求資源都需要傳遞一組4張圖片，從MDPI到XXHDPI，無需考慮LDPI。注意，在下面的chrome版本中，TVDPI的輸入在這個例子里的5張圖片里也很清楚。和iOS一樣，我建議把100%或者1x的像素比作為你設(shè)計的基礎(chǔ)，這會讓設(shè)計在適配其他像素比的時候容易一點，特別是在像素比為1.33和1.5的安卓系統(tǒng)上。

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

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

• drawable-mdpi/asset.png

• drawable-hdpi/asset.png

• etc...

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

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

Android規(guī)則集:

• Android有7種不同的DPI，你需要關(guān)注其中的4個：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未來，可以關(guān)注XXXHDPI。

• MDPI是基礎(chǔ)的DPI或者1x像素比

• Android使用dp代替pt當(dāng)作參數(shù)規(guī)格，但是他們是一樣的。

• 用你最好的判斷來處理小數(shù)像素比。

• 使用.png格式圖片。

十、Mac與Chrome OS上的PPI

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

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

引入資源，chrome為例

Chrome的工具欄按鈕資源就是相似性最好的例子。我們在兩個平臺上使用完全相同按鈕，即使代碼不同，視覺上也是一樣的。看下面這個chrome菜單按鈕的例子。

十一、可拉伸資源

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

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

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

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

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

iOS上的可拉伸資源

對iOS的設(shè)計師來說這個很簡單，因為拉伸在代碼里面定義比資源片段或者標(biāo)記方式好。所有需要做的就是提供一個基礎(chǔ)圖片，如果你自己還沒有實現(xiàn)這個，可以將你的資源規(guī)范定義為水平或者豎直可擴展，或者兩者均可。看看下面這個iOS上Chrome的默認(rèn)按鈕的例子。 

Android上的可拉伸資源

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

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

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

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

如你所見，這個九宮格是一組4條純白色的bar。他們在任何DPI下都是寬1px，這是代碼表示的。可拉伸區(qū)域不包括圓角因為圓角不能平鋪開（否則看起來很難看）。在這個例子中，我們給按鈕添加了規(guī)格允許范圍內(nèi)10dp的padding。.9也需要平鋪并且截斷部分要100%透明。 

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

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

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

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

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

十二、Touch和觸摸目標(biāo)

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

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

非觸屏臺式機

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

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

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

手指大小

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

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

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

在像素世界英寸或者厘米并不是一個好的計量方法，即使是像素也不是真正好的計量方法。所以你怎么確保你的設(shè)計是可被觸摸的呢？我雖然講了很多理論知識，但是更重要的是自己試著在目標(biāo)設(shè)備/臺式機上設(shè)計。 但是為了避免浪費更多時間，有一些基礎(chǔ)的像素的大小使用起來是比較安全的，并且被推薦使用在每個OS上。

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

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

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件，因此知道觸屏的質(zhì)量并且能夠控制這個確切的比例，它可以觸摸更小的目標(biāo)，另外，本身的物理尺寸也更小。另一方面，Android和Windows有不同的OEM，都各自生產(chǎn)自己的硬件，有更大的觸摸目標(biāo)會更“安全”。他們的UI更加無規(guī)范（特別是Windows），物理尺寸也越來越大了。

Chrome

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

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

Windows 8以及Chrome OS

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

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

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

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

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

十三、設(shè)計軟件

軟件不能制造設(shè)計師，但是在完成任務(wù)時選擇使用正確的軟件可以提高效率，更快完成工作。不同的軟件采用不同方式在設(shè)計界面處理DPI，在特定任務(wù)中有些軟件比其他的更好。下面是最常見的： 

Photoshop

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

正如其名，軟件最開始的目的并不是界面設(shè)計而是圖像或者位圖處理。隨時間推移以及界面設(shè)計的產(chǎn)生，設(shè)計師們再次使用起來。部分人是因為他們以前就用并且是那時僅有的能夠把事情做得足夠好的軟件。

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

因為最初是基于位圖的，所以Photoshop十分依賴DPI，與之相反的Illustrator和Sketch。

Illustrator

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

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

和Photoshop不同的是，圖像生成采用矢量圖，依靠數(shù)學(xué)公式計算，以編程方式重新調(diào)節(jié)大小并且不會損失圖片質(zhì)量。了解柵格化和矢量化圖片的不同是建立可擴展視覺設(shè)計和資源的關(guān)鍵。

如果你想學(xué)習(xí)使用Illustrator來進(jìn)行web/界面設(shè)計，我推薦你閱讀@janoskoos的"My vector workflow"。

Sketch 3.0

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

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

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

如果你想了解更多關(guān)于我的特別的經(jīng)驗，建議你閱讀我的"A month with Sketch 3.0 "或者"Sketch tutorial_01"。

想要了解更深入以及矢量是如何在sketch工作的？去看@pnowelldesign的文章 "Harnessing vector awesomeness in Sketch"。

附加: 并沒有完美的工具但是有最適合你的。如果你有足夠的時間和錢，我建議你都試試，然后再決定。

十四、文檔和資源

平臺文檔

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
Screen sizes, ratio and PPI
iOS7 designer cheat sheet
iOS7 design resource (requires Apple account)
App icons template, Android and iOS
Bjango blog
iPhone GUI and iPad GUI(.psd)

工具

Density converter
Android asset generation
Android design tips
9patch creation in Android
Android asset studio