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. Το βάθος χρησιμοποιείται για τη μετάδοση ιεραρχίας: τα modal παράθυρα και οι διάλογοι είναι πάντα πάνω από το περιεχόμενο, το 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. Η επιλογή συστήματος σχεδιασμού καθορίζεται από την πλατφόρμα-στόχο και το οικοσύστημα.