Material Design: asosiy tushunchalar, Material You va Material 3

Material Design nima?

Material Design (kod nomi Project Quantum) — Google dizayn tizimi, birinchi marta Google I/O 2014-da e’lon qilingan va birinchi marta Android 5.0 Lollipop-da amalga oshirilgan. Material Design-ning maqsadi Google-ning barcha mahsulotlari va Android ilovalari uchun qog‘oz va siyohning fizik xususiyatlariga — “material” ga asoslangan yagona vizual til yaratishdir. Yassi dizayndan (Flat Design) farqli o‘laroq, Material Design fizik chuqurlik, soyalar, qatlamlar va realistik animatsiya qo‘shadi.

2014-yildan buyon Material Design uchta asosiy versiyani bosib o‘tdi: Material 1 (2014) — kartochkalar va Floating Action Button bilan original yo‘riqnomalar; Material 2 (2018) — vizual tilni soddalashtirish, kattalashtirilgan bo‘shliqlar, tipografiyaga urg‘u; Material 3 / Material You (2021) — qurilma fon rasmlari asosida yaratilgan dinamik rang sxemasi, shaxsiylashtirish. Google Play Console (2024) ma’lumotlariga ko‘ra, Google Play-dagi eng yaxshi 1000 ilovaning 78% Android uchun Material Components-dan foydalanadi.

Material Design shunchaki UI-kit emas, balki to‘liq dizayn tizimidir: foydalanish qulayligi (a11y), animatsiya (Motion), moslashuvchan tartiblar (Responsive Layout), komponentlar (TopAppBar, BottomNavigation, Navigation Drawer), tipografiya (Material Type Scale) va ikonografiya (Material Symbols) bo‘yicha yo‘riqnomalar. IT Sectr-da 2014-yildan beri Android loyihalari uchun Material Design-ni asosiy dizayn tizimi sifatida ishlatamiz, uni Material Theme Builder orqali mijoz brendiga moslashtiramiz.

Material Design-ning asosiy tamoyillari: moddiylik, chuqurlik, harakat

Moddiylik (Material as Metaphor) — Material Design-ning asosiy tamoyili, qog‘ozning fizik xususiyatlarini o‘zlashtiradi: materialning yuzasi, qalinligi (1dp) bor, soya soladi (Elevation) va joy egallaydi (Bounds). Interfeys elementlari — kartochkalar, tugmalar, panellar — fizik obektlar kabi harakat qiladi: bosilganda ko‘tariladi (ripple effekti), bir-birini yopadi (Z o‘qi) va paydo bo‘lganda animatsiyalanadi (motion).

Chuqurlik (Depth) Elevation orqali yaratiladi — materialning Z o‘qi bo‘yicha joylashuvini belgilaydigan xususiyat. Elevation qanchalik baland bo‘lsa (8dp, 16dp), element shunchalik katta soya soladi. Kartochka 1–2dp Elevation-ga ega, FAB — 6dp, Modal BottomSheet — 16dp. Chuqurlik iyerarxiyani yetkazish uchun ishlatiladi: modal oynalar va dialoglar har doim kontentdan yuqori, Navigation Drawer — Action Bar-dan yuqorida. Chuqurlik uch o‘lchovli perspektivani tekis Z qatlami bilan almashtiradi, renderlash samaradorligini saqlaydi.

Harakat (Motion) — Material Design-da animatsiya dekorativ emas, balki funksionaldir. Animatsiya: 1) foydalanuvchi diqqatini yo‘naltirishi (tafsilotlar bilan kartochkaning ochilishi), 2) fazoviy munosabatlarni tushuntirishi (aylantirishda AppBar TopAppBar-ga aylanadi), 3) o‘tishlarning silliqligini ta’minlashi kerak (ekranlar orasida shared element transition). Google Material Guidelines (2024) ma’lumotlariga ko‘ra, animatsiya mikroaloqalar uchun 300ms dan va ekranlar orasidagi o‘tishlar uchun 500ms dan oshmasligi kerak — uzoqroq animatsiyalar kechikish sifatida qabul qilinadi.

Material You (Material Design 3): dinamik ranglar va shaxsiylashtirish

Material You (Material Design 3) — Android 12 bilan birga 2021-yilda taqdim etilgan dizayn tizimining eng katta yangilanishi. Asosiy yangilik — dinamik ranglar (Monet): tizim qurilma fon rasmlaridan avtomatik ravishda 5 ta asosiy rangni ajratib oladi va WCAG AA kontrast nisbatlari bilan hisoblangan 15 tonnadan (primary, secondary, tertiary, error ularning light/dark variantlari bilan) iborat to‘liq rang palitrasini yaratadi.

Material You rang modeli HCT (Hue, Chroma, Tone) asosida qurilgan — Google tomonidan ishlab chiqilgan, inson idrokini (Hue) to‘yinganlik (Chroma) va yorqinlik (Tone) bilan birlashtiruvchi rang maydoni. HSL/HSV dan farqli o‘laroq, HCT barcha yaratilgan tonlarning oq va qora fonda belgilangan kontrastga ega bo‘lishini kafolatlaydi. Google Material Guidelines (2024) matn uchun faqat asosiy palitraning tonal variantlaridan, fon uchun surface tonlaridan va urg‘u yuzalar uchun primary-container dan foydalanishni tavsiya qiladi.

Foydalanuvchi 4 ta shaxsiylashtirish sxemasidan birini tanlashi mumkin: TonalSpot (fon rasmlaridan asosiy rang), Vibrant (eng to‘yingan rang), Expressive (qo‘shimcha yorqin ranglar), Neutral (monoxrom gamma). Material Theme Builder (material-foundation.github.io) Material 3 mavzusini XML, Compose Theme, CSS va hatto Figma plagini sifatida eksport qilish imkonini beradi.

Android uchun Material Components: XML va Compose bilan amalga oshirish

Android uchun Material Components (MDC-Android) — Material Design yo‘riqnomalariga mos keladigan tayyor View komponentlarini taqdim etuvchi rasmiy Google kutubxonasidir. XML tartibi uchun kutubxona com.google.android.material:material bog‘liqligi orqali mavjud, 2026 yil iyun oyi uchun joriy 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>

Misol MaterialToolbar (TopAppBar), maxsus bo‘shliqlar va chegara bilan MaterialCardView, ochiladigan ro‘yxat bilan TextInputLayout va Material3 uslubidagi MaterialButton bilan Material ekranini ko‘rsatadi. FAB langar sifatida Toolbar-ga bog‘langan — master-detail interfeyslari uchun standart sxema.

@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("Shahar") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Yuborish")
            }
        }
    }
}

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 mavzusini namoyish etadi: dynamicLightColorScheme() qurilma fon rasmlari asosida avtomatik ravishda rang sxemasini yaratadi. Scaffold TopAppBar va FAB bilan standart ramka taqdim etadi. OutlinedTextField va Button Material 3 komponentlari bo‘lib, ularning ranglari dinamik colorScheme dan olinadi. Fon rasmi o‘zgartirilganda ilovaning barcha ranglari avtomatik yangilanadi — kod o‘zgarishisiz shaxsiylashtirish.

iOS-da Material Design: iOS uchun Material Components

iOS uchun Material Components (MDC-iOS) — iOS-da Material Design-ni amalga oshiruvchi mahalliy UIKit komponentlarini taqdim etuvchi kutubxona. iOS o‘zining dizayn tizimiga (Human Interface Guidelines) ega bo‘lgani sababli, iOS-da Material komponentlari kamroq qo‘llaniladi, ammo Android va iOS o‘rtasida yagona vizual uslub talab qilinadigan ko‘p platformali ilovalarda zarur.

MDC-iOS Material Design uslubidagi AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs va TextFields-ni o‘z ichiga oladi. Kutubxona CocoaPods (pod 'MaterialComponents') va Swift Package Manager orqali mavjud. Apple Human Interface Guidelines (2024) mahalliy UIKit komponentlarini Material analoglari bilan to‘liq almashtirishni tavsiya etmaydi, lekin mahalliy navigatsiyani (NavigationStack, UITabBarController) saqlash sharti bilan maxsus interfeyslar uchun Material komponentlaridan foydalanishga ruxsat beradi.

IT Sectr-da iOS-da Material Components-dan faqat Android-dan ko‘chirilgan ilovalar uchun foydalanamiz (Flutter yoki Kotlin Multiplatform bilan ko‘p platformali loyihalar). Mahalliy iOS ilovalari uchun HIG-ga amal qilamiz va mijoz brendi ostida maxsus stilizatsiya bilan UIKit/SwiftUI dan foydalanamiz. Swift Community so‘roviga (2024) ko‘ra, iOS uchun Material Components dan 8% dasturchilar foydalanadi, asosan gibrid loyihalarda.

Material Design boshqa dizayn tizimlari bilan solishtirganda

Material Design — bozordagi yagona dizayn tizimi emas. Eng yirik raqobatchilar: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Har bir tizim o‘z platformasi uchun optimallashtirilgan: Material Design — Android, HIG — iOS, Fluent — Windows uchun. Dizayn tizimini tanlash maqsadli platforma va ekotizim bilan belgilanadi.

Material Design-ning asosiy ustunligi — ochiqlik va ko‘p platformalilik. Yo‘riqnomalar, komponentlar va vositalar (Material Theme Builder) bepul mavjud bo‘lib, bu tizimni startaplar va mustaqil dasturchilar orasida mashhur qiladi. Apple HIG Apple ekotizimi bilan chambarchas bog‘langan, lekin foydalanuvchilarning platforma kutishlariga eng yaxshi moslikni ta’minlaydi. Ko‘p platformali loyihalar uchun Material Design Flutter va Jetpack Compose Multiplatform tufayli optimal tanlovdir.