1. 簡介
上次更新時間：2022 年 8 月 4 日
從 Android 13 開始，使用者可以針對自動調整型啟動器圖示套用主題。這項功能可讓支援的 Android 啟動器沿用使用者所選桌布和其他主題的顏色，調整應用程式圖示的色調。
輕鬆建立 Android 應用程式所需的所有系統素材資源，包括新的自動調整色彩圖示。
課程內容
- 瞭解不同類型的應用程式圖示，以及設計這些圖示的訣竅。
- 如何使用 Android 啟動器 Figma 範本。
- 如何使用 Android Studio 資產產生器。
- 如何使用 Android Studio 模擬器預覽啟動器圖示。
必要條件
- Figma 的基本知識
- 選用：應用程式圖示圖片 (前景、背景和單色)
軟硬體需求
- Figma 帳戶
- Figma Designlab 檔案
- 選用：已安裝 Android Studio 的電腦
2. 開始操作
設定
如要開始使用，請先存取 Android 應用程式圖示 Figma 檔案。
首先，登入 Figma 或建立帳戶。
從 Figma 社群複製
前往「Android 啟動器範本」檔案，或在 Figma 社群內搜尋「Migrating to Variable fonts」。按一下右上角的「取得副本」，即可複製檔案。
使用範本
Android 圖示範本包含兩個頁面：
- 封面會簡要說明相關概念，以及如何使用範本。
- 範本頁面包含建立必要素材資源所需的一切內容，並分為三個框架 (顏色、形狀、Play 商店)。
注意：左側的「圖層」面板中，大部分的圖層和群組都已鎖定，請勿解除鎖定。(您可以在解鎖的圖片群組中放置圖片)。
不過，在開始建立素材資源之前，先來看看我們要建立哪些內容...
3. Android 系統圖示
啟動器圖示
啟動器圖示 (或應用程式圖示) 是應用程式啟動體驗的重要環節，會顯示在主畫面上，做為應用程式的進入點。
自動調整形狀
自動調整圖示 (AdaptiveIconDrawable) 會依個別裝置的性能和使用者設定的主題來改變顯示效果，主要應用的地方是主畫面的啟動器，但也可能用於捷徑、「設定」應用程式、分享對話方塊及總覽畫面。
自動調整圖示可在不同裝置型號上顯示各種形狀。舉例來說，自動調整啟動器圖示可在某台原始設備製造商 (OEM) 裝置上顯示圓形，並在另一台裝置上顯示方圓形。每個裝置原始設備製造商 (OEM) 都必須提供遮罩，讓系統用來將所有自動調整圖示變成相同形狀。
此外，系統還能根據形狀調整，在使用者互動時套用各種動畫效果。
自動調整顏色
自動調整圖示現在可以使用動態色彩，打造個人化主題應用程式圖示。
如果使用者已啟用主題化應用程式圖示 (也就是開啟系統設定中的「主題化圖示」切換按鈕)，且啟動器支援這項功能，系統就會根據使用者所選桌布和主題的配色，調整圖示的色調。
與自動調整形狀的圖示類似，自動調整色彩的圖示是由前景和背景組成，您只需要提供單色前景圖示素材資源，系統就會根據擷取的色彩配置處理背景和顏色。
通知圖示也可以使用相同的單色圖示。
舊版
您應加入舊版圖示，以支援搭載舊版 Android 的裝置，或不支援自動調整功能 (8.0 之前的版本)。
這類圖示不會有前景和背景資源，且可採用任意形狀。如果使用提供的範本，系統會以舊版圖示的必要大小匯出最終的自適應形狀圖片。
通知圖示
通知泛指 Android 在您應用程式 UI 以外的位置所顯示的訊息，可為使用者提供提醒內容、其他使用者傳來的通訊內容，或是來自您應用程式的即時資訊。系統會以不同的格式，在不同的位置顯示通知，例如狀態列中的圖示、通知導覽匣中較詳細的內容、應用程式圖示上的標記，以及自動出現在已配對的穿戴式裝置上。
商店圖片
您可以使用主題圖片、螢幕截圖、簡短說明和影片，在 Google Play 和其他 Google 宣傳管道中重點介紹及宣傳您的應用程式。
應用程式圖示不會取代應用程式的啟動器圖示，但前者的解析度必須比後者更高，更易於辨識。
與啟動器圖示類似，圖片可填滿整個素材資源空間，也可以設計讓標誌等圖片元素定位在標線格線上。
您必須提供 512x512 像素的正方形應用程式圖示，才能發布商店資訊。如果您使用 Android 應用程式圖示範本，匯出時會提供這個圖示，並使用「適應性形狀」圖片。
4. 設計最佳做法
啟動器圖示可供使用者啟動應用程式。做為應用程式的入口，這些連結必須可辨識及讀取。以下列舉幾項最佳做法，確保啟動器圖示符合這些品質標準。
保持簡單的封面。避免使用多個圖層、多種效果和文字。這些細節在縮小尺寸時會遺失或難以辨識。
避免使用複雜形狀。包括標誌。盡可能使用簡化版標誌，或考慮採用使用者會聯想到您應用程式的符號。清晰可辨的形狀有助於為使用者建立統一感，讓他們在不同情境 (自適應顏色和通知) 下都能輕鬆認出您的應用程式。
使用格線。善用格線或標線，確保前景圖片在裁剪後仍能正常顯示，包括全出血插畫圖片。
考慮對比度。如果是自動調整形狀和舊版圖示，請確保圖示前景和背景的對比度清晰易讀。避免使用厚重的陰影，以免與系統陰影混淆。
將圖片放在安全區域內。前景資產應維持在 72x72 像素內 (除非要全版顯示)。背景大小應為 108x108 像素。注意： 圖示範本的圖片框架大於 72x72 像素，方便您建構圖示圖片。系統會調整素材資源大小，以符合規格。
向量格式：請盡量使用向量格式 (例如 SVG、AI、PDF 和 EPS 檔案) 的圖片，而非光柵格式 (例如 PNG、JPG 和 GIF 檔案)。確保圖片與新功能相容，並方便編輯。
5. 自動調整顏色和通知圖示
現在換您建立自己的 Android 系統圖示。
- 找出 Android 應用程式圖示 Figma 檔案。
- 在檔案中找出「Adaptive color」(自適應顏色)影格。在左側圖層面板中，依序找到「Adaptive color」>「Components」>「art」>「Icon artwork area」>「Themed Icon art < add your icon」。如果已準備好單色圖示，請複製到這裡，取代範例 Bugdroid 圖示，然後跳至步驟 6。
- 如果沒有單色圖示，請先使用與應用程式相關的標誌或圖示。請參閱設計訣竅，更新圖示。首先，簡化並避免複雜形狀。舉例來說，應用程式中使用的插圖經過簡化，葉子形狀較不複雜。陰影和線條細節會以空白區域模擬。
- 現在，請使用標線格線更新大小。我們在此將大小調整設為「Scale」，並確保圖片位於前景安全區域內。範本會以 4 倍大小顯示插圖，並在匯出時自動調整大小，因此您可以設計較大的圖示。
- 這個檔案可與 Material Design 主題設定建構工具搭配使用，協助預覽動態色彩。將前景圖示顏色樣式連結至「On-surface-variant」。
- 現在，從「外掛程式面板」開啟 Material Design 主題設定建構工具後，您可以隨機調整來源顏色，或新增圖片，使用擷取的來源顏色更新顏色。
- 在不同解析度或主畫面上會如何顯示？範本已設定完成，因此放置在圖片框架內的圖片會顯示在各種預覽內容中。
- 系統會使用單色圖示做為通知，並在預覽畫面中顯示。
6. 自動調整造型和舊版圖示
現在，我們要建立自動調整形狀和舊版圖示，確保圖示獲得廣泛支援。
- 在檔案中找出「形狀影格」。在左側圖層面板中，找出「Icon background < add your icon*」。如果您已準備好圖示，請複製到這裡來取代範例 Bugdroid 圖示，然後跳至步驟 5。*如果沒有圖示，請先使用與應用程式相關的標誌或圖示，或重複使用單色圖示。
- 更新前景圖示，並留意圖示最佳做法。我恢復了原始插圖的顏色，但保留了最少的細節。
- 現在，請使用標線格線更新大小。我們將大小調整設為「Scale」，並確保圖片位於前景安全區域內。
- 自動調整形狀的應用程式圖示也可以有不同的背景。這樣一來，圖示的圖層就能安全裁剪，並在互動時提供細微的動態效果。您也可以在 Android Studio 中使用及定義純色背景。
- 預覽畫面會更新，顯示前景和背景在主畫面上的組合效果、不同裁剪形狀，以及舊版圖示。
如要在主畫面預覽畫面中更新裁剪形狀，請選取圖示並變更形狀變體選項。
7. 匯出中
太好了，您已使用應用程式圖示更新範本！讓我們匯出這些項目以供實作。
- 確認畫布上未選取任何項目。
- 前往 Figma 選單 >「檔案」>「匯出」 (Shift + Cmd + E)。
- 在匯出選單中確認匯出。系統會下載範本中的素材資源。
匯出內容有哪些？
匯出的素材資源包含實作應用程式圖示所需的所有檔案，如下所示
- Figma 會將自動調整顏色的單色前景圖示匯出為 SVG 檔案，並匯出自動調整形狀圖示的前景和背景。
- Figma 也會提供舊版圖示，並依解析度整理在不同的 mipmap 目錄中。
大功告成！圖示已可傳送給開發團隊。
或者，如要在 Android Studio 中預覽圖示，並將 SVG 轉換為最終資產格式，請繼續下一個步驟。
8. 使用 Image Asset Studio
開始使用 Android Studio
- 下載並安裝 Android Studio。
- 啟動 Android Studio。
Android Studio 會提示您建立新專案或選取現有專案。
- 請先選取新專案。接下來的畫面會逐步引導您設定新專案。
- 從新手範本中選取任一範本，因為我們只會查看啟動圖示。
- 接著為新專案命名，然後選取「完成」。建立新專案需要一些時間。
使用 Image Asset Studio
現在可以使用實用的 Asset Studio 工具，將圖示新增至專案。
- 如要存取這項工具，請依序選取「File menu」>「New」>「Image Asset」。
- 開啟 Image Asset Studio 後，選取「路徑」中的資料夾圖示，新增前景圖層。選擇匯出的 SVG 檔案，做為 drawable-anydpi/ic_launcher.svg
- 選取「Background Layer」分頁標籤，然後選擇匯出的背景圖層。或者，選擇「素材資源類型：顏色」，改用單色啟動器背景。
- 返回前景圖層，再次確認圖片位於安全區域內。將圖示調整為最適合的視覺大小。
- 完成後，請按一下「下一步」，系統會詢問圖示在專案中的位置 (保留預設值或切換至「主要」)。然後按一下「完成」。您可以在 res > drawable 下找到啟動器資產。按兩下即可預覽最終的向量可繪項目。
- 手動將單色圖層資產複製並貼到 res/drawable 或 res/drawable-v24，或手動匯入單色圖層 (在「res」資料夾上按一下滑鼠右鍵，然後依序選取「New」>「Vector Asset」)。
- 在 res/mipmap-anydpi-v26/ic_launcher.xml 和 res/mipmap-anydpi-v26/ic_launcher_round.xml 中，新增或變更現有的 android:monochrome="path/to/monochrome/asset，指向正確的單色素材資源。
9. 預覽畫面和資源
在模擬器中預覽
我們這麼做是為了將這些項目新增至應用程式專案，以便在實際裝置或模擬器上預覽！現在來看看實際的圖示。
系統預設會設定模擬器，但如果沒有，請建立 Android 虛擬裝置。按一下綠色的播放按鈕。這會建構專案並開啟模擬器。
最終素材資源
太棒了！您已使用模擬器查看啟動器圖示在裝置上的顯示方式，並將圖示新增至應用程式專案。這樣一來，這些檔案就會轉換為最終製作形式！但這些檔案在哪裡？
素材資源會以 Android 應用程式的資源形式存在，開啟「資源」面板 (通常位於左側) 即可找到。深入瞭解應用程式，然後找出「Res」資料夾。按一下滑鼠右鍵開啟選單，然後選取「在 Finder 中開啟」 (適用於 Mac)，系統會開啟「Finder」視窗。您也可以選擇使用類似程序，轉換及測試應用程式的其餘資產，節省部分開發和 QA 時間。如果您已轉換應用程式的其餘資產，則可與開發團隊共用這個資料夾。
10. 恭喜
您已瞭解建構 Android 應用程式所需的 Android 系統圖示、設計自己的圖示、探索圖示範本資源，甚至可能進一步深入瞭解 Android Studio，預覽及轉換用於製作的資產！
如有任何疑問，歡迎隨時透過 Twitter 上的@MaterialDesign 提問。
更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！