Google chia sẻ chi tiết về ngôn ngữ thiết kế Material Design 3 mới

HaiiDeas

Telegram: t.me/techrumvn
Tham gia
23/4/16
Bài viết
13,013
Được thích
16,890
2113 #1

Tại Hội nghị Android Dev Summit 2021 vừa qua, Google đã chia sẻ thông tin chi tiết về Material Design 3 (M3) cùng những thành phần giao diện người dùng được cập nhật. Dựa vào đó, các nhà phát triển có thể sử dụng chúng cho việc xây dựng hoặc nâng cấp ứng dụng của mình theo ngôn ngữ thiết kế mới này.

Nếu như bạn chưa biết thì Material Design 3 là tên gọi chính thức của ngôn ngữ thiết kế mới của Google, được sử dụng trong toàn bộ tài liệu dành nhà phát triển. Chữ số giúp phân biệt nó với phiên bản Material Design 2 trước đây (hay Material Theming). Material You là một cách gọi khác, thân thiện hơn với công chúng và thường sử dụng nhằm mục đích quảng cáo cho Pixel 6 | Pixel 6 Pro.

Dưới đây là một số thông tin đáng chú ý về Material Design 3:

Thanh điều hướng trên smartphone

Với Material Design 2, thanh điều hướng được gọi là "Bottom Navigation". Khi giới thiệu về M3, chúng ta có thể thấy rằng kích thước của thành phần này cao hơn, phần nền bao quanh biểu tượng được làm tròn hai đầu tạo độ tương phản. Khi ở trạng thái không hoạt động thì chúng chỉ xuất hiện theo dạng đường kẻ và được bôi đen toàn bộ nếu sử dụng. Hiện tại, Material You trên Android 12 đã áp dụng kiểu thiết kế này, mặc dù một số thay đổi có thể khác nhau tùy theo từng ứng dụng.



Thanh điều hướng trên tablet

Phần thanh điều hướng trên thiết bị màn hình lớn sẽ được hiển thị ở chiều dọc, kèm theo đó là menu chức năng tương tứng với từng ứng dụng được tích hợp ngay phía cùng của thanh điều hướng và phần nền có các góc bo tròn.



Thanh điều hướng/chức năng của ứng dụng

Một thành phần khác cũng được thay đổi so với M2 chính là "Top App Bar - Thanh ứng dụng trên cùng" (vị trí gồm điều hướng hoạt động, chức năng ứng dung). Gồm 4 biến thể Căn giữa (1); Nhỏ (2); Vừa (3) và Lớn (4). Sự khác biệt nằm ở chỗ không có hiệu ứng đổ bóng và lớp phủ tô màu ngăn cách thanh trên cùng với nội dung phía dưới.



Nút tác vụ nổi (FAB)

Biêu tượng của các nút tác vụ nổi sẽ được làm theo hình vuông với các góc bo tròn, ngoài ra sẽ có hai tùy chọn FAB lớn và nhỏ để nhà phát triển lựa chọn. Google khuyến nghị rằng các nút này nên xuất hiện trên màn hình khi đang cuộn nội dung và phải rõ ràng về mặt chức năng vì chúng không có tên tiêu đề bằng văn bản.



Nút tác vụ nổi (FAB) mở rộng

FAB mở rộng có thể tạo ra nút tác vụ trực quan và nổi bật hơn. Các nhà phát triển có thể lựa chọn thêm cả tiêu đề/mô tả về nút tác vụ bằng văn bản cùng với icon.



Các nút hành động/lựa chọn/mở chức năng/vô hiệu hóa chức năng

Thay vì dạng tròn như trước, các nút hành động/lựa chọn/mở chức năng/vô hiệu hóa chức năng... sẽ được thiết kế theo dạng hình viên thuốc với 5 trạng thái tùy chọn "nâng cao, lấp đầy, đầy âm sắc, đường viền, văn bản". Google lưu ý rằng văn bản trong nút phù hợp với mục đích dạng câu, không bao gồm chữ in hoa toàn bộ.



Thẻ

Material Design 3 cung cấp 3 loại thẻ gồm Nâng cao; Điền nội dung và Hiển thị nội dung (như Google Keep). Nói chung thì nội dung hiển thị bên trong thành phần này sẽ có độ cao thấp hơn và không đổ bóng theo mặc định.



Chips (dạng thẻ tag được đóng khung)

Material Design 3 mang đến bốn loại chip hình chữ nhật tròn, gồm Hỗ trợ, Bộ lọc, Đầu vào và Đề xuất - đại diện cho "các tùy chọn trong một ngữ cảnh cụ thể, không giống như các nút, là những thứ xuất hiện liên tục."



Hộp thoại

Cuối cùng là hộp thoại, gồm các chức năng hiển thị thu gọn hoặc toàn màn hình với các góc được bo tròn.



[...] Xem chi tiết tại đây: Material Design

Xem thêm:


TECHRUM.VN / THEO: 9TO5GOOGLE
 

Theo dõi Youtube

MSI Pulsating Power

Quảng Cáo

Quảng Cáo

Có thể bạn quan tâm

Top Bottom