Material Design: kluczowe pojęcia, Material You i Material 3

Czym jest Material Design?

Material Design (nazwa kodowa Project Quantum) — system projektowania Google, po raz pierwszy ogłoszony na Google I/O 2014 i po raz pierwszy zaimplementowany w Android 5.0 Lollipop. Celem Material Design jest stworzenie jednolitego języka wizualnego dla wszystkich produktów Google i aplikacji Android, opartego na fizycznych właściwościach papieru i atramentu — „materiale” (material). W przeciwieństwie do płaskiego projektowania (Flat Design), Material Design dodaje fizyczną głębię, cienie, warstwy i realistyczną animację.

Od 2014 roku Material Design przeszedł trzy główne wersje: Material 1 (2014) — oryginalne wytyczne z kartami i Floating Action Button; Material 2 (2018) — uproszczenie języka wizualnego, większe odstępy, nacisk na typografię; Material 3 / Material You (2021) — dynamiczny schemat kolorów generowany na podstawie tapet urządzenia, personalizacja. Według Google Play Console (2024), 78% z top 1000 aplikacji Google Play korzysta z Material Components dla Android.

Material Design to nie tylko UI-kit, ale pełny system projektowania: wytyczne dotyczące dostępności (a11y), animacji (Motion), adaptacyjnych układów (Responsive Layout), komponentów (TopAppBar, BottomNavigation, Navigation Drawer), typografii (Material Type Scale) i ikonografii (Material Symbols). W IT Sectr używamy Material Design jako podstawowego systemu projektowania dla projektów Android od 2014 roku, dostosowując go do marki klienta za pomocą Material Theme Builder.

Główne zasady Material Design: materialność, głębia, ruch

Materialność (Material as Metaphor) — kluczowa zasada Material Design, zapożyczająca fizyczne właściwości papieru: materiał ma powierzchnię, grubość (1dp), rzuca cień (Elevation) i zajmuje przestrzeń (Bounds). Elementy interfejsu — karty, przyciski, panele — zachowują się jak fizyczne obiekty: unoszą się po naciśnięciu (efekt ripple), nakładają się na siebie (oś Z) i animują się podczas pojawiania (motion).

Głębia (Depth) tworzona jest przez Elevation — właściwość materiału określającą jego położenie na osi Z. Im wyższe Elevation (8dp, 16dp), tym większy cień rzuca element. Karta ma Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Głębia służy do przekazywania hierarchii: okna modalne i dialogi są zawsze wyżej niż treść, Navigation Drawer — nad Action Bar. Głębia zastępuje trójwymiarową perspektywę płaską warstwą Z, zachowując wydajność renderowania.

Ruch (Motion) — animacja w Material Design nie jest dekoracyjna, ale funkcjonalna. Animacja powinna: 1) kierować uwagę użytkownika (rozwijanie karty ze szczegółami), 2) wyjaśniać relacje przestrzenne (AppBar przekształca się w TopAppBar podczas przewijania), 3) zapewniać płynność przejść (shared element transition między ekranami). Według Google Material Guidelines (2024), animacja nie powinna przekraczać 300ms dla mikrointerakcji i 500ms dla przejść między ekranami — dłuższe animacje są odbierane jako opóźnienia.

Material You (Material Design 3): dynamiczne kolory i personalizacja

Material You (Material Design 3) — największa aktualizacja systemu projektowania, przedstawiona w 2021 roku wraz z Android 12. Główna innowacja — dynamiczne kolory (Monet): system automatycznie wyodrębnia 5 kluczowych kolorów z tapet urządzenia i generuje pełną paletę kolorów składającą się z 15 tonów (primary, secondary, tertiary, error z ich wariantami light/dark) z obliczonymi współczynnikami kontrastu WCAG AA.

Model kolorów Material You oparty jest na HCT (Hue, Chroma, Tone) — przestrzeni kolorów opracowanej przez Google, która łączy postrzeganie człowieka (Hue) z nasyceniem (Chroma) i jasnością (Tone). W przeciwieństwie do HSL/HSV, HCT gwarantuje, że wszystkie wygenerowane tony mają zadany kontrast na białym i czarnym tle. Google Material Guidelines (2024) zaleca używanie tylko tonalnych wariantów głównej palety dla tekstu, tonów surface dla tła i primary-container dla powierzchni akcentowych.

Użytkownik może wybrać jeden z 4 schematów personalizacji: TonalSpot (kolor główny z tapet), Vibrant (najbardziej nasycony kolor), Expressive (dodatkowe żywe kolory), Neutral (monochromatyczna gama). Material Theme Builder (material-foundation.github.io) umożliwia eksportowanie tematu Material 3 do XML, Compose Theme, CSS, a nawet wtyczki Figma.

Material Components dla Android: implementacja przez XML i Compose

Material Components dla Android (MDC-Android) — oficjalna biblioteka Google, dostarczająca gotowe komponenty View zgodne z wytycznymi Material Design. Dla układów XML biblioteka jest dostępna przez zależność com.google.android.material:material, aktualna wersja na czerwiec 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>

Przykład pokazuje ekran Material z MaterialToolbar (TopAppBar), MaterialCardView z niestandardowymi odstępami i obramowaniem, TextInputLayout z listą rozwijaną oraz MaterialButton w stylu Material3. FAB jest przypisany do Toolbar jako kotwica — standardowy schemat dla interfejsów 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("Miasto") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Wyślij")
            }
        }
    }
}

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

Kod demonstruje temat Material You w Compose: dynamicLightColorScheme() automatycznie generuje schemat kolorów na podstawie tapet urządzenia. Scaffold dostarcza standardowy szkielet z TopAppBar i FAB. OutlinedTextField i Button to komponenty Material 3, których kolory pochodzą z dynamicznej colorScheme. Po zmianie tapety wszystkie kolory aplikacji aktualizują się automatycznie — personalizacja bez modyfikacji kodu.

Material Design na iOS: Material Components dla iOS

Material Components dla iOS (MDC-iOS) — biblioteka dostarczająca natywne komponenty UIKit implementujące Material Design na iOS. Ponieważ iOS ma własny system projektowania (Human Interface Guidelines), komponenty Material na iOS są używane rzadziej, ale są potrzebne w aplikacjach wieloplatformowych, gdzie wymagany jest jednolity styl wizualny między Android a iOS.

MDC-iOS obejmuje AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs i TextFields, stylizowane na Material Design. Biblioteka jest dostępna przez CocoaPods (pod 'MaterialComponents') i Swift Package Manager. Apple Human Interface Guidelines (2024) nie zaleca całkowitego zastępowania natywnych komponentów UIKit odpowiednikami Material, ale dopuszcza używanie komponentów Material dla niestandardowych interfejsów pod warunkiem zachowania natywnej nawigacji (NavigationStack, UITabBarController).

W IT Sectr używamy Material Components na iOS tylko dla aplikacji przenoszonych z Android (projekty wieloplatformowe z Flutter lub Kotlin Multiplatform). Dla natywnych aplikacji iOS kierujemy się HIG i używamy UIKit/SwiftUI z niestandardową stylizacją pod markę klienta. Według ankiety Swift Community (2024), Material Components dla iOS używa 8% programistów, głównie w projektach hybrydowych.

Material Design a inne systemy projektowania

Material Design — nie jedyny system projektowania na rynku. Najwięksi konkurenci: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Każdy system jest zoptymalizowany pod swoją platformę: Material Design — pod Android, HIG — pod iOS, Fluent — pod Windows. Wybór systemu projektowania zależy od docelowej platformy i ekosystemu.

Główną zaletą Material Design jest otwartość i wieloplatformowość. Wytyczne, komponenty i narzędzia (Material Theme Builder) są dostępne za darmo, co czyni system popularnym wśród startupów i niezależnych programistów. Apple HIG jest ściśle związany z ekosystemem Apple, ale zapewnia najlepsze dopasowanie do oczekiwań platformowych użytkowników. Dla projektów wieloplatformowych Material Design jest optymalnym wyborem dzięki Flutter i Jetpack Compose Multiplatform.