Material Design 3

UI/UX

UI/UXTài liệuĐộ khó: Trung bìnhMiễn phí

Material Design 3

3.5/5Đánh giá của 2dm

Hệ thống thiết kế đầy đủ nhưng thiên về Android.

Hệ thống thiết kế của Google: màu sắc, chữ, component và hướng dẫn dùng.

Mở trang chính thức Xem cách dùng

Giới thiệu

Material Design 3 (còn gọi Material 3 hoặc M3) là hệ thống thiết kế mã nguồn mở của Google, cung cấp hướng dẫn, style và component để tạo giao diện thân thiện với người dùng. Phiên bản này gắn với Material You, cho phép ứng dụng cá nhân hóa màu sắc theo người dùng.

Trên Android 12 trở lên, tính năng dynamic color lấy bảng màu từ hình nền của người dùng để áp vào ứng dụng. Hệ màu M3 bắt đầu từ năm màu chủ chốt, mỗi màu có bảng 13 sắc độ và được dùng theo vai trò như primary, secondary, tertiary. Ngoài ra còn có thang chữ năm vai trò và hệ hình dạng năm cấp bo góc.

Công cụ Material Theme Builder giúp tạo bảng màu từ màu thương hiệu và xuất mã. Bản mở rộng M3 Expressive bổ sung cập nhật về theming, component, chuyển động và chữ.

Tính năng nổi bật

Hệ thống thiết kế của Google

Bộ hướng dẫn, style và component mã nguồn mở cho giao diện hiện đại.

Dynamic color

Trên Android 12 trở lên, màu ứng dụng có thể lấy từ hình nền của người dùng.

Màu theo vai trò

Năm màu chủ chốt, mỗi màu 13 sắc độ, dùng theo vai trò để đảm bảo độ tương phản.

Thang chữ rõ ràng

Năm vai trò display, headline, title, body, label, mỗi vai trò có ba cỡ.

Material Theme Builder

Tạo bảng màu từ màu thương hiệu và xuất mã cho ứng dụng.

M3 Expressive

Phần mở rộng với cập nhật về theming, component, chuyển động và chữ.

Dùng để làm gì

Ứng dụng Android cho khách hàng

Xây app đặt lịch, tích điểm theo chuẩn giao diện quen thuộc với người dùng Android.

Chuẩn hóa màu thương hiệu

Đưa màu logo vào Theme Builder để có bảng màu sáng tối đồng bộ.

Tham khảo nguyên tắc thiết kế

Designer dùng hướng dẫn về màu, chữ, bố cục làm nền khi chưa có design system riêng.

Ứng dụng nội bộ

Dùng component có sẵn để làm app quản lý kho, chấm công nhanh và nhất quán.

Cách dùng

1
Đọc hướng dẫn trên m3.material.io
Tìm hiểu các phần nền tảng, style và component trước khi thiết kế.
2
Tạo bảng màu thương hiệu
Dùng Material Theme Builder để sinh bảng màu từ màu chủ đạo và xuất mã.
3
Thêm thư viện vào dự án Compose
Với ứng dụng Android dùng Jetpack Compose, thêm thư viện Material 3 vào file build.gradle.
$implementation "androidx.compose.material3:material3:$material3_version"
4
Áp dụng theme
Bọc giao diện bằng MaterialTheme với color scheme, typography và shapes đã định nghĩa.
5
Bật dynamic color
Kiểm tra phiên bản Android, dùng dynamic color khi máy hỗ trợ và dùng bảng màu riêng cho máy cũ.

Video hướng dẫn

Build next-level UX with Material 3 Expressive
Android Developers

Everything you need to Know about Material Design 3
Stevdza-San

How to generate a Material Design 3 theme using the Material Theme Builder Figma plugin
Design Chillout

Ví dụ thực tế

Tình huống minh hoạ

Một phòng khám nha khoa ở Hải Phòng thuê đội dev nhỏ làm app Android đặt lịch hẹn. Đội đưa màu xanh trong logo vào Material Theme Builder để có bộ màu sáng và tối, xuất mã cho Jetpack Compose rồi dùng các component Material 3 có sẵn cho nút, thẻ lịch hẹn và form. Với máy Android 12 trở lên, app có thể dùng dynamic color, còn máy cũ dùng bảng màu thương hiệu.

Mẹo & lưu ý

Dùng màu theo vai trò
Ghép màu với cặp on tương ứng để chữ luôn đủ tương phản.
Luôn có phương án dự phòng
Dynamic color chỉ có trên Android 12 trở lên, cần bảng màu riêng cho máy cũ.
Chú ý API thử nghiệm
Một số API M3 trong Compose còn experimental và cần khai báo opt-in.