Material Design 3 בכתיבה

Jetpack Compose מציע הטמעה של Material You ושל Material 3 Expressive, הדור הבא של Material Design. ‫M3 Expressive הוא הרחבה של Material Design 3, שכוללת עדכונים מבוססי מחקר בנושאים כמו עיצובים, רכיבים, תנועה, טיפוגרפיה ועוד – והכול נועד לעזור לכם ליצור מוצרים מעניינים ומושכים שהמשתמשים אוהבים. הוא תומך גם בתכונות ההתאמה האישית של Material You, כמו צבע דינמי. ‫M3 Expressive משלים את הסגנון החזותי ואת ממשק המשתמש של מערכת Android 16.

הערה: המונחים Material Design 3,‏ Material 3 ו-M3 הם שמות חלופיים.

בהמשך נציג את ההטמעה של Material Design 3 באמצעות אפליקציית הדוגמה Reply. דוגמת התשובה מבוססת כולה על Material Design 3.

איור 1. אפליקציית דוגמה לתגובה באמצעות Material Design 3

תלות

כדי להתחיל להשתמש ב-Material 3 באפליקציית Compose, מוסיפים את התלות Compose Material 3 לקובצי build.gradle:

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

אחרי שמוסיפים את התלות, אפשר להתחיל להוסיף לאפליקציות מערכות של Material Design, כולל צבע, טיפוגרפיה וצורה.

ממשקי API ניסיוניים

חלק מממשקי ה-API של M3 נחשבים ניסיוניים. במקרים כאלה, צריך להביע הסכמה ברמת הפונקציה או הקובץ באמצעות ההערה ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

התאמת העיצוב של Google Material Design

עיצוב M3 מכיל את מערכות המשנה הבאות: סכמת צבעים, טיפוגרפיה וצורות. כשמבצעים התאמה אישית של הערכים האלה, השינויים משתקפים באופן אוטומטי ברכיבי M3 שבהם משתמשים כדי לבנות את האפליקציה.

איור 2. מערכות משנה של Material Design: צבע, טיפוגרפיה וצורות

Jetpack Compose מטמיעה את המושגים האלה באמצעות ה-composable‏ M3 MaterialTheme:

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

כדי להגדיר עיצוב לתוכן האפליקציה, צריך להגדיר את ערכת הצבעים, הטיפוגרפיה והצורות שספציפיות לאפליקציה.

ערכת צבעים

הבסיס של ערכת צבעים הוא קבוצה של חמישה צבעים מרכזיים. כל אחד מהצבעים האלה קשור לפלטת צבעים של 13 גוונים, שמשמשים את רכיבי Material 3. לדוגמה, זו ערכת הצבעים של העיצוב הבהיר של התגובה:

איור 3. דוגמה לתשובה עם ערכת צבעים בהירה

מידע נוסף על סכמת צבעים ותפקידי צבעים

יצירת ערכות צבעים

אפשר ליצור ColorScheme מותאם אישית באופן ידני, אבל לרוב קל יותר ליצור אותו באמצעות צבעי המקור של המותג. הכלי Material Theme Builder מאפשר לעשות את זה, ובאופן אופציונלי לייצא קוד של ערכות נושא ב-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)
// ..
// ..
Material3Snippets.kt

• ‫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
    )
}
Material3Snippets.kt

כדי לתמוך בעיצוב בהיר ובעיצוב כהה, משתמשים ב-isSystemInDarkTheme(). בהתאם להגדרת המערכת, מגדירים את ערכת הצבעים שבה רוצים להשתמש: בהירה או כהה.

ערכות צבעים דינמיות

צבע דינמי הוא החלק המרכזי ב-Material You. אלגוריתם גוזר צבעים בהתאמה אישית מהטפט של המשתמש כדי להחיל אותם על האפליקציות וממשק המשתמש של המערכת. לוח הצבעים הזה משמש כנקודת התחלה ליצירה של ערכות צבעים בהירות וכהות.

איור 4. אפליקציה לדוגמה עם ערכת נושא דינמית שמתבססת על הטפט (מימין) וערכת נושא של אפליקציה שמוגדרת כברירת מחדל (משמאל)

התכונה 'צבע דינמי' זמינה ב-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
}
Material3Snippets.kt

שימוש בצבע

אפשר לגשת לצבעי העיצוב של Material באפליקציה באמצעות MaterialTheme.colorScheme:

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

אפשר להשתמש בכל תפקיד צבע במגוון מקומות, בהתאם למצב, לבולטות ולדגש של הרכיב.

• הצבע הראשי הוא צבע הבסיס, שמשמש לרכיבים מרכזיים כמו כפתורים בולטים, מצבים פעילים וגוון של משטחים מובלטים.
• הצבע המשני משמש לרכיבים פחות בולטים בממשק המשתמש, כמו צ'יפים של מסננים, ומאפשר להשתמש במגוון רחב יותר של צבעים.
• הצבע השלישוני משמש ליצירת תפקידים של הדגשות מנוגדות, שאפשר להשתמש בהן כדי לאזן בין הצבעים הראשיים והמשניים או כדי להדגיש רכיב מסוים.

העיצוב של אפליקציית הדוגמה Reply משתמש בצבע on-primary-container על גבי 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,
    )
}
Material3Snippets.kt

כאן אפשר לראות בחלונית הזזה לניווט של התשובה איך נעשה שימוש בצבעים משניים ומשולשים של הקונטיינר בניגוד כדי ליצור הדגשה וטון.

איור 6. שילוב של Tertiary-container ו-on-tertiary-container לכפתור פעולה צף (FAB).

טיפוגרפיה

ב-Material Design 3 מוגדר סולם טיפוגרפי, כולל סגנונות טקסט שהותאמו מ-Material Design 2. השמות והקיבוצים פושטו והם כוללים עכשיו: תצוגה, כותרת ראשית, כותרת, גוף ותווית, עם גדלים גדולים, בינוניים וקטנים לכל אחד מהם.

איור 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

הערה: בניגוד לסיווג M2 Typography, סיווג M3 Typography לא כולל כרגע פרמטר defaultFontFamily. במקום זאת, צריך להשתמש בפרמטר fontFamily בכל אחד מהתגים TextStyles בנפרד.

הגדרת טיפוגרפיה

‫Compose מספקת את המחלקה M3 Typography – יחד עם המחלקות הקיימות TextStyle ו-font-related – כדי ליצור מודל של סולם הסוגים Material 3. ה-constructor של 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
    ),
    // ..
)
// ..
Material3Snippets.kt

איור 8. ‫Body large,‏ body medium ותווית medium לשימושים שונים בטיפוגרפיה.

סביר להניח שלא תצטרכו את כל 15 הסגנונות שמוגדרים כברירת מחדל בסולם הסוגים של Material Design. בדוגמה הזו, נבחרו חמישה גדלים לצורך צמצום המערך, והשאר הושמטו.

אפשר להתאים אישית את הטיפוגרפיה על ידי שינוי ערכי ברירת המחדל של המאפיינים TextStyle ומאפיינים שקשורים לגופן כמו fontFamily ו-letterSpacing.

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

אחרי שמגדירים את Typography, מעבירים אותו אל MaterialTheme M3:

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

שימוש בסגנונות טקסט

אפשר לאחזר את הטיפוגרפיה שסופקה לרכיב הקומפוזבילי MaterialTheme של M3 באמצעות MaterialTheme.typography:

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

מידע נוסף על הנחיות Material בנושא שימוש בטיפוגרפיה

צורות

משטחי Material יכולים להופיע בצורות שונות. צורות מושכות את תשומת הלב, מזהות רכיבים, מעבירות מידע על מצב ומבטאות את המותג.

הגדרת קנה המידה של הצורה מגדירה את הסגנון של פינות המאגר, ומציעה מגוון של עיגולים, מריבוע ועד עיגול מלא.

הגדרת צורות

‫Compose מספקת את המחלקה M3 Shapes עם פרמטרים מורחבים לתמיכה בצורות חדשות של M3. הסולם של צורת M3 דומה יותר לסולם סוגים, ומאפשר מגוון רחב של צורות בממשק המשתמש.

יש צורות בגדלים שונים:

• קטן במיוחד
• קטן
• בינוני
• גדול
• גדול במיוחד

כברירת מחדל, לכל צורה יש ערך ברירת מחדל, אבל אפשר לשנות את הערכים האלה:

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

אחרי שמגדירים את Shapes, אפשר להעביר אותו ל-M3 MaterialTheme:

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

שימוש בצורות

אפשר להתאים אישית את קנה המידה של הצורה לכל הרכיבים ב-MaterialTheme או לעשות זאת על בסיס כל רכיב בנפרד.

החלת צורה בינונית וגדולה עם ערכי ברירת מחדל:

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

איור 9. צורה בינונית לכרטיס וצורה גדולה לכפתור פעולה צף באפליקציית הדוגמה של התגובה

יש עוד שני צורות – RectangleShape ו-CircleShape – שהן חלק מ-Compose. צורה מלבנית ללא רדיוס גבול וצורה עגולה עם קצוות מעוגלים מלאים:

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

בדוגמאות הבאות אפשר לראות כמה מהרכיבים עם ערכי ברירת מחדל של צורה שהוחלו עליהם:

איור 10. ערכי ברירת המחדל של הצורות בכל הרכיבים של Material 3.

מידע נוסף על ההנחיות בנושא Material בנושא החלת צורה

הדגשה

ההדגשה ב-M3 מתבצעת באמצעות וריאציות של צבע ושילובים של צבעים. ב-M3, יש שתי דרכים להדגיש את ממשק המשתמש:

• שימוש בצבעים surface,‏ surface-variant ו-background לצד הצבעים on-surface ו-on-surface-variants ממערכת הצבעים המורחבת M3. לדוגמה, אפשר להשתמש ב-surface עם on-surface-variant, ואפשר להשתמש ב-surface-variant עם on-surface כדי לספק רמות שונות של הדגשה.

איור 11. שימוש בשילובי צבעים ניטרליים להדגשה.

• שימוש במשקלים שונים של גופנים לטקסט. בקטע הקוד שלמעלה אפשר לראות שאפשר לספק משקלים מותאמים אישית לסולם הטיפוגרפי כדי להדגיש את הטקסט בצורה שונה.

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

הערה: במצבים מושבתים ב-M3, עדיין אפשר להשתמש בצבעים מסוג on-x (כאשר x יכול להיות primary, ‏ secondary, ‏ surface וכו') עם ערכי אלפא.

גובה

ב-Material 3, הגובה מיוצג בעיקר באמצעות שכבות-על של צבעים טונאליים. זו דרך חדשה להבחין בין מאגרי תגים ובין משטחים שונים – הגדלת ההדגשה של הטון יוצרת טון בולט יותר – בנוסף לשימוש בצללים.

איור 12. הגבהה טונאלית עם הגבהת צל

גם שכבות העל של הגובה בעיצובים כהים השתנו לשכבות על של צבעים טונאליים ב-Material 3. צבע השכבה השקופה מגיע ממשבצת הצבע הראשי.

איור 13. הבדלים בין גובה הצללה לבין גובה הצללה טונאלי ב-Material Design 3

‫M3 Surface – רכיב ה-Composable שמאחורי רוב רכיבי M3 – כולל תמיכה בהדגשה של טונים וצללים:

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

רכיבים של Material

‫Material Design כולל קבוצה עשירה של רכיבי Material (כמו כפתורים, צ'יפים, כרטיסים, סרגל ניווט) שכבר פועלים לפי Material Theming ועוזרים לכם ליצור אפליקציות יפות של Material Design. אפשר להתחיל להשתמש ברכיבים עם מאפייני ברירת מחדל מיד.

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

ב-M3 יש הרבה גרסאות של אותם רכיבים שאפשר להשתמש בהם בתפקידים שונים בהתאם לדגש ולתשומת הלב.

איור 14. הדגשת לחצנים מ-FAB, דרך Primary ועד Text button

• כפתור פעולה צף מורחב לפעולה הכי חשובה:

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

• כפתור מלא לפעולה שרוצים להדגיש:

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

• לחצן טקסט לפעולה עם דגש נמוך:

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

מידע נוסף על לחצנים ורכיבים אחרים של Material ‫Material 3 מספק מגוון רחב של חבילות רכיבים כמו כפתורים, סרגלי אפליקציות ורכיבי ניווט שמותאמים במיוחד לתרחישי שימוש שונים ולגדלים שונים של מסכים.

רכיבי ניווט

ב-Material יש גם כמה רכיבי ניווט שיעזרו לכם להטמיע ניווט, בהתאם לגדלים ולמצבים שונים של המסך.

המאפיין NavigationBar משמש למכשירים קומפקטיים כשרוצים לטרגט 5 יעדים או פחות:

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

‫NavigationRail משמש לטאבלטים או לטלפונים קטנים עד בינוניים בפריסה לרוחב. היא מספקת ארגונומיה למשתמשים ומשפרת את חוויית המשתמש במכשירים האלה.

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

איור 15. תצוגה מקדימה של תשובה של BottomNavigationBar (משמאל) ושל NavigationRail (מימין)

כדי לספק חוויית משתמש עשירה בכל גדלי המכשירים, מומלץ להשתמש בתשובה גם בעיצוב ברירת המחדל.

‫NavigationDrawer מתאים לטאבלטים בגודל בינוני עד גדול, שבהם יש מספיק מקום להצגת פרטים. אפשר להשתמש ב-PermanentNavigationDrawer או ב-ModalNavigationDrawer יחד עם NavigationRail.

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

איור 16. תצוגה של תשובה בחלונית ההזזה הקבועה לניווט

אפשרויות הניווט משפרות את חוויית המשתמש, את הארגונומיה ואת הנגישות. מידע נוסף על רכיבי ניווט של Material זמין בCodelab בנושא התאמה של 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
}
Material3Snippets.kt

מידע נוסף על התאמה אישית של Material 3

ממשק משתמש של המערכת

חלק מהמאפיינים של Material You מגיעים מהסגנון החזותי החדש ומממשק המשתמש של המערכת ב-Android מגרסה 12 ואילך. שני תחומים מרכזיים שבהם יש שינויים הם אפקט האדווה והגלילה מעבר לקצה. לא צריך לבצע פעולות נוספות כדי להטמיע את השינויים האלה.

גל

כשלוחצים על האפקט 'אדווה', הוא מציג עכשיו נצנוץ עדין כדי להאיר את המשטחים. הפונקציה Compose Material Ripple משתמשת ב-RippleDrawable של הפלטפורמה מתחת לפני השטח ב-Android, כך שאפקט האדווה הנוצץ זמין ב-Android מגרסה 12 ואילך לכל רכיבי Material.

איור 17. Ripple in M2 versus M3

גלילה מעבר לקצה

בגלילה מעבר לקצה, מוצג עכשיו אפקט מתיחה בקצה של מאגרי הגלילה. האפשרות 'מתיחה בגלילה מעבר לקצה' מופעלת כברירת מחדל ברכיבי Composables של מאגר גלילה – לדוגמה, LazyColumn,‏ LazyRow ו-LazyVerticalGrid – ב-Compose Foundation בגרסה 1.1.0 ואילך, ללא קשר לרמת ה-API.

איור 18. גלילה מעבר לקצה באמצעות אפקט מתיחה בקצה של מאגר התגים

נגישות

תקני הנגישות שמוטמעים ברכיבי Material נועדו לספק בסיס לעיצוב מוצרים כולל. הבנה של הנגישות של המוצר יכולה לשפר את השימושיות שלו לכל המשתמשים, כולל משתמשים עם ליקויי ראייה, עיוורון, לקויות שמיעה, לקויות קוגניטיביות, לקויות מוטוריות או מוגבלויות מצביות (כמו זרוע שבורה).

נגישות של צבעים

צבע דינמי נועד לעמוד בתקני הנגישות של ניגודיות הצבע. מערכת לוחות הצבעים הטונאליים חיונית כדי להפוך כל ערכת צבעים לנגישה כברירת מחדל.

מערכת הצבעים של Material מספקת ערכי גוון ומדידות סטנדרטיים שאפשר להשתמש בהם כדי לעמוד ביחסי ניגודיות נגישים.

איור 19. אפליקציית דוגמה לתגובה: לוחות צבעים ראשיים, משניים ושלישוניים (מלמעלה למטה)

כל רכיבי Material והעיצוב הדינמי כבר משתמשים בתפקידי הצבע שלמעלה מתוך קבוצה של פלטות גוונים, שנבחרו כדי לעמוד בדרישות הנגישות. עם זאת, אם אתם מבצעים התאמה אישית של רכיבים, הקפידו להשתמש בתפקידי צבע מתאימים כדי למנוע חוסר התאמה.

כדי לספק ניגודיות נגישה למשתמש, צריך להשתמש בצבע on-primary על גבי הצבע primary, בצבע on-primary-container על גבי הצבע primary-container, וכך הלאה לגבי צבעים משניים וניטרליים אחרים.

השימוש בקונטיינר שלישוני מעל קונטיינר ראשי יוצר כפתור עם ניגודיות נמוכה:

// ✅ 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
    )
) {
}
Material3Snippets.kt

איור 20. ניגודיות מספקת (מימין) לעומת ניגודיות נמוכה (משמאל)

נגישות טיפוגרפית

בסולם הסוגים M3, הערכים והשיפוע הסטטי של הסוגים מתעדכנים כדי להציע מסגרת פשוטה אך דינמית של קטגוריות גודל שניתנות להתאמה במכשירים שונים.

לדוגמה, במערכת M3, ל-Display Small יכולים להיות ערכים שונים בהתאם להקשר של המכשיר, כמו טלפון או טאבלט.

מסכים גדולים

‫Material מספק הנחיות לגבי פריסות מותאמות ומכשירים מתקפלים, כדי להפוך את האפליקציות לנגישות ולשפר את הארגונומיה של משתמשים שמחזיקים מכשירים גדולים.

‫Material מספק סוגים שונים של ניווט כדי לעזור לכם לספק חוויית משתמש טובה יותר במכשירים גדולים.

מידע נוסף על ההנחיות בנוגע לאיכות האפליקציות למסכים גדולים ב-Android ודוגמה לתגובה לעיצוב רספונסיבי ונגיש

מידע נוסף

כדי לקבל מידע נוסף על התאמת העיצוב של Google Material Design ב-Compose, אפשר לעיין במקורות המידע הבאים:

אפליקציות לדוגמה

• Reply M3 sample app

Docs

• העברה מ-Material 2 ל-Material 3 ב-Compose
• הנחיות לעיצוב Material

מאמרי העזרה של ה-API וקוד מקור

• מאמרי העזרה של ה-API של Compose Material 3
• דוגמאות של Material 3 בקוד המקור

סרטונים

• Material You ב-Jetpack Compose