前情提要：

知識解答：基礎知識學起來！為設計師量身打造的DPI指南（上）

本文是為“初學者”或者作為從一開始就想要學習更多跨DPI和跨平臺設計知識的中級設計師準備的序言讀物。 沒有復雜的計算和不可分析的圖表，只是按照劃分直截了當地將內容呈獻給讀者，便于讀者理解或是直接運用到設計過程中。

在昨天上篇中我們講解了設計師們介紹DPI與PPI的基礎知識以及數字設計的入門規范。

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

原文：DESIGNER'S GUIDE TO DPI
來源： w3ctech
數英網對原文有刪減

八、iOS上的PPI處理

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

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

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

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

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

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

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

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

引入資源，chrome為例

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

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

iOS規則集:

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

• Retina資源加上@2x.

• 始終創建100%和200%比例的圖片。

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

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

• 傳遞.png格式的圖片。

• 使用pt創建規范而不是px。

九、Android上的PPI處理

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

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

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

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

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

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

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

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

引入資源，chrome為例

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

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

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

• drawable-mdpi/asset.png

• drawable-hdpi/asset.png

• etc...

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

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

Android規則集:

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

• MDPI是基礎的DPI或者1x像素比

• Android使用dp代替pt當作參數規格，但是他們是一樣的。

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

• 使用.png格式圖片。

十、Mac與Chrome OS上的PPI

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

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

引入資源，chrome為例

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

十一、可拉伸資源

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

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

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

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

現在這種方式已經過時了，讓我們來看看不同平臺如何處理可拉伸資源。

iOS上的可拉伸資源

對iOS的設計師來說這個很簡單，因為拉伸在代碼里面定義比資源片段或者標記方式好。所有需要做的就是提供一個基礎圖片，如果你自己還沒有實現這個，可以將你的資源規范定義為水平或者豎直可擴展，或者兩者均可?？纯聪旅孢@個iOS上Chrome的默認按鈕的例子。 

Android上的可拉伸資源

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

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

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

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

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

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

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

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

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

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

十二、Touch和觸摸目標

首先需要知道的是做觸屏相關的準備和DPI一點關系也沒有。但是當涉及到設計UI或者創建資源，弄清楚觸屏和DPI的關系就很重要。

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

非觸屏臺式機

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

這是個Chrome OS光標的20x版本。 紅色區域是能在UI上觸發一個事件的實際區域，十分準確。 什么是不準確的呢？手指。

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

手指大小

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

在設計觸屏的時候，放大觸摸目標的尺寸比低估更安全。 

各平臺推薦的觸屏目標

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

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

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

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

Chrome

這是在Chrome上的應用，編碼使觸摸目標呈藍色。

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

Windows 8以及Chrome OS

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

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

web，混合設備和未來

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

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

十三、設計軟件

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

Photoshop

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

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

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

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

Illustrator

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

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

和Photoshop不同的是，圖像生成采用矢量圖，依靠數學公式計算，以編程方式重新調節大小并且不會損失圖片質量。了解柵格化和矢量化圖片的不同是建立可擴展視覺設計和資源的關鍵。

如果你想學習使用Illustrator來進行web/界面設計，我推薦你閱讀@janoskoos的"My vector workflow"。

Sketch 3.0

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

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

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

如果你想了解更多關于我的特別的經驗，建議你閱讀我的"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