Material Design: các khái niệm chính, Material You và Material 3

Material Design là gì?

Material Design (tên mã Project Quantum) là hệ thống thiết kế của Google, lần đầu tiên được công bố tại Google I/O 2014 và lần đầu tiên được triển khai trong Android 5.0 Lollipop. Mục tiêu của Material Design là tạo ra một ngôn ngữ trực quan thống nhất cho tất cả các sản phẩm của Google và ứng dụng Android, dựa trên các đặc tính vật lý của giấy và mực — “chất liệu” (material). Không giống như Flat Design, Material Design thêm chiều sâu vật lý, bóng, lớp và hoạt ảnh chân thực.

Kể từ năm 2014, Material Design đã trải qua ba phiên bản chính: Material 1 (2014) — hướng dẫn gốc với thẻ và Floating Action Button; Material 2 (2018) — ngôn ngữ trực quan đơn giản hóa, khoảng cách tăng lên, nhấn mạnh vào kiểu chữ; Material 3 / Material You (2021) — bảng màu động được tạo từ hình nền thiết bị, cá nhân hóa. Theo Google Play Console (2024), 78% trong số 1000 ứng dụng hàng đầu trên Google Play sử dụng Material Components cho Android.

Material Design không chỉ là một bộ UI, mà là một hệ thống thiết kế hoàn chỉnh: hướng dẫn về khả năng tiếp cận (a11y), hoạt ảnh (Motion), bố cục thích ứng, thành phần (TopAppBar, BottomNavigation, Navigation Drawer), kiểu chữ (Material Type Scale) và biểu tượng (Material Symbols). Tại IT Sectr, chúng tôi đã sử dụng Material Design làm hệ thống thiết kế cơ bản cho các dự án Android từ năm 2014, tùy chỉnh nó cho thương hiệu của từng khách hàng thông qua Material Theme Builder.

Các nguyên tắc cơ bản của Material Design: vật chất, chiều sâu, chuyển động

Tính vật chất (Chất liệu như phép ẩn dụ) — nguyên tắc chính của Material Design, mượn các đặc tính vật lý của giấy: chất liệu có bề mặt, độ dày (1dp), đổ bóng (Elevation) và chiếm không gian (Bounds). Các thành phần giao diện — thẻ, nút, bảng — hoạt động như các vật thể vật lý: chúng nâng lên khi nhấn (hiệu ứng gợn sóng), chồng lên nhau (trục Z) và tạo hoạt ảnh khi xuất hiện (chuyển động).

Chiều sâu (Depth) được tạo ra thông qua Elevation — một thuộc tính chất liệu xác định vị trí của nó trên trục Z. Elevation càng cao (8dp, 16dp), bóng đổ bởi thành phần càng lớn. Thẻ có Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Chiều sâu được sử dụng để truyền tải thứ bậc: cửa sổ phương thức và hộp thoại luôn ở trên nội dung, Navigation Drawer ở trên Action Bar. Chiều sâu thay thế phối cảnh 3D bằng một lớp Z phẳng, bảo toàn hiệu suất kết xuất.

Chuyển động (Motion) — hoạt ảnh trong Material Design không mang tính trang trí mà mang tính chức năng. Hoạt ảnh nên: 1) hướng sự chú ý của người dùng (thẻ mở rộng với chi tiết), 2) giải thích mối quan hệ không gian (AppBar biến thành TopAppBar khi cuộn), 3) đảm bảo chuyển tiếp mượt mà (chuyển tiếp thành phần dùng chung giữa các màn hình). Theo Google Material Guidelines (2024), hoạt ảnh không được vượt quá 300ms cho các tương tác vi mô và 500ms cho chuyển tiếp màn hình — hoạt ảnh dài hơn bị coi là sự chậm trễ.

Material You (Material Design 3): màu sắc động và cá nhân hóa

Material You (Material Design 3) là bản cập nhật lớn nhất của hệ thống thiết kế, được giới thiệu vào năm 2021 cùng với Android 12. Cải tiến chính — màu sắc động (Monet): hệ thống tự động trích xuất 5 màu chính từ hình nền thiết bị và tạo bảng màu hoàn chỉnh gồm 15 tông màu (primary, secondary, tertiary, error với các biến thể light/dark của chúng) với tỷ lệ tương phản WCAG AA được tính toán.

Mô hình màu của Material You được xây dựng trên HCT (Hue, Chroma, Tone) — một không gian màu do Google phát triển, kết hợp nhận thức của con người (Hue) với độ bão hòa (Chroma) và độ sáng (Tone). Không giống như HSL/HSV, HCT đảm bảo rằng tất cả các tông màu được tạo ra đều có độ tương phản cần thiết trên nền trắng và đen. Google Material Guidelines (2024) khuyến nghị chỉ sử dụng các biến thể tông màu của bảng màu chính cho văn bản, tông surface cho nền và primary-container cho các bề mặt nhấn mạnh.

Người dùng có thể chọn từ 4 chế độ cá nhân hóa: TonalSpot (màu chính từ hình nền), Vibrant (màu bão hòa nhất), Expressive (màu sáng bổ sung), Neutral (bảng màu đơn sắc). Material Theme Builder (material-foundation.github.io) cho phép xuất chủ đề Material 3 sang XML, Compose Theme, CSS và thậm chí cả plugin Figma.

Material Components cho Android: triển khai qua XML và Compose

Material Components cho Android (MDC-Android) là thư viện chính thức của Google cung cấp các thành phần View sẵn sàng sử dụng tuân theo các hướng dẫn của Material Design. Đối với bố cục XML, thư viện có sẵn thông qua phụ thuộc com.google.android.material:material, phiên bản hiện tại tính đến tháng 6 năm 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>

Ví dụ hiển thị màn hình Material với MaterialToolbar (TopAppBar), MaterialCardView với phần đệm và đường viền tùy chỉnh, TextInputLayout với danh sách thả xuống và MaterialButton theo phong cách Material3. FAB được neo vào Toolbar — một mẫu tiêu chuẩn cho giao diện 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("Thành phố") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Gửi")
            }
        }
    }
}

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

Mã này minh họa chủ đề Material You trong Compose: dynamicLightColorScheme() tự động tạo bảng màu dựa trên hình nền thiết bị. Scaffold cung cấp cấu trúc tiêu chuẩn với TopAppBar và FAB. OutlinedTextField và Button là các thành phần Material 3 có màu sắc lấy từ colorScheme động. Khi hình nền thay đổi, tất cả màu sắc của ứng dụng tự động cập nhật — cá nhân hóa mà không cần thay đổi mã.

Material Design trên iOS: Material Components cho iOS

Material Components cho iOS (MDC-iOS) là thư viện cung cấp các thành phần UIKit gốc triển khai Material Design trên iOS. Vì iOS có hệ thống thiết kế riêng (Human Interface Guidelines), các thành phần Material trên iOS ít được sử dụng hơn nhưng được yêu cầu trong các ứng dụng đa nền tảng đòi hỏi phong cách trực quan thống nhất giữa Android và iOS.

MDC-iOS bao gồm AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs và TextFields, được tạo kiểu cho Material Design. Thư viện có sẵn thông qua CocoaPods (pod 'MaterialComponents') và Swift Package Manager. Apple Human Interface Guidelines (2024) không khuyến nghị thay thế hoàn toàn các thành phần UIKit gốc bằng các thành phần tương đương Material, nhưng cho phép sử dụng các thành phần Material cho giao diện tùy chỉnh với điều kiện giữ nguyên điều hướng gốc (NavigationStack, UITabBarController).

Tại IT Sectr, chúng tôi chỉ sử dụng Material Components trên iOS cho các ứng dụng được chuyển từ Android (dự án đa nền tảng với Flutter hoặc Kotlin Multiplatform). Đối với các ứng dụng iOS gốc, chúng tôi tuân theo HIG và sử dụng UIKit/SwiftUI với thương hiệu tùy chỉnh. Theo khảo sát của Swift Community (2024), Material Components cho iOS được 8% nhà phát triển sử dụng, chủ yếu trong các dự án kết hợp.

Material Design so với các hệ thống thiết kế khác

Material Design không phải là hệ thống thiết kế duy nhất trên thị trường. Các đối thủ cạnh tranh chính: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Mỗi hệ thống được tối ưu hóa cho nền tảng của nó: Material Design cho Android, HIG cho iOS, Fluent cho Windows. Việc lựa chọn hệ thống thiết kế được xác định bởi nền tảng mục tiêu và hệ sinh thái.

Ưu điểm chính của Material Design là tính cởi mở và đa nền tảng. Các hướng dẫn, thành phần và công cụ (Material Theme Builder) đều có sẵn miễn phí, khiến hệ thống này trở nên phổ biến với các startup và nhà phát triển độc lập. Apple HIG gắn chặt với hệ sinh thái Apple nhưng đảm bảo sự phù hợp tốt nhất với kỳ vọng nền tảng. Đối với các dự án đa nền tảng, Material Design là lựa chọn tối ưu nhờ Flutter và Jetpack Compose Multiplatform.