/*
在知乎上看到這篇的英文版，沒有仔細看便決定嘗試第一次翻譯，主要目的是通過翻譯讓學習的印象更深，也當做是一種鍛煉和積累，由于當初沒有先完整的瀏覽內(nèi)容，首先低估了文章的信息量，每天下班后翻譯一點，弄了整整一星期。其次原本以為知乎推薦應(yīng)該是飽含干貨，翻譯過程發(fā)現(xiàn)實用性并不是很高，但既然開始，就應(yīng)該堅持下去，況且或多或少都會有些收獲。整體看下來該文章圖片中的價值比文字更大一些，可結(jié)合文字仔細瀏覽圖片。
由于該文章涉及內(nèi)容主要是UI/GUI設(shè)計師的工作，而我是個小PM，故在翻譯時對有些內(nèi)容理解的并不深，翻譯的可能不夠準確，如有表意不清或翻譯不準請指正。
*/
DPI（Dots Per Inch）最初用于衡量打印物上每英寸的點數(shù)密度，就是說你的打印機可以在一英寸內(nèi)打多少個點。DPI值越小圖片越不精細。
當DPI的概念用在計算機屏幕上時，就應(yīng)稱之為PPI（Pixels Per Inch）。同理： PPI就是計算機屏幕上每英寸可以顯示的像素點的數(shù)量。你說 DPI大伙也能理解。
Windows系統(tǒng)默認PPI 為96， Mac OS系統(tǒng)默認PPI 為72。
一般非視網(wǎng)膜屏幕的桌面電腦的 PPI在72 到120之間。使用 72到120 之間的PPI進行設(shè)計基本可以保證你的作品尺寸在大多數(shù)情況下看起來都差不多。
舉個栗子：
27"Mac的PPI是109，意思是每英寸有109個像素。顯示器寬度（含邊框）為25.7英寸，屏幕純寬度差不多23.5英寸，所以23.5×109 ≈2560，由此可知屏幕的分辨率為2560×1440px。
*我知道23.5×109不等于2560，實際上應(yīng)該是23.486238532 英寸，用像素/厘米能更精確點。我就是舉個栗子，你懂的。
假設(shè)你設(shè)計了一個109×109px的藍色方塊，并且這個方塊的物理尺寸為1×1英寸。如果你的屏幕是72PPI的，那這個方塊看起來就要比實際的物理尺寸更大點，因為72PPI的屏幕要顯示109px差不多需要1.5英寸才行。
屏幕分辨率對用戶感知你的設(shè)計影響老大了。幸好CRT顯示基本已經(jīng)被淘汰了，用戶使用液晶顯示器時基本都使用顯示器的原生分辨率，這樣看起來更舒服嘛。
分辨率就是屏幕上的像素數(shù)，例如2560×1440px的屏幕，屏幕橫向有2560個像素，縱向有1440個像素，結(jié)合PPI的含義，你應(yīng)該明白分辨率不是物理尺寸的定義。你可以有一個像你們家一面墻那么大的屏幕或者像你的腳趾蓋那么大的一塊屏幕，它們的分辨率都是可以是2560×1440px。
現(xiàn)在的液晶顯示器都是有原生固定分辨率的（譯者：我一般稱為點對點分辨率），這根CRT顯示器的原理不同，在這就不細掰扯了。
咱的27“Mac顯示器有2560×1440px的點對點分辨率，109PPI。如果把屏幕分辨率調(diào)低，你就會發(fā)現(xiàn)屏幕上的窗口啊，icon啊啥的東西都變大了，因為23.5英寸上的像素變少了。
其實像素還是那么多像素，PPI還是那個PPI，它們就在那里不多不少。我說像素變少了的意思是當你把屏幕分辨率調(diào)低時，操作系統(tǒng)會通過拉伸來填充屏幕，這個時候CPU/GPU會用點對點的像素計算出來一套新的分辨率。
如果你想把27”Mac的分辨率設(shè)為1280×720px，GPU就會把4個像素當成1個像素用（2×2）。這能咋的？當然是變糊了！這還算好的呢，畢竟是可以整除的像素，如果你弄什么三分之一、四分之三這種幺蛾子，換算出來就有小數(shù)，那就更糊！不信你看下面的圖。
例如下面這個例子，在點對點屏幕上拉一條1px的線，然后把屏幕分辨率降低一半，為填充屏幕，CPU必須以150%的形式展示視覺效果。相當于所有元素都變?yōu)橹暗?.5倍，但是又沒有半個像素，所以只能通過減低填充像素顏色的純度達到目的。
這就是為啥在你用retina屏的Macbook Pro時如果要更改分辨率，系統(tǒng)會提示你此分辨率下的視覺效果（如下圖），用戶可以直觀的感受到分辨率的變化。
用像素代表物理尺寸是非常主觀的表現(xiàn)，但他們覺得這不算忽悠。
記?。喝绻阆朐诓榭丛O(shè)計時盡可能保持像素完美，一定要將屏幕分辨率設(shè)置為顯示器的點對點原生分辨率。雖然你可能覺得使用低分辨率更舒服些，但在像素層面查看設(shè)計時必須要盡可能精確。悲劇的是，有的人為了看的更清楚會使用輔助功能，這會讓你的作品看起來丑的要死，好在這時候用戶是為了看的更仔細而不是為了扣細節(jié)。
最近你可能經(jīng)常聽到有人說4K，4K現(xiàn)在老時髦了。嘮4K之前，咱們還是先說說HD（高清）是啥吧。
注意，HD其實是個很寬泛的簡稱，咱們只說說常見的分辨率。HD沒有固定標準，基本上寬度為720px的都算是HD，有的分辨率也成為標準定義簡稱SD。
full HD（全高清）指的是1920×1080px分辨率的屏幕，大多數(shù)的電視和越來越多的高端手機都使用full HD分辨率（例如：此處無品牌贊助商）。
4K標準的最小分辨率是3840×2160px。4K也叫做QHD或者UHD（超高清）。簡單的說，一塊4K屏幕可以擺下4個1080P的屏幕。
4K的另一個常見分辨率是4096×2160px，一般用在投影儀或者專業(yè)相機上。
目前的操作系統(tǒng)都不支持4K，如果你在一個Chromebook或者macbook上用4K屏幕，它們會使用最高DPI模式，這樣會以2倍的比例顯示元素（ 原文：it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio不知翻譯的是否正確），雖然看起來不錯但是特別的小。
請腦補：如果你把一個12寸的4K屏幕放在一個有12寸高分辨率屏幕的電腦上，所有元素看起來都會比以前小2倍。
- 4K就是4倍全高清.
- If current OS handles 4K but do not scale it. Meaning no 4K specific assets yet.（不知道如何翻譯更通順）
- 目前還沒有4K分辨率的手機或平板電腦。
此章節(jié)可能在理論上存在一些疑問，僅供參考和娛樂。
咱們先從PPI和屏幕分辨率的話題跳出來說點別的。你可能注意過在屏幕分辨率設(shè)置附近還有個刷新率的設(shè)置，它跟PPI沒關(guān)系，它指的是屏幕每秒顯示的圖像的幀數(shù)，60Hz的刷新率就是每秒顯示60幀，120Hz就是每秒顯示120幀，以此類推。
在UI設(shè)計中，刷新率決定了你所做的動畫看起來是否平滑且細致。注意，刷新率是由處理圖形的設(shè)備決定的，就算你把一個120Hz的顯示器接在小霸王游戲機上，它也不可能達到120Hz。
這還理解不了的話就看看下面的栗子吧。一個非常努力的霸王龍小明從A點跑到B點。在60Hz的屏幕上可以顯示9幀，在120Hz的屏幕上可以顯示18幀，當然在120Hz的屏幕上霸王龍小明看起來跑的更優(yōu)雅更努力了。
注意：有人說超過60Hz人眼是無法察覺出區(qū)別的。放屁！別聽他不懂裝懂，一定要盡情鄙視他 凸(‵.′)凸。
視網(wǎng)膜屏幕是在iPhone4發(fā)布時進入大眾視野的，叫視網(wǎng)膜是因為屏幕的PPI高到人的肉眼完全無法看到像素點。
在iPhone4剛出來那時候這個說法是合理的，但隨著屏幕做的越來越好，我們的眼神被煉的已經(jīng)能看到屏幕上的像素了，尤其界面上的圓形元素更容易看到。
從技術(shù)上講就是他們在物理尺寸與上一代相同的屏幕上塞了2倍的像素。
哇塞！不縮小元素的大小，相同尺寸屏幕上的元素精度提高了2倍。原來1個像素的空間現(xiàn)在有4個像素，像素數(shù)是原來的4倍。
再舉個栗子。
圖注：再其他的設(shè)備上很難表達出圖上界面在iPhone 3GS和在iPhone 4上的區(qū)別。如果你想仔細對比，可以下載我這個demo放在兩個手機里對比查看。
“Retina”是蘋果公司的專有名詞，其他公司只能用“HI-DPI”或者“超級勁爆極限像素顯示屏”之類的詞，或者完全不說這樣的蠢話，只在你讀設(shè)備說明的時候告訴你屏幕的尺寸和DPI。
注意：Apple產(chǎn)品的DPI轉(zhuǎn)換和分辨率的差異非常好理解，因為只有一種倍數(shù)。
當你的設(shè)計要在不同PPI的屏幕上展示時，轉(zhuǎn)換系數(shù)簡直就是葵花寶典。當你掌握了葵花寶典后，完全可以忽略設(shè)備的具體參數(shù)（也別完全忽略，畢竟大家都不是原作者這樣的東方不敗）。
咱們還是再把iPhone 3GS和iPhone 4請出來舉舉栗子。物理尺寸一樣的屏幕長寬各塞進去2倍數(shù)量的像素，那這個轉(zhuǎn)換系數(shù)就是2，就是說你的原件容納了之前4倍數(shù)量的像素，所以你要把它的尺寸的長寬都擴大2倍。（這哥們車轱轆話真多啊，真的不是湊字騙稿費？）
假設(shè)你畫了一個44×44px的iOS圖標，然后給它賦予一個有生命力的名字，例如“趙四”。
為了讓“趙四”在iPhone 4上看起來也很“趙四”，你要再畫一個2倍大的，如下圖。
是不是簡單死了！現(xiàn)在“趙四.png”有兩個版本的了，一個普通PPI下供3GS使用的，一個2倍大給iPhone 4使用的。
你可能會納悶：“肯定不止只有這一種轉(zhuǎn)換比例?！庇邪?，必須必的有啊，而且有多少比例就有多少噩夢。好了啦，不嚇你們了。我確定一定以及肯定你們寧愿花一天時間洗襪子洗褲衩也不愿意去換算系數(shù)。幸好你們遇到了哥，有哥在就不用擔心了。（才怪 =_=）
在談跨DPI設(shè)計的規(guī)范前，要先說一下單位，講一講DP和PT的身世。
注意：
不知道轉(zhuǎn)換系數(shù)還好意思說自己是射基濕，轉(zhuǎn)換系數(shù)是混亂的屏幕尺寸和PPI世界的燈塔。
DP和PT是用來定義應(yīng)用在不同設(shè)備、不同DPI下的標準單位。
DP（叫DiP也行）就是Device independent Pixel（設(shè)備獨立像素）的縮寫，PT就是point。PT是apple家的東西，DP是android家的東西，其實就是一個人有兩個名字。
總而言之言而總之，它能決定一個設(shè)備的轉(zhuǎn)換系數(shù)。這在射基濕和程序猿討（zheng）論（lun）設(shè)計標準時大有幫助。
我們再把之前做的按鈕“趙四”請出來。
44px的“趙四”用在3GS上，88px的“趙四”用在retina屏上。在3GS上我們給“趙四”做一個20px的內(nèi)邊距，讓它的地盤大一點，那么在retina屏上就要給出40px的內(nèi)邊距。在只做非retina屏幕設(shè)計時就不用算計retina屏幕應(yīng)該用多少像素了。
所以我們先以非retina屏幕的按鈕當成DP/PT的標準參照。
在上圖中“趙四”的大小是44DP，內(nèi)邊距是20DP。在任何PPI的屏幕上，“趙四”都是44DP。
Android和iOS都會通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸，這就是為啥使用你屏幕默認的PPI做設(shè)計會更好。（如果不是我翻譯的錯誤，完全沒有感受到這兩句話的因果關(guān)系）
SP跟DP不一樣，但用法基本一樣，SP是用來專門定義文字大小的。SP受用戶android設(shè)備字體設(shè)置的影響，作為射基濕定義SP跟定義DP一樣，把清晰易讀的大小作為標準（例如16SP的字號易讀性就非常強）。
分辨率的花樣越多，DP、SP就越凸顯出其價值。
之前已經(jīng)介紹過了PPI、retina和轉(zhuǎn)換系數(shù)?，F(xiàn)在必須要談?wù)勀銈冞@些小調(diào)皮們經(jīng)常會問的問題：如果我改變了設(shè)計工具里的PPI，會發(fā)生什么？
如果你以前就考慮過這個問題，那說明你對你的設(shè)計工具還挺熟悉的。我非了挺大勁才理解了這里面一些非常重要的東西。
所有非打印用像素的初始PPI配置
軟件中的PPI配置是從印刷品時代繼承而來。如果你只做Web設(shè)計，那PPI對你的設(shè)計基本沒什么影響。
軟件會把你的設(shè)計通過轉(zhuǎn)換系數(shù)轉(zhuǎn)換為合適的像素，這就是為什么我們使用轉(zhuǎn)換系數(shù)而不是直接使用PPI的具體數(shù)值。
再舉個栗子，你可以在Photoshop中畫一個80px的方塊，旁邊放一行16PT大小的字，一張72PPI，一張144PPI。
你看，144PPI的畫布上字比72PPI上大了1倍，但方塊的大小基本沒變化。因為Photoshop中PT的顯示會根據(jù)PPI的值來決定，在2倍的PPI上就有2倍大的文本。那什么情況是以像素作為定義標準呢，看那個藍色方塊，它的大小就沒變。一個像素就是一個像素，無論在什么PPI配置下，一個像素還是一個像素，它只受屏幕點對點像素PPI的影響。
以下內(nèi)容很重要：在進行數(shù)字設(shè)計時，PPI只會作用在你思考你的設(shè)計時，你的工作過程中和在使用PT這種單位時例如字體。如果你的設(shè)計源文件中包含了各種不同PPI的配置，項目中會包含各種根據(jù)不同PPI轉(zhuǎn)換出來的文件，這是個很大的麻煩。
怎么搞？堅定的使用一種PPI作為設(shè)計標準（建議在72~120PPI為1x）。我個人用72PPI，因為這是Photoshop默認的值，而且我的大多數(shù)同事也用這個。
建議：
- PPI配置對做web設(shè)計基本沒有影響。
- PPI配置只會影響那些需要測量獨立PPI的單位，例如PT。
- 像素是任何數(shù)碼的度量單位。
- 記住轉(zhuǎn)換系數(shù)和你的設(shè)計目的，而不是PPI。
- 做設(shè)計時使用通用的PPI配置，這樣能讓你更容易感知這個設(shè)計在目標設(shè)備上的效果。
- 設(shè)計時使用相同的PPI配置。
讀讀這個挺有趣的StackExchange post。
到了討論特定平臺設(shè)計的時候了。
讓我們從iOS設(shè)備開始吧。
從屏幕尺寸和DPI上看，apple有2種尺寸的移動設(shè)備和2種尺寸的桌面設(shè)備。
移動設(shè)備上是iPhone和iPad。
在手機端，你要考慮3GS及更高版本的設(shè)備。只有3GS是非視網(wǎng)膜屏幕的。iPhone 5及iPhone 5s與4和4s的DPI相同，只不過臉更長。
如果做iPod touch端設(shè)計，按照iPhone去設(shè)計就可以了。4代及以下用非視網(wǎng)膜屏幕標準，5代及以上使用視網(wǎng)膜屏幕標準，屏幕尺寸與iPhone 5相同。
最后iPad上的設(shè)計除了iPad一代外，都支持iOS7系統(tǒng)（這跟設(shè)計有什么關(guān)系？），只有iPad2和iPad mini一代的屏幕是非視網(wǎng)膜屏幕。如果你對iPad mini該如何設(shè)計很迷茫，你就把它當成iPad 2就行了，只不過個頭小點而已，因為mini跟2的分辨率相同，只不過屏幕大小從9.7縮小到7.9。使用相同的設(shè)計，在mini上只是看起來小了點。
對于桌面電腦，我們不可能覆蓋到apple的每一個尺寸的屏幕。目前據(jù)大多數(shù)蘋果桌面產(chǎn)品的屏幕都采用1x的轉(zhuǎn)換系數(shù)例如（Macbook，Macbook Air，old Macbook Pros和臺式機），只有13寸和15寸的Macbook Pro才有視網(wǎng)膜屏幕（視網(wǎng)膜屏幕才應(yīng)該是以后的發(fā)展趨勢啊，難道不是么。），使用2x的轉(zhuǎn)換系數(shù)，這跟iPad和iPhone特別像。如果做桌面設(shè)計跟移動設(shè)計不一樣，那你就要重復做2套適配不同屏幕的設(shè)計。
對于1x轉(zhuǎn)換系數(shù)，創(chuàng)建一個iOS或者OSX的設(shè)計是很容易的。我建議使用1x創(chuàng)建設(shè)計，然后再翻倍，放到2x的屏幕上查看效果。這樣你在兩種系數(shù)之間切換查看效果更輸入一些，你也可以直接設(shè)計2x的，然后再縮到1x，如果你是直接設(shè)計視網(wǎng)膜屏幕產(chǎn)品，這樣效率更高一些。
Chrome為栗
如上圖，我們每次需要準備兩張圖片。非視網(wǎng)膜屏幕的文件名是xxx.png，視網(wǎng)膜屏幕的文件名是xxx@2x.png。這是iOS設(shè)計中的一個通用慣例。
如果你只做iPad設(shè)計，我們一般的命名方式是xxx@2x~ipad.png。這是在Chrome中的慣例，在每個部件中重復此方式。不要企圖用一個版本覆蓋所有DPI。
iOS規(guī)則總結(jié)：
- @2x一定用在雙倍比例的情況下。
- 視網(wǎng)膜屏幕設(shè)計圖的文件名都加上@2x。
- 每次都創(chuàng)建100%大小和200%大小兩種尺寸。
- 同一個切圖使用相同的命名，用@2x和~ipad做區(qū)分。
- 用100%做設(shè)計，然后在放大。
- 存為png格式。
- 以PT為單位作為創(chuàng)建的標準。（個人理解大意是在1x的比例下，在腦子里把px當成pt）
android平臺的設(shè)備范圍可比iOS平臺多太tm多了！因為android是開放平臺的嘛，限制比較少嘛，追求民主和自由嘛，任何一個OEM廠商都可以在自己的設(shè)備上腦殘的使用自己定制的android系統(tǒng)。所以你幸運的跳進了各種各樣屏幕尺寸和DPI的海洋中。手機做的像平板電腦那么大！平板電腦做的像手機那么??！這！都！不！奇！怪！
因此android平臺的設(shè)計要使用與iOS平臺不同的設(shè)計方法。我們先談一談轉(zhuǎn)換系數(shù)和DPI的種類。
與iOS相同的是你基本有兩種設(shè)備：手機和平板。（電視呢？手表呢？手機那么大的平板和平板那么大的手機呢？）每種設(shè)備都有很多種DPI：ldpi，mdpi，tvdpi，hdpi，xhdpi, xxhdpi and xxxhdpi。（估計xxxxxxhdpi也不遠了）
首先找到1x的標準，android系統(tǒng)上是MDPI。
讓我們看看下面的轉(zhuǎn)換系數(shù)表。
你以為就這些？圖樣圖乃義務(wù)。至少還有一個，但不可能只剩這一個。
常見的DPI有四個：MDPI, HDPI, XHDPI and XXHDPI。（作者不嚴謹啊，一會大寫一會小寫，我嚴謹，但是懶，懶得改）
LDPI已經(jīng)被淘汰了，TVDPI主要在智能電視上用，以及2012版的Nexus 7（奇葩）。這倆DPI你可以在做手機/平板設(shè)計時忽略掉（我覺得我們老板不會舍得放棄任何一個設(shè)備的用戶，幸好他不知道TVDPI這回事）。小提醒，TVDPI（轉(zhuǎn)換系數(shù)1.33x）也用在android平臺的可穿戴設(shè)備上，例如LG G watch，稍后討論這個。
讓我們通過具體設(shè)備來看看對應(yīng)的DPI。（UI設(shè)計師下班了，要不一定勞駕她把三星手機都換掉，XXHDPI用smartisan T1）
也許已經(jīng)有設(shè)備使用XXXHDPI了（當然有），但仍然比較小眾，如果你有閑工夫，可以考慮讓你的app支持XXXHDPI。
Chrome栗再次登場
每個切圖你都要提供從MDPI到XXHDPI4種尺寸，不用管LDPI。注意在下面例圖中的Chrome，一共有5個尺寸的切圖，其中包括了TVDPI。
如iOS設(shè)計一樣，我建議你先做1x系數(shù)的設(shè)計圖，然后再根據(jù)轉(zhuǎn)換系數(shù)制作其他尺寸，尤其是android上奇葩的1.33和1.5兩個轉(zhuǎn)換系數(shù)。
Android上Chrome的后退按鈕尺寸如下圖所示
注：android官方設(shè)計向?qū)е胁]有說明建議在文件名后面加上對應(yīng)的DPI。我們之前一直以此方式命名以便彌補設(shè)計工具在導出路徑方面不夠智能的不足。
考慮到一個切圖文件可能會用到上百次，為了避免導出圖片時重復命名的錯誤源文件目錄結(jié)構(gòu)將是如下樣式：
- drawable-mdpi/asset.png
- drawable-hdpi/asset.png
- etc...
你可以看到，切圖是一個32*32dp的方塊。android轉(zhuǎn)換系數(shù)的特色問題是非整數(shù)的轉(zhuǎn)換系數(shù)。當你的系數(shù)是1.33或者1.5時，最后的結(jié)果很可能是一個非整數(shù)的像素，這時候你就要取個整數(shù)，例如32*1.33=42.56，所以我們?nèi)?3px。（并沒有提到必須使用四舍五入）
android的一些規(guī)則：
- android有7種DPI，你需要認真研究4種：mdpi,hdpi,xhdpi,xxhdpi。以及馬上要支持的XXXHDPI。
- 以MDPI作為1x的設(shè)計基礎(chǔ)。
- 在android上單位使用dp，其實與pt是一個意思。
- 1x設(shè)計中選擇合理的像素數(shù)。
- 存為png格式。
- 與負責人確認命名規(guī)范與存放目錄。
OSX和Chrome OS在PPI的處理上基本相同。
都是有兩個PPI，一個1x，一個2x。跟apple的產(chǎn)品差不多。即使現(xiàn)在大多數(shù)用戶使用的都是低分辨率OSX或者Chrome OS，我強烈提醒你未來一定是屬于高分辨率屏幕的。未來在web-app或website設(shè)計時使用高分辨率設(shè)計才不會浪費時間。
目前有三種高分辨率設(shè)備，Macbook pro 13",15"和Chromebook Pixel，并且Chromebook Pixel的屏幕是觸屏。
還是Chrome栗
Chrome瀏覽器的工具欄按鈕是一個完美的栗子（三道杠完美在哪里？因為這是大隊長？）。我們在跨平臺上使用相同的設(shè)計，雖然代碼不一樣，但界面視覺是一樣的，請仔細看圖。
建議
- Chrome OS和OSX都有兩個轉(zhuǎn)換系數(shù)，1倍和2倍。
- 只有Chrome OS高分辨率屏幕才支持觸屏。
無論你的app在移動端還是桌面端，你總會需要可伸縮設(shè)計的。
可伸縮時設(shè)計通過代碼保證你需要的元素可以有伸縮到它適合的大小而不改變其質(zhì)量。
它與可復用的元素使用方法不同，雖然有時候看起來是一樣的。
看下面Chrome的例子，iOS上的工具欄實際是豎條像素不停的在X軸重復，直至填滿屏幕。
讓我們看看不同平臺如何處理可伸縮元素。
對于設(shè)計師來講在iOS平臺做可伸縮元素比較容易，因為可以在代碼中實現(xiàn)，你只要準備好實現(xiàn)可伸縮元素的最小基本圖像就可以了，然后控制它的伸展方向，橫向縱向或者又橫又縱隨您意?？磇OS上的Chrome的按鈕如下。
Android上跟iOS上不太一樣，在Android上更依賴設(shè)計師的能力。
在android平臺上你就要用.9圖了。.9圖的方式是在元素四周布置4條線，它們要在傳送圖片時同時傳送，直觀的顯示元素的規(guī)格。
這些線定義了兩件事：可擴展的面積和可填充的區(qū)域。一旦定義了這兩件事，代碼就可以按照你的定義按要去拉伸元素。
仍然用android端的Chrome做示范。
如圖所示，.9格式定義了一個#000000的bar，在任何DPI下都是1px，這是一個代碼指令。拉伸區(qū)域不包括圓角，因為圓角難以重復（就算重復了也非常難看）。在栗子中我們給按鈕加了一個10dp的填充，不過這個你不必規(guī)范。.9格式在切圖時需要一個100%比例的透明切圖，否則是不行的。
.9格式圖片需要你在命名文件時在后面加上.9，例如下圖。
你需要注意你的.9圖片尺寸，如果我為了演示而把它做的很大，你必須通過把它的最小基本圖像減小到最小以便優(yōu)化元素的體積。I kept the corners as they were but reduced the stretchable and content area to a minimum.沒做過.9圖，實在翻譯不明白。
Be careful that the 9-patch markings do not overlap your design and that the cut of the asset is correct. The .9 should be as close to the asset as possible without overlapping it, try not to build-in padding. The example before has built-in padding because of shadowing.
.9圖不會在每種DPI下通用，所以你必須做多個版本的。
最后，.9圖可以向多個方向延伸，雖然在我的工作中遇到的情況不多，但值得注意。
建議：及時詢問負責項目的人，最佳的解決方案是什么，尤其是桌面設(shè)計。圖片越多，應(yīng)用的體積就會越大，在優(yōu)化和更新程序時非常麻煩，要學會恰當使用.9圖。
首先要清楚的是觸摸與DPI沒有關(guān)系，但是在做UI和元素設(shè)計時，必須要注意觸摸與DPI的關(guān)系。
決定是否支持觸摸由你所做的app決定。app如何定位，以及應(yīng)該有什么樣的用戶體驗。
我們簡單劃分一下：非觸摸的桌面應(yīng)用和可觸摸的移動設(shè)備。
我們不回顧歷史了，除非你是2005年之后才出生，你應(yīng)該知道電腦的設(shè)計并不是以觸摸為中心的。
我們使用鍵盤和鼠標這種精確控制工具，鼠標的精度是1pt，理論上你可以創(chuàng)建一個1x1pt的按鈕，你也能點擊到。
上圖是把Chrome OS的鼠標放大20倍，紅色區(qū)域就是點擊識別控制區(qū)，非常的精準。
那什么點擊是不精確的呢？你懂的，就是我們的手指。
那觸摸設(shè)計該怎么做？把要點擊的元素放大唄。
下面是兩個鼠標點擊和手指點擊的常用大小示范，它們代表了觸控時可識別的范圍。實際的觸控區(qū)域其實比可識別范圍小，除非你把手指都貼在屏幕上。
當設(shè)計觸控區(qū)域是，比較保險的辦法就是在允許范圍內(nèi)盡量把識別區(qū)域做大，而不是做小。
如我們所知道的，英寸和厘米在像素界都不是那么方便使用的，實際上用像素也不是特別好的辦法。說來說去的，到底怎么設(shè)計觸控識別區(qū)域？（賣關(guān)子賣上癮了）
我的態(tài)度很明確，你需要不斷的在你的目標設(shè)備上反復嘗試，總結(jié)。
長話短說，在每種OS上都有一個觸控識別的安全像素值。
需要注意的是這些建議尺寸雖然具有參考性但都不代表真實的物理尺寸，它們用于設(shè)備制造商、OEM廠商在開發(fā)設(shè)備時的盡量保證體驗一致性。
每種平臺都有自己的建議尺寸，不過都是48pt左右，windows平臺還包含了個內(nèi)邊距，我已經(jīng)把它放在圖上了。
尺寸的差異源于不同的因素。
Apple自己控制硬件制造，所以他們對于觸控識別的質(zhì)量有很可靠的保證，它們在小型設(shè)備上也能保證識別精度，并且apple確實設(shè)計了很多小尺寸設(shè)備。
Android和windows都有很多的OEM廠商，每個廠商都生產(chǎn)自己的設(shè)備，所以識別區(qū)域做大點更安全。在這兩個平臺上界面中的元素間距也比較大，并且一般設(shè)計的也都是大尺寸設(shè)備。
Chrome栗
藍色區(qū)域就是觸控識別區(qū)域。
如圖所示每個平臺的觸控識別區(qū)域，iOS上是44x44pt，android上是48x48pt。其他的平臺雖然不要求統(tǒng)一使用某種標準，但以上的尺寸是一個可參考的最小識別區(qū)域建議。
win8和Chrome OS都有觸控和非觸控兩種支持，如果你設(shè)計win8的應(yīng)用，建議參考guidelines for touch targets。
Chrome OS的設(shè)計規(guī)范也已經(jīng)發(fā)布了，像素范圍不大。由于Chrome OS的應(yīng)用都是web app，所以我建議在設(shè)計時就考慮可觸控識別，我的建議是參考Android touch targets guidelines。
如果你做移動端設(shè)計，毫無疑問要做觸控支持。如果做桌面端設(shè)計，不用太考慮觸控的支持。雖然聽起來容易，但及其容易忽略新趨勢：混合控制設(shè)備。
混合控制設(shè)備就是既可以觸控又可以使用鼠標鍵盤的設(shè)備，例如Chromebook Pixel, the Surface Pro and the Lenovo Yoga。
這種設(shè)別該怎么設(shè)計，雖然沒有絕對正確的設(shè)計標準，但我的建議是按照可觸控設(shè)備的標準去做，這是技術(shù)進化的方向。
如果你做web設(shè)計，也最好提早考慮觸控的支持。
建議：
- 以后做設(shè)計時一定要考慮移動端，考慮支持觸控。
- 使用每個平臺的建議觸控識別區(qū)域大小，這能幫助你做更好的設(shè)計，保證在不同平臺上有好的體驗。但這只是個建議，不代表你必須只能按照這個要求去做，最終還是要根據(jù)你的經(jīng)驗去做設(shè)計。
以下軟件介紹、參考文獻和作者簡介就不翻譯了
The software doesn't make the designer, but choosing the right software for the task at hand can improve your productivity and ease of work by quite a bit. Software "know-hows" shouldn't be your only skill but learning and mastering the right tool will be a great asset to make your ideas happen.
When it comes to handling DPI variation in interface design, different software work in different ways. Some are better at particular tasks than others. Here are the most common:
The mother of interface design tools. Probably the most used tool out there today. There is an infinite amount or resources, tutorials, articles for it. Photoshop has been around almost since the beginning of interface design.
As its name suggests, the first intention of the program wasn't interface design but photo or bitmap retouching. It evolved over the year and with the birth of interface design, designers appropriated it and re-purposed it. Part of this was because they were used to it and because it was the only program around that was able to do things as good as needed.
Photoshop is, to this day, the master of Bitmap editing and is still the most used program out there for UI design. Its decades long legacy makes it a hard program to approach and learn though. As a gigantic swiss army knife of a software, you'll be able to do anything, but not always in the most efficient way.
As it it bitmap based initially, it is DPI dependent, the opposite of Illustrator and Sketch described below.
Photoshop's vector based sibling. As its name indicates, it is aimed at Illustrators but it is also usable as an interface design tool.
Illustrator is suited for print design as well so its interface, color management, scale, rulers and units may throw you off at first and it requires a few tweaks to be easily usable for interface design only. Like Photoshop, it is an incredibly powerful tool with a steep learning curve.
What differs from Photoshop is that it is DPI independent due to its reliance on vector shapes. Contrary to bitmap or raster images, graphics made using vector shapes, relying on mathematical formulas, will be rescaled programmatically without any quality loss.
Understanding the difference between rasterized and vectorized image is key to build scalable visual design and assets.
If you want to get started with using Illustrator for web/interface design, I recommend reading "My vector workflow" by @janoskoos.
Sketch is new compared to Photoshop and Illustrator. With only 4 years of age, this program generated a lot of hype (in a good way) in the UI designer industry. The reason is that Sketch is aimed, from the start, to be used by interface and UX designers. Without the legacy of Photoshop or Illustrator, Sketch positions itself as the perfectly adapted tool for the niche audience that is interface designers.
Sketch is suited for fast wireframing as well as more complex visual design. It is entirely vector based, like Illustrator, with a minimal and well thought UI. The combination of artboards and the ease of use and flexibility of its asset generation system makes it the fastest tool for multi-DPI and multi-platform design. The recent release of its 3.0 version make it a very solid alternative to Photoshop.
On the downside, Sketch is supported by a smaller team and is still fairly recent. Its team is extremely reactive but doesn't have the scale of the Adobe (Photoshop and Illustrator) one. Sketch offers (by design) the bear minimum when it comes to bitmap edition. Photoshop will be more suited for this kind of job. Finally, due to its fairly still young life, the resources in term of source files, tutorials and overall community is orders of magnitude smaller than Photoshop. That being said, the community is very active and motivated.
On a more personal note, I've been a Photoshop user since I started design 8 years ago but I recently switch to Sketch 3.0 for the most part of my design process. This is not a judgement of quality, Photoshop is still a hell of a good program, it just suits my needs better.
If you want to learn more on my particular experience I encourage you to read my "A month with Sketch 3.0" article or my "Sketch tutorial_01".
Want to get even deeper and understand how vectors work in sketch ? Head to @pnowelldesign's article "Harnessing vector awesomeness in Sketch"
Takeaway:
There is no perfect tool for the job but the one you are comfortable using. If you can afford the time an money, I recommend you try them all to make up your own opinion.
This guide was only an introduction, time to start doing and learn more. Here are a few links if you want to learn more or simply get more details about the subjects we discussed here:
Platform documentation
Android UI guidelines
Google Material guidelines
iOS7 UI guidelines
Windows UI guidelines
Google dev Principles of site design
Cheat-sheets and templates
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
Tools
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. Lots of great tools for Android specific asset creation.
Learn more and other reads
Device independent pixel formula for Mobile devices
More information about 4K by Cnet.com
More informations about touch targets by Smashing Mag
The Android Screen Fragmentation Myth
I'm Sebastien Gabriel aka @Kounterb and I'm a visual designer for @googlechrome. I like towrite things and create freebies.
One thing I wish I had when I started is a clear guide explaining to me what DPI is and what the challenges of multi-platform design were going to be. This is what I'm trying to do here. By designing Chrome for almost every platforms out there, I learned a lot about these subjects and this is my effort to try and deliver it in the simplest way possible. As mentionned in the intro, if you think I got anything wrong, if anything lacks detail or if you would like to learn more about something, send me a message at sgabriel.contact@gmail.com.
半途而廢專家
4
作品
90
粉絲
13
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊