Material Design 3 בכתיבה

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

הערה: אפשר להשתמש במושגים 'Material Design 3', 'Material 3' ו-'M3' ללא הבדלים. המפרט הקיים של Material Design והספרייה המתאימה androidx.compose.material נקראים "Material Design 2", "Material 2" או "M2".

בהמשך נסביר איך מטמיעים את 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. תת-מערכות של עיצוב חדשני תלת-ממדי: צבע, טיפוגרפיה וצורות

ב-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 מספק פונקציות build ליצירת ערכת צבעים דינמית בהירה או כהה:

// 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

שימוש בצבע

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

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

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

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

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

איור 5. שדות טקסט של קונטיינר ראשי ושדות טקסט עם צבע של קונטיינר ראשי.

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. שילוב של קונטיינר שלישי וקונטיינר שלישי בתוך קונטיינר שלישי ללחצן פעולה צף.

טיפוגרפיה

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

איור 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 ושקשורות לגופנים – כדי ליצור מודל לסולם הסוגים של 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 ו-Label medium לשימוש שונה בטיפוגרפיה.

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

אפשר להתאים אישית את הגופן על ידי שינוי ערכי ברירת המחדל של 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

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

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

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

בקישור הבא אפשר לקבל מידע נוסף על ההנחיות בנושא 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, אפשר להעביר אותו אל MaterialTheme של M3:

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 יש שתי דרכים להוסיף דגש לממשק המשתמש:

• שימוש בצבעים של משטח, וריאנט של משטח ורקע, לצד צבעים של משטח, וריאנט של משטח ממערכת הצבעים המורחבת 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 יכול להיות 'ראשי', 'משני', 'פני שטח' וכו') עם ערכי אלפא.

עליות/ירידות

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

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

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

איור 13. הגבהה של צל לעומת הגבהה של גוון ב-Material Design 3

המשטח M3 – התוכן הקומפוזבילי לגיבוי מאחורי רוב הרכיבים של M3 – כוללת תמיכה גם בגובה הגוון וגם בהצללה:

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

רכיבי חומר

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

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

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

איור 14. הדגשת לחצן מ-FAB, ראשי ועד ללחצן טקסט

• לחצן פעולה צף מורחב לפעולה עם הדגש הגבוה ביותר:

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 ואילך. שני תחומים עיקריים שבהם יש שינויים הם תנודות (ripple) וגלילה מעבר לקצה המסך. לא נדרשת עבודה נוספת כדי להטמיע את השינויים האלה.

גל

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

איור 17. תנודות ב-M2 לעומת M3

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

גלילה מעבר לקצה משתמשת עכשיו באפקט מתיחה בקצה של מאגרי גלילה. גלילת יתר של מתיחה מופעלת כברירת מחדל בתכנים קומפוזביליים קומפוזביליים של גלילה – עבור לדוגמה, LazyColumn, LazyRow ו-LazyVerticalGrid — ב- פיתוח יסודות 1.1.0 ואילך, ללא קשר לרמת ה-API.

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

נגישות

תקני נגישות מובנים ברכיבי 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 ערכים שונים בהתאם להקשר של המכשיר, כמו טלפון או טאבלט.

מסכים גדולים

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

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

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

מידע נוסף

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

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

• אפליקציית דוגמה של Reply M3

Docs

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

הפניית API וקוד מקור

• הפניית Material 3 API
• כתיבת חומר לימוד 3 דוגמאות בקוד המקור

סרטונים

• חומרי לימוד ב-Jetpack פיתוח נייטיב