如何正確地設計Android App Icon? [附Figma範本]


文章系列介紹

融合了我的設計與開發經驗而成的獨家秘訣。

本篇文章分享了設計Android App Icon時的規格、注意事項與實作方式,可作為設計師與工程師間溝通時的實用指引。文章中獨家提供了Figma檔案範本,進一步助你輕鬆完成設計。

承邑牌設計秘訣 設計Android App Icon

App Icon規格

首先,你必須知道Android系統中的App Icon(官方稱為”Adaptive Icon”)並不是單純的一張圖片而已。事實上,它是由「前景」與「背景」兩個圖層重疊而成的。有了這個設計,系統便可以在App Icon上套用如視差滾動的特效(取決於各家手機廠商,你可能會看見其他特效或看不見特效)。2022年發表的Android 13所帶來的新功能「主題色Icon(Themed Icon)」,也應用了同樣的原理。因此,這代表著設計Android App Icon時不僅需要將前景、背景圖層分開交付,連尺寸規範都有更多需要注意的細節。

Android App Icon的動態特效。圖片來源:Medium
承邑牌設計秘訣 設計Android App Icon 主題色icon
Android 13起引入的新功能「Themed Icon」,能夠使Icon顏色依照使用者的桌布顏色變換。

圖檔尺寸方面,Google規定你必須提供以下五種尺寸,確保Icon在各個裝置上的顯示效果都是清晰的。

名稱尺寸(dp/px)對應縮放倍率
mdpi108 x 1081(基準)
hdpi162 x 1621.5
xhdpi216 x 2162
xxhdpi324 x 3243
xxxhdpi432 x 4324

然後,每個尺寸規格都需要提供以下五種類型的圖檔(格式為PNG或SVG,圖案以SVG尤佳):

圖檔名稱說明
ic_launcher將前景與背景合而為一張圖片,用於Android 8.0以下裝置的Icon顯示
ic_launcher_round將前景與背景合而為一張圖片,並套用了圓形裁切。用於Android 8.0以下裝置的Icon顯示
ic_launcher_foregroundIcon的前景圖案(通常是企業的logo)
ic_launcher_backgroundIcon的背景圖案(通常是純色、漸層)
ic_launcher_monochrome純黑色的Icon前景圖案。此圖檔用於Android 13或以上的主題色Icon(Themed Icon)功能,背景顏色會由系統依照使用者的色彩偏好自動生成
承邑牌設計秘訣 設計Android App Icon Adaptive icon需要的素材
製作icon時需要準備的5種類型檔案

表格中的五種圖檔類型,在交付時需要依照尺寸規格放入不同的資料夾中。資料夾的命名格式為「mipmap-規格名稱」。例如,提供mdpi尺寸的圖檔,資料夾的命名即為「mipmap-mdpi」並將相關圖檔放置在裡頭。

承邑牌設計秘訣 設計Android App Icon adaptive icon檔案架構範例
檔案架構範例

接下來,我將進一步說明設計圖檔時的注意事項。

以mdpi尺寸為例,108×108只是圖檔的最終大小,但這並不是你可以自由進行設計的範圍。考慮到系統還需要製造前述提及的視覺特效及不同手機廠商對Icon的裁切,實際上的可視範圍還會更小。詳細的規格如下表。設計前景圖案時,請務必確保圖案位於「安全區」內;設計背景圖案則只需要考慮圖檔尺寸就好。另外,計算其他解析度規格的裁切區與安全區,請依前述表格的縮放比例等比放大。

區域名稱尺寸(dp/px)用途
圖檔尺寸108 x 108圖檔的最終大小
外框裁切區72 x 72各家手機廠商套用App Icon形狀的大小,例如圓形、圓角矩形、方圓形等
安全區66 x 66Icon的「最大」可視範圍。為了使圖案與邊緣保持一定的間距,通常圖案還會再進一步內縮。但須注意,Google建議圖案不要小於48×48 dp。
承邑牌設計秘訣 設計Android App Icon adaptive icon範例
重要區域說明
承邑牌設計秘訣 設計Android App Icon adaptive icon範例
正確與錯誤設計範例

※ 安全區尺寸大小是設計時特別需要注意的地方。由於Google的說明文件描述不夠清楚,導致許多設計師會誤以為前景圖案需要撐滿66x66dp,但這其實會導致前景圖案與裁切邊框完全貼齊,非常不好看。

App Icon規格(Google Play Store用)

上傳至Google Play Store用的Icon需要另外設計。幸運的是,這部分就比手機上的Icon簡單許多。你只需要提供一張512×512 px的圖檔,並注意以下的尺寸規範即可:

區域名稱尺寸(px)用途
圖檔尺寸512 x 512圖檔的最終大小
安全區384 x 384Google建議的圖案範圍
  • 色彩空間:sRGB
  • 檔案類型:32Bit PNG

其他應避免的設計樣式、錯誤請參照Google的指引文件

Figma檔案範本

承邑牌設計秘訣 設計Android App Icon

雖然Google有提供官方的Android App Icon設計範本,然而當我瀏覽時(2024年5月時點),我發現裡頭的內容已經年久失修,且對於前述的種種設計規範、命名支援都不夠友善。因此,為了簡化繁複的設計流程,我設計了新版的Figma檔案範本供各位設計師使用。

本範本直觀的顯示了裁切區、安全區的大小,並有在檔案內附上各個區域的用途說明。同時,全部的畫框已依照命名規範命名,只需選取欲輸出的畫框並點擊「輸出」,成品圖檔即包含於資料夾架構中,可直接交付給工程師。

連結:https://www.figma.com/community/file/1371452020151745140/android-adaptive-icons-template


在Android App Project使用圖檔

👉

從本段落開始為與工程師溝通時需要用到的區塊。

要在android app project中使用輸出後的icon圖檔,可以透過【手動更換檔案】或【使用Android Studio內建工具】實現。然而無論是使用哪種方法,請先確認AndroidManifest.xmlic_launcher.xml檔案中的程式碼已正確設定:

AndroidMainifest.xml
以下兩行程式碼註明了icon素材的載入位置。 

XML
<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

res/mipmap-anydpi-v26/ic_launcher.xml
background、foreground、monochrome分別註明了icon素材的載入位置。

XML
<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Android 13 (API level 33) 以上支援使用Themed Icon
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

方法1:手動更換檔案

請將輸出後的資料夾拖曳入 app/src/main/res中替換即可。請注意,在Android Studio中,資料夾架構可能會與檔案管理器顯示的不一樣。請以檔案管理器為準。

方法2:使用Android Studio內建工具

在Android Studio中選中res資料夾,並從上方的選單選取File → New → Image Asset,選中後Assest Studio的對話框將會彈出。

在對話框的Icon Type欄位中,選擇「Launcher Icons (Adaptive and Legacy)」。接著,在Foreground與Background Layer分別選擇輸出好的圖檔。你可以從右側的預覽視窗中,即時看到效果。另外,由於本工具是以單一圖檔生成所有尺寸的圖檔,因此選擇解析度高的版本效果最好。

其他選項不需特別改動,一直按「Next」即可。完成後所有的Icon將會被新生成的圖檔取代即完成。

在模擬器開啟主題色Icon功能

打開模擬器,並由設定→ Wallpaper & Style → HomeScreen 頁面中,打開「Themed Icons」即可。

承邑牌設計秘訣 設計Android App Icon 在模擬器開啟Themed Icon功能
點擊Themed Icons,開啟主題色Icon功能

結語

「承邑牌設計秘訣」文章系列是我的全新寫作嘗試,系列中將融匯我的設計與開發經驗,提供其他地方難以找到的詳盡設計指引。如果你喜歡本文章系列,歡迎將連結分享給更多設計師朋友!同時,如文章有誤,歡迎來信指教。

參考資料

追蹤我的IG帳號@chengyi_hsieh

追縱帳號獲得我的最新動態

追蹤

RECOMMEND

PROMOTION

追蹤我的IG帳號 @chengyi_hsieh

身為UI設計師的日常學習、生活、觀點紀錄都在這裡!

立即追蹤