Material Design: مفاهیم کلیدی، Material You و Material 3

Material Design چیست؟

Material Design (نام رمزی Project Quantum) — سیستم طراحی گوگل، اولین بار در Google I/O ۲۰۱۴ اعلام شد و اولین بار در Android 5.0 Lollipop پیاده‌سازی گردید. هدف Material Design ایجاد یک زبان بصری یکپارچه برای تمام محصولات گوگل و برنامه‌های Android است که بر اساس ویژگی‌های فیزیکی کاغذ و جوهر — «material» — بنا شده است. برخلاف طراحی تخت (Flat Design)، Material Design عمق فیزیکی، سایه‌ها، لایه‌ها و انیمیشن واقع‌گرایانه اضافه می‌کند.

از سال ۲۰۱۴، Material Design سه نسخه اصلی را پشت سر گذاشته است: Material 1 (2014) — راهنماهای اصلی با کارت‌ها و Floating Action Button؛ Material 2 (2018) — ساده‌سازی زبان بصری، فاصله‌های بیشتر، تأکید بر تایپوگرافی؛ Material 3 / Material You (2021) — طرح رنگ پویا تولید شده از کاغذدیواری دستگاه، شخصی‌سازی. طبق Google Play Console (2024)، ۷۸٪ از ۱۰۰۰ برنامه برتر Google Play از Material Components برای Android استفاده می‌کنند.

Material Design فقط یک UI-kit نیست، بلکه یک سیستم طراحی کامل است: راهنماهای دسترسی‌پذیری (a11y)، انیمیشن (Motion)، چیدمان‌های تطبیقی (Responsive Layout)، اجزاء (TopAppBar، BottomNavigation، Navigation Drawer)، تایپوگرافی (Material Type Scale) و نمادشناسی (Material Symbols). در IT Sectr ما از Material Design به عنوان سیستم طراحی پایه برای پروژه‌های Android از سال ۲۰۱۴ استفاده می‌کنیم و آن را از طریق Material Theme Builder برای برند مشتری سفارشی می‌کنیم.

اصول اصلی Material Design: مادی‌گرایی، عمق، حرکت

مادی‌گرایی (Material as Metaphor) — اصل کلیدی 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 تزئینی نیست، بلکه کاربردی است. انیمیشن باید: ۱) توجه کاربر را هدایت کند (باز شدن کارت با جزئیات)، ۲) روابط فضایی را توضیح دهد (AppBar هنگام اسکرول به TopAppBar تبدیل می‌شود)، ۳) روانی گذرها را تضمین کند (shared element transition بین صفحه‌ها). طبق Google Material Guidelines (2024)، انیمیشن نباید از 300ms برای تعاملات خرد و 500ms برای گذر بین صفحه‌ها تجاوز کند — انیمیشن‌های طولانی‌تر به عنوان تأخیر درک می‌شوند.

Material You (Material Design 3): رنگ‌های پویا و شخصی‌سازی

Material You (Material Design 3) — بزرگ‌ترین به‌روزرسانی سیستم طراحی که در سال ۲۰۲۱ همراه با Android 12 معرفی شد. نوآوری اصلی — رنگ‌های پویا (Monet): سیستم به طور خودکار ۵ رنگ کلیدی را از کاغذدیواری دستگاه استخراج می‌کند و یک پالت رنگی کامل از ۱۵ تن (primary، secondary، tertiary، error با انواع light/dark) با نسبت‌های کنتراست WCAG AA محاسبه شده تولید می‌کند.

مدل رنگی Material You بر پایه HCT (Hue, Chroma, Tone) ساخته شده است — فضای رنگی توسعه‌یافته توسط گوگل که ادراک انسان (Hue) را با اشباع (Chroma) و روشنایی (Tone) ترکیب می‌کند. برخلاف HSL/HSV، HCT تضمین می‌کند که تمام تن‌های تولید شده دارای کنتراست مشخصی روی زمینه سفید و سیاه هستند. Google Material Guidelines (2024) استفاده از فقط انواع تونال پالت اصلی برای متن، تن‌های surface برای پس‌زمینه و primary-container برای سطوح تأکیدی را توصیه می‌کند.

کاربر می‌تواند یکی از ۴ طرح شخصی‌سازی را انتخاب کند: TonalSpot (رنگ اصلی از کاغذدیواری)، Vibrant (اشباع‌ترین رنگ)، Expressive (رنگ‌های زنده اضافی)، Neutral (طیف تکرنگ). Material Theme Builder (material-foundation.github.io) امکان خروجی تم Material 3 به XML، Compose Theme، CSS و حتی پلاگین Figma را فراهم می‌کند.

Material Components برای Android: پیاده‌سازی با XML و Compose

Material Components برای Android (MDC-Android) — کتابخانه رسمی گوگل که اجزای View آماده مطابق با راهنماهای Material Design ارائه می‌دهد. برای چیدمان XML، کتابخانه از طریق وابستگی com.google.android.material:material در دسترس است، نسخه فعلی در ژوئن ۲۰۲۶ — 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 Components برای iOS

Material Components برای 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 Components در iOS فقط برای برنامه‌هایی که از Android منتقل می‌شوند استفاده می‌کنیم (پروژه‌های چندسکویی با Flutter یا Kotlin Multiplatform). برای برنامه‌های بومی iOS از HIG پیروی می‌کنیم و از UIKit/SwiftUI با سبک‌دهی سفارشی تحت برند مشتری استفاده می‌کنیم. طبق نظرسنجی Swift Community (2024)، ۸٪ توسعه‌دهندگان از Material Components برای iOS استفاده می‌کنند، عمدتاً در پروژه‌های هیبریدی.

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 به شدت به اکوسیستم اپل وابسته است، اما بهترین تطابق را با انتظارات پلتفرمی کاربران فراهم می‌کند. برای پروژه‌های چندسکویی، Material Design به لطف Flutter و Jetpack Compose Multiplatform انتخاب بهینه است.