Material Design: mga pangunahing konsepto, Material You at Material 3

Ano ang Material Design?

Material Design (code name Project Quantum) — sistema ng disenyo ng Google, unang inihayag sa Google I/O 2014 at unang ipinatupad sa Android 5.0 Lollipop. Ang layunin ng Material Design ay lumikha ng isang pinag-isang visual na wika para sa lahat ng produkto ng Google at Android app, batay sa mga pisikal na katangian ng papel at tinta — “material”. Hindi tulad ng flat na disenyo (Flat Design), nagdaragdag ang Material Design ng pisikal na lalim, mga anino, layer, at makatotohanang animasyon.

Mula noong 2014, ang Material Design ay dumaan sa tatlong pangunahing bersyon: Material 1 (2014) — orihinal na mga gabay na may mga card at Floating Action Button; Material 2 (2018) — pagpapasimple ng visual na wika, mas malalaking puwang, diin sa tipograpiya; Material 3 / Material You (2021) — dinamikong scheme ng kulay na nabuo mula sa wallpaper ng device, personalisasyon. Ayon sa Google Play Console (2024), 78% ng nangungunang 1000 Google Play app ay gumagamit ng Material Components para sa Android.

Ang Material Design ay hindi lamang isang UI-kit, kundi isang kumpletong sistema ng disenyo: mga gabay sa accessibility (a11y), animasyon (Motion), adaptive na layout (Responsive Layout), mga bahagi (TopAppBar, BottomNavigation, Navigation Drawer), tipograpiya (Material Type Scale), at iconography (Material Symbols). Sa IT Sectr, ginagamit namin ang Material Design bilang pangunahing sistema ng disenyo para sa mga proyekto sa Android mula noong 2014, na inaayos ito sa tatak ng kliyente sa pamamagitan ng Material Theme Builder.

Mga pangunahing prinsipyo ng Material Design: materialidad, lalim, paggalaw

Materialidad (Material as Metaphor) — pangunahing prinsipyo ng Material Design, na humihiram ng mga pisikal na katangian ng papel: ang materyal ay may ibabaw, kapal (1dp), naglalaglag ng anino (Elevation), at sumasakop ng espasyo (Bounds). Ang mga elemento ng interface — mga card, button, panel — ay kumikilos tulad ng mga pisikal na bagay: sila ay tumataas kapag pinindot (ripple effect), nagkakapatong (Z-axis), at nag-aanimate kapag lumilitaw (motion).

Lalim (Depth) ay nilikha sa pamamagitan ng Elevation — ang katangian ng materyal na tumutukoy sa posisyon nito sa Z-axis. Kung mas mataas ang Elevation (8dp, 16dp), mas malaki ang anino na inilalaglag ng elemento. Ang isang card ay may Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Ang lalim ay ginagamit upang iparating ang hierarchy: ang mga modal window at dialog ay laging nasa itaas ng nilalaman, Navigation Drawer — sa itaas ng Action Bar. Ang lalim ay pumapalit sa three-dimensional na perspektibo ng isang patag na Z-layer, na pinapanatili ang pagganap ng rendering.

Paggalaw (Motion) — ang animasyon sa Material Design ay hindi pampalamuti, kundi functional. Ang animasyon ay dapat: 1) magdirekta ng atensyon ng gumagamit (pagbubukas ng card na may mga detalye), 2) magpaliwanag ng spatial na relasyon (ang AppBar ay nagiging TopAppBar kapag nag-scroll), 3) tiyakin ang kinis ng mga transition (shared element transition sa pagitan ng mga screen). Ayon sa Google Material Guidelines (2024), ang animasyon ay hindi dapat lumampas sa 300ms para sa micro-interactions at 500ms para sa mga transition sa pagitan ng mga screen — ang mas mahabang animasyon ay itinuturing na pagkaantala.

Material You (Material Design 3): dinamikong kulay at personalisasyon

Material You (Material Design 3) — ang pinakamalaking update ng sistema ng disenyo, na ipinakilala noong 2021 kasama ng Android 12. Ang pangunahing inobasyon — dinamikong kulay (Monet): awtomatikong kumukuha ang system ng 5 pangunahing kulay mula sa wallpaper ng device at bumubuo ng kumpletong paleta ng kulay ng 15 tono (primary, secondary, tertiary, error na may kanilang light/dark variant) na may kinakalkulang WCAG AA contrast ratio.

Ang modelo ng kulay ng Material You ay itinayo sa HCT (Hue, Chroma, Tone) — isang espasyo ng kulay na binuo ng Google, na pinagsasama ang persepsyon ng tao (Hue) sa saturation (Chroma) at liwanag (Tone). Hindi tulad ng HSL/HSV, ginagarantiya ng HCT na ang lahat ng nabuong tono ay may tinukoy na contrast sa puti at itim na background. Ang Google Material Guidelines (2024) ay nagrerekomenda ng paggamit lamang ng mga tonal variant ng pangunahing paleta para sa teksto, surface tono para sa mga background, at primary-container para sa mga accent surface.

Ang gumagamit ay maaaring pumili ng isa sa 4 na scheme ng personalisasyon: TonalSpot (pangunahing kulay mula sa wallpaper), Vibrant (pinakamatinding kulay), Expressive (dagdag na maliliwanag na kulay), Neutral (monochrome gamma). Ang Material Theme Builder (material-foundation.github.io) ay nagbibigay-daan sa pag-export ng Material 3 na tema sa XML, Compose Theme, CSS, at maging Figma plugin.

Material Components para sa Android: pagpapatupad sa pamamagitan ng XML at Compose

Material Components para sa Android (MDC-Android) — ang opisyal na library ng Google na nagbibigay ng mga handa nang View component na sumusunod sa mga gabay ng Material Design. Para sa XML layout, ang library ay magagamit sa pamamagitan ng dependency com.google.android.material:material, kasalukuyang bersyon noong Hunyo 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>

Ipinapakita ng halimbawa ang isang Material screen na may MaterialToolbar (TopAppBar), MaterialCardView na may custom na mga puwang at hangganan, TextInputLayout na may drop-down list, at MaterialButton sa istilong Material3. Ang FAB ay naka-angkla sa Toolbar — karaniwang scheme para sa master-detail interface.

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

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

Material Design sa iOS: Material Components para sa iOS

Material Components para sa iOS (MDC-iOS) — isang library na nagbibigay ng native na UIKit component na nagpapatupad ng Material Design sa iOS. Dahil ang iOS ay may sariling sistema ng disenyo (Human Interface Guidelines), ang mga Material component sa iOS ay mas madalang gamitin, ngunit kinakailangan sa mga cross-platform app kung saan kailangan ang pare-parehong visual na istilo sa pagitan ng Android at iOS.

Ang MDC-iOS ay may kasamang AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs, at TextFields na naka-istilo sa Material Design. Ang library ay magagamit sa pamamagitan ng CocoaPods (pod 'MaterialComponents') at Swift Package Manager. Ang Apple Human Interface Guidelines (2024) ay hindi nagrerekomenda ng kumpletong pagpapalit ng native na UIKit component ng katumbas na Material, ngunit pinapayagan ang paggamit ng Material component para sa custom na interface sa kondisyon na panatilihin ang native na nabigasyon (NavigationStack, UITabBarController).

Sa IT Sectr, ginagamit namin ang Material Components sa iOS para lamang sa mga app na inilipat mula sa Android (mga cross-platform na proyekto na may Flutter o Kotlin Multiplatform). Para sa native na iOS app, sinusunod namin ang HIG at gumagamit ng UIKit/SwiftUI na may custom na estilo sa ilalim ng tatak ng kliyente. Ayon sa survey ng Swift Community (2024), 8% ng mga developer ay gumagamit ng Material Components para sa iOS, pangunahin sa mga hybrid na proyekto.

Material Design kumpara sa ibang mga sistema ng disenyo

Material Design — hindi lamang ang sistema ng disenyo sa merkado. Ang mga pinakamalaking katunggali: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Ang bawat sistema ay na-optimize para sa platform nito: Material Design — para sa Android, HIG — para sa iOS, Fluent — para sa Windows. Ang pagpili ng sistema ng disenyo ay tinutukoy ng target na platform at ecosystem.