Compose 中的質感設計 3

Jetpack Compose 可讓您實作 Material Design 3,這是新一代的 Material Design。Material 3 提供更新後的主題設定、元件和動態色彩等 Material You 個人化功能,且在設計上與 Android 12 以上版本中的全新視覺風格和系統 UI 相呼應。

以下使用 Reply 範例應用程式來示範 Material Design 3 實作方式。Reply 範例完全以 Material Design 3 為基礎。

使用 Material Design 3 的 Reply 範例應用程式
圖 1. 使用 Material Design 3 回覆範例應用程式

依附元件

如要在 Compose 應用程式中開始使用 Material 3,請將 Compose Material 3 依附元件新增至 build.gradle 檔案:

implementation "androidx.compose.material3:material3:$material3_version"

新增依附元件後,您就可以開始在應用程式中新增質感設計系統,包括顏色、字體排版和形狀。

實驗性 API

某些 M3 API 屬於實驗性質。在此情況下,您必須使用 ExperimentalMaterial3Api 註解,在函式或檔案層級選擇加入:

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Material Design 主題設定

M3 主題包含下列子系統:色彩配置字體排版形狀。自訂這些值時,系統會自動在您用於建構應用程式的 M3 元件中反映變更。

Material Design 的子系統:顏色、字體排版和形狀
圖 2. Material Design 的子系統:顏色、字體排版和形狀

Jetpack Compose 利用 M3 MaterialTheme 可組合項實作這些概念:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

如要為應用程式內容設定主題,請定義應用程式專屬的色彩配置、字體排版和形狀。

色彩配置

色彩配置的基礎是五種主要顏色。這些顏色每種顏色都與 13 種色調的色調調色盤有關,後者可供 Material 3 元件使用。舉例來說,這是 Reply 的淺色主題色彩配置:

Reply 範例應用程式的淺色配置
圖 3. Reply 範例應用程式的淺色配置

如想進一步瞭解色彩配置和顏色角色,請前往這個網頁

產生色彩配置

雖然您可以手動建立自訂 ColorScheme,但使用品牌的來源色彩來產生這個類別是較容易的方式。您可以使用 Material Design 主題建構工具執行這項操作,並視需要匯出 Compose 主題設定程式碼。系統產生的檔案如下:

  • Color.kt 包含主題的顏色,以及針對淺色和深色主題顏色定義的所有角色。

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt 包含淺色和深色色彩配置,以及應用程式主題。

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

如要支援淺色和深色主題,請使用 isSystemInDarkTheme()。根據系統設定,定義要使用的色彩配置:淺色或深色。

動態色彩配置

動態色彩是 Material You 的關鍵部分,其中演算法會從使用者的桌布衍生自訂色彩,並套用至其應用程式和系統 UI。這個調色盤是用來做為產生淺色和深色色彩配置的起點。

Reply 範例應用程式動態主題設定 (左方) 和預設的應用程式主題設定 (右側)
圖 4. Reply 範例應用程式動態主題設定 (左側) 和預設的應用程式主題設定 (右側)

動態色彩適用於 Android 12 以上版本。如有動態顏色可用,您可以設定動態 ColorScheme。如果沒有,您應改回使用自訂淺色或深色 ColorScheme

ColorScheme 提供建構工具函式來建立動態淺色深色色彩配置:

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

色彩使用

您可以透過 MaterialTheme.colorScheme 在應用程式中存取 Material Design 主題色彩:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

每個顏色角色都可以用在各種位置,視元件的狀態、顯眼程度和強調效果而定。

  • Primary 是基本顏色,用於主要元件,例如醒目按鈕、啟用狀態和進階表面的色調。
  • 次要按鍵顏色是用於 UI 中較不顯眼的元件 (例如篩選器方塊),並擴大套用顏色運算式的機會。
  • 第三色鍵顏色是用來衍生對比強調色的角色,該強調色可用來平衡主要和次要顏色,或為元素加強吸引力。

Reply 範例應用程式設計會在 primary-container 上使用 on-primary-container 顏色,以強調所選項目。

含有 on-primary-container 顏色的主要容器和文字欄位。
圖 5. 含有 on-primary-container 顏色的主要容器和文字欄位。

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

在這邊,您可以在 Reply 導覽匣中看到使用次要和第三容器顏色的對比,以形成強調和重音。

懸浮動作按鈕的第三容器和第三容器組合。
圖 6. 懸浮動作按鈕的第三容器和第三容器組合。

字體排版

Material Design 3 定義了輸入比例,包括從 Material Design 2 改編的文字樣式。此外,命名和分組功能也經過簡化,包括顯示、廣告標題、標題、內文和標籤 (皆有大、中和小三種尺寸)。

Material Design 3 的預設字體排版比例
圖 7. Material Design 3 的預設字體排版縮放
M3 預設字型大小/行高
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

定義字體排版

Compose 提供 M3 Typography 類別,配合現有的 TextStyle字型相關類別,可建立 Material 3 的類型縮放型式。Typography 建構函式提供每種樣式的預設值,因此您可以略過任何不想自訂的參數:

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

適合不同字體排版的內文大、內文、標籤和中等。
圖 8. 適合不同字體排版的主體大、中型和標籤媒介。

您的產品不一定要使用 Material Design 輸入比例的 15 個預設樣式。在本例中,您為縮減組合選擇了五種大小,而忽略其餘的大小。

您可以藉由變更 TextStyle 的預設值以及 fontFamilyletterSpacing字型相關屬性來自訂字體排版。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

定義 Typography 後,請將其傳遞至 M3 MaterialTheme

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

使用文字樣式

您可以使用 MaterialTheme.typography 擷取提供給 M3 MaterialTheme 可組合項的字體排版:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

如要進一步瞭解 Material Design 指南,請參閱「套用字體排版」。

形狀

Material 表面可用不同形狀顯示。形狀可用於吸引註意、識別元件、傳達狀態,以及呈現品牌風格。

形狀比例會定義容器邊角的樣式,提供從正方形到全圓形的圓角。

定義形狀

Compose 提供含有擴展參數的 M3 Shapes 類別,以支援新的 M3 形狀。M3 形狀縮放比例更類似類型縮放,以便在 UI 上顯示變化豐富的形狀。

以下是不同大小的形狀:

  • 特小
  • 特大

根據預設,每個形狀都有預設值,但您可以覆寫:

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

定義 Shapes 後,即可將其傳遞至 M3 MaterialTheme

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

使用圖案

您可以自訂 MaterialTheme 中所有元件的形狀比例,也可以針對個別元件自訂形狀比例。

套用中型和大型形狀使用預設值:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

在 Reply 範例應用程式中,「Card」和「Large」動作按鈕的中型形狀。
圖 9. 在 Reply 範例應用程式中,「Card」和「Large」動作按鈕的中型形狀

Compose 還有另外兩種形狀:RectangleShapeCircleShape。矩形沒有框線半徑,圓形則會顯示完整的圓形邊緣:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

以下範例示範部分含有預設形狀值的元件:

所有 Material 3 元件的預設形狀值。
圖 10. 所有 Material 3 元件的預設形狀值。

您可以在套用形狀時,進一步瞭解 Material Design 指南。

強調效果

M3 中的強調效果是透過顏色變化及其色彩組合提供。在 M3 中,有兩種方法可在 UI 中新增強調效果:

  • 使用表面、surface-variant 和背景,搭配已擴充 M3 色彩系統的 on-surface 和 on-surface-variants 顏色。舉例來說,surface 可與 on-surface-variant 和 surface-variant 搭配使用,可與 on-surface 搭配使用,藉此提供不同程度的強調效果。
使用中性色彩組合強調強調效果。
圖 11. 使用中性色組合強調。
  • 為文字使用不同的字型粗細。如上所述,您可以為我們的類型尺度提供自訂權重,以達到不同的強調效果。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

高度

Material 3 主要使用色調色彩重疊來表示高度。這是區分容器和表面的新方式,除了使用陰影之外,還使用更加顯眼的色調來提高色調高度。

搭配陰影高度的色調高度
圖 12. 搭配陰影高度 E 的色調高度

深色主題中的高度重疊在 Material 3 中也已改為色調色彩重疊。重疊顏色來自主要色彩運算單元。

Material Design 3 中的陰影高度與色調高度
圖 13. Material Design 3 中的陰影高度與色調高度

M3 Surface (多數 M3 元件背後的幕後可組合項) 支援色調和陰影高度:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Material 元件

Material Design 隨附一組豐富的質感元件 (例如按鈕、方塊、資訊卡、導覽列),這些元件都遵循 Material Design 主題設定,可協助您打造精美的 Material Design 應用程式。您可以直接開始使用具有預設屬性的元件。

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3 提供了相同元件的多個版本,可在不同角色中使用,以強調和注意。

按鈕強調「FAB」,由「Primary」改為「Text」按鈕
圖 14. 按鈕強調「FAB」,「Primary Down to Text」按鈕
  • 擴充的懸浮動作按鈕,適用於最大的強調動作:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • 用於強調動作高度的已填滿按鈕:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • 低強調動作的文字按鈕:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

您可以參閱這篇文章,進一步瞭解 Material 按鈕和其他元件。Material 3 提供多種元件套件,例如按鈕、應用程式列、導覽元件,專為不同用途和螢幕大小設計。

Material Design 也提供多個導覽元件,協助您根據不同的螢幕大小和狀態實作導覽功能。

如要指定 5 個以下的目的地,在精簡版裝置中使用 NavigationBar

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail 適用於中小型平板電腦或橫向模式的手機。這可以為使用者提供人體工學,並改善這些裝置的使用者體驗。

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

回覆展示:BottomNavigationBar(左) 和 NavigationRail(Right)
圖 15. 回覆展示:BottomNavigationBar (左) 和 NavigationRail (右)

請以預設主題設定回覆,針對所有裝置尺寸提供沉浸式使用者體驗。

NavigationDrawer 適用於中大型平板電腦,當中有足夠空間可顯示詳細資料。PermanentNavigationDrawerModalNavigationDrawer 可與 NavigationRail 搭配使用。

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

回覆展示固定式導覽匣
圖 16. 回覆展示固定式導覽匣

導覽選項可改善使用者體驗、人體工學和可連性。如要進一步瞭解 Material 導覽元件,請參閱 Compose 自動調整程式碼研究室

自訂元件的主題設定

M3 提供個人化功能和彈性。所有元件都會套用預設顏色,但會顯示彈性 API,以便視需要自訂顏色。

大多數的元件 (例如資訊卡和按鈕) 會提供會公開顏色和高度介面的預設物件,您可以加以修改來自訂元件:

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

進一步瞭解如何自訂 Material 3

系統 UI

Material You 的某些面向,來自 Android 12 以上版本的全新視覺風格和系統 UI。有兩個主要部分是漣漪效果和過度捲動變更。您無須採取其他工作就能導入這些變更。

漣漪

按下時,分享關係圖現在使用細微的火花來照亮途徑。 Compose Material 分享關係圖在 Android 環境中使用平台 RippleDrawable,因此在 Android 12 以上版本中,所有 Material Design 元件均可使用火花分享關係圖。

M2 與 M3 的漣漪效果
圖 17. M2 與 M3 的漣漪效果

過度捲動

過度捲動現在可以在捲動容器的邊緣使用延展效果。無論 API 級別為何,在 Compose Foundation 1.1.0 以上版本中,捲動容器可組合項 (例如 LazyColumnLazyRowLazyVerticalGrid) 預設會啟用延展過度捲動。

運用容器邊緣的延展效果過度捲動
圖 18. 使用容器邊緣的延展效果過度捲動

無障礙功能

Material 元件內建無障礙功能標準,專為實現多元包容產品設計的基礎。瞭解產品的無障礙設計有助於提升所有使用者的可用性,包括視障、失明、聽障、認知障礙、動作障礙或身心障礙者 (例如手臂損壞) 等。

顏色無障礙功能

動態色彩應符合無障礙工具的色彩對比度標準。色調調色盤系統對於讓任何色彩配置預設可供存取非常重要。

Material 的色彩系統提供標準色調值和測量方法,可用於達到一目瞭然的對比度。

Reply 範例應用程式:主要、第二和第三對角棧板 (由上到下)
圖 19. Reply 範例應用程式:主要、次要和三次色調調色盤 (由上至下)

所有 Material Design 元件和動態主題設定都已從一組色調調色盤中選用上述色彩角色,以符合無障礙需求。不過,如果您要自訂元件,請務必使用適當的顏色角色,並避免不相符。

在 primary 上使用 on-primary,在 primary-container 上使用 on-primary-container,並對其他強調色和中性色採取相同做法,為使用者提供可存取的對比度。

在 primary 之上使用第三容器,為使用者帶來低對比的按鈕:

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

充足對比 (左) 與低對比 (右側)
圖 20. 充足的對比度 (左) 與對比度不佳 (右)

字體排版無障礙功能

M3 類型調整會更新靜態類型漸層和值,以提供可跨裝置縮放的簡化但動態架構架構。

舉例來說,在 M3 中,可根據裝置情境 (例如手機或平板電腦),為 Display Small 指派不同的值。

大螢幕

Material Design 提供了自動調整式版面配置和折疊式裝置的指南,讓您更容易使用應用程式,並改善使用者手持大型裝置的人體工學。

Material 提供不同類型的導覽功能,協助您為大型裝置提供更優質的使用者體驗。

您可以進一步瞭解 Android 大螢幕指南,並參閱回覆範例,瞭解會自動調整的無障礙設計。

瞭解詳情

如要進一步瞭解 Compose 中的 Material Design 主題設定,請參閱下列資源:

範例應用程式

文件

API 參考資料和原始碼

影片