配合平台調整的應用程式圖示。
什麼是可遮蓋的圖示?
如果您已在近期 Android 手機上安裝漸進式網頁應用程式,可能會注意到圖示以白色背景顯示。Android Oreo 推出了自動調整圖示,可在各種裝置型號上以各種形狀顯示應用程式圖示。未遵循此新格式的圖示將被指定為白色背景。
可遮蓋的圖示是一種新的圖示格式,可讓您進一步控管,並可讓漸進式網頁應用程式使用自動調整圖示。如果您提供可遮蓋的圖示,圖示就能填滿整個形狀,以便在所有 Android 裝置上順利運作。Firefox 和 Chrome 最近新增支援這個新格式,您可以在應用程式中採用此格式。
我目前的圖示是否正確?
由於可遮蓋的圖示需要支援各種形狀,因此您提供不透明圖片,但要加上一些邊框間距,瀏覽器可將其裁剪為所需的形狀和大小。建議您不要依賴任何特定形狀,因為最終形狀會因瀏覽器和平台而異。
幸好,所有平台都會遵循明確定義及標準化的「最低安全區域」。圖示的重要部分 (例如標誌) 應位於圖示中央的圓形區域內,且半徑應與圖示寬度的 40% 相同。外側的 10% 邊緣可能會遭到裁剪。
您可以使用 Chrome 開發人員工具,查看圖示的哪些部分到達安全區域。開啟漸進式網頁應用程式,啟動開發人員工具並前往「Application」面板。在「圖示」部分中,您可以選擇「僅顯示可遮蓋圖示的最小安全區域」。系統將剪輯圖示,只顯示安全區域。如果您的標誌會出現在安全區域,就不用擔心。
如要透過各種 Android 形狀測試可遮蓋的圖示,請使用 Tiger 建立的 Maskable.app 工具。開啟圖示後,Maskable.app 即可試用各種形狀和大小,您也可以與團隊成員分享預覽畫面。
如何採用可遮蓋的圖示?
如要根據現有圖示建立可遮蓋的圖示,可以使用 Maskable.app Editor。上傳圖示並調整顏色和大小,然後匯出圖片。
建立可遮蓋的圖示,並在開發人員工具中進行測試後,您需要更新網頁應用程式資訊清單,使其指向新資產。網頁應用程式資訊清單會以 JSON 檔案提供網頁應用程式相關資訊,並包含 icons
陣列。
加入可遮蓋的圖示時,purpose
欄位會指示瀏覽器如何使用圖示。根據預設,圖示的用途為 "any"
。系統會在 Android 的白色背景上調整這些圖示的大小。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
可遮蓋的圖示應使用不同的 purpose
值:"maskable"
。這表示圖片是用來與圖示遮罩搭配使用,讓您進一步控管結果。這樣一來,您的圖示就不會採用白色背景。您也可以指定多個以空格分隔的用途 (例如 "any maskable"
),以便在不加上遮罩的其他裝置中使用可遮蓋的圖示。
透過這樣,您就可以自行製作可遮蓋的圖示,確保應用程式採用無邊框設計 (還有什麼價值、圓形轉圓、橢圓曲線 💡? 值得注意)。
特別銘謝
本文是由 Joe Medley 審查過的。