Bước tới nội dung

Material Design

Bách khoa toàn thư mở Wikipedia
Material Design
Nhà phát triểnGoogle
Phát hành lần đầu25 tháng 6 năm 2014; 12 năm trước (2014-06-25)
Kho mã nguồn
Nền tảngAndroid, iOS, Web
Thể loạiNgôn ngữ thiết kế, hệ thống thiết kế
Websitem3.material.io

Material Design là một ngôn ngữ thiết kế và hệ thống thiết kế do Google phát triển, được giới thiệu ngày 25 tháng 6 năm 2014 tại hội nghị Google I/O. Hệ thống cung cấp các nguyên tắc thiết kế giao diện nhằm tạo trải nghiệm nhất quán trên nhiều loại thiết bị và nền tảng.[1] Tên gọi nội bộ ban đầu của dự án là Quantum Paper.[2]

Material Design bao gồm hướng dẫn, công cụ và các thành phần giao diện có mã nguồn mở. Qua các lần cập nhật, hệ thống mở rộng từ những quy tắc chung về giao diện sang khả năng tùy biến theo thương hiệu và cá nhân hóa theo người dùng.[3][4] Material Design 3, còn gọi là Material 3 hoặc M3, hỗ trợ các tính năng cá nhân hóa của Material You. Material 3 Expressive là phần mở rộng của Material 3, bổ sung các thay đổi về thành phần giao diện, chuyển động, kiểu chữ và chủ đề.[5]

Tổng quan

[sửa | sửa mã nguồn]

Thiết kế ban đầu lấy cảm hứng từ giấy và mực, dùng bề mặt, cạnh, ánh sáng và bóng đổ để biểu thị quan hệ giữa các thành phần giao diện. Các yếu tố này giúp người dùng nhận biết đối tượng có thể tương tác và vị trí tương đối của chúng.[6]

Hướng dẫn ban đầu nêu ba nguyên tắc: sử dụng đặc tính của vật liệu làm cơ sở cho giao diện; tổ chức thông tin bằng kiểu chữ, lưới, màu sắc và khoảng trống; sử dụng chuyển động để giải thích thao tác và sự thay đổi trạng thái. Hiệu ứng chuyển động có vai trò duy trì tính liên tục khi các đối tượng biến đổi hoặc sắp xếp lại.[6]

Trong quá trình phát triển Material Design thế hệ đầu, nhóm thiết kế tạo các mô hình bằng giấy để nghiên cứu lớp, bóng đổ và chuyển động, rồi đưa những đặc tính này vào giao diện số. Theo hồi cứu của Google, giai đoạn Material 1 chú trọng tính nhất quán, Material 2 mở rộng hệ thống thành phần và khả năng thể hiện thương hiệu, còn Material 3 tăng tính linh hoạt và cá nhân hóa.[2]

Lịch sử phát triển

[sửa | sửa mã nguồn]

Ra mắt năm 2014

[sửa | sửa mã nguồn]

Tại Google I/O 2014, Google công bố Material Design cùng bản xem trước Android L. Hệ thống bổ sung chủ đề Material, các thành phần giao diện, chuyển cảnh, phản hồi chạm dạng hoạt ảnh và thuộc tính độ cao để tạo bóng đổ. Google đồng thời giới thiệu việc sử dụng Material Design trên web thông qua Polymer.[1] Material Design sau đó được đưa vào Android 5.0 Lollipop, với mục tiêu duy trì trải nghiệm nhất quán khi chuyển giữa các thiết bị.[7]

Material Design 2 và Material Theming

[sửa | sửa mã nguồn]

Năm 2018, Google giới thiệu một đợt cập nhật lớn, thuộc giai đoạn Material Design 2, mở rộng các thành phần được triển khai bằng mã và khả năng tùy biến giao diện.[2] Material Theming cho phép điều chỉnh màu sắc, kiểu chữ và hình dạng của các thành phần để phù hợp với nhận diện thương hiệu. Đợt cập nhật cũng giới thiệu Material Theme Editor và mở rộng bộ Material Components cho Android, iOS, Flutter và web.[3]

Material You và Material Design 3

[sửa | sửa mã nguồn]

Ngày 18 tháng 5 năm 2021, Google giới thiệu Material You cùng bản beta đầu tiên của Android 12. Một đặc điểm là khả năng trích xuất màu từ hình nền để tạo bảng màu cho giao diện hệ thống, bao gồm màn hình khóa, thông báo, bộ điều chỉnh âm lượng và tiện ích. Google công bố trải nghiệm này trước tiên cho các thiết bị Pixel chạy Android 12.[4]

Material Design 3 đưa các khả năng cá nhân hóa của Material You vào hệ thống thành phần và chủ đề dành cho ứng dụng. Chủ đề M3 được tổ chức quanh màu sắc, kiểu chữ và hình dạng. Trên Android, màu động có từ Android 12; các ứng dụng cũng có thể dùng bảng màu sáng và tối do nhà phát triển xác định.[5] Tháng 10 năm 2021, Google phát hành bản alpha đầu tiên của Compose Material 3, cung cấp các thành phần và chủ đề M3 cho Jetpack Compose.[8]

Material 3 Expressive

[sửa | sửa mã nguồn]

Ngày 13 tháng 5 năm 2025, Google công bố Material 3 Expressive trong đợt giới thiệu thay đổi giao diện cho Android 16 và Wear OS 6. Các thay đổi gồm hoạt ảnh có tính đàn hồi, màu động được cập nhật, kiểu chữ nhấn mạnh hơn và thành phần giao diện phản hồi theo thao tác. Trên đồng hồ, thiết kế được điều chỉnh cho màn hình tròn, với chuyển động theo đường cong màn hình và các thành phần có thể biến đổi hình dạng.[9]

Theo nhóm nghiên cứu của Google, quá trình phát triển Expressive bao gồm 46 nghiên cứu với hơn 18.000 người tham gia. Nhóm tập trung vào cách màu sắc, kích thước, hình dạng, chuyển động và việc nhóm các thành phần giúp làm nổi bật thao tác quan trọng. Google cũng lưu ý rằng thiết kế cần phù hợp với ngữ cảnh sử dụng và giữ các quy ước tương tác quen thuộc; thay đổi hình thức không thay thế được tính rõ ràng và chức năng.[10]

Ngày 3 tháng 9 năm 2025, Google thông báo bắt đầu triển khai Material 3 Expressive cho Pixel 6 và các thế hệ mới hơn, cùng Pixel Tablet, sau khi giới thiệu giao diện này trên dòng Pixel 10.[11] Ngày 12 tháng 5 năm 2026, Google công bố thiết kế mới cho Android Auto sử dụng Material 3 Expressive, với kiểu chữ, hoạt ảnh và hình nền được cá nhân hóa; theo thông báo, các cập nhật dự kiến được triển khai trong năm 2026.[12]

Áp dụng và triển khai

[sửa | sửa mã nguồn]

Android

[sửa | sửa mã nguồn]

Jetpack Compose cung cấp bộ thành phần Material 3, hỗ trợ Material You và Material 3 Expressive.[5] Ngày 19 tháng 5 năm 2026, Google công bố định hướng "Compose First", tập trung các API, thư viện, công cụ và hướng dẫn phát triển giao diện mới vào Compose. Các thành phần View được Compose thay thế chuyển sang chế độ bảo trì; Google cho biết vẫn hỗ trợ sửa lỗi nghiêm trọng nhưng không bổ sung tính năng mới cho chúng.[13]

Theo thông báo trong kho mã nguồn chính thức, Material Components for Android dựa trên Views cũng chuyển sang chế độ bảo trì tại Google I/O 2026. Nhóm phát triển không còn kế hoạch phát hành tính năng mới cho thư viện này và hướng các dự án sang Compose để tiếp nhận cập nhật Material Design và nền tảng Android.[14]

Web

[sửa | sửa mã nguồn]

Polymer là một bộ công cụ giao diện web được Google sử dụng để triển khai Material Design trong giai đoạn đầu.[1] Sau đó, Material Components for the web kế nhiệm Material Design Lite, cung cấp các thành phần có thể tùy biến màu sắc, kiểu chữ và hình dạng. Kho mã nguồn Material Components for the web được chủ sở hữu chuyển sang trạng thái lưu trữ ngày 13 tháng 1 năm 2025 và hiện ở chế độ chỉ đọc.[15]

Material Web, được phân phối dưới tên gói @material/web, là thư viện Web Components triển khai Material 3. Theo README của dự án, thư viện đang ở chế độ bảo trì trong khi chờ người duy trì mới. Tài liệu này hướng người dùng Angular tới Angular Material.[16]

Flutter và iOS

[sửa | sửa mã nguồn]

Flutter cung cấp bộ thành phần giao diện Material. Từ Flutter 3.16, Material 3 trở thành phong cách mặc định của thư viện Material; việc tùy biến chủ yếu thông qua bảng màu, kiểu chữ và chủ đề của từng thành phần.[17]

Material Components for iOS và các thư viện liên quan chuyển sang chế độ bảo trì từ ngày 15 tháng 7 năm 2021. Nhóm phát triển khuyến nghị sử dụng các thành phần UIKit hiện đại hoặc SwiftUI theo hướng dẫn giao diện của Apple; Flutter được nêu là lựa chọn để tạo giao diện Material trên nhiều nền tảng.[18]

Xem thêm

[sửa | sửa mã nguồn]

Tham khảo

[sửa | sửa mã nguồn]
  1. 1 2 3 Nicholas Jitkoff (ngày 25 tháng 6 năm 2014). "This is material design". Google Developers Blog (bằng tiếng Anh). Truy cập ngày 9 tháng 9 năm 2026.
  2. 1 2 3 "Material Eras". Google Design (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  3. 1 2 "Making More with Material". Google Design (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  4. 1 2 Sameer Samat (ngày 18 tháng 5 năm 2021). "Android 12 Beta: Designed for you". The Keyword (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  5. 1 2 3 "Material Design 3 in Compose". Android Developers (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  6. 1 2 "Introduction". Material Design (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  7. ↑ "Android: Be together. Not the same". The Keyword (bằng tiếng Anh). Google. ngày 15 tháng 10 năm 2014. Truy cập ngày 9 tháng 9 năm 2026.
  8. ↑ "What's new for Android developers at #AndroidDevSummit'21". Android Developers Blog (bằng tiếng Anh). Google. ngày 27 tháng 10 năm 2021. Truy cập ngày 9 tháng 9 năm 2026.
  9. ↑ Mindy Brooks (ngày 13 tháng 5 năm 2025). "Android and Wear OS are getting a big refresh". The Keyword (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  10. ↑ "Better, Easier, Emotional UX". Google Design (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  11. ↑ Shenaz Zack (ngày 3 tháng 9 năm 2025). "Material 3 Expressive updates and more in the latest Pixel Drop". The Keyword (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  12. ↑ Guemmy Kim (ngày 12 tháng 5 năm 2026). "Do more and have more fun with the next generation of Android in the car". The Keyword (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  13. ↑ Nick Butcher (ngày 19 tháng 5 năm 2026). "Android UI Development is Compose First". Android Developers Blog (bằng tiếng Anh). Google. Truy cập ngày 9 tháng 9 năm 2026.
  14. ↑ "Material Components for Android". GitHub (bằng tiếng Anh). Material Components. Truy cập ngày 9 tháng 9 năm 2026.
  15. ↑ "Material Components for the web". GitHub (bằng tiếng Anh). Material Components. Truy cập ngày 9 tháng 9 năm 2026.
  16. ↑ "Material Web". GitHub (bằng tiếng Anh). Material Components. Truy cập ngày 9 tháng 9 năm 2026.
  17. ↑ "The ThemeData.useMaterial3 flag is true by default". Flutter documentation (bằng tiếng Anh). Truy cập ngày 9 tháng 9 năm 2026.
  18. ↑ "Material Components for iOS". GitHub (bằng tiếng Anh). Material Components. Truy cập ngày 9 tháng 9 năm 2026.

Liên kết ngoài

[sửa | sửa mã nguồn]
Lấy từ “https://vi.wikipedia.org/w/index.php?title=Material_Design&oldid=75535925”