Material Design 3 في Compose

يتيح Jetpack Compose تنفيذ Material Design 3، وهو المرحلة التالية من تطوير نظام Material Design. تشمل Material 3 تصاميم ومكونات وميزات تخصيص Material You المعدّلة مثل اللون الديناميكي، وهي مصممة لتكون متوافقة مع النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث.

في ما يلي، نوضّح كيفية تنفيذ Material Design 3 باستخدام نموذج تطبيق Reply كمثال. تعتمد عينة Reply بالكامل على Material Design 3.

نموذج تطبيق للردّ باستخدام 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
}

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

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

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

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

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

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

النمط اللوني

أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية. يرتبط كلّ من هذه الألوان بلوحة ألوان تتضمّن 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)
// ..
// ..

  • يحتوي 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، حيث تُستخرج إحدى الخطوات 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
}

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

يمكنك الوصول إلى ألوان مظهر Material في تطبيقك من خلال MaterialTheme.colorScheme:

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

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

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

يستخدم تصميم نموذج تطبيق Reply لون on-primary-container فوق primary-container للتأكيد على العنصر المحدّد.

الحاوية الأساسية وحقول النص بلون on-primary-container
الشكل 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,
    )
}

يمكنك هنا أن ترى في درج "التنقل خلال الرد" كيف يتم استخدام ألوان الحاوية الثانوية والثالثة في التباين لإنشاء التوكيد والتمييز.

مجموعة الحاوية الثانوية والحاوية الثانوية التي تحتوي على زر الإجراء العائم
الشكل 6. مجموعة الحاوية الثانوية والحاوية الثانوية التي تحتوي على زر الإجراء العائم

أسلوب الخط

يحدد التصميم المتعدد الأبعاد 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. نص كبير في النص الرئيسي ونص متوسط في النص الرئيسي ونص متوسط في التصنيف لاستخدامات مختلفة للخطّ.

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

بعد تحديد Typography، نقْله إلى MaterialTheme M3:

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

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

يمكنك استرداد أسلوب الخط المقدَّم في M3 MaterialTheme القابل للإنشاء من خلال استخدام MaterialTheme.typography على النحو التالي:

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

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

الأشكال

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

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

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

توفّر أداة الإنشاء فئة 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)
)

بعد تحديد Shapes، يمكنك تمريرها إلى MaterialTheme M3:

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

استخدام الأشكال

يمكنك تخصيص مقياس الشكل لجميع المكوّنات في MaterialTheme أو يمكنك إجراء ذلك لكل مكوّن على حدة.

طبِّق الشكلَين المتوسط والكبير بالقيم التلقائية:

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

شكل متوسط للبطاقة والشكل الكبير لزر الإجراء "عائم" في نموذج تطبيق Reply
الشكل 9. شكل متوسط للبطاقة والشكل الكبير لزر الإجراء العائم في نموذج تطبيق Reply

هناك شكلان آخران، RectangleShape وCircleShape، وهما جزء من ميزة "الإنشاء". يكون شكل المستطيل بدون نصف قطر حدي، بينما يُظهر شكل الدائرة حواف محاطة بالكامل:

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

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

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

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

التأكيد

يتم التأكيد في M3 باستخدام اختلافات في اللون ومجموعاته المتوافقة. في M3، هناك طريقتان لإضافة تركيز إلى واجهة المستخدم:

  • استخدام ألوان السطح ولون السطح المتغير والخلفية إلى جانب ألوان السطح المتغير والألوان المتغيرة للسطح من نظام ألوان M3 الموسّع على سبيل المثال، يمكن استخدام surface مع on-surface-variant ويمكن استخدام surface-variant مع on-surface لتوفير مستويات مختلفة من التركيز.
استخدام مجموعات ألوان محايدة للتأكيد
الشكل 11. استخدام مجموعات ألوان محايدة للتأكيد
  • استخدام كثافة خط مختلفة للنص لقد اطّلعت أعلاه على أنّه يمكنك تحديد قيم تقديرية مخصّصة لمقياس الأنواع من أجل توفير درجة تركيز مختلفة.

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

الارتفاع

تمثل المادة 3 المسقط الرأسي باستخدام تراكبات ألوان الدرجات اللونية بشكل أساسي. إنها طريقة جديدة للتمييز بين الحاويات والأسطح عن بعضها البعض - يؤدي زيادة ارتفاع درجات اللون إلى استخدام نغمة أكثر بروزًا - بالإضافة إلى الظلال.

الارتفاع اللوني مع الارتفاع الناتج عن الظل
الشكل 12. ارتفاع درجة اللون مع ارتفاع الظلE

تم أيضًا تغيير تراكب الارتفاع في المظاهر الداكنة إلى تراكب ألوان نغمية في Material 3. يأتي لون التراكب من خانة اللون الأساسي.

المسقط الرأسي للظلال في مقابل المسقط الرأسي للألوان في Material Design 3
الشكل 13. موضع الظل مقارنةً بموضع القيمة اللونية في Material Design 3

سطح M3: وهو العنصر الأساسي الذي يمكن دمجه في معظم مكوّنات M3، ويشمل ميزتَي التحسين اللوني وتحسين التظليل:

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

مكوّنات التصميم المادّي

يوفّر أسلوب Material Design مجموعة غنية من مكونات Material Design (مثل الأزرار والرقائق والبطاقات وشريط التنقّل) التي تتّبع أسلوب Material Theme وتساعدك في إنشاء تطبيقات جميلة باستخدام أسلوب Material Design. يمكنك بدء استخدام المكوّنات التي تتضمّن سمات تلقائية مباشرةً.

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

يوفّر 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),
    )
}

  • زر معبأ لإجراء عالي التوكيد:

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

  • زر نصي للإجراء الذي يُمنَح أهمية منخفضة:

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

يمكنك الاطّلاع على مزيد من المعلومات حول الأزرار والمكوّنات الأخرى في Material Design. توفّر واجهة Material 3 مجموعة كبيرة من مجموعات المكوّنات، مثل الأزرار وأشرطة التطبيقات ومكونات التنقّل المصمّمة خصيصًا لحالات الاستخدام وأحجام الشاشات المختلفة.

توفّر Material أيضًا العديد من مكوّنات التنقّل التي تساعدك في تنفيذ التنقّل، استنادًا إلى أحجام الشاشات وحالاتها المختلفة.

يتم استخدام NavigationBar للأجهزة المدمجة عندما تريد استهداف 5 وجهات أو أقل:

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(على يسار الشاشة)
الشكل 15. عرض الردّ على BottomNavigationBar (على يمين الشاشة) وNavigationRail (على يسار الشاشة)

يمكنك الردّ باستخدام كليهما في المظهر التلقائي لتوفير تجربة شاملة للمستخدمين على جميع أحجام الأجهزة.

يتم استخدام NavigationDrawer على الأجهزة اللوحية متوسطة الحجم إلى الكبيرة التي تتوفّر فيها مساحة كافية لعرض التفاصيل. يمكنك استخدام PermanentNavigationDrawer أو ModalNavigationDrawer مع NavigationRail.

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

عرض الردّ على لائحة التنقل الدائمة
الشكل 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
}

يمكنك الاطّلاع على مزيد من المعلومات عن تخصيص Material 3.

واجهة مستخدِم النظام

تستند بعض جوانب Material You إلى النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث. هناك مجالان رئيسيان حيث توجد تغييرات، وهما التموّج والتمرير الزائد. وليس عليك اتّخاذ أي إجراء إضافي لتنفيذ هذه التغييرات.

تمويج

يستخدم تأثير "تموج" الآن وميضًا خفيفًا لإضاءة الأسطح عند الضغط عليها. تستخدِم أداة إنشاء تموّج Material عنصر RippleDrawable الأساسي في نظام Android، لذا يتوفّر التموّج البراق على الإصدار 12 من نظام Android والإصدارات الأحدث لجميع مكونات Material.

التموّج في M2 مقابل M3
الشكل 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
    )
) {
}

تباين كافٍ (على اليسار) مقابل تباين ضعيف (على اليمين)
الشكل 20. تباين كافٍ (على اليسار) مقابل تباين ضعيف (على اليمين)

سهولة استخدام أسلوب الخط

يُحدِّث مقياس النوع M3 منحدر النوع الثابت وقيمه لتقديم إطار عمل مبسط وديناميكي لفئات الحجم التي تتدرج على جميع الأجهزة.

على سبيل المثال، في M3، يمكن تعيين قيم مختلفة للشاشة الصغيرة بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.

الشاشات الكبيرة

تقدّم Material إرشادات حول التنسيقات المتكيفة والأجهزة القابلة للطي لجعل تطبيقاتك سهلة الاستخدام وتحسين بيئة العمل للمستخدمين الذين يحملون أجهزة كبيرة.

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

يمكنك الاطّلاع على مزيد من المعلومات حول إرشادات جودة التطبيقات المتوافقة مع الشاشات الكبيرة في Android، ونموذج الردّ الخاص بنا للتصميم التكيُّفي والمتوافق مع الأجهزة الجوّالة.

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

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

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

مستندات Google

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

الفيديوهات