文章系列介紹
融合了我的設計與開發經驗而成的獨家秘訣。
本篇文章分享了設計Android App Icon時的規格、注意事項與實作方式,可作為設計師與工程師間溝通時的實用指引。文章中獨家提供了Figma檔案範本,進一步助你輕鬆完成設計。
App Icon規格
首先,你必須知道Android系統中的App Icon(官方稱為”Adaptive Icon”)並不是單純的一張圖片而已。事實上,它是由「前景」與「背景」兩個圖層重疊而成的。有了這個設計,系統便可以在App Icon上套用如視差滾動的特效(取決於各家手機廠商,你可能會看見其他特效或看不見特效)。2022年發表的Android 13所帶來的新功能「主題色Icon(Themed Icon)」,也應用了同樣的原理。因此,這代表著設計Android App Icon時不僅需要將前景、背景圖層分開交付,連尺寸規範都有更多需要注意的細節。
圖檔尺寸方面,Google規定你必須提供以下五種尺寸,確保Icon在各個裝置上的顯示效果都是清晰的。
名稱 | 尺寸(dp/px) | 對應縮放倍率 |
---|---|---|
mdpi | 108 x 108 | 1(基準) |
hdpi | 162 x 162 | 1.5 |
xhdpi | 216 x 216 | 2 |
xxhdpi | 324 x 324 | 3 |
xxxhdpi | 432 x 432 | 4 |
然後,每個尺寸規格都需要提供以下五種類型的圖檔(格式為PNG或SVG,圖案以SVG尤佳):
圖檔名稱 | 說明 |
---|---|
ic_launcher | 將前景與背景合而為一張圖片,用於Android 8.0以下裝置的Icon顯示 |
ic_launcher_round | 將前景與背景合而為一張圖片,並套用了圓形裁切。用於Android 8.0以下裝置的Icon顯示 |
ic_launcher_foreground | Icon的前景圖案(通常是企業的logo) |
ic_launcher_background | Icon的背景圖案(通常是純色、漸層) |
ic_launcher_monochrome | 純黑色的Icon前景圖案。此圖檔用於Android 13或以上的主題色Icon(Themed Icon)功能,背景顏色會由系統依照使用者的色彩偏好自動生成 |
表格中的五種圖檔類型,在交付時需要依照尺寸規格放入不同的資料夾中。資料夾的命名格式為「mipmap-規格名稱」。例如,提供mdpi尺寸的圖檔,資料夾的命名即為「mipmap-mdpi」並將相關圖檔放置在裡頭。
接下來,我將進一步說明設計圖檔時的注意事項。
以mdpi尺寸為例,108×108只是圖檔的最終大小,但這並不是你可以自由進行設計的範圍。考慮到系統還需要製造前述提及的視覺特效及不同手機廠商對Icon的裁切,實際上的可視範圍還會更小。詳細的規格如下表。設計前景圖案時,請務必確保圖案位於「安全區」內;設計背景圖案則只需要考慮圖檔尺寸就好。另外,計算其他解析度規格的裁切區與安全區,請依前述表格的縮放比例等比放大。
區域名稱 | 尺寸(dp/px) | 用途 |
---|---|---|
圖檔尺寸 | 108 x 108 | 圖檔的最終大小 |
外框裁切區 | 72 x 72 | 各家手機廠商套用App Icon形狀的大小,例如圓形、圓角矩形、方圓形等 |
安全區 | 66 x 66 | Icon的「最大」可視範圍。為了使圖案與邊緣保持一定的間距,通常圖案還會再進一步內縮。但須注意,Google建議圖案不要小於48×48 dp。 |
※ 安全區尺寸大小是設計時特別需要注意的地方。由於Google的說明文件描述不夠清楚,導致許多設計師會誤以為前景圖案需要撐滿66x66dp,但這其實會導致前景圖案與裁切邊框完全貼齊,非常不好看。
App Icon規格(Google Play Store用)
上傳至Google Play Store用的Icon需要另外設計。幸運的是,這部分就比手機上的Icon簡單許多。你只需要提供一張512×512 px的圖檔,並注意以下的尺寸規範即可:
區域名稱 | 尺寸(px) | 用途 |
---|---|---|
圖檔尺寸 | 512 x 512 | 圖檔的最終大小 |
安全區 | 384 x 384 | Google建議的圖案範圍 |
- 色彩空間:sRGB
- 檔案類型:32Bit PNG
其他應避免的設計樣式、錯誤請參照Google的指引文件。
Figma檔案範本
雖然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.xml
和ic_launcher.xml
檔案中的程式碼已正確設定:
AndroidMainifest.xml
以下兩行程式碼註明了icon素材的載入位置。
<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 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」即可。
結語
「承邑牌設計秘訣」文章系列是我的全新寫作嘗試,系列中將融匯我的設計與開發經驗,提供其他地方難以找到的詳盡設計指引。如果你喜歡本文章系列,歡迎將連結分享給更多設計師朋友!同時,如文章有誤,歡迎來信指教。
參考資料
- Google開發者文件:設計Adaptive Icons
- Designing Adaptive Icons by Nick Butcher on Medium
- Google開發者文件:設計Google Play Store用Icon
RECOMMEND
【[year]最新】Stocard就是你的萬能會員卡匣! [iOS/Android]
2024.05.01
日檢JLPT N3~N1通過心得、選書策略與學習方法分享
2024.06.11