盤點 Material Design 3 帶來的新變化
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
呢? 在後面顏色系統的介紹中我們會看到它。
多螢幕尺寸適配
隨著各種平板、摺疊屏裝置的增多,越來越多的應用需要考慮多種螢幕尺寸下執行的效果,而且能夠動態響應螢幕的尺寸的變化。
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|
|:--:|:--:|
|||
以上,顏色、形狀、文字是 MD 的三大基本規範,系統預設元件通過應用這些規範,形成特有的視覺風格。M3 的 UI 元件視覺上整體呈現兩大特點,一是更加圓潤,二是面積更大,在當下大屏盛行的裝置中使得點選區域更加明顯。接下來盤點一下各種基礎元件的設計上的具體變化:
FAB 懸浮按鈕
- 形狀從圓形變為圓角矩形
- 新增了一種 Large(96dp) 的大尺寸 FAB,M2 預設只有 Default(56dp) 和 Mini(40dp) 兩種尺寸
- 預設背景色由 Primary 變為 Primary Container
- Extended Fab 的高度與 Fab 進行了對齊,視覺更統一,M2 中兩者高度稍有不同,
Button 按鈕
- 基本形狀從圓角矩形變為半圓
- 文字按鈕不再全大寫,而是大小寫敏感
- 增加高度(36dp > 45dp)
Chip 標籤
- 半圓變為圓角矩形( 好似 M3 和 M2 在元件形狀上進行了圓形<>圓角的互換...)
- 功能種類的調整,Actioin 類 Chip 被拆分為
Assist
和Suggestion
型別 - 預設沒有留陰影(elevation = 0),M3 的元件通過加深邊框的顏色對比度,取消了不少陰影元素,整體上弱化了擬物風格
TopAppBar 標題欄
- 預設取消陰影,當滾動後會增加陰影(Elevation = 2)
- 高度增加,字型變大
- M3 中刪除了 M2 中 Primary Variant 的定義,這原本是用在 StatusBar 中的顏色比 Primay 更深,M2 StatusBar 也是 Primary ,打造沉浸化標題欄
Switch 開關
- 面積更大,高度增加
- 取消陰影,擬物轉為扁平
- 增加對勾等可識別圖形,對色盲認識更友好
NavigationBar 導航欄
- 首先名稱發生變化,M2 稱為 Bottom Navigation,M3 統一稱呼
NavigationBar
- 取消了陰影,增加了高度
- M2 通過顏色的透明度表示選中狀態,M3 則是添加了 Outline
Dialog 對話方塊
- 增大了 Title 的字型
- 增大了 Padding
- 圓角弧度更大
除了上述元件,其他元件的樣式變化不大,大多是取消陰影,增大面積之類,不再贅述。
最後
通過本文介紹,相信大家對 M3 的風格有了深入的瞭解,雖說國內 Android 應用為了兼顧與 iOS 端風格的統一,很少會遵循 MD 的設計規範,但如果你是一個個人開發者,MD 將有助於你開發出更加專業、美觀的產品。
- Android Studio Electric Eel 起支援手機投屏
- Compose 為什麼可以跨平臺?
- 一看就懂!圖解 Kotlin SharedFlow 快取系統
- 深入淺出 Compose Compiler(2) 編譯器前端檢查
- 深入淺出 Compose Compiler(1) Kotlin Compiler & KCP
- Jetpack MVVM七宗罪之三:在 onViewCreated 中載入資料
- 為什麼說 Compose 的宣告式程式碼最簡潔 ?Compose/React/Flutter/SwiftUI 語法對比
- Compose 型別穩定性註解:@Stable & @Immutable
- Fragment 這些 API 已廢棄,你還在使用嗎?
- 告別KAPT!使用 KSP 為 Kotlin 編譯提速
- 探索 Jetpack Compose 核心:深入 SlotTable 系統
- 盤點 Material Design 3 帶來的新變化
- Compose 動畫邊學邊做 - 夏日彩虹
- Google I/O :Android Jetpack 最新變化(二) Performance
- Google I/O :Android Jetpack 最新變化(一) Architecture
- Google I/O :Android Jetpack 最新變化(四)Compose
- Google I/O :Android Jetpack 最新變化(三)UI
- 一文看懂 Jetpack Compose 快照系統
- 聊聊 Kotlin 代理的“缺陷”與應對
- AAB 扶正!APK 再見!