如果說要羅列出 Android 12 最令人印象深刻的幾大變化,Google 基於全新設計語言 Material You 為 Google Pixel 打造的這套新 UI 一定是其中之一。在 Pixel 設備所搭載的 Android 12 中,更換一張壁紙就能讓整個系統 UI 煥然一新,從鎖屏時間的字體顏色、啟動器的圖標、搜索框按鈕,到通知中心、快速設置面板開關。甚至連擺在桌面的小部件(widget),都能通過適配 Android 12 的 應用動態顏色,根據在桌面上的擺放位置呈現實時背景色效果。
更重要的是,為了不讓這套以壁紙取色為核心的個性化定製系統僅僅停留在 Android 系統表面,Google 在努力用 Pixel 機型「打樣」的同時,也積極推動着 Material You 在自家應用中的適配。在 Android 12 正式版源碼提交至 AOSP 之際,我們為大家整理了目前(截至 2021 年 10 月 6 日)已經適配了 Material You 設計的 Android 應用。
Google 應用
基礎通訊三件套
雖然是智能手機的「基礎設施」,Google 自家的電話、通訊錄和短訊應用跟進 Material You 的速度卻並不算快,適配程度也可以說是參差不齊。
通訊錄中,搜索框、左側抽屜式導航、右上角視圖過濾菜單、應用設置的標題欄等區域都會採用從桌面壁紙提取到的配色作為點綴,Material Design 標誌性的 懸浮操作按鈕(FAB)在應用動態顏色的同時,形狀也從以往的圓形變成了圓角矩形。
而在撥號應用中,撥號鍵盤收起時右下角的懸浮操作按鈕也用上了同樣風格的圓角矩形按鈕,不同層級懸浮操作按鈕也用不同的動態顏色進行了視覺區分;除了同樣應用於搜索框背景、高亮選中背景、設置界面背景等區域的動態配色外,撥號應用的 底部導航欄 也通過採用不同動態顏色的圖標和背景,營造出了更有層次感的底部導航欄設計。
作為 Google 自家規範適配一直以來的「盲區」1,撥號應用連最為基礎的 邊到邊 適配都沒有,淺色主題下頂部狀態欄和底部導航欄背景始終為白色,視覺效果令人感到不適。但這裡的底部導航欄新樣式,和上面提到的動態顏色、圓角矩形懸浮操作按鈕一起,構成了 Google 自家應用 Material You 的核心風格。
至於信息應用,截至發稿時,Google 僅對應用主界面右下角的懸浮操作按鈕進行了更新,同樣是由圓變方,在信息列表中滾動瀏覽時,懸浮操作按鈕會根據滑動方向在擴展形態和精簡形態間切換;設置項目得到了重新整理,更加清晰明了。但除此之外信息應用的更新就可以說是乏善可陳了,我們甚至看不到半點動態顏色的影子,無論桌面壁紙如何,應用內均採用藍色為默認顏色。
日曆
同樣作為基礎應用的 Google 日曆在 Material You 適配上做得出色得多:從桌面提取到的動態顏色從主界面、設置標題欄,主、次懸浮操作按鈕一直延伸到左側抽屜式導航和設置,日程視圖中的當前日期標記、活動卡片(默認樣式)等控件,也都採用了不同取值的動態顏色進行點綴,看上去和諧又不失變化。
更重要的是,Google 日曆在桌面小組件中也同樣運用了 Material You 動態顏色,視桌面擺放位置的不同,小部件標題欄的顏色也會動態改變。總體來說日曆應用算是將新設計詮釋得比較到位的適配案例之一。
Chrome
Chrome 在功能和設計上一直以來都可以說是保守而謹慎,在升級到 Chrome 94 及以上版本後,使用 Android 12 的用戶應該也看到一些新變化2:主界面的搜索框、地址欄和快速訪問標籤,瀏覽網站時的標題欄,多標籤頁管理界面的標籤頁邊框等界面都通過提取並適配了不同的動態顏色,多標籤頁管理頁面的標籤頁卡片也採用了更加圓潤的圓角設計。
Chrome 94.0.4606.50 開啟上述功能標籤後的效果
除此之外 Chrome 瀏覽器幾乎就沒做太多設計上的適配了,連瀏覽器設置界面都還是老樣子。
計算器
隨 Android 12 Beta 5 搭載的新版計算器正式採用了 Material You 設計風格,這款系統小工具的視覺觀感也因此得到了巨大的提升。
首先是顏色,通過不同的動態顏色取值,計算器不同區域、不同按鍵之間在保留層次感的同時也有了對系統整體色彩風格的呼應,如果你將 Android 12 動態顏色的彩蛋小部件添加到桌面並完全展開,會發現計算器主界面基本都是提取的 N1、N2 和 A1、A2 相近色列,全部清除(AC)這種需要謹慎操作的按鈕則直接取到了 A3 列進行強調。
除了顏色,計算器按鈕由方變圓,計算結果、計算歷史區域也通過柔和的圓角邊緣和相近色取值進行了區分。
時鐘
在 Android 12 Beta 5 中隨計算器一起加入 Material You 套餐的還有時鐘應用。
雖然時鐘應用依然默認採用深色主題且不可更改,但應用內 Material You 適配全面,除了開關、按鈕、底部導航圖標和選中時的強調背景等區域大量提取、運用了動態顏色外,鬧鐘在關閉、激活狀態下的字重變化,圓角卡片以及大色塊圓形按鈕的堆疊,都給人以強烈的視覺新鮮感。
另外時鐘小組件也同步迎來了更新,除了 3 款不同樣式的數字時鐘外,此前在 Android 12 亮相視頻中圈粉無數的多邊形模擬時鐘也包含在內,這些組件放置在桌面時依然可以根據擺放位置的不同動態變換顏色。
文件極客
雖然從設計規則上來說文件極客可以說是 Google 自家應用中「打臉」一般的存在3,但這款應用依然跟隨 Android 12 進行了 Material You 動態顏色的提取和應用,包括主界面的清理操作按鈕、文件瀏覽界面的彈出菜單、底部導航欄的導航圖標和導航圖標選中背景等。
不過整體而言文件極客的 Material You 設計適配依然可以用「破碎」二字來形容,除了對 Material Design 設計規範本身的不尊重,應用內還存在着大量跨越多個世代的「糅合」設計,不管是帶有陰影的圓角矩形卡片、底部導航欄和右側快速索引標籤還是依然採用 Roboto 而不是 Google Sans 字體的文件瀏覽菜單,整體視覺風格都給人一種仍在換皮、依然不得 Material Design 精髓的感覺。
Google 播客
作為 Google 第一方的播客應用,Google 播客也在最近的版本中跟進了 Material You 設計風格,通過大面積應用的動態顏色提升應用與系統界面在視覺觀感上的一致性。同時也用上了標誌性的新式底部導航欄設計。
不過除了動態色彩和新版底部導航欄,Google 播客應用和撥號應用一樣也因為底部導航欄「變色」暴露出了沒有適配邊到邊的問題,純白的導航欄背景看上去具有非常明顯的割裂感。另外作為 Google 的第一方播放器應用,我們也期待 Google 接下來能夠拿出更多 Material You 播放器設計巧思——比如那個出現在 宣傳視頻 中、卻至今沒有任何 app 實裝的波浪形進度條。
Google 相冊
和上面提到的日曆應用類似,Google 相冊也可以說是 Material You 適配得比較到位的 Google 應用之一。
除了大量運用的動態顏色、全新樣式的底部導航標籤外,Google 相冊主界面此前已經大量採用的圓角和卡片設計也為其增色不少,應用中的按鈕、搜索框等控件也通過相近取色而非陰影的方法來體現層級,瀏覽相冊時,時間分隔文本也採用了類似 Android 12 系統設置那樣的大字體標題,兼具視覺效果和分隔效果。
相機、Google Lens
相機應用在 Android 系統中雖然是功能大於設計的存在,但 Material You 的動態顏色依然在其中起到了不俗的點綴效果。
在 Android 12 中,相機取景器底部選中的當前拍攝模式會通過採用動態顏色的標籤背景進行提示,取景器中的變焦按鈕、安全相冊開關以及頂部設置面板也都使用了統一提取到的動態顏色來呈現選中效果。
與相機應用類似的,Google Lens 也已部分採用了 Material You 設計,比如取景框中的取字翻譯提示。但底部功能標籤依然沒有跟進動態顏色適配。
Google Workspace
雖然依然保留了左側導航抽屜,Google Drive 在可以的地方几乎都用上了從桌面壁紙提取到的動態顏色,導航欄、背景、底部彈出菜單、搜索框等不同界面的層級也通過相近色的變化體現了出來,新版底部導航欄設計和支持動態顏色的桌面小部件自然也沒有缺席。
Google Workspace 套件中的其它應用,如 Gmail、文檔、表格、幻燈片等,也擁有了較為完整的 Material You 適配,大面積應用的動態顏色、圓角矩形樣式的懸浮操作按鈕一個不少,Gmail 同時還擁有全新的「四葉草」式動態色彩小部件。
有意思的是 Gmail 應該也是目前唯一一款對 Material You 底部導航欄設計有着不同想法的 Google 應用。如果你在設置中開啟了聊天室、Chat 等底部導航標籤頁面,就會發現 Gmail 的底部導航欄高度相比其它 Google 應用要更矮一點。顯然 Gmail 團隊認為新版底部導航欄雖然觀感上視覺一新了,但屏幕利用率還可以再稍微提高一點。
Keep 筆記
Keep 筆記對 Material You 的適配主要集中在配色和小部件上。
應用內部,搜索框、底部操作欄和底部操作欄上的懸浮操作按鈕都換上了新樣式和動態顏色,主界面背景和筆記卡片上的標籤,則以更淺或更深的相近取色來突出層級,美中不足的是底部操作欄上的圓角矩形懸浮操作按鈕採用了陰影而非不同取色的方法來進行強調。
Google Keep 也提供了新版「四葉草」小部件,可根據擺放位置自動變換顏色。
Gboard
越是明顯的地方似乎就越容易被忽略,一開始我們甚至忘了將 Gboard 加進這篇文章的提綱里。
在 Android 12 中,Gboard 提供了新的動態顏色主題方案,開啟後鍵盤背景、按鍵都會採用從壁紙提取到的顏色進行點綴。
Gboard 雖小,卻最能體現 Material You 的核心設計理念:根據功能和場景靈活運用不同的幾何形狀、用色彩對關鍵操作和按鍵區域進行強調、用色差體現層級同時盡量避免使用陰影……它應該也算是 Google 應用 Material You 設計的優秀代表之一了。
第三方應用
Sleep as Android
Sleep as Android 是一款比較老牌的睡眠追蹤應用,在版本號為 20210910 的測試版中,Sleep as Android 正式適配了 Material You 的動態顏色系統,配合主界面內大量使用的圓角矩形卡片、擴展式懸浮操作按鈕以及條理清晰、層次分明的界面與設置項目,我們在 Sleep as Android 完全看不到任何「老牌」的味道。撲面而來的都是新設計的香氣。
Tasker
同樣老牌的 Tasker 近年來在 Android 新特性適配這件事情上也非常積極。最新版 Tasker 依然保留着大量「牛軋糖」時代的味道,但主界面配色方案卻跟進了 Material You。
唯一要吐槽的是 Tasker 在動態顏色選取上似乎有些跳脫,同樣一張壁紙,Sleep as Android 採用配色方案明顯要比 Takser 好看得多。這其實也反映出了一個問題:Material You 提取到的色彩只是第一步,能否合理使用這些提取到的顏色來為應用顏值加分,還得看應用開發者的實際理解。
DarQ
DarQ 是一款藉助 root 權限、為不支持深色主題的應用(比如 Handshaker )強行開啟深色界面的小工具。 在 6 月末的 2.0 版本 中,DarQ 就已經加入了對 Material You 色彩系統的支持,經過 7 月初 2.1 版本的小修小補之後,目前它在 Android 12 上的使用體驗已經相當完善。
值得一提的是 DarQ 作為一款工具應用,在應用設置的設計上也盡量向 Android 12 的系統設置看齊,頂部標題欄採用了大面積的留白、功能總開關也與系統設置的新樣式保持一致,最大程度消弭了第三方工具與系統設置在視覺上的差異。
Inware
Inware 是一款類似 AIDA64 的系統信息檢測工具,與 AIDA64 繁冗的設計相比, Inware 的 UI 更加現代一些,用一部分信息量的犧牲換取了更好的易讀性。
在最新的 Inware 測試版中,進入主界面右上角的軟件設置,在外觀菜單中便可以找到一個名為 Use system colors 的開關,將它打開之後就可以讓 Inware 的配色方案與系統壁紙匹配。
質感文件
與前文提到的文件極客不同,來自第三方開發者的質感文件一直以來都維持着標準化的 Material Design 風格設計。因此質感文件也是首批適配了 Material You 動態顏色的第三方應用之一,只需在應用設置中開啟相關開關,即可解鎖完全不同於預置主題方案的全新配色。
不過質感文件除了色彩方案的適配外目前倒是沒有太多界面元素和控件上的翻新,這裡不妨也期待以下這款小工具的後續更新。
Swift Walls
Android 平台上的第三方壁紙 app 不勝枚舉,但像 Swift Walls 這種同時對壁紙瀏覽、設置和編輯體驗都同樣重視的壁紙應用並不算多。Swift Walls 在最新版本中不僅適配了 Material You 的動態顏色,還大量採用了符合 Material Design 設計規範的界面控件,應用設置也向 Android 12 系統設置的整體風格看齊,視覺觀感和使用體驗都很不錯。
Infinity for Reddit
與 Twitter 和微博類似,社交網站 Reddit 同樣通過開放相關接口的方式,為樣式繁多的第三方客戶端提供了展示技術和審美的機會。這其中就包括 Infinity for Reddit(下稱 Infinity)。
相比 Reddit 官方客戶端,Infinity 在沒有對主要功能布局進行改動的基礎上為 app 添加了許多 Material Design 設計的風味——從 Material Design 2 時代風格的底部操作欄與居中懸浮操作按鈕,到 5.0.4 版本中引入的 Material You 動態配色方案。
不過 Infinity 也存在和 Tasker 類似的問題,手動開啟 Material You theme 開關後,它會將系統色表中幾個飽和度比較高的關鍵色用作頂欄、底欄和信息卡片的默認背景色,看上去有些「用力過猛」了。不過 Infinity 本身也為這個問題提供了一套相當成熟的解決方案:在啟用 Material You 主題開關之後,我們仍然可以手動對應用內幾乎每一處顏色進行修改。
Todoist
Google 第一方待辦應用 Google Tasks 在更換新圖標之餘似乎沒有跟進 Material You 的跡象,多次榮登少數派首頁的知名 GTD 應用 Todoist 則趁機彎道超車,在 v8602 版本中為用戶帶來了 Material You 動態顏色支持。
值得肯定的是,Todoist 的動態主題色選項也沒有放進訂閱解鎖區域當中,免費版用戶在安裝最新測試版本後也能進入設置菜單手動打開;不過目前 Todoist 的動態配色方案還沒來得及適配深色主題,也無法跨平台同步到其它設備上。
通知濾盒
通知濾盒也是少數派首頁的「常客」。作為一款系統通知管理軟件,它可以從另外一個角度解決垃圾短訊的問題——既然收到垃圾短訊是很難避免的,那麼不讓它們彈通知出來煩人便也曲線救國實現了「管理」的目標。
在最近更新的通知濾盒 v2.1.1 中,開發者為其接入了 Material You 動態配色方案,甚至應用右下角的懸浮操作按鈕也如 Google 應用一樣改成了圓角矩形樣式。
通知濾盒 - 通知管理 & 攔截工具
Tachiyomi
作為一款免費、開源的 Android 漫畫閱讀器,Tachiyomi 一直以來也是 Material Design 的忠實追隨者,其眾多分支也可以說是百花齊放,體現着不同開發者對於 Tachiyomi 在功能和設計上的不同理解。
目前 Tachiyimi 已經支持了 Material You 動態配色方案,一些優秀分支,比如 TachiyomiJ2K 更是適配了 Android 12 的 SplashScreen API,擁有驚艷的開屏動畫效果。
小結
在 Google Pixel 的體驗中,Material You 僅僅只是 Google 為 Android 12 所設計的視覺和交互體驗的一部分:以 Pixel Launcher 為出發點,Google 應用可以根據桌面壁紙套用不同色彩風格的桌面圖標;從點擊圖標啟動應用到進入應用完成主界面加載這段時間內,系統會調用 SplashScreen API帶來舒適、自然的閃屏動畫效果;進入應用後,基於 Material You 動態色彩的設計則會將壁紙和啟動器中那種熟悉的視覺觀感延續到應用內部。
從桌面圖標到應用內的效果
回顧 Material Design 從發展至今的歷程,可以說今年應該是新設計語言在 Android 平台適配速度最快、覆蓋面最廣的一年。藉由形狀、色彩和動畫都更加活潑多變的 Material You,Google 也將此前宣傳的 Material Theming(藉助 Material Design 打造品牌辨識度)推向了一個新的高度。至少在今年晚些時候正式開源之前,看見類似本文出現的截圖時我們都會馬上反應過來——這是 Material You,這是 Google 為 Pixel 系列機型打造的 Android 12 視覺體驗。
Material Theming | 圖:Google
不過目前我們看到的這套 Material You 適配方案也暴露出了一些問題。
從設計上來說,Material You 在 Google 自家應用中的一些細節依然存在衝突,比如 Android 12 鎖屏 PIN 碼的大色塊圓鈕會在按下時變為圓角矩形,但同樣採用大色塊圓鈕設計的計算器卻沒有採用這種反饋動畫,再比如不同 Google 應用的適配程度依然參差不齊,Gmail 團隊顯然也對 Material You 底欄設計有着不同的看法,在後續更新的版本中對默認的底欄高度進行了微調。
好消息是,雖然這套基於壁紙的取色系統最快也要等到 Android 12.1 才會開源,在此之前 OPPO、三星等廠商也已經跟隨 Android 12 進行了底層適配,但在最近放出的 One UI 4 Beta 版本中,三星已經開始回應 Google 的設計思路了(來源)。
One UI 4 中的 Material You 動態色彩適配 | 圖:XDA
你如何看待 Material You 和現有 Google 應用中的 Material You 設計,還有哪些適配了 Material You 的好應用本文沒有提到?歡迎在評論區留下你的看法。