Android 應用程式圖示實用指南:自適應圖示解釋(以及如何正確產生您的圖示)

Illustration of a single app icon design masked into a circle, a squircle, and a rounded square for different Android launchers and iOS

對於初次接觸 Android 開發者來說,這是一個常見的驚喜:您為應用程式圖標打磨一個方形 PNG,以整潔的 512x512 導出它,並且它在圖像編輯器中看起來很完美。然後,您在三星手機上安裝調試版本,圖標突然看起來被裁剪並且稍微偏離中心,就好像徽標的一部分被切掉了一樣。文件本身沒有任何問題。問題在於,單一方形影像永遠無法在與 Android 啟動器的現實世界接觸後倖存下來,每個啟動器都會以不同的方式裁剪、遮罩和重塑圖示。如果您還沒有遇到過這種情況,那麼您遲早會遇到這種情況,所以讓我們來看看到底發生了什麼,以及如何第一次就解決問題。

為什麼單一方形 PNG 已經不夠了

在 Android 的最初幾年,應用程式圖示正是它們看起來的樣子:每個啟動器都按原樣顯示的單一方形(或偶爾為自由形狀)PNG。這種做法一直很有效,直到製造商開始在視覺上區分他們的手機,而最容易做到這一點的地方之一就是主螢幕。三星想要圆角正方形,一些中国 OEM 皮肤想要不同的边角处理,而原生 Android 最终选择了圆形。突然之间,完全相同的图标文件看起来明显不同,有时甚至明显更糟,具体取决于它落在谁的手机上。

Google在 Android 8.0 Oreo 中推出的答案是自適應圖示系統。開發人員不是提供一種固定的形狀,而是提供分層的藝術作品,作業系統本身將其屏蔽成給定啟動器喜歡的任何形狀。視覺辨識保持一致;僅外部輪廓變化。

自適應圖標到底是什麼?

自適應圖示由兩個獨立的層構建,每個層佔據 108dp x 108dp 的畫布:背景層和前景層。 Android 將兩者組合在一起,然後套用目前啟動器使用的任何遮罩形狀,無論是圓形、圓角正方形、淚滴形或其他形狀。兩層結構也使得 Android 能夠添加微妙的視差和運動效果,因為當您點擊或拖曳圖示時,各層可以獨立移動。

在應用程式的資源中,這通常是透過像 mipmap-anydpi-v26/ic_launcher.xml 這樣的 XML 檔案定義的,它只是指向背景和前景可繪製對象,而不包含像素資料本身。傳統的平面 ic_launcher.png 仍然保留作為運行 Android 7.1 或更早版本的裝置的後備,這些裝置完全早於自適應圖示系統。

為什麼安全區很重要

這是最讓人困惑的部分。儘管每層的畫布為 108dp x 108dp,但無論應用哪種蒙版形狀,都只能保證以該畫布為中心的內部 66dp x 66dp 圓圈可見。此內部區域通常稱為安全區。它外面的任何東西都可能顯示在圓形蒙版上,然後突然夾在更具攻擊性的方格形或淚滴形蒙版上,反之亦然。

這正是當徽標靠近畫布邊緣繪製以最大化其視覺尺寸時出現的問題:它在圓形蒙版上看起來很完美,但在三星的方圓蒙版上剪裁不均勻。修復不是重新設計,只是稍微縮小藝術品,這樣無論最終應用哪種形狀,有意義的內容都保留在安全區域內。

Exploded diagram showing an adaptive icon background layer plus a foreground layer with a safe zone, combined into a final masked icon

您將遇到的啟動器形狀

形狀你會在哪裡看到它
圓圈原生 Android、Pixel 啟動器(長期預設)
方格(圓角方形)Samsung One UI 和其他幾種 Android 皮膚
圓角正方形(超橢圓)iOS,由系統自動套用,無需開發者控制
淚珠在某些三星軟體版本上作為可選選項提供
柔和的角落方形各種其他製造商啟動器皮膚

實際的收穫是,你無法選擇你的圖示最終會穿哪一種形狀。使用原生 Android 啟動器的使用者通常甚至可以從設定選單中選擇自己喜歡的形狀。你唯一真正的槓桿是確保藝術品本身優雅地保存下來,這正是安全區所保證的。

建構資產:您需要的尺寸和密度

密度桶啟動器圖示大小
mdpi48 x 48 像素
hdpi72 x 72 像素
xhdpi96 x 96 像素
xxhdpi144 x 144 像素
xxxhdpi192 x 192 像素
Play 商店清單圖標512 x 512 像素

如果您也在 iOS 上發布該應用程序,請完全添加另一組,因為 Apple 的 App Store 圖標要求最高為 1024x1024,並使用完全不同的非分層格式,根本不透明。

手動方式與使用產生器

您完全可以在影像編輯器中手動產生這些尺寸中的每一種,或透過 Android Studio 的內建 Image Asset Studio,它可以很好地處理單一專案的密度縮放和遮罩預覽。當您跨多個應用程式維護一個設計系統,需要匹配來自同一主圖稿的 iOS 匯出,或者只是想要一種快速方法來在提交之前仔細檢查設計在每個形狀上的行為方式時,這會變得乏味。

從一張主圖像生成各種尺寸

我們的 應用程式圖標生成器 採用單一高解析度來源影像,並產生全套 Android 密度桶、自適應圖示前景/背景結構以及 Play 商店清單大小,所有這些都來自一次上傳,因此您無需手動匯出和重新命名十幾個檔案。

從現有 APK 中提取圖標

有時需求是相反的。也許您繼承了一個沒有原始設計文件的項目,或者您想在設計自己的圖標之前準確了解競爭對手如何構建其圖標,或者您只需從構建的 APK 中取出圖標以在相關工具或營銷資產中重用它。由於 APK 實際上是包含應用程式所有資源的結構化存檔,因此其啟動器圖示檔案實際上存在於其中,並且可以直接提取,而不是從頭開始重建。

我們的 圖示擷取器 從您上傳的任何 APK 中準確提取這些文件,為您提供原始開發人員提供的任何分辨率的原始圖標資源,這通常是恢復丟失的源文件或研究其他應用程式如何解決相同設計問題的最快方法。

在審核中標記的常見圖示錯誤

在發貨前測試您的圖標的形狀

在最終確定圖標之前,值得至少在圓形蒙版和方圓蒙版下並排預覽它,而不是假設它會乾淨地翻譯。正是出於這個原因,Android Studio 的 Image Asset Studio 包含了跨多個啟動器形狀的即時預覽,並且只需要一分鐘就能捕獲只有在發布後才會出現的問題,當使用「錯誤」啟動器形狀的用戶報告某些內容看起來不正常時。

重點

  • 自適應圖示在 108dp 畫布上使用兩個圖層:背景和前景,系統將每個啟動器屏蔽為不同的形狀。
  • 僅保證內部 66dp 安全區域在每個面罩形狀上都可見;在裡面保留有意義的藝術品。
  • 對於 Android 7.1 或更早版本的設備,您仍然需要一個扁平的舊版圖示。
  • 生成器可以從一個主圖像生成每種所需的密度和 Play 商店列表大小,從而節省大量的手動導出工作。
  • 當來源檔案遺失或您需要研究其他應用程式的資源時,可以直接從現有 APK 中提取圖示。

常見問題解答 (FAQ)

Play 商店清單圖示所需的實際像素大小是多少?

512x512 像素,帶有 Alpha 通道的 32 位元 PNG。這與 APK 本身捆綁的啟動器圖示大小是分開的。

我的自適應圖示的背景圖層是否需要為純色?

不一定是平面顏色,但它通常應該是不透明且簡單的,因為它可以以您無法完全控制的方式移動、縮放或遮蓋。繁忙或透明的背景往往在啟動器之間看起來不一致。

我可以直接在 iOS 上重複使用 Android 自適應圖示設計嗎?

不直接。 iOS 使用單一平面方形影像,並由系統套用圓角,而不是單獨的圖層,因此您通常會為 iOS 匯出相同圖稿的簡化平面版本。

為什麼我的圖示在手機上看起來很好,但在 Play 商店清單中卻很模糊?

當清單圖示從小來源影像放大時通常會發生這種情況。始終從至少 1024x1024 像素的主檔案開始,然後匯出每個所需的尺寸。

如果我跳過舊版 Android 版本的舊圖示回退,會發生什麼事?

Android 7.1 或更早版本的裝置不支援自適應圖標,可能會回退到通用系統圖標或無法正確呈現圖標。只有當您的應用程式支援的最低 Android 版本為 8.0 或更高版本時,才可以安全地跳過。

你不需要任何設計理論的背景,只需要意識到你的圖標將在它離開你的手時以你無法控制的方式被重塑。為安全區進行設計,保留遺留後備,從乾淨的主檔案產生每個所需的尺寸,並且無論您的圖示位於哪個啟動器上,它都將保持不變。

由 Shaefale 女士設計並記錄 首席開發人員和 Android 套件架構師 • 在 Android 12–15 上經過驗證

Mst Shaefale 在 xapktoapk.com 維護用戶端 XAPK/APKS 合併、二進位清單解析器和 APK v1+v2 簽章工具。發現過時的命令或作業系統變更?發送編輯說明。