第四話——Android 的切圖與標註

01-24

簡評：長篇設計師修真玄幻小說最終章??????

MDPI, HDPI, XHDPI, XXHDPI 以及 XXXHDPI

大家都知道 Android 是一個開源系統，不像 iOS 只有蘋果自家的機器能跑，屏幕尺寸一直以來也比較穩定，而運行 Android 系統的設備的屏幕卻各式各樣非常跳脫，這也就是以往大家經常說 Android 設備碎片化嚴重的原因之一。不過這種碎片化嚴重的情況來到今天已經改善了非常之多，縱使 Google 對於 Andorid 開源的策略重來沒有變過，但 OEM 們開始不約而同地開始使用不那麼「奇形怪狀」的屏幕了，且某些低解析度的機型隨著時日變遷也已經被淘汰殆盡了。倒是 iOS 在推出 Plus 機型之後 iOS 屏幕碎片化的問題也開始凸顯起來了，個人認為目前兩大平台的屏幕碎片化問題都存在且大家都差不多，大家在對 Android 產品進行設計的時候大可不必那麼擔心。

與 iOS 相似的是，設計師們同樣也是需要輸出不同倍率的切圖，只不過需要輸出的倍率更多罷了。程序員將會把所有不同倍率的切圖都裝在同一個安裝包裡面，在運行的時候系統會根據屏幕的解析度來自動選用正確倍率的切圖。

坦率地講，假如我們要糾結到每塊屏幕的邏輯解析度的話，那麼Android 陣營的碎片化真的是無比嚴重，但是我們知道，只要邏輯解析度差的不太遠的話，我們能夠用同一個稿來進行設計、輸出切圖，其中的誤差必不可能避免但將會在一個可接受的範圍之內。對於Android 產品來說，一般我們都使用 360*640px 作為一倍稿進行設計。

目前為止還需要我們輸出切圖的解析度有五種：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近發布的 S8 就是這個倍率）。ldpi 和 tvdpi 以及可以不予考慮了。有一點需要提出的是，被淘汰的 tvdpi 這種解析度目前被很廣泛地使用到了運行 Android 系統的可穿戴設備上，例如前陣子很火的 Moto 360 智能手錶，假如要設計手錶上面的產品的話那麼就得輸出這個倍率的切圖。

下面給出一張圖，讓大家看看各個檔次的 DPI 的代表機型，某些機型年輕一點的小同學（例如我自己）可能連聽都沒過，大家看看就好，開拓開拓眼界，無需過分在意。

標註與切圖——以 Chrome 瀏覽器為例

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

上篇我們簡單的介紹了下 iOS 的圖片資源的命名方式，很簡單，就是文件名加上 @2X、@3X 這樣的小標記。然而來到了 Andorid 平台我們就不這樣命名了。

以下這張長圖是 Android 工程文件管理圖片資源的方式，我們可以看到裡面有從 drawable-hdpi 到 drawable-xxxhdpi 數個文件夾，你沒猜錯，這些文件夾裡面就放著設計師們精心設計出來的各種 .png 切圖。

Android 系統會自動根據屏幕的屬性來選擇使用哪個文件夾裡面的那套切圖。譬如說在新出的蓋樂世 S8 上面運行的話，那麼系統就會自動選擇使用 drawable-xxxhdpi 文件夾裡面的圖，新出的小米 6 的話，就會自動選用 drawable-xxhdpi 文件夾裡面的圖。

並且，我們輸出的圖片的名字全部都要是一樣的，安裝不同的倍率進行導出，並且不能帶有後綴或其他標記，同個圖切出來不同倍率五張資源，分別被放入了相應的文件夾裡面。使用神奇 Sketch Measure 進行批量導出，程序員會跪著感謝你的。

看起來可能會是這樣的：

···drawable-mdpi/[文件名].png drawable-xhdpi/[文件名].png drawable-xxhdpi/[文件名].png drawable-xxxhdpi/[文件名].png···

以下拿運行於 Android 平板 Nexus9 上的 Chrome 瀏覽器作為例子。Chrome 的安裝包裡面帶有了這五種倍率的切圖，然而運行在 Nexus9 這台平板電腦之上的時候，它選用了 xhdpi 這一檔解析度的切圖來對自己進行適配。

太長了不想看

說是說有七種解析度的圖要切，但是就目前市面上的設備來講你只要關注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 這五種已經夠了。如針對可穿戴設備的話，那可能會用到 tvdpi。
360*640px 作為一倍稿進行設計。
做標註時使用 dp 作為單位（iOS 使用的是 pt，但實際上差不多一個意思）
輸出 .png 格式的圖片資源。
記住命名規則，同個圖片資源的各個倍率的文件名都是一樣。

相關閱讀：

第一話——什麼是 DPI，什麼又是 PPI ？
第二話——什麼是 dp、pt、sp？
第三話——iOS 的切圖與標註

參考鏈接：Designer"s guide to DPI

歡迎關注

知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章；
個人專欄：「DesignCoder」設計是一項工程；
我的追波：Zhuyuxuan