我們自稱 UI/UX/PD/etc. 設(shè)計(jì)師，但是我們對(duì)自己手頭上設(shè)備的屏幕去一無(wú)所知 — 沃茲基·碩德

什么是 DPI，什么又是 PPI ？

dpi、ppi、dp、pt、sp 等等這些個(gè)單位我們天天接觸，但是真正理解這些單位的設(shè)計(jì)師恐怕并不太多，畢竟真的有點(diǎn)兒復(fù)雜，別說(shuō)學(xué)美術(shù)出身的設(shè)計(jì)師了，很多程序員都搞不太懂。但是作為一名 UI/UX/PD/etc. 設(shè)計(jì)師，因?yàn)椴涣私膺@些知識(shí)而鬧笑話的事情幾乎每天都在發(fā)生，不知道這些甚至連自己的做設(shè)計(jì)的電腦屏幕都不了解你覺(jué)得真的好嗎？

本次分享將在盡量不涉及數(shù)學(xué)，盡量用最簡(jiǎn)單的語(yǔ)言，盡量使用最貼近生活的例子來(lái)為在座各位患者朋友將心頭這些個(gè)疑慮全部消除。

DPI 是英文 Dots（點(diǎn)） Per Inch 的縮寫，在最早的時(shí)候，這個(gè)單位是用來(lái)描述打印機(jī)的性能的，意思就是這臺(tái)打印機(jī)最多能用多少個(gè)墨點(diǎn)來(lái)打印一寸的內(nèi)容。目前市面上常見(jiàn)的家用黑白打印機(jī)普遍都去到了 600*600 dpi 而家用彩色照片打印機(jī)則能去到 5760*1440 dpi。DPI 越高，每英寸內(nèi)的墨點(diǎn)就越多，你打印出來(lái)的東西就會(huì)越清晰銳利。

PPI 是英文 Pixels Per Inch 的縮寫，意味每寸能容納多少顆像素，用于描述屏幕的像素密度。我們上面提到的印刷物以無(wú)數(shù)多的墨點(diǎn)來(lái)構(gòu)成圖像，而屏幕同樣也是以一定數(shù)量的發(fā)光點(diǎn)來(lái)構(gòu)成圖像。見(jiàn)過(guò)街上那些走紅字的 LED 顯示屏么？上面的那一顆顆的 LED 燈就是這塊屏幕的發(fā)光點(diǎn)，我們使用的 MacBook 的 Retina 顯示屏的原理也跟這些看起來(lái)十分粗糙的走紅字顯示屏是一樣的，只不過(guò) Retina 顯示屏的發(fā)光點(diǎn)密度非常高，人眼已經(jīng)看不出來(lái)顆粒感而已。對(duì)于屏幕來(lái)說(shuō) PPI 是用于描述每英寸發(fā)光點(diǎn)數(shù)量的，它表明了一塊屏幕發(fā)光點(diǎn)密度的高低，這些發(fā)光點(diǎn)我們更常稱之為像素，一塊屏幕寬高有幾寸是在生產(chǎn)的時(shí)候就被定好的，而寬高各能容納下多少顆像素，也是在生產(chǎn)的時(shí)候就被定好的，所以我們所說(shuō)的 PPI 可以說(shuō)是一個(gè)物理單位。

簡(jiǎn)單舉個(gè)例子吧，我們手頭上的 iPhone(6~7) 寬為 2.3 英寸，高為 4.1 英寸，**根據(jù)勾股定理得出這塊屏幕的尺寸（屏幕對(duì)角線距離）是 4.7 英寸。**同時(shí)，iPhone(6~7)屏幕寬（每行）有 750 個(gè)像素（發(fā)光點(diǎn)），高（每豎）有 1334 個(gè)像素（發(fā)光點(diǎn)）。

分辨率、像素和屏幕尺寸

PPI 說(shuō)的是像素密度，而分辨率說(shuō)的是塊屏幕的像素尺寸，譬如說(shuō) 1334*750 就是 iPhone（6~7）的分辨率，說(shuō) iPhone（6~7）的分辨率是 326 是錯(cuò)誤的表述，326 是它的像素密度，單位是 PPI。

詢問(wèn)別人一粒像素有多大是一個(gè)非常雞賊的問(wèn)題（小心面試遇到這樣的題），雖然我們說(shuō)像素是構(gòu)成屏幕的發(fā)光的點(diǎn)，是物理的，但是像素在脫離了屏幕尺寸之后是沒(méi)有大小可言的，你可以將 1920px * 1080px 顆像素放到一臺(tái) 40 寸的小米電視機(jī)里面，也可以將同樣多的像素全部塞到一臺(tái) 5.5 寸的 iPhone7 Plus 手機(jī)里面去，那么對(duì)于 40 寸的電視而言，每個(gè)像素顆粒當(dāng)然會(huì)大于 5.5 寸的手機(jī)的像素。所以光看屏幕像素尺寸對(duì)于設(shè)計(jì)師來(lái)說(shuō)是不具備多少實(shí)際意義的，通過(guò)分辨率計(jì)算得出的像素密度（PPI）才是我們?cè)O(shè)計(jì)師要關(guān)心的問(wèn)題，我們通過(guò)屏幕分辨率和屏幕尺寸就能計(jì)算出屏幕的像素密度的。

再次使用 iPhone（6~7）作為例子。我們知道該屏幕的橫向物理尺寸為 2.3 英寸 ，且橫向具有 750 顆像素，根據(jù)下面的公式，我們能夠算出 iPhone（6~7）的屏幕是 326 PPI，意為每寸存在 326 顆像素。

其實(shí)不論我們?cè)趺闯?，?jì)算得出來(lái)的像素密度（PPI）都會(huì)是這個(gè)數(shù)，寬存在像素除以寬物理長(zhǎng)度，高存在像素除以高物理長(zhǎng)度，得數(shù)都接近于 326。

對(duì)設(shè)計(jì)會(huì)造成什么樣的影響

一塊 326*326px 的正方形色塊在一臺(tái) iPhone 7 上面展現(xiàn)出來(lái)的物理尺寸將會(huì)會(huì)是 1*1 英寸。這是因?yàn)樵撈聊幻坑⒋缒苋菁{ 326 顆像素，所以 326px 湊在一起剛好就是 1 英寸。假設(shè)我們能將 iPhone 7 手機(jī)屏幕 PPI 調(diào)低 50% 變?yōu)?163，那么這個(gè)色塊的物理尺寸就會(huì)變成 2*2 英寸，同樣多的像素，看起來(lái)卻大了一倍。咦！這是為啥？

因?yàn)槲覀兊纳珘K是 326*326px 大小的，而這臺(tái) 163PPI 的假 iPhone 7 每英寸上面只有 163 顆像素，為了要展示 326*326px 的色塊，它就要多用 1 英寸的屏幕，所以這個(gè)色塊在屏幕上面看起來(lái)就“長(zhǎng)大了”一倍。

小結(jié)

1. 像素本身沒(méi)有尺寸，你可以將1920px * 1080px 顆像素放到一臺(tái) 40 寸的小米電視機(jī)里面，也可以將同樣多的像素全部塞到一臺(tái) 5.5 寸的 iPhone7 Plus 手機(jī)里面去。
2. 只有跟屏幕尺寸一起的時(shí)候，談?wù)撓袼夭庞幸饬x，因?yàn)槲覀兡軌蛩愠鲈撈聊坏?PPI。
3. DPI 跟 PPI 雖然概念相近，但是我奉勸你還是不要拿著他們倆混用，雖然可能好多人告訴你這樣沒(méi)啥關(guān)系。
4. 在設(shè)計(jì)過(guò)程中，我們并不見(jiàn)得真的要去計(jì)算各種東西的實(shí)際尺寸，但是對(duì)于原理的把握能讓你心里有個(gè)低，或許就是我們常說(shuō)的“意識(shí)”。別以為每個(gè)人的屏幕上顯示的都會(huì)跟你屏幕上顯示的是一樣的。

什么是 dp、pt、sp？

DP 或者說(shuō) DiP 是 Device independent Pixel 的縮寫，而 PT 是 Point 的縮寫，DP 用于安卓系統(tǒng)開(kāi)發(fā)，而 PT 用于 iOS 系統(tǒng)開(kāi)發(fā)。但從根本來(lái)講它們都是一個(gè)意思。

上一篇文章我們仔細(xì)地對(duì)屏幕最基礎(chǔ)的幾個(gè)屬性——分辨率、PPI、和物理尺寸，似乎我們只要知道了這幾個(gè)東西那我們的設(shè)計(jì)就怎么樣也不會(huì)錯(cuò)。但是聰明的童鞋可能發(fā)現(xiàn)了一些不對(duì)，我們不可能對(duì)每一塊屏幕都進(jìn)行了解，然后專門針對(duì)這塊屏幕再進(jìn)行一次設(shè)計(jì)吧？世界上那么多屏幕，那一個(gè)界面我要畫(huà)多少個(gè)稿?。。?/p>

沒(méi)錯(cuò)，假如真是這樣的話，那么面對(duì)不同的屏幕，不僅要從新設(shè)計(jì)，連程序都可能要重新寫一回，這顯然是不可能的事情。不過(guò)這個(gè)問(wèn)題不僅我們想到了，那些計(jì)算機(jī)、智能手機(jī)的生產(chǎn)商也想到了，為了讓廣大程序員和設(shè)計(jì)師朋友能夠更加容易地解決適配問(wèn)題，讓更多的開(kāi)發(fā)者來(lái)來(lái)為他們開(kāi)發(fā)軟件，他們使用了一種很聰明的方法，同時(shí)這也是為什么我們又多了 DP、PT、SP 等那么多“雜七雜八”的單位的原因。

解析這幾個(gè)單位的必要，可能要從開(kāi)發(fā)的角度來(lái)講會(huì)比較清晰一點(diǎn)。

程序員在搭建界面的時(shí)候也會(huì)像我們?cè)O(shè)計(jì)師畫(huà)圖一樣，首先會(huì)有一個(gè)畫(huà)布，一個(gè)畫(huà)布代表針對(duì)設(shè)備的一屏，程序員將會(huì)在這個(gè)畫(huà)布內(nèi)對(duì)界面進(jìn)行搭建。針對(duì) iPhone（6~7）而言，這個(gè)畫(huà)布的最佳大小是375*667pt。下面這張圖就是程序員的畫(huà)布，長(zhǎng)這樣的，有點(diǎn)像 Sketch，注意紅框里面的數(shù)字。

等等，不是說(shuō) iPhone（6~7）的分辨率是 750*1334px 嗎？這個(gè)奇怪東西又是什么？這是 iPhone（6~7）的邏輯點(diǎn)分辨率（或稱虛擬點(diǎn)分辨率），這個(gè)就是人們?yōu)榱私鉀Q屏幕尺寸繁多而設(shè)計(jì)出來(lái)的一套機(jī)制。iOS 系統(tǒng)就是根據(jù)這個(gè) 375*667pt 的畫(huà)布進(jìn)行一個(gè)二倍放大渲染來(lái)填滿 750*1334px 的屏幕的。這也是為什么那么多設(shè)計(jì)師推薦使用一倍圖進(jìn)行設(shè)計(jì)的原因，這樣是最接近開(kāi)發(fā)環(huán)境的，開(kāi)發(fā)不需要換算就能直接照著你的設(shè)計(jì)稿設(shè)置各個(gè)元素的尺寸和位置。

比如說(shuō)，你在 Sketch 里面使用一倍稿（375*667px 的畫(huà)布）畫(huà)了一顆 44*44 px 的按鈕，對(duì)于開(kāi)發(fā)來(lái)說(shuō)，這顆按鈕在畫(huà)布上并不是 44px 大小，而是 44 pt。**的確，我們?cè)谳敵霭粹o這張圖的時(shí)候會(huì)輸出成 88px（@2），或132px（@3）但是我們輸出的只是一張 .png 的圖片，是這顆按鈕的“表皮”而已。**而對(duì)于開(kāi)發(fā)來(lái)說(shuō)，這顆按鈕是一個(gè)控件，是界面的一個(gè)零部件，這個(gè)控件的大小就不能定義成幾多幾多 px 了，**px 是死的， pt 是活的，面對(duì)iPhone 7，44pt 將會(huì)被渲染成 88px 大小的一枚按鈕，上面覆蓋上了你輸出的 @2.png 表皮，而面對(duì) iPhone 7 Plus，它將會(huì)被渲染成 132px 大小的一枚按鈕，上面覆蓋上了你輸出的 @3.png 表皮。**系統(tǒng)是以這樣的機(jī)制，來(lái)保證能夠使用一個(gè)布局文件來(lái)對(duì)不同分辨率、不同 PPI 的屏幕進(jìn)行盡量正確的布局。

DP 或 DiP 也差不多是這個(gè)道理，只不過(guò)這個(gè)單位用于安卓開(kāi)發(fā)。

SP 是 Scale-independent pixels 的縮寫，大意是可放大像素的意思，這個(gè)單位多用在安卓設(shè)備的字體大小上面。它跟 DP、 PT 的概念差不多，能夠面對(duì)不同的屏幕尺寸渲染出大小適合文字。

羅里吧嗦那么多，敢不敢來(lái)張圖？

此處只以 iPhone（6~7）來(lái)舉例，其實(shí)其他設(shè)備也是這個(gè)原理，包括電腦、手機(jī)、平板電腦、甚至是智能手表。

小結(jié)

1. 不想看看上面的圖吧 233333。

iOS 的切圖與標(biāo)注

跑 iOS 的設(shè)備主要兩種，iPhone 和 iPad。（iPod thouch就不討論了，基本上跟 iPhone 一樣。）

iPhones

iPhone 方面我們從非 retina 顯示屏的 iPhone3G/S 講到 iPhone 7/Plus。

• 蘋果在推出 iPhone 4/S 的時(shí)候首次為自己的智能手機(jī)產(chǎn)品配備 retina 顯示屏。需要注意的是它的屏幕尺寸與 iPhone 3G/S 一樣，都是 3.5 寸，但分辨率卻整整提升了四倍，也就是說(shuō)同樣大的屏幕塞進(jìn)去了四倍的像素，PPI 是前者的兩倍，達(dá)到了 326。
• iPhone 5/S/C 的屏幕達(dá)到了 4 英寸。值得注意的是，iPhone 5/S/C 屏幕橫向還是與 iPhone 4/S 一樣保持有 640 顆像素，橫向物理尺寸也沒(méi)變，同樣都是 2.0 英寸，變的是縱向的尺寸。屏幕邊長(zhǎng)了一點(diǎn)點(diǎn)，PPI 維持不變。
• iPhone 6/7（Plus）屏幕分別為 4.7 英寸和 5.5 英寸。前所未有的尺寸，前所未有的分大小屏，前所未有邏輯分辨率，同時(shí)也是前所未有的物理分辨率。非 Plus 機(jī)型維持了 326 PPI，而 Plus 則去到了 401 PPI。更大的屏幕，更高的分辨率，iOS的設(shè)計(jì)師也是從這個(gè)時(shí)候開(kāi)始需要輸出 @3x 的切圖了。

關(guān)于 Plus 機(jī)型，不得不仔細(xì)說(shuō)說(shuō)它的一個(gè)小特點(diǎn)。

在 iPhone 6/7 上，系統(tǒng)會(huì)根據(jù) 350*667pt 的邏輯畫(huà)布進(jìn)行一個(gè)二倍渲染，變成 750*1334 之后再將界面投射到屏幕上面去。Plus 機(jī)型也差不多，它的邏輯畫(huà)布的最佳大小是 414*736pt（由于與非 Plus 機(jī)型的邏輯分辨率并不太懸殊，所以平時(shí)我們只是用一倍畫(huà)稿進(jìn)行設(shè)計(jì)也沒(méi)有產(chǎn)生太大的問(wèn)題，誤差將由程序員使用一些技術(shù)上的布局手段減?。?然后系統(tǒng)進(jìn)行了一次三倍的渲染變?yōu)?1242*2208px。但 Plus 機(jī)型的分辨率是 1080*1920px 的，邏輯畫(huà)布渲染出來(lái)的大小怎么跟這個(gè)不一樣，那還怎么準(zhǔn)確投射，充滿整個(gè)屏幕??！

在 Plus 機(jī)型上，渲染出來(lái)的 1242*2208px 會(huì)先降低采樣變成 1080*1920px 然后再投射到屏幕上面去。我們還是來(lái)看圖吧。

1080*1920px 相較于 1242*2208px 大約縮小了 15%，那么很多尺寸都會(huì)出現(xiàn)小數(shù)，比如說(shuō) 131.3244px 這樣惡心數(shù)字，出現(xiàn)小數(shù)的話圖片的邊緣就會(huì)出現(xiàn)模糊的狀況，而 Plus 機(jī)型上幾乎所有圖片都不是整數(shù)的，但得益于高分辨率的 retina 顯示屏，我們的肉眼可能看不出來(lái)端倪（湊近一點(diǎn)看的話有可能能夠看得出來(lái)大家不妨試試）。絕大部分情況下 Plus 的降低采樣機(jī)制不會(huì)對(duì)我們的設(shè)計(jì)造成什么太過(guò)巨大的影響，記得輸出 @3X 圖即可，不過(guò)要說(shuō)的是，越是細(xì)小的元素影響就會(huì)越大。

iPads

iPad 方面我們從非 retina 顯示屏的第一代 iPad 到想要代替電腦的 12.9寸的 iPad Pro 再到 iPad mini 1/2/3/4。

• 蘋果在推出第二代 iPad 的時(shí)候?yàn)?iPad 配備上了 retina 顯示屏。iPad 2/Air/Air 2/Pro 都維持了 2048*1536 的分辨率，PPI 一直保持在 264。7.9英寸的 iPad 的屏幕一直維持了這樣的配置。
• 說(shuō)出來(lái)你可能不信，除了第一代的 iPad mini 是非 retina 顯示屏之外，其他（2 至 4 代）mini 的屏幕的分辨率都跟 7.9 英寸的 iPad 一模一樣，物理分辨率都是 2048*1536，邏輯分辨率都是 768*1024，而由于屏幕變成了 7.9 英寸，所以 PPI 去到了 326。
• 12.9 英寸的 iPad Pro 配備的超大屏幕的物理分辨率為 2732*2048，邏輯分辨率為 1366*1023 ，而 PPI 則去到了 264。由于邏輯分辨率與其他機(jī)型實(shí)在太過(guò)懸殊，我們沒(méi)辦法還用跟普通 iPad 一樣的畫(huà)稿來(lái)做設(shè)計(jì)，是的老鐵，你最好重開(kāi)一稿重新設(shè)計(jì)。

有些小伙伴可能會(huì)留意到，無(wú)論是 iPhone 還是 iPad,好幾代了屏幕的參數(shù)好像沒(méi)怎么變化過(guò)，PPI 不是越高越好嗎？蘋果是好久沒(méi)升級(jí)自己屏幕，一塊祖?zhèn)髌聊缓鲇葡M(fèi)者？不是的，因?yàn)槿搜蹖?duì)于像素密度的要求會(huì)根據(jù)人眼距離屏幕的距離變化而變化，RMBP 的 PPI 是 109，被手機(jī)完爆，但是我們平時(shí)用起來(lái)還是覺(jué)得非常清晰銳利，因?yàn)槲覀冇秒娔X的時(shí)候眼睛距離屏幕會(huì)比手機(jī)遠(yuǎn)，不需要那么高的像素密度也可以消除顆粒感。**相應(yīng)的使用距離配制相應(yīng)的 PPI，所謂夠用就好。**過(guò)高的 PPI 并不會(huì)帶來(lái)多大的畫(huà)質(zhì)提升，反而會(huì)導(dǎo)致一連串不好的后果，加大處理器渲染負(fù)擔(dān)，加大電池負(fù)擔(dān)，不利于設(shè)計(jì)開(kāi)發(fā)人員設(shè)計(jì)，屏幕的制造成本也會(huì)增加。早年安卓陣營(yíng)出現(xiàn)了一些 2K 屏甚至 4K 屏的產(chǎn)品，現(xiàn)已銷聲匿跡，消費(fèi)者根本需要這么高分辨率的屏幕。蘋果在相應(yīng)的設(shè)備（無(wú)論從電腦到智能手機(jī)再到智能手表）上維持一個(gè)穩(wěn)定的 PPI 是很明智的選擇，穩(wěn)定的屏幕參數(shù)非常非常有助于設(shè)計(jì)開(kāi)發(fā)人員工作的開(kāi)展，這種穩(wěn)定性對(duì)開(kāi)發(fā)者造成的便利恐怕超過(guò)了所有人的想象的。

標(biāo)注與切圖——以 Chrome 瀏覽器為例

在蘋果尚未推出 Plus 機(jī)型的那段時(shí)間里設(shè)計(jì)師們一般都只需要輸出一倍圖和二倍圖。一倍圖針對(duì)的是沒(méi)有配備 retina 顯示屏的 iPhone 而二倍圖針對(duì)的是配備 retina 顯示屏的 iPhone。Plus 機(jī)型推出后就開(kāi)始要輸出三倍圖了，切不配備 retina 顯示屏的 iPhone 已經(jīng)過(guò)于老舊，不再需要考慮。一般我們會(huì)在文件名后面加上 @2X 或 @3X 的后綴以標(biāo)明文件的尺寸，就如上圖所示，這是 iOS 的規(guī)范，還是值得準(zhǔn)守一波的。

至于 iPad 版本，規(guī)則也差不太多，只是 iPad 不需要三倍切圖。

小結(jié)

1. @2X，@3X，相應(yīng)的素材請(qǐng)務(wù)必加上相應(yīng)的后綴。
2. 針對(duì)目前市面上的的屏幕尺寸而言，一倍圖已經(jīng)沒(méi)有必要再輸出了，而二倍、三倍圖則必須要輸出。
3. 二倍三倍圖的文件名必須是一樣的，不然會(huì)被開(kāi)發(fā)砍死。
4. 以一倍畫(huà)稿做設(shè)計(jì)，以一倍畫(huà)稿輸出標(biāo)注文檔，最后輸出二倍、三倍圖。
5. 如無(wú)特殊情況，請(qǐng)確保文件都是 .png 格式。
6. 一倍畫(huà)稿輸出的標(biāo)注文檔的單位應(yīng)該為 pt，而不是 px。

Android 的切圖與標(biāo)注

MDPI、HDPI、 XHDPI、 XXHDPI 以及 XXXHDPI

大家都知道 Android 是一個(gè)開(kāi)源系統(tǒng)，不像 iOS 只有蘋果自家的機(jī)器能跑，屏幕尺寸一直以來(lái)也比較穩(wěn)定，而運(yùn)行 Android 系統(tǒng)的設(shè)備的屏幕卻各式各樣非常跳脫，這也就是以往大家經(jīng)常說(shuō) Android 設(shè)備碎片化嚴(yán)重的原因之一。不過(guò)這種碎片化嚴(yán)重的情況來(lái)到今天已經(jīng)改善了非常之多，縱使 Google 對(duì)于 Andorid 開(kāi)源的策略重來(lái)沒(méi)有變過(guò)，但 OEM 們開(kāi)始不約而同地開(kāi)始使用不那么“奇形怪狀”的屏幕了，且某些低分辨率的機(jī)型隨著時(shí)日變遷也已經(jīng)被淘汰殆盡了。倒是 iOS 在推出 Plus 機(jī)型之后 iOS 屏幕碎片化的問(wèn)題也開(kāi)始凸顯起來(lái)了，個(gè)人認(rèn)為目前兩大平臺(tái)的屏幕碎片化問(wèn)題都存在且大家都差不多，大家在對(duì) Android 產(chǎn)品進(jìn)行設(shè)計(jì)的時(shí)候大可不必那么擔(dān)心。

與 iOS 相似的是，設(shè)計(jì)師們同樣也是需要輸出不同倍率的切圖，只不過(guò)需要輸出的倍率更多罷了。程序員將會(huì)把所有不同倍率的切圖都裝在同一個(gè)安裝包里面，在運(yùn)行的時(shí)候系統(tǒng)會(huì)根據(jù)屏幕的分辨率來(lái)自動(dòng)選用正確倍率的切圖。

坦率地講，假如我們要糾結(jié)到每塊屏幕的邏輯分辨率的話，那么Android 陣營(yíng)的碎片化真的是無(wú)比嚴(yán)重，但是我們知道，只要邏輯分辨率差的不太遠(yuǎn)的話，我們能夠用同一個(gè)稿來(lái)進(jìn)行設(shè)計(jì)、輸出切圖，其中的誤差必不可能避免但將會(huì)在一個(gè)可接受的范圍之內(nèi)。對(duì)于Android 產(chǎn)品來(lái)說(shuō)，一般我們都使用 360*640px 作為一倍稿進(jìn)行設(shè)計(jì)。

目前為止還需要我們輸出切圖的分辨率有五種：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近發(fā)布的 S8 就是這個(gè)倍率）。ldpi 和 tvdpi 以及可以不予考慮了。有一點(diǎn)需要提出的是，被淘汰的 tvdpi 這種分辨目前被很廣泛地使用到了 運(yùn)行 Android 系統(tǒng)的可穿戴設(shè)備上，例如前陣子很火的 Moto 360 智能手邊，假如要設(shè)計(jì)手表上面的產(chǎn)品的話那么就得輸出這個(gè)倍率的切圖。

下面給出一張圖，讓大家看看各個(gè)檔次的 DPI 的代表機(jī)型，某些機(jī)型年輕一點(diǎn)的小同學(xué)（例如我自己）可能連聽(tīng)都沒(méi)過(guò)，大家看看就好，開(kāi)拓開(kāi)拓眼界，無(wú)需過(guò)分在意。

標(biāo)注與切圖——以 Chrome 瀏覽器為例

與 iOS 一樣，我還是建議大家使用一倍稿進(jìn)行設(shè)計(jì)，然后再輸出各種倍率的切圖就好，但是 Android 系統(tǒng)要求圖片資源的命名與管理圖片資源的方式是和 iOS 是完全不同的。

上篇我們簡(jiǎn)單的介紹了下 iOS 的圖片資源的命名方式，很簡(jiǎn)單，就是文件名加上 @2X、@3X 這樣的小標(biāo)記。然而來(lái)到了 Andorid 平臺(tái)我們就不這樣命名了。

以下這張長(zhǎng)圖是 Android 工程文件管理圖片資源的方式，我們可以看到里面有從 drawable-hdpi 到 drawable-xxxhdpi 數(shù)個(gè)文件夾，你沒(méi)猜錯(cuò)，這些文件夾里面就放著設(shè)計(jì)師們精心設(shè)計(jì)出來(lái)的各種 .png 切圖。

Android 系統(tǒng)會(huì)自動(dòng)根據(jù)屏幕的屬性來(lái)選則使用哪個(gè)文件夾里面的那套切圖。譬如說(shuō)在新出的蓋樂(lè)世 S8 上面運(yùn)行的話，那么系統(tǒng)就會(huì)自動(dòng)選擇使用 drawable-xxxhdpi 文件夾里面的圖，新出的小米 6 的話，就會(huì)自動(dòng)選用 drawable-xxhdpi 文件夾里面的圖。

并且，我們輸出的圖片的名字全部都要是一樣的，安裝不同的倍率進(jìn)行導(dǎo)出，并且不能帶有后綴或其他標(biāo)記，同個(gè)圖切出來(lái)不同倍率五張資源，分別被放入了相應(yīng)的文件夾里面。使用神奇 Sketch Measure 進(jìn)行批量導(dǎo)出，程序員會(huì)跪著感謝你的。

看起來(lái)可能會(huì)是這樣的：

drawable-mdpi/[文件名].png

drawable-xhdpi/[文件名].png

drawable-xxhdpi/[文件名].png

drawable-xxxhdpi/[文件名].png

以下拿運(yùn)行于 Android 平板 Nexus9 上的 Chrome 瀏覽器作為例子。Chrome 的安裝包里面帶有了這五種倍率的切圖，然而運(yùn)行在 Nexus9 這臺(tái)平板電腦之上的時(shí)候，它選用了 xhdpi 這一檔分辨率的切圖來(lái)對(duì)自己進(jìn)行適配。

這里有個(gè)非常重要的點(diǎn)大家一定要注意一下。1.5 倍倍率切出來(lái)的圖片必然帶有小數(shù)，如 33pt * 1.5 = 49.5px ，如此之大的小數(shù)會(huì)讓圖片的邊緣非常模糊，簡(jiǎn)直不能忍。所以遇到這兩個(gè)倍率，我們要手動(dòng)將小數(shù)去掉，譬如就將尺寸改變?yōu)?50px，不過(guò)剛剛提到的神奇能夠自動(dòng)地進(jìn)行這一項(xiàng)工作。為了你的身體健康，請(qǐng)千萬(wàn)別把 49.5*49.5px 的圖片輸出出來(lái)交給程序員。

太長(zhǎng)了不想看

• 說(shuō)是說(shuō)有七種分辨率的圖要切，但是就目前市面上的設(shè)備來(lái)講你只要關(guān)注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 這五種已經(jīng)夠了。如針對(duì)可穿戴設(shè)備的話，那可能會(huì)用到 tvdpi。
• 360*640px 作為一倍稿進(jìn)行設(shè)計(jì)。
• 做標(biāo)注時(shí)使用 dp 作為單位（iOS 使用的是 pt，但實(shí)際上差不多一個(gè)意思）
• 如果尺寸出現(xiàn)小數(shù)，那么請(qǐng)手動(dòng)將小數(shù)去掉。使用 Sketch Measure 進(jìn)行導(dǎo)出的話就不用手動(dòng)去擼，插件會(huì)代勞。
• 輸出 .png 格式的圖片資源。
• 記住命名規(guī)則，同個(gè)圖片資源的各個(gè)倍率的文件名都是一樣。

作者：Zhuyuxuan，知乎專欄： 「DesignCoder」 設(shè)計(jì)是一項(xiàng)工程；追波：Zhuyuxuan

本文由 @Zhuyuxuan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。