為 Android app 準備圖形資源

設計師與工程師都該知道的事 ⑴

Published in

Dcard Tech Blog

7 min readNov 14, 2016

為你的專案準備圖形資源

設計師在 app 開發流程中除了安排 UX 以及提供 mockup 以外，為程式提供相對應的圖形資源也是很重要的環節：這些檔案大多會原封不動的發布到每一個使用者的手上。因此這些資源的準備必須要能夠適應各種裝置，並且檔案大小適當，不至於讓 app 變得肥大而下載要等很久。

準備向量圖資源

VectorDrawable 是在 API level 21（Android 5.0 Lollipop）加入的選項，使用向量圖資源的好處是不需要準備多個解析度版本，以及如果你的 app 最低支援是 Android 5.0 含以上的話，app 所佔的空間可以小很多。

你需要提供的向量圖資源會是 XML VectorDrawable，當然你可以選擇直接編輯 path data，但我想多數人並不想每次都這麼做。一個比較實用的選項是輸出 SVG 圖檔再轉換成 XML，但必須要注意以下幾點：

VectorDrawable 並不支援 svg 的所有標籤。舉例來說，你的向量圖稿不能用剪裁遮色片，漸層或是圖案的填滿或線條等。
Android Studio 內建的 Asset Studio 轉出來的 VectorDrawable 會全部預設用黑色填滿。如果你的圖形很簡單，手動修改 fillColor 即可；或是如果圖形很複雜，可以考慮使用其他第三方工具。

當你的 SVG 圖稿使用了不支援的標籤時，Asset Studio 會在轉檔時顯示錯誤

另外，VectorDrawable 只支援到 API level 21（Android 5.0 Lollipop）。如果你的 app 支援到更早的 Android 版本，則 IDE 會在建置過程自動生成點陣圖資源並放在你的 apk 以提供這些早期 Android 版本的裝置使用。因此當你的專案內容有對這些圖形縮放時，就需要注意 pre-lollipop 的裝置是否會有失真問題。

當然，如果你仍然必須使用向量圖形並向下相容的話，你可以考慮採用 support library 所提供的方式。

除此之外，Android 也有提供 AnimatedVectorDrawable 等向量圖動畫的實作方式，但需要先對 VectorDrawable 的格式有更深的了解；如果有興趣可以在網路上找到很多相關的介紹或教學文章。

假如因為上述限制，或是其他緣故不適合使用向量圖形，你可以選擇為不同裝置提供相對應尺寸的點陣圖資源。不過在這之前必須先初步了解 Android 所採用的單位系統。

單位系統

Android 應用程式開發時可以使用的尺寸單位有以下幾種

dp (Density-independent Pixels)：定義 UI 尺寸最常使用的單位，後面會有更詳細的說明。
sp (Scale-independent Pixels)：與 DP 類似，但會根據系統設定的文字大小進行縮放，多用於定義字型大小。
pt (Points)：點，1/72 英吋
px (Pixels)：像素
mm：公釐（毫米）
in：英吋

通常設計稿不會用幾毫米或英吋定義 UI 尺寸；使用像素的話不會根據 dpi 縮放，因此 dpi 愈高你的 UI 就會看起來愈小。

Android UI 設計最常用的單位是 dp。dp 是一個抽象單位，也可以寫作 dip，以 160 dpi 時的 1px 為基準；dpi 愈高的時候，1dp 對應到的 px 數量就會愈多。

舉個例來說，在製作手機的 mockup 設計稿時，我常用的定義是 5 吋手機，360 * 640 dp。這個 mockup 可以渲染 1x 成為 360px，2x = 720px，3x = 1080px⋯⋯以此類推；因此，同尺寸的手機採用不同解析度的螢幕只會影響顯示精細度，而不會影響 UI 尺寸。

Android 已經有定義好的標準 dpi 倍率，以 160dpi 為 baseline，關係如下：

ldpi (0.75x) ~120dpi
mdpi (1x) ~160dpi (Baseline)
hdpi (1.5x) ~240dpi
xhdpi (2x) ~320dpi
xxhdpi (3x) ~480dpi
xxxhdpi (4x) ~640dpi

如此一來，假設你定義了 10dp * 10dp 的方格，在 xxxhdpi 的裝置就會渲染為 40px * 40px 的圖形；因此為不同 dpi 的裝置提供不同的點陣圖，可以讓顯示更有效率。

準備點陣圖資源

舉例來說，Dcard 應用程式內準備了以下幾種版本的應用程式圖示：

專案裡通常會提供 mdpi ~ xxhdpi 尺寸的圖型資源，並且為應用程式圖示額外提供 xxxhdpi 的版本。當需要的尺寸未提供時，系統會改用其他尺寸的圖形資源縮放顯示作為替代方案。關於系統採用替代資源的機制，可以參考官方文件的說明。

使用索引色

每一個放在應用程式裡的圖形資源都應該盡量採用最佳的壓縮方式，以節省檔案大小；龐大的圖形資源累積起來，會讓應用程式下載及更新的等待時間變得更久。

如果你的圖形顏色使用到的顏色並不多（例如扁平化設計等），可以考慮在輸出檔案時採用索引色模式。在轉換成索引色時，會建立色彩查閱表 (CLUT) 來儲存影像中的顏色，並為其編列索引，因此可以有效降低每個像素儲存所需要的位元數。

以下圖為例，使用索引色後節省了近 66% 的檔案大小，但效果差異是肉眼幾乎是無法分辨的。

儲存為索引色

在 Adobe Illustrator 裡選擇「儲存為網頁用」時，你會發現 PNG-8 索引色模式雖然有「透明度」的勾選框，但即使勾選了以後，色彩表仍然只會索引一個完全透明的色彩，其餘的色彩表元素都是不透明色（也就是 1-bit alpha channel）。如果你的背景色是固定純色，那你可以在「邊緣調和」的選項設定你的背景色

1-bit alpha 並不是 PNG-8 的格式限制，而是 Adobe Illustrator 在「儲存為網頁用」的功能限制。在 Illustrator CC 2015 以後的版本提供了「轉存為螢幕適用」的功能選項，除了可以使用 8-bit alpha channel 的索引色以外，也提供了 Android 和 iOS 裝置所需的倍率選項，因此可以一次輸出各 dpi 所需要的點陣圖資源。

註：ldpi 與 xxxhdpi 使用率較低，官方建議提供 mdpi、hdpi、xhdpi、xxhdpi 的資源即可；應用程式圖示在不同啟動器可能有不同縮放，因此建議額外提供 mipmap-xxxhdpi。Mipmap drawable 的用途在往後文章會有更多介紹。