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-axis) и анимируются при появлении (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) рекомендует использовать только tonal-варианты основной палитры для текста, 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("City") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Submit")
            }
        }
    }
}

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.