Material Design 3 في Compose

يوفّر Jetpack Compose تنفيذًا للتصميم المتعدّد الأبعاد 3، وهو الجيل التالي من التصميم المتعدّد الأبعاد. تشمل 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، بما في ذلك اللون وأسلوب الخط والشكل، إلى تطبيقاتك.

واجهات برمجة التطبيقات التجريبية

تعتبر بعض واجهات برمجة تطبيقات M3 تجريبية. في هذه الحالات، يجب تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api:

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

تخصيص التصميم المتعدد الأبعاد

يحتوي مظهر M3 على الأنظمة الفرعية التالية: نظام الألوان وأسلوب الخط والأشكال. عند تخصيص هذه القيم، تظهر تغييراتك تلقائيًا في مكوّنات M3 التي تستخدمها لإنشاء تطبيقك.

الشكل 2. الأنظمة الفرعية لـ Material Design: اللون وأسلوب الخط والأشكال

تنفِّذ Jetpack Compose هذه المفاهيم باستخدام MaterialTheme M3 القابل للإنشاء:

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

لتطبيق مظهر على محتوى تطبيقك، حدِّد مخطط الألوان وأسلوب الخط والأشكال الخاصة بتطبيقك.

النمط اللوني

يستند نظام الألوان إلى مجموعة من خمسة ألوان رئيسية. يرتبط كلّ من هذه الألوان بلوحة ألوان تتضمّن 13 لونًا، وتستخدمها مكونات Material 3. على سبيل المثال، هذا هو نظام الألوان للمظهر الفاتح في الرد:

الشكل 3. نموذج الألوان الفاتحة في تطبيق "الردّ"

اطّلِع على مزيد من المعلومات عن مخطط الألوان وأدوار الألوان.

إنشاء أنظمة ألوان

على الرغم من أنّه يمكنك إنشاء ColorScheme مخصّص يدويًا، من الأسهل في أغلب الأحيان إنشاء ColorScheme باستخدام ألوان المصدر من علامتك التجارية. تتيح لك أداة أداة إنشاء themes Material Design إجراء ذلك، وتصدير رمز تنسيق المظهر اختياريًا. يتم إنشاء الملفات التالية:

• يحتوي 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، حيث تُستخرج إحدى الخطوات algorithmic ألوانًا مخصّصة من خلفية المستخدم لتطبيقها على التطبيقات وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء أنظمة ألوان فاتحة وداكنة.

الشكل 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

استخدام الألوان

يمكنك الوصول إلى ألوان نسق المواد في تطبيقك من خلال MaterialTheme.colorScheme:

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

يمكن استخدام كل دور لوني في مجموعة متنوعة من الأماكن اعتمادًا على حالة المكون وبروزه وتوكيده.

• اللون الأساسي هو اللون الأساسي الذي يُستخدَم للمكونات الرئيسية، مثل buttons البارزة والحالات النشطة ولون الأسطح المرتفعة.
• يُستخدَم اللون الثانوي للمفتاح مع العناصر الأقل بروزًا في واجهة المستخدم، مثل شرائح الفلاتر، ويزيد من فرص التعبير عن الألوان.
• يُستخدم اللون الرئيسي الثالث لاشتقاق أدوار اللكنات المتباينة التي يمكن استخدامها لموازنة الألوان الأساسية والثانوية أو جذب انتباه محسّن لعنصر.

يستخدم تصميم نموذج تطبيق 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. تركيبة حاوية ثلاثية وحاوية ثلاثية لزر الإجراء العائم.

أسلوب الخط

يحدِّد 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

ملاحظة: على عكس فئة Typography من النوع M2، لا تتضمّن فئة Typography من النوع M3 حاليًا مَعلمة defaultFontFamily. ستحتاج إلى استخدام المَعلمة fontFamily في كلّ TextStyles فردي بدلاً من ذلك.

تعريف أسلوب الخط

توفّر أداة 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
    ),
    // ..
)
// ..
Material3Snippets.kt

الشكل 8. نص كبير في النص الرئيسي ونص متوسط في النص الرئيسي ونص متوسط في التصنيف لاستخدامات مختلفة للخطّ.

من المرجّح ألا يحتاج منتجك إلى جميع الأنماط التلقائية الـ 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

استخدام أنماط النصوص

يمكنك استرداد أسلوب الخط المقدَّم لعنصر 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

يمكنك الاطّلاع على مزيد من المعلومات عن إرشادات التصميم المتعدد الأبعاد حول تطبيق الخطوط.

الأشكال

يمكن عرض مساحات العرض في أشكال مختلفة. تجذب الأشكال الانتباه، وتحدِّد المكوّنات، وتوضِّح الحالة، وتعبّر عن العلامة التجارية.

يحدِّد مقياس الشكل نمط زوايا الحاوية، ويقدّم مجموعة من الأشكال المستديرة من المربّع إلى الدائري بالكامل.

تحديد الأشكال

توفِّر ميزة 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، وهما جزء من ميزة "الإنشاء". لا يحتوي شكل المستطيل على نصف قطر للحدود، ويعرض شكل الدائرة حوافًا مكتملة دائرية:

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

توضِّح الأمثلة أدناه بعض المكوّنات التي تم تطبيق قيم الشكل التلقائية عليها:

الشكل 10. قيم الأشكال التلقائية لجميع مكونات المادة 3

يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق الشكل.

التأكيد

يتم التأكيد في 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 Design (مثل الأزرار والرقائق والبطاقات وشريط التنقّل) التي تتّبع أسلوب 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 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 Design في إنشاء رمز برمجي لتطبيق متوافق مع مختلف الأجهزة.

تخصيص مظهر المكوّن

وتشجع منصة M3 على التخصيص والمرونة. يتم تطبيق ألوان افتراضية على جميع المكونات ولكنها تعرض واجهات برمجة تطبيقات مرنة لتخصيص ألوانها إذا لزم الأمر.

توفّر معظم المكوّنات، مثل البطاقات والأزرار، عنصرًا تلقائيًا يعرِض واجهات ملفّات تعريف اللون والموضع العمودي التي يمكن تعديلها لتخصيص المكوّن:

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. تموج في M2 مقارنةً بـ M3

تجاوز حد التمرير

يستخدم الآن التمرير السريع تأثير التمدد عند حافة الحاويات التي يمكن التمرير فيها. تكون ميزة التمديد إلى ما بعد حدود الشاشة مفعّلة تلقائيًا في العناصر القابلة للتجميع التي تتضمّن حاوية لفائف الصفحات، مثل LazyColumn وLazyRow وLazyVerticalGrid، في الإصدار 1.1.0 من Compose Foundation والإصدارات الأحدث، بغض النظر عن مستوى واجهة برمجة التطبيقات.

الشكل 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، ونموذج الردّ الخاص بنا للتصميم التكيُّفي والمتوافق مع الأجهزة الجوّالة.

مزيد من المعلومات

لمزيد من المعلومات حول مظاهر Material في تطبيق "الإنشاء"، اطّلِع على موارد التالية:

أمثلة على التطبيقات

• نموذج تطبيق Reply M3

مستندات Google

• نقل البيانات من Material 2 إلى Material 3 في ميزة "الإنشاء"
• إرشادات تصميم المواد

مرجع واجهة برمجة التطبيقات ورمز المصدر

• مرجع Compose Material 3 API
• إنشاء عيّنات Material 3 في رمز المصدر

الفيديوهات

• Material You في Jetpack Compose