Material Design: المفاهيم الرئيسية، Material You و Material 3

ما هو Material Design؟

Material Design (الاسم الرمزي Project Quantum) هو نظام تصميم Google، تم الإعلان عنه لأول مرة في Google I/O 2014 وتم تطبيقه لأول مرة في Android 5.0 Lollipop. الهدف من Material Design هو إنشاء لغة مرئية موحدة لجميع منتجات Google وتطبيقات Android، تعتمد على الخصائص الفيزيائية للورق والحبر — «المادة». على عكس التصميم المسطح (Flat Design)، يضيف Material Design عمقاً مادياً وظلالاً وطبقات ورسوماً متحركة واقعية.

منذ 2014، مر Material Design بثلاث إصدارات رئيسية: Material 1 (2014) — الإرشادات الأصلية مع البطاقات وزر الإجراء العائم (FAB)؛ Material 2 (2018) — تبسيط اللغة المرئية، زيادة المسافات، التركيز على الخطوط؛ Material 3 / Material You (2021) — نظام ألوان ديناميكي يتم توليده من خلفية الجهاز، تخصيص. وفقاً لـ Google Play Console (2024)، 78% من أفضل 1000 تطبيق في Google Play تستخدم Material Components لنظام Android.

Material Design ليس مجرد مجموعة واجهات UI، بل نظام تصميم كامل: إرشادات لإمكانية الوصول (a11y)، الرسوم المتحركة (Motion)، التخطيطات المتجاوبة، المكونات (TopAppBar، BottomNavigation، Navigation Drawer)، الخطوط (Material Type Scale) والأيقونات (Material Symbols). في IT Sectr، نستخدم Material Design كنظام تصميم أساسي لمشاريع Android منذ 2014، ونخصصه لكل علامة تجارية للعميل من خلال Material Theme Builder.

المبادئ الأساسية لـ Material Design: المادية والعمق والحركة

المادية (المادة كاستعارة) — المبدأ الأساسي لـ Material Design، المستعير للخصائص الفيزيائية للورق: المادة لها سطح، سمك (1dp)، تلقي بظلها (Elevation) وتشغل حيزاً (Bounds). عناصر الواجهة — البطاقات، الأزرار، اللوحات — تتصرف كأشياء مادية: ترتفع عند الضغط (تأثير ripple)، تتداخل فوق بعضها البعض (المحور Z)، وتتحرك بالرسوم المتحركة عند الظهور (motion).

العمق (Depth) يتم إنشاؤه من خلال Elevation — خاصية المادة التي تحدد موقعها على المحور Z. كلما زادت Elevation (8dp، 16dp)، زاد الظل الذي يلقيه العنصر. البطاقة لها Elevation 1–2dp، FAB — 6dp، Modal BottomSheet — 16dp. يُستخدم العمق لنقل التسلسل الهرمي: النوافذ المشروطة والحوارات تكون دائماً فوق المحتوى، Navigation Drawer فوق Action Bar. يستبدل العمق المنظور ثلاثي الأبعاد بطبقة Z مسطحة، مما يحافظ على أداء العرض.

الحركة (Motion) — الرسوم المتحركة في Material Design ليست زخرفية بل وظيفية. يجب أن: 1) توجه انتباه المستخدم (بطاقة تتوسع مع التفاصيل)، 2) تشرح العلاقات المكانية (AppBar يتحول إلى TopAppBar عند التمرير)، 3) تضمن انتقالات سلسة (انتقال العنصر المشترك بين الشاشات). وفقاً لـ Google Material Guidelines (2024)، يجب ألا تتجاوز الرسوم المتحركة 300ms للتفاعلات الدقيقة و 500ms لانتقالات الشاشة — فالرسوم الأطول تُعتبر تأخيرات.

Material You (Material Design 3): الألوان الديناميكية والتخصيص

Material You (Material Design 3) هو أكبر تحديث لنظام التصميم، تم تقديمه في 2021 مع Android 12. الابتكار الرئيسي — الألوان الديناميكية (Monet): يستخرج النظام تلقائياً 5 ألوان رئيسية من خلفية الجهاز ويولد لوحة ألوان كاملة من 15 درجة (primary، secondary، tertiary، error مع متغيراتها light/dark) مع نسب تباين WCAG AA محسوبة.

نموذج ألوان Material You مبني على HCT (Hue, Chroma, Tone) — فضاء لوني طورته Google يجمع بين الإدراك البشري (Hue) والتشبع (Chroma) والسطوع (Tone). على عكس HSL/HSV، يضمن HCT أن جميع الدرجات المولدة لها التباين المطلوب على الخلفيات البيضاء والسوداء. توصي Google Material Guidelines (2024) باستخدام المتغيرات اللونية فقط من اللوحة الرئيسية للنص، ودرجات surface للخلفيات، و primary-container للأسطح البارزة.

يمكن للمستخدم الاختيار من بين 4 أنظمة تخصيص: TonalSpot (اللون الرئيسي من الخلفية)، Vibrant (اللون الأكثر تشبعاً)، Expressive (ألوان زاهية إضافية)، Neutral (مجموعة أحادية اللون). يتيح Material Theme Builder (material-foundation.github.io) تصدير سمة Material 3 إلى XML و Compose Theme و CSS وحتى إضافة Figma.

مكونات Material لنظام Android: التنفيذ عبر XML و Compose

مكونات Material لنظام Android (MDC-Android) هي المكتبة الرسمية من Google التي توفر مكونات View جاهزة تتبع إرشادات Material Design. لتخطيطات XML، المكتبة متاحة عبر التبعية com.google.android.material:material، الإصدار الحالي حتى يونيو 2026 — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

يظهر المثال شاشة Material مع MaterialToolbar (TopAppBar)، MaterialCardView مع حشوة وحدود مخصصة، TextInputLayout مع قائمة منسدلة، و MaterialButton بنمط Material3. FAB مثبت على Toolbar — نمط قياسي لواجهات master-detail.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("مدينة") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("إرسال")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

يظهر الكود سمة Material You في Compose: dynamicLightColorScheme() تولد تلقائياً نظام ألوان بناءً على خلفية الجهاز. Scaffold يوفر هيكلاً قياسياً مع TopAppBar و FAB. OutlinedTextField و Button هما مكونا Material 3 تأخذ ألوانهما من colorScheme الديناميكي. عند تغيير الخلفية، يتم تحديث جميع ألوان التطبيق تلقائياً — تخصيص دون تعديل الكود.

Material Design على iOS: مكونات Material لنظام iOS

مكونات Material لنظام iOS (MDC-iOS) هي مكتبة توفر مكونات UIKit أصلية تنفذ Material Design على iOS. نظراً لأن iOS له نظام التصميم الخاص به (Human Interface Guidelines)، فإن مكونات Material على iOS تُستخدم بشكل أقل ولكنها مطلوبة في التطبيقات متعددة المنصات التي تتطلب نمطاً مرئياً موحداً بين Android و iOS.

تتضمن MDC-iOS AppBar و BottomNavigation و Cards و Chips و Dialogs و Snackbar و Tabs و TextFields، مصممة بنمط Material Design. المكتبة متاحة عبر CocoaPods (pod 'MaterialComponents') و Swift Package Manager. Apple Human Interface Guidelines (2024) لا توصي باستبدال مكونات UIKit الأصلية بالكامل بنظيراتها من Material، لكنها تسمح باستخدام مكونات Material للواجهات المخصصة بشرط الحفاظ على التنقل الأصلي (NavigationStack، UITabBarController).

في IT Sectr، نستخدم مكونات Material على iOS فقط للتطبيقات المنقولة من Android (مشاريع متعددة المنصات مع Flutter أو Kotlin Multiplatform). للتطبيقات iOS الأصلية، نتبع HIG ونستخدم UIKit/SwiftUI مع تخصيص العلامة التجارية. وفقاً لاستطلاع Swift Community (2024)، مكونات Material لنظام iOS يستخدمها 8% من المطورين، خاصة في المشاريع الهجينة.

Material Design مقابل أنظمة التصميم الأخرى

Material Design ليس نظام التصميم الوحيد في السوق. المنافسون الرئيسيون: Apple Human Interface Guidelines (iOS/macOS)، Fluent Design (Microsoft)، Carbon (IBM)، Polaris (Shopify)، Lightning (Salesforce). كل نظام محسّن لمنصته: Material Design لنظام Android، HIG لنظام iOS، Fluent لنظام Windows. اختيار نظام التصميم يحدد حسب المنصة المستهدفة والنظام البيئي.

الميزة الرئيسية لـ Material Design هي انفتاحه وطبيعته متعددة المنصات. الإرشادات والمكونات والأدوات (Material Theme Builder) متاحة مجاناً، مما يجعل النظام شائعاً بين الشركات الناشئة والمطورين المستقلين. Apple HIG مرتبط بإحكام بالنظام البيئي لـ Apple لكنه يضمن أفضل توافق مع توقعات المنصة. للمشاريع متعددة المنصات، Material Design هو الخيار الأمثل بفضل Flutter و Jetpack Compose Multiplatform.