編注：少數(shù)派 x Allbirds 特惠活動將于今天結束，如果你還不知道這個「超舒服」的鞋子，可以 點擊此處 了解更多。

在 Android 12 中，Google 通過 Material You 為 Android 引入了一套基于壁紙取色的動態(tài)主題系統(tǒng)。我們只需更換一張喜歡的壁紙，系統(tǒng)界面和第三方應用便會根據(jù)選定的壁紙換上色彩風格一致的主題，不僅讓用戶的個性化定制需求進一步得到了滿足，也讓 Android 系統(tǒng)有了更加和諧、統(tǒng)一的視覺觀感。

在此前的版本中，基于壁紙取色的主題變化可以影響大部分系統(tǒng)界面：從鎖屏到系統(tǒng)設置，從通知中心背景到快速設置面板開關，從小組件到非系統(tǒng)應用的工具欄……唯有桌面圖標不在覆蓋范圍之內。

Android 12 中僅 Google 自家應用支持帶主題的應用圖標

但「讓桌面圖標也能跟隨壁紙變換主題風格」是一件很酷的事，此前 Google 在 Android 12 中為自家應用保留的帶主題的應用圖標（themed icons，以下簡稱「主題圖標」）特性，在 Android 13 中終于成為了一項主打功能。

▍形狀、秩序與風格

Google 對 Android 桌面圖標的設計，經(jīng)歷了從不規(guī)則到規(guī)則、從強調個性化辨識度到強調整體視覺一致性的過程，這個過程中的「分水嶺」，便是 Android 8.0 中自適應圖標（adaptive icons）特性的引入。

關于異形圖標和規(guī)則圖標之爭，負責 Android 開發(fā)者關系同時也是 Google UI 與 JetpackCompose 工程師的 Nick Butcher，當時曾用自己開發(fā)的 Plaid 應用進行了舉例：

理想（左）與現(xiàn)實（右）：大家都獨特，放在一起就大家都不獨特

理想情況下，異形圖標能夠讓應用圖標更具辨識度，和其它應用一起放在 Android 的應用抽屜和主屏上時自然也更好找。但當屏幕上所有的圖標都是形狀、大小各異的圖標時，用戶的注意力反而更容易被特定圖標的形狀和設計細節(jié)所分散。

不同形狀的自適應圖標裁切示意 | 圖：Google

相比之下，自適應圖標通過保留圖標主體、然后用全局遮罩來裁切圖標形狀的方法，一定程度上保留了應用圖標的個性化特質，又讓應用抽屜和主屏的整體觀感更加和諧。不同廠商也能根據(jù)自己的實際需求，選擇不同形狀的遮罩來獲得滿足自身品牌設計需要的、形狀也更加統(tǒng)一的圖標樣式。

而如果說 Android 8.1 引入的自適應圖標決定了 Android 應用的圖標形狀，那 Android 13 的主題圖標所決定的就是 Android 應用的圖標風格。

在 Android 13 中，滿足以下條件即可體驗到主題圖標特性：

系統(tǒng)開啟了主題圖標功能

應用本身適配了主題圖標

啟動器支持展示主題圖標

以搭載 Android 13 Beta 的 Google Pixel 為例，只需在 Pixel 啟動器桌面上的空白位置長按，然后在「壁紙和樣式」設置中即可找到并啟用「帶主題的圖標」

如果將 Android 13 的 Material You 動態(tài)取色彩蛋小組件添加到桌面，你會發(fā)現(xiàn)主題圖標在深色主題關閉時默認提取 A1-100 的色值作為圖標背景、N2-700 的色值作為單色圖標主體的顏色。其中圖標背景的色值和 Android 13 鎖屏時間、快速設置面板開關等界面元素選取的色值是一致的。

主題圖標的色彩選擇參考

而同樣一張壁紙在默認取色風格下，深色主題開啟后主題圖標則會將上面圖標主體和圖標背景的色值選擇反過來，以 A1-100 的色值為圖標主體顏色，同時選用更暗的 N1-800 作為圖標背景。

如此一來，一套能夠根據(jù)壁紙變化自動套用相近色彩方案、同時在系統(tǒng)深色主題開啟、關閉狀態(tài)下都能用的主題圖標便誕生了。

主題圖標開啟以及在深色主題下的效果 | 圖：Google

▍主題圖標如何生成

從 Android 13 開始，Google 開始向開發(fā)者正式提供主題圖標的適配方法。目前已經(jīng)公布的開發(fā)和適配文檔則表明，主題圖標與自適應圖標還有著遠超設計風格上的關聯(lián)。

主題圖標主要通過在圖標主體和圖標背景上套用不同的 Material You 動態(tài)色彩來實現(xiàn)主題效果。這種將圖標一分為二，前景、背景分開處理的方法，與自適應圖標的適配方法幾乎一致；設計規(guī)范方面，主題圖標也直接沿用了自適應圖標的大小規(guī)格，比如主題圖標的容器區(qū)域尺寸對應自適應圖標的背景圖層，主題圖標的徽標區(qū)域則對應自適應圖標中未被遮罩掩蓋的圖標內容區(qū)域。

容器區(qū)域 ( 1 ) 尺寸為 108x108dp，徽標區(qū)域 ( 2 ) 建議尺寸為 44x44 dp，最大尺寸為 72x72 dp | 圖：Google

因為規(guī)格要求相近，同時為了保證在主題圖標功能關閉和開啟狀態(tài)下都能向用戶提供一致的辨識度，目前很多開發(fā)者都選擇像 Google 那樣直接使用現(xiàn)有的自適應圖標素材生成 SVG 單色應用圖標。適配時，只需同時提供自適應圖標和單色應用圖標，然后通過清單中的 <adaptive-icon> 元素指向單色應用圖標即可。

當然了，應用圖標的設計千奇百怪，我們所遇見的應用也不可能都像 Google 應用那樣簡潔甚至抽象。遇到元素復雜、風格獨特的應用圖標，直接從原有自適應圖標資源生成單色應用圖標的做法也可能會帶來很多問題：

未經(jīng)處理的長投影風格圖標 | 圖：Yahor Urbanovich

因此 Google 一方面建議開發(fā)者使用平面、2D 風格的圖標設計，另一方面也提供了在主題圖標中重現(xiàn) 3D 和層級效果的途徑：Alpha 漸變。這里的思路又與 Google 深色主題的設計異曲同工，通過透明度的差異，單色圖標也可以像深色主題下的界面元素那樣擁有明暗，明暗關系的存在則可以進一步反應層級。

Material Design 通過亮度來表現(xiàn)深色主題下的 UI 層級 | 圖：Google

這里開發(fā)者 Yahor Urbanovich 舉的例子更能幫我們理解主題圖標如何處理陰影和層級：以 Microsoft Teams 的圖標為例，這個圖標的畫面元素和層級都非常復雜，如果采用借自適應圖標資源直接生成主題圖標的方法，最終效果會非常糟糕；

Microsoft Teams 的圖標

「偷懶」式適配效果 | 圖：Yahor Urbanovich

遇到這種情況，開發(fā)者只需通過適當添加不同 Alpha 透明度的方式，就能讓圖標中的各個元素層級在主題圖標中重新得到顯現(xiàn)。

添加透明度后的生成效果

▍小結：問題與體驗

Android 13 正式版推送在即，主題圖標作為其主要功能之一，屆時應該也會登陸除 Google Pixel 外的其它 Android 設備，比如三星 One UI 5.0。不過客觀來講，能夠體驗到這個功能的 Android 用戶，最后可能并不會太多。

主題圖標很大程度上依賴于自適應圖標，二者作為設計規(guī)范都為設備廠商提供了足夠的定制空間，但 Google 卻從未將它們作為強制規(guī)范進行落實——自適應圖標在 5 個大版本更新后的今天都尚未成為 Android 生態(tài)內的「默認標準」，主題圖標作為在此基礎上的風格延展，依然也需要開發(fā)者主動響應號召才能向前推進。

這也就是我們在標題里說的，Google 從自適應圖標開始就想組建一套廣泛適用的規(guī)則圖標包，主題圖標的推出又為這套圖標包帶來了千人千面的色彩風格。但這個圖標包究竟能夠覆蓋多少應用，還是取決于有多少感興趣的開發(fā)者愿意參與「眾籌」。

從最新的 Android 13 Beta 測試版體驗來看，適配主題圖標的中、小等體量應用顯然會更多一點。從我自己的使用和收集來看，目前已經(jīng)有接近 30 款非 Google 系應用進行了適配，其中有用上面提到的透明度來還原圖標元素層級關系的（比如 Skit），也有自適應圖標和主題圖標采用兩套視覺方案的（比如 Battery Guru）。

Android 13 開啟主題圖標的主屏效果

但總體而言，已經(jīng)適配這一特性的、為數(shù)不多的應用中，像 Google 那樣巧妙搭配色彩填充動畫實現(xiàn)完美「桌面圖標 > 開屏動畫 > 應用界面」轉換效果的不多。

主題圖標、開屏動畫其實也是可以相互銜接的

我也創(chuàng)建了一份《已適配主題圖標的應用清單》（鏈接見文末），如果你感興趣，歡迎下載安裝清單中提到的應用進行看看效果。如果清單內容仍有遺漏，歡迎在文檔評論區(qū)進行補充；如果你沒有 Pixel 設備但也想測試、體驗主題圖標特性，不妨閱讀我們此前介紹過的 DSU Loader。