本文原作者: fundroid，原文發布於: AndroidPub
2014 年 Google 發布了 Material Design (簡稱 MD)，成為了 Google 系產品統一的 UI 設計語言。時至今日 MD 已經有了兩次大升級，2018 年發布的 Material Themin(Material Design 2，簡稱 M2)，以及 2021 年新發布的 Material You (Material Design 3，簡稱 M3)。本文就帶大家細數一下 M3 相對於 M2 的升級和變化。M3 最大特色在於對個性化的注重，就如同 "You"的命名一樣。一個集中體現就是動態配色 (Dynamic Color)。支持了 M3 的 (比如搭載 Android 12 的 Pixel 系列手機) 設備，可以根據壁紙顏色動態改變 App 或 Widget 的主題。
通過谷歌提供的工具可以體驗基於壁紙的動態配色效果:https://material-foundation.github.io/material-theme-builder/#/dynamic
動態配色是建立在 ColorScheme 基礎上，系統通過算法從當前壁紙中提取並更新 ColorScheme。我們在應用中通過 duyamicColorScheme 可以觀察到這種變化並自動應用。下面以 Compose-M3 代碼為例:
val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.Sval colorScheme = if (dynamic) { val context = LocalContext.current // 使用 dynamicLightColorScheme 函數創建具有淺色動態值的 ColorScheme 實例 // 或使用 dynamicDarkColorScheme 創建具有深色動態值的實例 // 傳入 Context 以便從 Android 系統獲取動態配色資源 if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)} else { // 使用 lightColorScheme 或者 darkColorScheme}什麼是 ColorScheme 呢？在後面顏色系統的介紹中我們會看到它。隨着各種平板、摺疊屏設備的增多，越來越多的應用需要考慮多種屏幕尺寸下運行的效果，而且能夠動態響應屏幕的尺寸的變化。M3 的一個重要設計原則是 UI 的適應不同屏幕尺寸，給出更合理的布局方式。M3 給了很多跨屏幕設計的細則，例如菜單欄如何擺放，Detail-List 如何同屏顯示，甚至布局切換的過渡動畫等，但是所有這一切的基礎是給出了一套屏幕類型的標準，任何屏幕尺寸都可以分為 Compact/Medium/Expanded。
這樣所有的規範都被歸類為這三種類型，無需根據不同的屏幕具體尺寸單獨定義。以 Compose-M3 的代碼為例，當屏幕尺寸發生變化時觸發布局重組，重組中獲取最新的 windowSizeClass 針對性地做出布局:enum class WindowSizeClass { Compact, Medium, Expanded }@Composablefun MyApp(windowSizeClass: WindowSizeClass) { // Select a navigation element based on window size. when (windowSizeClass) { WindowSizeClass.Compact -> { /* Bottom bar */ } WindowSizeClass.Medium -> { /* Rail */ } WindowSizeClass.Expanded -> { /* Persistent drawer */ } }}MD 有三大規範，顏色 (Color)、形狀 (Shape) 和字體 (Typography)，這些規範落地到代碼中就是 MateriaTheme 中定義的對應常量，供我們在項目中引用。接下來從這三方面看一下 M3 的變化。M3 的顏色系統與 M2 整體思想上保持一致，都使用顏色槽 (ColorRule) 對應用中的顏色場景進行歸類，但是在顏色槽定義上有所調整和追加。M3 中定義了 25 個顏色槽，如下表所示。不少顏色槽繼承自 M2，綠框部分是 M3 新追加的內容。顏色槽表格中，縱向按照使用場景以及重要度進行分類，就像一場表演中有主角和配角，主次分明的作品才更加好看。按照場景可以歸為三類:
AccentColor (強調色): 包括 Primar，Secondary，Tertiary，這些是舞台上的演員，依次是主演、二號和三號演員。我們可以按照 UI 組件的重要度分配這些顏色，Primary 用在那些功能最重要或者面積最大的組件上；NeutralColor (中性色):包括 Background 和 Surface ，它們是舞台中的環境和布景，可以用於組件的背景色以襯托主演的演出；AdditonalColor (補充色):它們是一些專用道具，只在特別場景出現，例如 Error 等。顏色槽表格在橫向上，每一組顏色都由四個色調組成，它們可以在組件內部搭配使用。以 Primary 色槽為例:
Primary & OnPrimary:繼承自 M2。Primary 是本組顏色的基準色，OnPrimary 用於 Primary 之上的內容顯示與之形成對比。如上圖的 1 和 2；PrimaryContainer & OnPrimaryContainer: M3 新增的定義，它們的顏色更淺，從用途上可以用在比 Primary&OnPrimary 重要度更低的組件上，如上圖 3 和 4。看起來與 Secondary 的用途類似，都是依據組件的重要度來選擇，區別在於它們和 Primary 是同一色系，適合與 Primary 組成更大的組件，更加協調。同一組的不同色調取自顏色調色板，如下是 Primary 的調色板，調色板由 13 個顏色組成，數字越大顏色越淺，反之顏色越深。淺色/深色主題也是從調色板中選取的。M3 中使用 ColorScheme 定義一組顏色槽方案，以 Compos-M3 代碼為例:class ColorScheme( primary: Color, onPrimary: Color, /*..省略..*/ )在 Theme 中通過設置 ColorScheme 來設置主題顏色:
import androidx.compose.material3.MaterialTheme @Composablefun MaterialTheme ( colorScheme: ColorScheme, typography: Typography, // 更新 Shape 的功能即將到來 content: @Composable () -> Unit)
形狀方面，首先形狀的分類方式上 M3 與 M2 發生了變化:
M2M3
M2 按照組件本身的尺寸進行分類: Small/Medium/Large，而 M3 是針對組件的圓角的弧度進行分為七類: 從 None 到 Full，每一種組件都具備更多的表達方式，使得 UI 更具表現力。
除了顏色，文字也是 MD 的規範之一。字體定義上，M2 有 6 種標題 (Headline 1~6)，2 種副標題 (Subtitle 1~2)，2 種正文標題(Body 1~2) 以及按鈕、上劃線等樣式字體。M3 相對起來分類更有規則，不再使用數字分類，而是按照 Small/Medium/Large 分類:M2M3
以上，顏色、形狀、文字是 MD 的三大基本規範，系統默認組件通過應用這些規範，形成特有的視覺風格。M3 的 UI 組件視覺上整體呈現兩大特點，一是更加圓潤，二是面積更大，在當下大屏盛行的設備中使得點擊區域更加明顯。接下來盤點一下各種基礎組件的設計上的具體變化。
形狀從圓形變為圓角矩形；
新增了一種 Large(96dp) 的大尺寸 FAB，M2 默認只有 Default(56dp) 和 Mini(40dp) 兩種尺寸；
默認背景色由 Primary 變為Primary Container；
Extended Fab 的高度與 Fab 進行了對齊，視覺更統一，M2 中兩者高度稍有不同。
半圓變為圓角矩形 (好似 M3 和 M2 在組件形狀上進行了圓形<>圓角的互換...)；
功能種類的調整，Actioin 類 Chip 被拆分為 Assist 和 Suggestion 類型；
默認沒有留陰影 (elevation = 0)，M3 的組件通過加深邊框的顏色對比度，取消了不少陰影元素，整體上弱化了擬物風格。
默認取消陰影，當滾動後會增加陰影 (Elevation = 2)；
高度增加，字體變大；
M3 中刪除了 M2 中 Primary Variant 的定義，這原本是用在 StatusBar 中的顏色比 Primay 更深，M2 StatusBar 也是 Primary，打造沉浸化標題欄。
首先名稱發生變化，M2 稱為 Bottom Navigation，M3 統一稱呼 NavigationBar；
取消了陰影，增加了高度；
M2 通過顏色的透明度表示選中狀態，M3 則是添加了 Outline。
增大了 Title 的字體；
增大了 Padding；
圓角弧度更大。
除了上述組件，其他組件的樣式變化不大，大多是取消陰影，增大面積之類，不再贅述。
通過本文介紹，相信大家對 M3 的風格有了深入的了解，雖說國內 Android 應用為了兼顧與iOS 端風格的統一，很少會遵循 MD 的設計規範，但如果您是一個個人開發者，MD 將有助於您開發出更加專業、美觀的產品。"開發者說·DTalk" 面向
中國開發者們徵集 Google 移動應用 (apps & games)相關的產品/技術內容。歡迎大家前來分享您對移動應用的行業洞察或見解、移動開發過程中的心得或新發現、以及應用出海的實戰經驗總結和相關產品的使用反饋等。我們由衷地希望可以給這些出眾的中國開發者們提供更好展現自己、充分發揮自己特長的平台。我們將通過大家的技術內容着重選出優秀案例進行谷歌開發技術專家 (GDE)的推薦。
點擊屏末|閱讀原文|即刻報名參與"開發者說·DTalk"
留言列表