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 приложения, основан на физическите свойства на хартия и мастило — „материалът”. За разлика от плоския дизайн (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 като котва — стандартна схема за 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 се използват по-рядко, но са необходими в cross-platform приложения, където се изисква единен визуален стил между 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 (cross-platform проекти с Flutter или Kotlin Multiplatform). За собствени iOS приложения следваме HIG и използваме UIKit/SwiftUI с персонализиран стил под марката на клиента. Според проучване на Swift Community (2024), 8% от разработчиците използват 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 е отвореността и cross-platform поддръжката. Насоките, компонентите и инструментите (Material Theme Builder) са достъпни безплатно, което прави системата популярна сред стартиращи компании и независими разработчици. Apple HIG е тясно свързана с екосистемата на Apple, но осигурява най-доброто съответствие с платформените очаквания на потребителите. За cross-platform проекти, Material Design е оптималният избор благодарение на Flutter и Jetpack Compose Multiplatform.