Ngôn ngữ thiết kế UI/UX Material Design

1

Material Design là gì?

Material Design dịch nôm na sang Tiếng Việt là “Thiết kế Vật liệu”. Đây là ngôn ngữ thiết kế do Google tạo ra, ban đầu nhắm đến các app di động cho android nhưng đã sang rộng ra các nền tảng di động khác cũng như thiết kế web. Material design hỗ trợ trải nghiệm cảm ứng trên màn hình thông qua các tính năng phong phú và chuyển động tự nhiên bắt chước các đối tượng trong thế giới thực.

Giao diện theo thiết kế material design
Giao diện theo thiết kế material design

Các nhà thiết kế tối ưu hóa trải nghiệm của người dùng với các hiệu ứng 3D, ánh sáng chân thực và các tính năng hoạt hình trong các GUI phù hợp với nền tảng. Phong cách thiết kế Material Design nhắm đến những đường nét đơn giản, sử dụng nhiều mảng màu đậm nổi bật, các đối tượng đồ họa trong giao diện dường như: “trôi nổi” lên. Những hiệu ứng chuyển động tự nhiên khi các nút, menu hiện diện trên màn hình. Tất cả đều nhằm mang lại cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần giống đời thực hơn.

Bài giới thiệu Material Design từ Google cho bạn nào muốn thử cảm giác được chính chủ giải thích.

Vậy trước đây, người ta thiết kế theo phong cách gì?

Skeuomorphic design – gọi là Thiết kế Mô Phỏng – là phong cách thiết kế giữ những cấu trúc, đặc điểm thiết kế cần thiết của bản gốc, ngay cả những chức năng không cần thiết.

Trong giao diện người dùng UI, điều này có nghĩa là ứng dụng được thiết kế có những yếu tố để khiến chúng nhìn hoặc hành động như đời thật. Ví dụ cách chuyển trang của trang web giống như các lật trang sách.

Giao diện Windows XP với thiết kế mô phỏng
Giao diện Windows XP với thiết kế mô phỏng

Bạn có thể nhìn qua giao diện của window XP, các isons được thiết kế sao cho giống với nó nhất ở ngoài đời thực. Ngôn ngữ này đem lại sự quen thuộc, chân thật tuy nhiên, đối với những thiết bị có cấu hình yếu hoặc diện tích màn hình hiển thị nhỏ thì thật thảm họa.

Ưu điểm của Material design

Điều đầu tiên chúng ta có thể nhận thấy ưu điểm rõ ràng nhất của Material design là vẻ đẹp đến từ sự tối giản. Các chi tiết thừa được lược bỏ, thay vào đó là hệ thống phối màu kết hợp với các hiệu ứng như đổ bóng, animation nhằm nhấn mạnh nội dung, định hướng cho người dùng vào tính năng của ứng dụng.

Giao diện clean, gọn gàng hơn, tập trung vào bố cục và nội dung
Giao diện clean, gọn gàng hơn, tập trung vào bố cục và nội dung

UX -Trải nghiệm người dùng được cải thiện bằng cách tăng cường sự tương tác với người dùng thông qua những hiệu ứng, loại bỏ thời gian chờ đợi.  Đồng thời, khi kết hợp không gian và tương tác bằng hiệu ứng. Người dùng sẽ chú tâm hơn vào ứng dụng. Một nguyên lý thị giác đó là: Nếu một vật thể xuất hiện lên trên những thứ khác, chúng ta sẽ tập trung vào nó và dành cho nó sự quan tâm nhiều hơn những vật thể phía sau. Bạn hãy nhìn vào hiệu ứng bên dưới và cho biết, bạn đang tập trung vào khu vực nào nhất trên màn hình.

tính tương tác trong Material design

Rõ ràng là phần màu trắng vừa xuất hiện đúng không.

Trong những phần sau, chúng ta sẽ tìm hiểu kỹ hơn về những nguyên lý cơ bản của Material Design

1 bình luận
  1. […] Ngôn ngữ thiết kế UI/UX Material Design […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.