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