‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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 באמצעות האפליקציה לדוגמה Reply. האפליקציה לדוגמה Reply מבוססת כולה על Material Design 3.

**איור 1**. אפליקציה לדוגמה של Reply באמצעות 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, המושגים האלה מיושמים באמצעות הפונקציה הקומפוזבילית MaterialTheme של M3:

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

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

ערכת צבעים

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

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

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

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

אפליקציה לדוגמה של 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
}Material3Snippets.kt

שימוש בצבעים

אפשר לגשת לצבעים של התאמת העיצוב של Google Material Design באפליקציה באמצעות 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

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

**איור 6**. שילוב של קונטיינר שלישי וקונטיינר שלישי פעיל לכפתור פעולה צף (FAB).

טיפוגרפיה

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

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 יש את המחלקה Typography של M3, יחד עם המחלקות הקיימות 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**. טקסט גדול, טקסט בינוני ותווית בינונית לשימושים שונים בטיפוגרפיה.

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

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

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

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

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

ערכי ברירת המחדל של הצורות לכל רכיבי Material 3. — **איור 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

גובה

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

הגבהה באמצעות גוון והגבהה באמצעות צל — **איור 12**. גובה גוון עם גובה צל

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

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

‫Surface של M3 – הרכיב הניתן לשינוי (composable) שמאחורי רוב רכיבי M3 – כולל תמיכה בהגבהה של גוון וצל:

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

רכיבי חומרים

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

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

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

הדגשת כפתורים, מכפתור פעולה צף (FAB), דרך כפתור ראשי ועד כפתור טקסט — **איור 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

תצוגה מקדימה של BottomNavigationBar(משמאל) ו-NavigationRail(מימין) — **איור 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**. הדגמה של חלונית הזזה קבועה לניווט ב-Reply

אפשרויות הניווט משפרות את חוויית המשתמש, את הארגונומיה ואת הנגישות. מידע נוסף על רכיבי ניווט של Material זמין ב-Compose adaptive codelab.

התאמה אישית של עיצוב הרכיב

‫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.

אדווה ב-M2 לעומת M3 — **איור 17**. אפקט Ripple ב-M2 לעומת M3

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

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

נגישות

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

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

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

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

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

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

מידע נוסף

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

Material Design 3 בכתיבה

תלות

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

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

ערכת צבעים

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

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

שימוש בצבעים

טיפוגרפיה

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

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

צורות

הגדרת צורות

שימוש בצורות

הדגשה

גובה

רכיבי חומרים

רכיבי ניווט

התאמה אישית של עיצוב הרכיב

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

גל

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

נגישות

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

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

מסכים גדולים

מידע נוסף

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

Docs

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

סרטונים

מומלץ בשבילכם

Material Design 3 בכתיבה קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

תלות

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

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

ערכת צבעים

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

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

שימוש בצבעים

טיפוגרפיה

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

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

צורות

הגדרת צורות

שימוש בצורות

הדגשה

גובה

רכיבי חומרים

רכיבי ניווט

התאמה אישית של עיצוב הרכיב

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

גל

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

נגישות

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

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

מסכים גדולים

מידע נוסף

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

Docs

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

סרטונים

מומלץ בשבילכם

Material Design 3 בכתיבה