Hệ thống thiết kế là một tập hợp các quyết định thiết kế có thể sử dụng lại, được thể hiện dưới dạng hướng dẫn, thành phần và mẫu. Hệ thống này có thể được chia thành các nguyên tắc thiết kế nhỏ nhất: những thứ như màu sắc, kiểu chữ hoặc hình dạng được tạo thành các phần của thành phần phức tạp lớn hơn. Ví dụ: biểu tượng và nhãn văn bản tạo nên một thành phần nút, trong khi nhiều nút và một bề mặt tạo nên một thẻ. Hệ thống thiết kế cũng đi kèm với một bộ hướng dẫn bao gồm những quyết định thiết kế hiện có này về các thành phần và mẫu.
Material Design là một hệ thống thiết kế nguồn mở do Google phát triển để giúp bạn tạo ra những sản phẩm đẹp mắt, tập trung vào người dùng. Material 3 là phiên bản mới nhất của Material Design.
Thành phần Material Design
Material Design cung cấp một mảng thành phần dựa trên mã. Đây là các khối xây dựng tương tác để tạo giao diện người dùng. Bạn có thể sắp xếp các thành phần này thành 5 danh mục dựa trên mục đích của chúng: hành động, ngăn chứa, điều hướng, lựa chọn và nhập văn bản.
Thành phần hành động
Thành phần hành động giúp mọi người đạt được mục tiêu.
Material có nhiều loại nút để giúp xác định mức độ ưu tiên của các hành động và hoạt động tương tác trong nhiều bối cảnh. Từ FAB hoặc FAB mở rộng cho các thao tác chính đến nút biểu tượng hỗ trợ để chọn các lựa chọn bằng nút phân đoạn.
Thành phần giao tiếp
Các thành phần giao tiếp cung cấp thông tin hữu ích bằng cách cảnh báo người dùng bằng huy hiệu, thông báo trạng thái thông qua chỉ báo tiến trình và cung cấp thông báo ngắn về quy trình bằng thanh thông báo nhanh.
Thành phần ngăn chặn
Các thành phần chứa đựng lưu giữ thông tin và hành động, bao gồm cả các thành phần khác như nút, trình đơn hoặc chip. Hầu hết các thành phần Material đều sử dụng tính năng tạo vách ngăn rõ ràng, nhóm nội dung và thao tác có liên quan với các đối tượng trực quan: thẻ, hộp thoại, trang tính dưới cùng, trang tính bên, băng chuyền và chú thích. Danh sách có thể được cung cấp với tính năng chứa ngầm hoặc rõ ràng bằng cách hiển thị đường phân chia. Các thành phần này cung cấp các mẫu phổ biến để hiển thị các nhóm nội dung.
Thành phần điều hướng
Thành phần điều hướng giúp mọi người di chuyển trong giao diện người dùng. Đối với thiết bị di động, thanh điều hướng hoặc ngăn điều hướng chứa các đích đến điều hướng chính của bạn. Thẻ, thanh ứng dụng dưới cùng và thanh ứng dụng trên cùng cung cấp nhiều cách để điều hướng thông tin và hành động hỗ trợ. Tìm hiểu thêm về cách sử dụng chế độ điều hướng trong bố cục.
Thành phần lựa chọn
Các thành phần lựa chọn giúp mọi người chỉ định lựa chọn. Cho dù bạn đang tạo biểu mẫu bằng hộp đánh dấu và nút chọn, lọc bằng thẻ hay bật/tắt chế độ cài đặt bằng công tắc và thanh trượt, các thành phần lựa chọn đều cho phép người dùng kiểm soát và nhập quyết định của họ.
Thành phần nhập văn bản
Các thành phần nhập văn bản cho phép mọi người nhập và chỉnh sửa văn bản. Trường văn bản cho phép người dùng nhập văn bản vào giao diện người dùng.
Hệ thống thiết kế cho Compose
Hãy đọc bài viết Hệ thống thiết kế trong Compose để biết thông tin chi tiết về cách sử dụng Compose để triển khai hệ thống thiết kế một cách mượt mà hơn và mang lại giao diện nhất quán cho ứng dụng bằng cách sử dụng giao diện, thành phần và các khía cạnh khác của hệ thống thiết kế.