theme: vue-pro

前言

2014 年 Google 釋出了 Material Design（簡稱MD），成為了 Google 系產品統一的 UI 設計語言。時至今日 MD 已經有了兩次大升級，2018年釋出的 Material Theming （Material Design2，簡稱 M2），以及 2021年新發布的 Material You （Material Design3，簡稱 M3）。本文就帶大家細數一下 M3 相對於 M2 的升級和變化。

配色個性化

M3 最大特色在於對個性化的注重，就如同 “You” 的命名一樣。一個集中體現就是動態配色 (Dynamic Color) 。支援了 M3 的（比如搭載 Android12 的 Pixel 系列手機）裝置，可以根據桌布顏色動態改變 App 或 Widget 的主題。

通過谷歌提供的工具可以體驗基於桌布的動態配色效果：http://material-foundation.github.io/material-theme-builder/#/dynamic

動態配色是建立在 ColorScheme 基礎上，系統通過演算法從當前桌布中提取並更新 ColorScheme。我們在應用中通過 duyamicColorScheme 可以觀察到這種變化並自動應用。下面以 Compose-M3 程式碼為例：

kotlin val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.S val colorScheme = if (dynamic) { val context = LocalContext.current // 使用 dynamicLightColorScheme 函式建立具有淺色動態值的 ColorScheme 例項 // 或使用 dynamicDarkColorScheme 建立具有深色動態值的例項 // 傳入 Context 以便從 Android 系統獲取動態配色資源 if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context) } else { // 使用 lightColorScheme 或者 darkColorScheme } 什麼是 ColorScheme 呢？在後面顏色系統的介紹中我們會看到它。

多螢幕尺寸適配

隨著各種平板、摺疊屏裝置的增多，越來越多的應用需要考慮多種螢幕尺寸下執行的效果，而且能夠動態響應螢幕的尺寸的變化。

ezgif.com-gif-maker (27).gif

M3 的一個重要設計原則是 UI 的適應不同螢幕尺寸，給出更合理的佈局方式。M3 給了很多跨螢幕設計的細則，例如選單欄如何擺放，Detail-List 如何同屏顯示，甚至佈局切換的過渡動畫等，但是所有這一切的基礎是給出了一套螢幕型別的標準，任何螢幕尺寸都可以分為 Compact/Medium/Expanded

這樣所有的規範都被歸類為這三種類型，無需根據不同的螢幕具體尺寸單獨定義。以 Compose-M3 的程式碼為例，當螢幕尺寸發生變化時觸發佈局重組，重組中獲取最新的 windowSizeClass 針對性地做出佈局：

```kotlin 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 有三大規範，顏色（Color）、形狀（Shape）和字型（Typography），這些規範落地到程式碼中就是 MateriaTheme 中定義的對應常量，供我們在專案中引用。接下來從這三方面看一下 M3 的變化。

顏色 Color

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 程式碼為例：

```kotlin class ColorScheme( primary: Color, onPrimary: Color, /..省略../

) ``` 在 Theme 中通過設定 ColorScheme 來設定主題顏色

```kotlin import androidx.compose.material3.MaterialTheme

@Composablefun MaterialTheme ( colorScheme: ColorScheme, typography: Typography, // 更新 Shape 的功能即將到來 content: @Composable () -> Unit ) ```

形狀 Shape

形狀方面，首先形狀的分類方式上 M3 與 M2 發生了變化 |M2|M3| |:--:|:--:| |||

M2 按照元件本身的尺寸進行分類: Small/Medium/Large，而 M3 是針對元件的圓角的弧度進行分為七類：從 None 到 Full ，每一種元件都具備更多的表達方式，使得 UI 更具表現力。

文字 Typography

除了顏色，文字也是 MD 的規範之一。字型定義上，M2 有6種標題（Headline 1~6），2種副標題（Subtitle 1~2），2種正文標題（Body 1~2）一起按鈕、上劃線等樣式字型。M3 相對起來分類更有規則，不再使用數字分類，而是按照 Small/Medium/Large 分類 |M2|M3| |:--:|:--:| |||