Material Design: əsas anlayışlar, Material You və Material 3

Material Design nədir?

Material Design (kod adı Project Quantum) — Google-un dizayn sistemi, ilk dəfə Google I/O 2014-də elan edilmiş və ilk dəfə Android 5.0 Lollipop-da tətbiq edilmişdir. Material Design-in məqsədi Google-un bütün məhsulları və Android tətbiqləri üçün kağız və mürəkkəbin fiziki xüsusiyyətlərinə — “material” a əsaslanan vahid vizual dil yaratmaqdır. Düz dizayndan (Flat Design) fərqli olaraq, Material Design fiziki dərinlik, kölgələr, təbəqələr və realist animasiya əlavə edir.

2014-cü ildən Material Design üç əsas versiya keçirmişdir: Material 1 (2014) — kartlar və Floating Action Button ilə orijinal təlimatlar; Material 2 (2018) — vizual dilin sadələşdirilməsi, artırılmış boşluqlar, tipoqrafiyaya vurğu; Material 3 / Material You (2021) — cihazın divar kağızları əsasında yaradılan dinamik rəng sxemi, fərdiləşdirmə. Google Play Console (2024) məlumatlarına görə, Google Play-də ən yaxşı 1000 tətbiqin 78%-i Android üçün Material Components-dən istifadə edir.

Material Design sadəcə UI-kit deyil, tam dizayn sistemidir: əlçatanlıq (a11y), animasiya (Motion), adaptiv tərtibatlar (Responsive Layout), komponentlər (TopAppBar, BottomNavigation, Navigation Drawer), tipoqrafiya (Material Type Scale) və ikonoqrafiya (Material Symbols) üzrə təlimatlar. IT Sectr-də 2014-cü ildən bəri Android layihələri üçün Material Design-i əsas dizayn sistemi kimi istifadə edirik, onu Material Theme Builder vasitəsilə müştəri markasına uyğunlaşdırırıq.

Material Design-in əsas prinsipləri: materiallıq, dərinlik, hərəkət

Materiallıq (Material as Metaphor) — Material Design-in əsas prinsipi, kağızın fiziki xüsusiyyətlərini mənimsəyir: materialın səthi, qalınlığı (1dp) var, kölgə salır (Elevation) və yer tutur (Bounds). İnterfeys elementləri — kartlar, düymələr, panellər — fiziki obyektlər kimi davranır: basıldıqda qalxır (ripple effekti), bir-birini örtür (Z oxu) və görünəndə animasiya olunur (motion).

Dərinlik (Depth) Elevation vasitəsilə yaradılır — materialın Z oxu üzrə mövqeyini təyin edən xüsusiyyət. Elevation nə qədər yüksəkdirsə (8dp, 16dp), element bir o qədər böyük kölgə salır. Kart 1–2dp Elevation-a malikdir, FAB — 6dp, Modal BottomSheet — 16dp. Dərinlik iyerarxiyanı ötürmək üçün istifadə olunur: modal pəncərələr və dialoqlar həmişə məzmundan yüksəkdir, Navigation Drawer — Action Bar-dan yuxarıda. Dərinlik üçölçülü perspektivi düz Z təbəqəsi ilə əvəz edir, renderləmə performansını qoruyur.

Hərəkət (Motion) — Material Design-də animasiya dekorativ deyil, funksionaldır. Animasiya: 1) istifadəçinin diqqətini yönəltməli (ətraflı məlumatla kartın açılması), 2) məkan əlaqələrini izah etməli (sürüşdürərkən AppBar TopAppBar-a çevrilir), 3) keçidlərin hamarlığını təmin etməlidir (ekranlar arasında shared element transition). Google Material Guidelines (2024) məlumatlarına görə, animasiya mikroqarşılıqlı təsirlər üçün 300ms-dən, ekranlar arası keçidlər üçün 500ms-dən çox olmamalıdır — daha uzun animasiyalar gecikmə kimi qəbul edilir.

Material You (Material Design 3): dinamik rənglər və fərdiləşdirmə

Material You (Material Design 3) — Android 12 ilə birlikdə 2021-ci ildə təqdim edilmiş dizayn sisteminin ən böyük yeniləməsidir. Əsas yenilik — dinamik rənglər (Monet): sistem cihazın divar kağızlarından avtomatik olaraq 5 əsas rəng çıxarır və WCAG AA kontrast nisbətləri ilə hesablanmış 15 tondan (primary, secondary, tertiary, error onların light/dark variantları ilə) ibarət tam rəng palitrası yaradır.

Material You rəng modeli HCT (Hue, Chroma, Tone) əsasında qurulmuşdur — Google tərəfindən hazırlanmış, insan qavrayışını (Hue) doyma (Chroma) və parlaqlıq (Tone) ilə birləşdirən rəng sahəsi. HSL/HSV-dən fərqli olaraq, HCT bütün yaradılmış tonların ağ və qara fonda müəyyən kontrasta malik olmasını təmin edir. Google Material Guidelines (2024) mətn üçün yalnız əsas palitranın tonal variantlarından, fon üçün surface tonlarından və vurğu səthləri üçün primary-container-dan istifadə etməyi tövsiyə edir.

İstifadəçi 4 fərdiləşdirmə sxemindən birini seçə bilər: TonalSpot (divar kağızlarından əsas rəng), Vibrant (ən doymuş rəng), Expressive (əlavə parlaq rənglər), Neutral (monoxrom qamma). Material Theme Builder (material-foundation.github.io) Material 3 mövzusunu XML, Compose Theme, CSS və hətta Figma plagini kimi ixrac etməyə imkan verir.

Android üçün Material Components: XML və Compose ilə tətbiq

Android üçün Material Components (MDC-Android) — Material Design təlimatlarına uyğun hazır View komponentləri təqdim edən rəsmi Google kitabxanasıdır. XML tərtibatı üçün kitabxana com.google.android.material:material asılılığı vasitəsilə mövcuddur, iyun 2026 üçün cari versiya — 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>

Nümunə MaterialToolbar (TopAppBar), fərdi boşluqlar və haşiyə ilə MaterialCardView, açılan siyahı ilə TextInputLayout və Material3 stilində MaterialButton ilə Material ekranını göstərir. FAB, Toolbar-a lövbər kimi bağlanmışdır — master-detail interfeysləri üçün standart sxem.

@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("Şəhər") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Göndər")
            }
        }
    }
}

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

Kod Compose-da Material You mövzusunu nümayiş etdirir: dynamicLightColorScheme() cihazın divar kağızları əsasında avtomatik olaraq rəng sxemi yaradır. Scaffold TopAppBar və FAB ilə standart çərçivə təqdim edir. OutlinedTextField və Button Material 3 komponentləridir, rəngləri dinamik colorScheme-dən götürülür. Divar kağızı dəyişdirildikdə tətbiqin bütün rəngləri avtomatik yenilənir — kod dəyişikliyi olmadan fərdiləşdirmə.

iOS-da Material Design: iOS üçün Material Components

iOS üçün Material Components (MDC-iOS) — iOS-da Material Design-i tətbiq edən yerli UIKit komponentləri təqdim edən kitabxanadır. iOS öz dizayn sisteminə (Human Interface Guidelines) malik olduğundan, iOS-da Material komponentləri daha az istifadə olunur, lakin Android və iOS arasında vahid vizual stil tələb olunan çoxplatformalı tətbiqlərdə tələb olunur.

MDC-iOS Material Design stilində AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs və TextFields daxildir. Kitabxana CocoaPods (pod 'MaterialComponents') və Swift Package Manager vasitəsilə mövcuddur. Apple Human Interface Guidelines (2024) yerli UIKit komponentlərinin Material analoqları ilə tamamilə əvəz edilməsini tövsiyə etmir, lakin yerli naviqasiyanı (NavigationStack, UITabBarController) qorumaq şərti ilə fərdi interfeyslər üçün Material komponentlərinin istifadəsinə icazə verir.

IT Sectr-də iOS-da Material Components-dən yalnız Android-dən port edilən tətbiqlər üçün istifadə edirik (Flutter və ya Kotlin Multiplatform ilə çoxplatformalı layihələr). Yerli iOS tətbiqləri üçün HIG-ə əməl edirik və müştəri markası altında fərdi stilizasiya ilə UIKit/SwiftUI istifadə edirik. Swift Community sorğusuna (2024) görə, iOS üçün Material Components-dən 8% tərtibatçı istifadə edir, əsasən hibrid layihələrdə.

Material Design digər dizayn sistemləri ilə müqayisədə

Material Design — bazarda yeganə dizayn sistemi deyil. Ən böyük rəqiblər: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Hər bir sistem öz platforması üçün optimallaşdırılmışdır: Material Design — Android, HIG — iOS, Fluent — Windows üçün. Dizayn sisteminin seçimi hədəf platforma və ekosistemlə müəyyən edilir.

Material Design-in əsas üstünlüyü — açıqlıq və çoxplatformalılıq. Təlimatlar, komponentlər və alətlər (Material Theme Builder) pulsuz mövcuddur ki, bu da sistemi startaplar və müstəqil tərtibatçılar arasında populyar edir. Apple HIG Apple ekosistemi ilə sıx bağlıdır, lakin istifadəçilərin platforma gözləntilərinə ən yaxşı uyğunluğu təmin edir. Çoxplatformalı layihələr üçün Material Design Flutter və Jetpack Compose Multiplatform sayəsində optimal seçimdir.