Google chia sẻ chi tiết về ngôn ngữ thiết kế Material Design 3 mới và xây dựng Material Design

 Tại Hội nghị thượng đỉnh dành cho nhà phát triển Android cuối cùng vào năm 2021, Google đã chia sẻ thông tin chi tiết về Material Design 3 (M3) và các thành phần giao diện người dùng được cập nhật. Trên cơ sở này, các nhà phát triển có thể sử dụng chúng để xây dựng hoặc nâng cấp ứng dụng của họ dựa trên ngôn ngữ thiết kế mới này. Nếu bạn chưa biết, Material Design 3 là tên chính thức của ngôn ngữ thiết kế mới của Google và được sử dụng trong toàn bộ tài liệu dành cho nhà phát triển. Con số này giúp phân biệt nó với các phiên bản trước của Material Design 2 (hoặc Material Theming). Tư liệu Bạn là một tên khác thân thiện hơn với công chúng và thường được sử dụng cho mục đích quảng cáo Pixel 6 | Pixel 6 Pro.

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

DƯỚI ĐÂY LÀ MỘT SỐ THÔNG TIN ĐÁNG CHÚ Ý VỀ MATERIAL DESIGN 3:

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

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

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

Thanh điều hướng của thiết bị màn hình lớn sẽ hiển thị theo chiều dọc, trên cùng của thanh điều hướng được tích hợp menu chức năng tương ứng của từng ứng dụng, nền là các góc bo tròn. Một thành phần khác đã thay đổi so với M2 là "Top App Bar-Top App Bar" (vị trí bao gồm điều hướng hoạt động và các chức năng ứng dụng). Bao gồm 4 biến thể tập trung (1); nhỏ (2); trung bình (3) và lớn (4). Sự khác biệt là không có hiệu ứng đổ bóng và lớp phủ lấp đầy ngăn cách thanh trên cùng với nội dung dưới cùng.

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

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

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

Nút thao tác / lựa chọn / mở chức năng / tắt chức năng ... sẽ được thiết kế dạng viên nén với 5 trạng thái có thể lựa chọn là âm, khung và văn bản "nâng cao, lấp đầy, hoàn chỉnh", thay cho hình tròn trước đây. Google chỉ ra rằng văn bản trong nút phù hợp với mục đích câu, loại trừ tất cả cách viết hoa.

Thẻ,Chips (dạng thẻ tag được đóng khung),Hộp thoại

Material Design 3 cung cấp 3 loại thẻ, bao gồm nâng cao; nội dung đầy đủ và nội dung hiển thị (chẳng hạn như Google Keep). Nói chung, nội dung hiển thị trong phần tử có chiều cao mặc định thấp và không có bóng. Material Design 3 cung cấp bốn loại chip hình chữ nhật tròn, bao gồm các tùy chọn Hỗ trợ, Bộ lọc, Đầu vào và Đề xuất đại diện "trong một ngữ cảnh cụ thể, không giống như các nút, chúng xuất hiện liên tục." Cuối cùng là hộp thoại, bao gồm khả năng hiển thị màn hình gập hoặc toàn màn hình với các góc bo tròn.

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

Nếu chúng ta xem Android là một hành tinh, và các ứng dụng chính là những quốc gia trên đó, thì Material Design chính là một "bộ luật" mang tính quốc tế.

Matias Duarte, Phó chủ tịch phụ trách thiết kế Android, cho biết: "Material Design là bộ mặt mới của chúng tôi, nhưng nó còn hơn thế nữa. Chúng tôi muốn một hệ thống thiết kế thực sự có thể giúp chúng tôi thống nhất và đơn giản hóa các màn hình khác nhau. Kích thước-máy tính xách tay, điện thoại, đồng hồ , TV, ô tô, vì vậy chúng tôi lùi lại và bắt đầu lại ... Tôi có thể tạo một hệ thống thiết kế cho tất cả những điều trên không? "

Xây dựng Material Design

Duarte nói rằng Material là dự án liên quan đến thiết kế lớn nhất của Google từ trước đến nay. Nó chạm đến mọi nhóm thiết kế trong công ty theo những cách khác nhau. Trong giai đoạn đầu của dự án, các chuyên gia thậm chí phải làm logo sản phẩm của Google ra giấy! “Chúng tôi đã làm điều này để hiểu vật chất là gì?” Duarte nói. "Làm thế nào chúng tôi có thể tạo ra nhiều thứ như vậy từ vật liệu? Chúng tôi thực hiện những nghiên cứu này bằng cách sử dụng giấy, sau đó cắt và dán tất cả các biểu tượng sản phẩm của mình. Từ đó, chúng tôi tìm thấy rất nhiều thứ ... chúng tôi có thể Các yếu tố đồ họa đang trở thành xu hướng ngày nay, nhưng đồng thời chúng cũng phải thực tế và logic theo cách mà bộ não của chúng ta làm. Bạn có biết ý nghĩa của nó chỉ bằng cách nhìn vào nó không? 

Một trong những khía cạnh quan trọng nhất của vật liệu là việc sử dụng nhiều lớp đồ họa và kích thước không gian. Theo một cách nào đó, ngôn ngữ thiết kế này giống như giấy, giấy ma thuật. Nó phẳng, nổi trên bề mặt và có xu hướng trắng hơn. Ngoài ra còn có các bóng đều và các nguồn sáng cố định chiếu sáng các vật trên màn. Khi bạn di chuyển các đối tượng, chúng không chỉ đơn giản là biến mất mà còn trượt tự nhiên từ nơi này sang nơi khác. Chúng cũng không tự di chuyển, chỉ có người dùng mới có thể can thiệp. Khi ý tưởng này được chuyển thành phần mềm, chúng ta có thể thấy một phần màn hình sẽ nhô lên hoặc mờ đi tùy thuộc vào cách người dùng tương tác với ứng dụng. Ví dụ: trên Android Wear, khi bạn đặt điện thoại lên đồng hồ khi có tin nhắn mới được gửi, một mảnh giấy "nhỏ" sẽ bật lên với nội dung của tin nhắn được viết trên đó và nền là hình ảnh của người gửi, nhưng nó bị mờ.

Google chia sẻ chi tiết về ngôn ngữ thiết kế Material Design 3 mới và xây dựng Material Design

Một trong những khía cạnh quan trọng nhất của vật liệu là việc sử dụng nhiều lớp đồ họa và kích thước không gian. Theo một cách nào đó, ngôn ngữ thiết kế này giống như giấy, giấy ma thuật. Nó phẳng, nổi trên nền và thường có nhiều màu trắng. Ngoài ra còn có các bóng sáng đồng nhất và một nguồn sáng cố định chiếu sáng các vật thể trên màn hình. Khi bạn di chuyển các đối tượng, chúng không chỉ đơn giản là biến mất mà còn trượt tự nhiên từ nơi này sang nơi khác. Chúng cũng không tự di chuyển mà chỉ có người sử dụng mới có thể can thiệp. Khi ý tưởng này được chuyển thành phần mềm, chúng ta có thể thấy rằng một phần của màn hình sẽ nổi lên hoặc mờ đi tùy thuộc vào cách người dùng tương tác với ứng dụng. Ví dụ: khi tin nhắn đến, trên Android Wear. Khi gửi một tin nhắn mới từ ứng dụng đến đồng hồ, một "tờ giấy" nhỏ ghi nội dung tin nhắn sẽ xuất hiện, nền là hình ảnh đại diện của người gửi nhưng bị mờ.

Post a Comment

Previous Post Next Post