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-додатків, засновану на фізичних властивостях паперу та чорнила — «матеріалу» (material). На відміну від плоского дизайну (Flat Design), Material Design додає фізичну глибину, тіні, шари та реалістичну анімацію.

З 2014 року Material Design пройшов три великі версії: Material 1 (2014) — оригінальні гайдлайни з картками та Floating Action Button; Material 2 (2018) — спрощення візуальної мови, збільшені відступи, акцент на типографіку; Material 3 / Material You (2021) — динамічна колірна схема, що генерується на основі шпалер пристрою, персоналізація. За даними Google Play Console (2024), 78% з топ-1000 додатків 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-проєктів з 2014 року, кастомізуючи її під бренд замовника через 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 не декоративна, а функціональна. Анімація повинна: 1) спрямовувати увагу користувача (розкриття картки з деталями), 2) пояснювати просторові відносини (AppBar перетворюється на TopAppBar при скролі), 3) забезпечувати плавність переходів (shared element transition між екранами). За даними 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 Components для Android: реалізація через XML та Compose

Material Components для 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 як якорю — стандартна схема для майстер-детейл інтерфейсів.

@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 використовують 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.