在 Android 12 中，Google 通過 Material You 為 Android 引入了一套基於壁紙取色的動態主題系統。我們只需更換一張喜歡的壁紙，系統介面和第三方應用便會根據選定的壁紙換上色彩風格一致的主題，不僅讓用戶的個性化定製需求進一步得到了滿足，也讓 Android 系統有了更加和諧、統一的視覺觀感。
在此前的版本中，基於壁紙取色的主題變化可以影響大部分系統介面：從鎖屏到系統設置，從通知中心背景到快速設置面板開關，從小組件到非系統應用的工具欄……唯有桌面圖標不在覆蓋範圍之內。
Android 12 中僅 Google 自家應用支持帶主題的應用圖標
但「讓桌面圖標也能跟隨壁紙變換主題風格」是一件很酷的事，此前 Google 在 Android 12 中為自家應用保留的帶主題的應用圖標（themed icons，以下簡稱「主題圖標」）特性，在 Android 13 中終於成為了一項主打功能。
▍形狀、秩序與風格
Google 對 Android 桌面圖標的設計，經歷了從不規則到規則、從強調個性化辨識度到強調整體視覺一致性的過程，這個過程中的「分水嶺」，便是 Android 8.0 中自適應圖標（adaptive icons）特性的引入。
關於異形圖標和規則圖標之爭，負責 Android 開發者關係同時也是 Google UI 與 JetpackCompose 工程師的 Nick Butcher，當時曾用自己開發的 Plaid 應用進行了舉例：
理想（左）與現實（右）：大家都獨特，放在一起就大家都不獨特
理想情況下，異形圖標能夠讓應用圖標更具辨識度，和其它應用一起放在 Android 的應用抽屜和主屏上時自然也更好找。但當螢幕上所有的圖標都是形狀、大小各異的圖標時，用戶的注意力反而更容易被特定圖標的形狀和設計細節所分散。
不同形狀的自適應圖標裁切示意 | 圖：Google
相比之下，自適應圖標通過保留圖標主體、然後用全局遮罩來裁切圖標形狀的方法，一定程度上保留了應用圖標的個性化特質，又讓應用抽屜和主屏的整體觀感更加和諧。不同廠商也能根據自己的實際需求，選擇不同形狀的遮罩來獲得滿足自身品牌設計需要的、形狀也更加統一的圖標樣式。
而如果說 Android 8.1 引入的自適應圖標決定了 Android 應用的圖標形狀，那 Android 13 的主題圖標所決定的就是 Android 應用的圖標風格。
在 Android 13 中，滿足以下條件即可體驗到主題圖標特性：
系統開啟了主題圖標功能
應用本身適配了主題圖標
如果將 Android 13 的 Material You 動態取色彩蛋小組件添加到桌面，你會發現主題圖標在深色主題關閉時默認提取 A1-100 的色值作為圖標背景、N2-700 的色值作為單色圖標主體的顏色。其中圖標背景的色值和 Android 13 鎖屏時間、快速設置面板開關等介面元素選取的色值是一致的。
主題圖標的色彩選擇參考
而同樣一張壁紙在默認取色風格下，深色主題開啟後主題圖標則會將上面圖標主體和圖標背景的色值選擇反過來，以 A1-100 的色值為圖標主體顏色，同時選用更暗的 N1-800 作為圖標背景。
如此一來，一套能夠根據壁紙變化自動套用相近色彩方案、同時在系統深色主題開啟、關閉狀態下都能用的主題圖標便誕生了。
主題圖標開啟以及在深色主題下的效果 | 圖：Google
▍主題圖標如何生成
從 Android 13 開始，Google 開始向開發者正式提供主題圖標的適配方法。目前已經公布的開發和適配文檔則表明，主題圖標與自適應圖標還有著遠超設計風格上的關聯。
主題圖標主要通過在圖標主體和圖標背景上套用不同的 Material You 動態色彩來實現主題效果。這種將圖標一分為二，前景、背景分開處理的方法，與自適應圖標的適配方法幾乎一致；設計規範方面，主題圖標也直接沿用了自適應圖標的大小規格，比如主題圖標的容器區域尺寸對應自適應圖標的背景圖層，主題圖標的徽標區域則對應自適應圖標中未被遮罩掩蓋的圖標內容區域。
容器區域 (1) 尺寸為 108x108dp，徽標區域 (2) 建議尺寸為 44x44 dp，最大尺寸為 72x72 dp | 圖：Google
因為規格要求相近，同時為了保證在主題圖標功能關閉和開啟狀態下都能向用戶提供一致的辨識度，目前很多開發者都選擇像 Google 那樣直接使用現有的自適應圖標素材生成 SVG 單色應用圖標。適配時，只需同時提供自適應圖標和單色應用圖標，然後通過清單中的
當然了，應用圖標的設計千奇百怪，我們所遇見的應用也不可能都像 Google 應用那樣簡潔甚至抽象。遇到元素複雜、風格獨特的應用圖標，直接從原有自適應圖標資源生成單色應用圖標的做法也可能會帶來很多問題：
未經處理的長投影風格圖標 | 圖：Yahor Urbanovich
因此 Google 一方面建議開發者使用平面、2D 風格的圖標設計，另一方面也提供了在主題圖標中重現 3D 和層級效果的途徑：Alpha 漸變。這裡的思路又與 Google 深色主題的設計異曲同工，通過透明度的差異，單色圖標也可以像深色主題下的介面元素那樣擁有明暗，明暗關係的存在則可以進一步反應層級。
Material Design 通過亮度來表現深色主題下的 UI 層級 | 圖：Google
這裡開發者 Yahor Urbanovich舉的例子更能幫我們理解主題圖標如何處理陰影和層級：以 Microsoft Teams 的圖標為例，這個圖標的畫面元素和層級都非常複雜，如果採用借自適應圖標資源直接生成主題圖標的方法，最終效果會非常糟糕；
Microsoft Teams 的圖標
「偷懶」式適配效果 | 圖：Yahor Urbanovich
遇到這種情況，開發者只需通過適當添加不同 Alpha 透明度的方式，就能讓圖標中的各個元素層級在主題圖標中重新得到顯現。
添加透明度後的生成效果
▍小結：問題與體驗
Android 13 正式版推送在即，主題圖標作為其主要功能之一，屆時應該也會登陸除 Google Pixel 外的其它 Android 設備，比如三星 One UI 5.0。不過客觀來講，能夠體驗到這個功能的 Android 用戶，最後可能並不會太多。
主題圖標很大程度上依賴於自適應圖標，二者作為設計規範都為設備廠商提供了足夠的定製空間，但 Google 卻從未將它們作為強制規範進行落實——自適應圖標在 5 個大版本更新後的今天都尚未成為 Android 生態內的「默認標準」，主題圖標作為在此基礎上的風格延展，依然也需要開發者主動響應號召才能向前推進。
這也就是我們在標題里說的，Google 從自適應圖標開始就想組建一套廣泛適用的規則圖標包，主題圖標的推出又為這套圖標包帶來了千人千面的色彩風格。但這個圖標包究竟能夠覆蓋多少應用，還是取決於有多少感興趣的開發者願意參與「眾籌」。
從最新的 Android 13 Beta 測試版體驗來看，適配主題圖標的中、小等體量應用顯然會更多一點。從我自己的使用和收集來看，目前已經有接近 30 款非 Google 系應用進行了適配，其中有用上面提到的透明度來還原圖標元素層級關係的（比如 Skit），也有自適應圖標和主題圖標採用兩套視覺方案的（比如 Battery Guru）。
Android 13 開啟主題圖標的主屏效果
但總體而言，已經適配這一特性的、為數不多的應用中，像 Google 那樣巧妙搭配色彩填充動畫實現完美「桌面圖標 > 開屏動畫 > 應用介面」轉換效果的不多。
主題圖標、開屏動畫其實也是可以相互銜接的
我也創建了一份《已適配主題圖標的應用清單》（連結見文末），如果你感興趣，歡迎下載安裝清單中提到的應用進行看看效果。如果清單內容仍有遺漏，歡迎在文檔評論區進行補充；如果你沒有 Pixel 設備但也想測試、體驗主題圖標特性，不妨閱讀我們此前介紹過的 DSU Loader 。
應用清單：
https://sspaime.feishu.cn/docx/doxcnLT9yF6BsSP979vwnx6Fd4e
原文連結：
https://sspai.com/post/73603?utm_source=wechat&utm_medium=social
作者：克萊德
責編：他自己
/ 更多熱門文章 /