如果說要羅列出 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 動态顔色,視桌面擺放位置的不同,小部件标題欄的顔色也會動态改變。總體來說日曆應用算是将新設計诠釋得比較到位的适配案例之一。
ChromeChrome 在功能和設計上一直以來都可以說是保守而謹慎,在升級到 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 AndroidSleep as Android 是一款比較老牌的睡眠追蹤應用,在版本号為 20210910 的測試版中,Sleep as Android 正式适配了 Material You 的動态顔色系統,配合主界面内大量使用的圓角矩形卡片、擴展式懸浮操作按鈕以及條理清晰、層次分明的界面與設置項目,我們在 Sleep as Android 完全看不到任何「老牌」的味道。撲面而來的都是新設計的香氣。
Tasker
同樣老牌的 Tasker 近年來在 Android 新特性适配這件事情上也非常積極。最新版 Tasker 依然保留着大量「牛軋糖」時代的味道,但主界面配色方案卻跟進了 Material You。
唯一要吐槽的是 Tasker 在動态顔色選取上似乎有些跳脫,同樣一張壁紙,Sleep as Android 采用配色方案明顯要比 Takser 好看得多。這其實也反映出了一個問題:Material You 提取到的色彩隻是第一步,能否合理使用這些提取到的顔色來為應用顔值加分,還得看應用開發者的實際理解。
DarQDarQ 是一款借助 root 權限、為不支持深色主題的應用(比如 Handshaker )強行開啟深色界面的小工具。 在 6 月末的 2.0 版本 中,DarQ 就已經加入了對 Material You 色彩系統的支持,經過 7 月初 2.1 版本的小修小補之後,目前它在 Android 12 上的使用體驗已經相當完善。
值得一提的是 DarQ 作為一款工具應用,在應用設置的設計上也盡量向 Android 12 的系統設置看齊,頂部标題欄采用了大面積的留白、功能總開關也與系統設置的新樣式保持一緻,最大程度消弭了第三方工具與系統設置在視覺上的差異。
InwareInware 是一款類似 AIDA64 的系統信息檢測工具,與 AIDA64 繁冗的設計相比, Inware 的 UI 更加現代一些,用一部分信息量的犧牲換取了更好的易讀性。
在最新的 Inware 測試版中,進入主界面右上角的軟件設置,在外觀菜單中便可以找到一個名為 Use system colors 的開關,将它打開之後就可以讓 Inware 的配色方案與系統壁紙匹配。
質感文件
與前文提到的文件極客不同,來自第三方開發者的質感文件一直以來都維持着标準化的 Material Design 風格設計。因此質感文件也是首批适配了 Material You 動态顔色的第三方應用之一,隻需在應用設置中開啟相關開關,即可解鎖完全不同于預置主題方案的全新配色。
不過質感文件除了色彩方案的适配外目前倒是沒有太多界面元素和控件上的翻新,這裡不妨也期待以下這款小工具的後續更新。
Swift WallsAndroid 平台上的第三方壁紙 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 主題開關之後,我們仍然可以手動對應用内幾乎每一處顔色進行修改。
TodoistGoogle 第一方待辦應用 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 的好應用本文沒有提到?歡迎在評論區留下你的看法。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!