Material Design: کلیدی تصورات، Material You اور Material 3

Material Design کیا ہے؟

Material Design (کوڈ نام Project Quantum) Google کا ڈیزائن سسٹم ہے، جس کا پہلی بار Google I/O 2014 میں اعلان کیا گیا اور پہلی بار Android 5.0 Lollipop میں لاگو کیا گیا۔ Material Design کا مقصد کاغذ اور سیاہی کی طبعی خصوصیات — “مواد” (material) — پر مبنی تمام Google مصنوعات اور Android ایپس کے لیے ایک متحد بصری زبان بنانا ہے۔ فلیٹ ڈیزائن کے برعکس، Material Design طبعی گہرائی، سائے، تہیں اور حقیقت پسندانہ حرکت پذیری شامل کرتا ہے۔

2014 سے، Material Design تین اہم ورژن سے گزرا ہے: Material 1 (2014) — کارڈز اور فلوٹنگ ایکشن بٹن کے ساتھ اصل رہنما اصول؛ Material 2 (2018) — آسان بصری زبان، بڑھا ہوا فاصلہ، ٹائپوگرافی پر زور؛ Material 3 / Material You (2021) — ڈیوائس وال پیپر سے تیار کردہ متحرک رنگ سکیم، ذاتی بنانا۔ Google Play Console (2024) کے مطابق، اوپر والے 1000 Google Play ایپس میں سے 78% Android کے لیے Material Components استعمال کرتی ہیں۔

Material Design صرف ایک UI کٹ نہیں ہے، بلکہ ایک مکمل ڈیزائن سسٹم ہے: رسائی (a11y)، حرکت پذیری (Motion)، انکولی ترتیب، اجزاء (TopAppBar، BottomNavigation، Navigation Drawer)، ٹائپوگرافی (Material Type Scale) اور آئیکنوگرافی (Material Symbols) کے رہنما اصول۔ IT Sectr میں، ہم 2014 سے Android پروجیکٹس کے لیے Material Design کو بنیادی ڈیزائن سسٹم کے طور پر استعمال کر رہے ہیں، اسے Material Theme Builder کے ذریعے کلائنٹ کے برانڈ کے لیے اپنی مرضی کے مطابق بناتے ہیں۔

Material Design کے بنیادی اصول: مادیت، گہرائی، حرکت

مادیت (مواد بطور استعارہ) — Material Design کا بنیادی اصول، جو کاغذ کی طبعی خصوصیات مستعار لیتا ہے: مواد کی ایک سطح، موٹائی (1dp) ہوتی ہے، سایہ (Elevation) ڈالتا ہے اور جگہ (Bounds) گھیرتا ہے۔ انٹرفیس عناصر — کارڈز، بٹن، پینل — طبعی اشیاء کی طرح برتاؤ کرتے ہیں: دبانے پر اٹھتے ہیں (لہر اثر)، ایک دوسرے کو ڈھانپتے ہیں (Z-محور)، اور ظاہر ہونے پر حرکت پذیری کرتے ہیں (motion)۔

گہرائی (Depth) Elevation کے ذریعے بنائی جاتی ہے — ایک مواد کی خاصیت جو Z-محور پر اس کی پوزیشن متعین کرتی ہے۔ Elevation (8dp، 16dp) جتنی زیادہ ہوگی، عنصر کا سایہ اتنا بڑا ہوگا۔ کارڈ کی Elevation 1–2dp، FAB — 6dp، Modal BottomSheet — 16dp ہے۔ گہرائی درجہ بندی بتانے کے لیے استعمال ہوتی ہے: موڈل ونڈوز اور ڈائیلاگ ہمیشہ مواد سے اوپر ہوتے ہیں، Navigation Drawer Action Bar سے اوپر ہوتا ہے۔ گہرائی 3D نقطہ نظر کو ایک چپٹی 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 اہم رنگ نکالتا ہے اور حساب شدہ WCAG AA کنٹراسٹ تناسب کے ساتھ 15 ٹونز (primary، secondary، tertiary، error ان کے light/dark متغیرات کے ساتھ) کا مکمل رنگ پیلیٹ تیار کرتا ہے۔

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 پلگ ان میں برآمد کرنے کی اجازت دیتا ہے۔

Android کے لیے Material Components: XML اور Compose کے ذریعے نفاذ

Android کے لیے Material Components (MDC-Android) Google کی سرکاری لائبریری ہے جو Material Design رہنما اصولوں پر عمل کرنے والے تیار View اجزاء فراہم کرتی ہے۔ 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>

مثال MaterialToolbar (TopAppBar)، اپنی مرضی کے پیڈنگ اور اسٹروک کے ساتھ MaterialCardView، ڈراپ ڈاؤن فہرست کے ساتھ TextInputLayout اور Material3 اسٹائل میں MaterialButton کے ساتھ Material اسکرین دکھاتی ہے۔ FAB Toolbar سے منسلک ہے — ماسٹر ڈیٹیل انٹرفیس کے لیے ایک معیاری پیٹرن۔

@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()
            }
        }
    }
}

کوڈ Compose میں Material You تھیم کو ظاہر کرتا ہے: dynamicLightColorScheme() ڈیوائس وال پیپر کی بنیاد پر خود بخود رنگ سکیم تیار کرتا ہے۔ Scaffold TopAppBar اور FAB کے ساتھ ایک معیاری ڈھانچہ فراہم کرتا ہے۔ OutlinedTextField اور Button Material 3 اجزاء ہیں جن کے رنگ متحرک colorScheme سے لیے گئے ہیں۔ وال پیپر تبدیل ہونے پر، تمام ایپ رنگ خود بخود اپ ڈیٹ ہوجاتے ہیں — کوڈ میں تبدیلی کے بغیر ذاتی بنانا۔

iOS پر Material Design: iOS کے لیے Material Components

iOS کے لیے Material Components (MDC-iOS) ایک لائبریری ہے جو iOS پر Material Design کو لاگو کرنے والے مقامی UIKit اجزاء فراہم کرتی ہے۔ چونکہ iOS کا اپنا ڈیزائن سسٹم (Human Interface Guidelines) ہے، iOS پر Material اجزاء کم کثرت سے استعمال ہوتے ہیں لیکن کراس پلیٹ فارم ایپس میں مانگ ہے جنہیں Android اور iOS کے درمیان یکساں بصری اسٹائل کی ضرورت ہوتی ہے۔

MDC-iOS میں Material Design کے لیے اسٹائل کردہ AppBar، BottomNavigation، Cards، Chips، Dialogs، Snackbar، Tabs اور TextFields شامل ہیں۔ لائبریری CocoaPods (pod 'MaterialComponents') اور Swift Package Manager کے ذریعے دستیاب ہے۔ Apple Human Interface Guidelines (2024) مقامی UIKit اجزاء کو مکمل طور پر Material کے مساوی سے تبدیل کرنے کی سفارش نہیں کرتی، لیکن مقامی نیویگیشن (NavigationStack، UITabBarController) کو برقرار رکھنے کی شرط پر حسب ضرورت انٹرفیس کے لیے Material اجزاء کے استعمال کی اجازت دیتی ہے۔

IT Sectr میں، ہم iOS پر Material Components صرف Android سے پورٹ کردہ ایپس (Flutter یا Kotlin Multiplatform کے ساتھ کراس پلیٹ فارم پروجیکٹس) کے لیے استعمال کرتے ہیں۔ مقامی iOS ایپس کے لیے، ہم HIG پر عمل کرتے ہیں اور حسب ضرورت برانڈنگ کے ساتھ UIKit/SwiftUI استعمال کرتے ہیں۔ Swift Community سروے (2024) کے مطابق، iOS کے لیے Material Components 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 کی بدولت بہترین انتخاب ہے۔