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

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

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

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

附加:

PPI配置對(duì)輸出到web上的設(shè)計(jì)毫無(wú)影響。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的角度來(lái)看，iOS有兩種類型的手機(jī)設(shè)備和兩種類型的筆記本/臺(tái)式電腦屏幕。

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

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控制展示比較特殊的是：視覺(jué)效果降頻。

以為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é)問(wèn)題，比如半像素使得精細(xì)的地方變模糊。分辨率如此高也是很微妙的，除非你近距離觀察。因此，在2208*1242px的畫布上設(shè)計(jì)，需要注意設(shè)計(jì)中真正精細(xì)的地方，像是分隔符。模擬如下：

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

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

最后說(shuō)說(shuō)iPad。除了iPad 第一代，其余的都用的是iOS7，同時(shí)只有iPad2和iPad mini是非Retina屏幕。從設(shè)計(jì)的角度來(lái)看，iPad mini只是普通的iPad（一樣的PPI屏幕），但是物理體積更小，也就是說(shuō)它們擁有相同的分辨率，只是大小從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ì)來(lái)覆蓋這兩種不同類別的屏幕。

當(dāng)只使用一種像素比時(shí)，基于iOS和OSX的設(shè)計(jì)是非常簡(jiǎn)單的。我建議開始設(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上，我們?cè)?@2x后面加上~iPad，這僅僅只是chrome的約定。對(duì)需要的資源都這樣處理，不要只用一個(gè)版本的資源來(lái)覆蓋所有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ī)缀鯖](méi)有比例的限制，然后加上自己版本號(hào)。結(jié)果就是生產(chǎn)出幾乎無(wú)限制的屏幕大小和DPI種類，電話和平板電腦一樣大，或者電話和平板電腦一樣小的情況比比皆是。為此，你的設(shè)計(jì)總是需要做適配。

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

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

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

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

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

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

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

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

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

引入資源，chrome為例

每次請(qǐng)求資源都需要傳遞一組4張圖片，從MDPI到XXHDPI，無(wú)需考慮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ì)師的角度來(lái)說(shuō)這是使輸出過(guò)程不那么痛苦以及避免重命名錯(cuò)誤的一個(gè)途徑。資源在資源倉(cāng)庫(kù)里面的存儲(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ù)。在這種情況下你需要通過(guò)四舍五入來(lái)讓數(shù)字變得有效。在這個(gè)例子中，321.33=42.56所以四舍五入之后是43px。

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

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

Android有7種不同的DPI，你需要關(guān)注其中的4個(gè)：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未來(lái)，可以關(guān)注XXXHDPI。MDPI是基礎(chǔ)的DPI或者1x像素比Android使用dp代替pt當(dāng)作參數(shù)規(guī)格，但是他們是一樣的。用你最好的判斷來(lái)處理小數(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面向未來(lái)的高端屏幕。面向未來(lái)對(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的工具欄按鈕資源就是相似性最好的例子。我們?cè)趦蓚�(gè)平臺(tái)上使用完全相同按鈕，即使代碼不同，視覺(jué)上也是一樣的。看下面這個(gè)chrome菜單按鈕的例子。

附加:

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

可拉伸資源

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

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

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

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

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

iOS上的可拉伸資源

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

Android上的可拉伸資源

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

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

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

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

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