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

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

Android 12 中僅 Google 自家應(yīng)用支持帶主題的應(yīng)用圖標(biāo)

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

▍形狀、秩序與風(fēng)格

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

關(guān)于異形圖標(biāo)和規(guī)則圖標(biāo)之爭(zhēng)，負(fù)責(zé) Android 開發(fā)者關(guān)系同時(shí)也是 Google UI 與 JetpackCompose 工程師的  Nick Butcher，當(dāng)時(shí)曾用自己開發(fā)的 Plaid 應(yīng)用進(jìn)行了舉例：

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

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

不同形狀的自適應(yīng)圖標(biāo)裁切示意 | 圖：Google

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

而如果說(shuō) Android 8.1 引入的自適應(yīng)圖標(biāo)決定了 Android 應(yīng)用的圖標(biāo)形狀，那 Android 13 的主題圖標(biāo)所決定的就是 Android 應(yīng)用的圖標(biāo)風(fēng)格。

在 Android 13 中，滿足以下條件即可體驗(yàn)到主題圖標(biāo)特性：

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

應(yīng)用本身適配了主題圖標(biāo)

啟動(dòng)器支持展示主題圖標(biāo)

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

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

主題圖標(biāo)的色彩選擇參考

而同樣一張壁紙?jiān)谀J(rèn)取色風(fēng)格下，深色主題開啟后主題圖標(biāo)則會(huì)將上面圖標(biāo)主體和圖標(biāo)背景的色值選擇反過(guò)來(lái)，以 A1-100  的色值為圖標(biāo)主體顏色，同時(shí)選用更暗的 N1-800  作為圖標(biāo)背景。

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

主題圖標(biāo)開啟以及在深色主題下的效果 | 圖：Google

▍主題圖標(biāo)如何生成

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

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

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

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

當(dāng)然了，應(yīng)用圖標(biāo)的設(shè)計(jì)千奇百怪，我們所遇見的應(yīng)用也不可能都像 Google 應(yīng)用那樣簡(jiǎn)潔甚至抽象。遇到元素復(fù)雜、風(fēng)格獨(dú)特的應(yīng)用圖標(biāo)，直接從原有自適應(yīng)圖標(biāo)資源生成單色應(yīng)用圖標(biāo)的做法也可能會(huì)帶來(lái)很多問(wèn)題：

未經(jīng)處理的長(zhǎng)投影風(fēng)格圖標(biāo) | 圖：Yahor Urbanovich

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

Material Design 通過(guò)亮度來(lái)表現(xiàn)深色主題下的 UI 層級(jí) | 圖：Google

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

Microsoft Teams 的圖標(biāo)

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

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

添加透明度后的生成效果

▍小結(jié)：?jiǎn)栴}與體驗(yàn)

Android 13 正式版推送在即，主題圖標(biāo)作為其主要功能之一，屆時(shí)應(yīng)該也會(huì)登陸除 Google Pixel 外的其它 Android 設(shè)備，比如三星 One UI 5.0。不過(guò)客觀來(lái)講，能夠體驗(yàn)到這個(gè)功能的 Android 用戶，最后可能并不會(huì)太多。

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

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

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

Android 13 開啟主題圖標(biāo)的主屏效果

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

主題圖標(biāo)、開屏動(dòng)畫其實(shí)也是可以相互銜接的。