前言
2014 年 Google 發(fā)布了 Material Design（簡稱MD），成為了 Google 系產(chǎn)品統(tǒng)一的 UI 設(shè)計語言。時至今日 MD 已經(jīng)有了兩次大升級，2018年發(fā)布的 Material Theming （Material Design2，簡稱 M2），以及 2021年新發(fā)布的 Material You （Material Design3，簡稱 M3）。本文就帶大家細數(shù)一下 M3 相對于 M2 的升級和變化。
配色個性化
M3 最大特色在于對個性化的注重，就如同 “You” 的命名一樣。一個集中體現(xiàn)就是動態(tài)配色 (Dynamic Color) 。支持了 M3 的（比如搭載 Android12 的 Pixel 系列手機）設(shè)備，可以根據(jù)壁紙顏色動態(tài)改變 App 或 Widget 的主題。
通過谷歌提供的工具可以體驗基于壁紙的動態(tài)配色效果：https://material-foundation.github.io/material-theme-builder/#/dynamic
動態(tài)配色是建立在 ColorScheme 基礎(chǔ)上，系統(tǒng)通過算法從當前壁紙中提取并更新 ColorScheme。 我們在應用中通過 duyamicColorScheme 可以觀察到這種變化并自動應用。下面以 Compose-M3 代碼為例：
val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
val context = LocalContext.current
// 使用 dynamicLightColorScheme 函數(shù)創(chuàng)建具有淺色動態(tài)值的 ColorScheme 實例
// 或使用 dynamicDarkColorScheme 創(chuàng)建具有深色動態(tài)值的實例
// 傳入 Context 以便從 Android 系統(tǒng)獲取動態(tài)配色資源
if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
} else {
// 使用 lightColorScheme 或者 darkColorScheme
}
什么是 ColorScheme 呢？ 在后面顏色系統(tǒng)的介紹中我們會看到它。
多屏幕尺寸適配
隨著各種平板、折疊屏設(shè)備的增多，越來越多的應用需要考慮多種屏幕尺寸下運行的效果，而且能夠動態(tài)響應屏幕的尺寸的變化。
M3 的一個重要設(shè)計原則是 UI 的適應不同屏幕尺寸，給出更合理的布局方式。M3 給了很多跨屏幕設(shè)計的細則，例如菜單欄如何擺放，Detail-List 如何同屏顯示，甚至布局切換的過渡動畫等，但是所有這一切的基礎(chǔ)是給出了一套屏幕類型的標準，任何屏幕尺寸都可以分為 Compact/Medium/Expanded
這樣所有的規(guī)范都被歸類為這三種類型，無需根據(jù)不同的屏幕具體尺寸單獨定義。以 Compose-M3 的代碼為例，當屏幕尺寸發(fā)生變化時觸發(fā)布局重組，重組中獲取最新的 windowSizeClass 針對性地做出布局：
enum class WindowSizeClass { Compact, Medium, Expanded }
@Composable
fun 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 有三大規(guī)范，顏色（Color）、形狀（Shape）和字體（Typography），這些規(guī)范落地到代碼中就是 MateriaTheme 中定義的對應常量，供我們在項目中引用。接下來從這三方面看一下 M3 的變化。
顏色 Color
M3 的顏色系統(tǒng)與 M2 整體思想上保持一致，都使用顏色槽（ColorRule）對應用中的顏色場景進行歸類，但是在顏色槽定義上有所調(diào)整和追加。M3 中定義了 25 個顏色槽，如下表所示。不少顏色槽繼承自 M2， 綠框部分是 M3 新追加的內(nèi)容。
顏色槽表格中，縱向按照使用場景以及重要度進行分類，就像一場表演中有主角和配角，主次分明的作品才更加好看。按照場景可以歸為三類：
- AccentColor（強調(diào)色）：包括 Primar，Secondary，Tertiary，這些是舞臺上的演員，依次是主演、二號和三號演員。我們可以按照 UI 組件的重要度分配這些顏色，Primary 用在那些功能最重要或者面積最大的組件上。
- NeutralColor（中性色）：包括 Background 和 Surface ，它們是舞臺中的環(huán)境和布景，可以用于組件的背景色以襯托主演的演出。
- AdditonalColor（補充色）：它們是一些專用道具，只在特別場景出現(xiàn)，例如 Error 等。
顏色槽表格在橫向上，每一組顏色都由四個色調(diào)組成，它們可以在組件內(nèi)部搭配使用。
以 Primary 色槽為例:
- Primary & OnPrimary：繼承自 M2。Primary 是本組顏色的基準色，OnPrimary 用于 Primary 之上的內(nèi)容顯示與之形成對比。如上圖的 1 和 2
- PrimaryContainer & OnPrimaryContainer： M3 新增的定義，它們的顏色更淺，從用途上可以用在比 Primary&OnPrimary 重要度更低的組件上，如上圖 3 和 4。看起來與 Secondary 的用途類似，都是依據(jù)組件的重要度來選擇，區(qū)別在于它們和 Primary 是同一色系，適合與 Primary 組成更大的組件，更加協(xié)調(diào)。
同一組的不同色調(diào)取自顏色調(diào)色板，如下是 Primary 的調(diào)色板，調(diào)色板由13個顏色組成，數(shù)字越大顏色越淺，反之顏色越深。淺色/深色主題也是從調(diào)色板中選取的
M3 中使用 ColorScheme 定義一組顏色槽方案，比如 Compose-M3 中一個 ColorScheme 的定義如下
class ColorScheme(
primary: Color,
onPrimary: Color,
/*..省略..*/
)
在 Theme 中通過設(shè)置 ColorScheme 來設(shè)置主題顏色
import androidx.compose.material3.MaterialTheme
@Composablefun MaterialTheme (
colorScheme: ColorScheme,
typography: Typography,
// 更新 Shape 的功能即將到來
content: @Composable () -> Unit
)
形狀 Shape
形狀方面，首先形狀的分類方式上 M3 與 M2 發(fā)生了變化
| M2 | M3 |
|---|---|
 |
 |
M2 按照組件本身的尺寸進行分類: Small/Medium/Large，而 M3 是針對組件的圓角的弧度進行分為七類：從 None 到 Full ，每一種組件都具備更多的表達方式，使得 UI 更具表現(xiàn)力。
文字 Typography
除了顏色，文字也是 MD 的規(guī)范之一。字體定義上，M2 有6種標題（Headline 16），2種副標題（Subtitle12），2種正文標題（Body1~2）一起按鈕、上劃線等樣式字體。M3 相對起來分類更有規(guī)則，不再使用數(shù)字分類，而是按照 Small/Medium/Large 分類
| M2 | M3 |
|---|---|
 |
 |
以上，顏色、形狀、文字是 MD 的三大基本規(guī)范，系統(tǒng)默認組件通過應用這些規(guī)范，形成特有的視覺風格。M3 的 UI 組件視覺上整體呈現(xiàn)兩大特點，一是更加圓潤，二是面積更大，在當下大屏盛行的設(shè)備中使得點擊區(qū)域更加明顯。接下來盤點一下各種基礎(chǔ)組件的設(shè)計上的具體變化:
FAB 懸浮按鈕
- 形狀從圓形變?yōu)閳A角矩形
- 新增了一種 Large(96dp) 的大尺寸 FAB，M2 默認只有 Default(56dp) 和 Mini(40dp) 兩種尺寸
- 默認背景色由 Primary Color 變?yōu)? Primary Container
- Extended Fab 的高度與 Fab 進行了對齊，視覺更統(tǒng)一，M2 中兩者高度稍有不同，
Button 按鈕
- 基本形狀從圓角矩形變?yōu)榘雸A
- 文字按鈕不再全大寫，而是大小寫敏感
- 增加高度（36dp > 45dp）
Chip 標簽
- 半圓變?yōu)閳A角矩形（ 好似 M3 和 M2 在組件形狀上進行了圓形<>圓角的互換...）
- 功能種類的調(diào)整，Actioin 類 Chip 被拆分為 Assist 和 Suggestion 類型
- 默認沒有留陰影（elevation = 0），M3 的組件通過加深邊框的顏色對比度，取消了不少陰影元素，整體上弱化了擬物風格
TopAppBar 標題欄
- 默認取消陰影，當滾動后會增加陰影（Elevation = 2）
- 高度增加，字體變大
- M3 中刪除了 M2 中 Primary Variant 的定義，這原本是用在 StatusBar 中的顏色比 Primay 更深，M2 StatusBar 也是 Primary ，打造沉浸化標題欄
Switch 開關(guān)
- 面積更大，高度增加
- 取消陰影，擬物轉(zhuǎn)為扁平
- 增加對勾等可識別圖形，對色盲認識更友好
NavigationBar 導航欄
- 首先名稱發(fā)生變化，M2 稱為 Bottom Navigation，M3 統(tǒng)一稱呼 NavigationBar
- 取消了陰影，增加了高度
- M2 通過顏色的透明度表示選中狀態(tài)，M3 則是添加了 Outline
Dialog 對話框
- 增大了 Title 的字體
- 增大了 Padding
- 圓角弧度更大
除了上述組件，其他組件的樣式變化不大，大多是取消陰影，增大面積之類，不再贅述。
最后
通過本文介紹，相信大家對 M3 的風格有了深入的了解，雖說國內(nèi) Android 應用為了兼顧與 iOS 端風格的統(tǒng)一，很少會遵循 MD 的設(shè)計規(guī)范，但如果你是一個個人開發(fā)者，MD 將有助于你開發(fā)出更加專業(yè)、美觀的產(chǎn)品。
