Khi trào lưu flat design do Microsoft và Apple khởi xướng có vẻ dịch chuyển sang phía bên kia của đỉnh cao, tháng 6 năm 2014, Google đã đem tới một triết lý khác trong thiết kế phần mềm, đó là "Material Design".
Từ đó đến cuối năm 2014, "material design" bắt đầu xuất hiện trong các sản phẩm mới của Google, như Android 5.0 Lollipop, Polymer... Hàng loạt ứng dụng web như Gmail, Google Drive, Google Keep... cũng đã được thiết kế lại. Và hiện giờ thì triết lý "Material Design" đã trở thành làn sóng cảm hứng sáng tạo mới cho các designers khắp thế giới. Như ngày 15/1 vừa rồi, Fyza Hashim, nữ designer của Trello viết trên blog của công ty: "We Are Living In A Material World And I Am A Material Girl". Đó là một bài viết mà các designers nên tham khảo vì trong đó Fyza nói rất rõ cách mà cô vận dụng triết lý "Material Deisgn" vào từng nhóm đối tượng UI và các hiệu ứng tương tác, dựa trên guidelines của Google. Ngoài ra, loạt bài "Understanding Material Design" của Raveesh Bhalla trên Medium cũng thuộc vào dạng must-read.
Để thêm một chút hình dung tư tưởng thẩm mỹ trong "Material Design". Mời các bạn xem qua video giới thiệu sau (48 giây):
"Material Design" là hệ thống bao gồm thiết kế hiệu ứng thị giác, thiết kế chuyển động, và thiết kế tương tác, nhất quán đối với mọi thiết bị. Đây là điều kiện tiên quyết để một thiết kế được gọi là "Material Design". Nó phải như nhau trên mọi devices. Hiệu ứng khi user click vào 1 button trên web xảy ra như thế nào thì khi touch nó trên mobile cũng phải đúng như vậy. Trong thế giới của "Material Design", người ta không phải quan tâm đến các khái niệm responsive hay adaptive nữa. Bởi vì điều đó diễn ra một cách tự nhiên đúng như nó vốn phải thế.
Thiết kế theo triết lý "Material Design" là sắp xếp các đối tượng thiết kế vào trong một môi trường 3D. Dù bạn trông nó có vẻ phẳng, nhưng mọi đối tượng đều có 3 thuộc tính căn bản liên quan đến 3 chiều không gian: x, y và z. Trong môi trường 3D đó, có 2 khái niệm khác mà designers phải quan tâm: ánh sáng (Light) và bóng đổ (Shadow).
Vì triết lý "Material Design" phản ánh thế giới thực nên các đối tượng trong nó cũng có một số đặc tính vật lý bất biến và những cách thức phản ứng cố hữu đối với lực tương tác từ bên ngoài. Có thể tóm tắt như sau:
- Đối với 3 thuộc tính x, y và z thì x và y là hay thay đổi, còn z cố định. Không bao giờ có đối tượng mà độ dày bằng 0 (hiểu đơn giản tức là mọi vật thể đều có 3 chiều vật lý, shadow luôn tồn tại).
- Khi bạn đặt 1 element lên trên 1 element khác thì phải có shadow thể hiện rõ điều đó. Ở đây xuất hiện một khái niệm gọi là "cao độ" (Elevation). Cao độ này quyết định phạm vi của bóng đổ bên dưới. Element càng được nâng cao lên khỏi element bên dưới thì bóng của nó càng lan rộng. Bên cạnh elevation, cũng có "resting elevation", quyết định hình dạng của bóng đổ bên dưới.
- Các đối tượng không được uốn cong hoặc gấp lại. Kiểu như hiệu ứng lật trang sách không thuộc "Material Design". Cũng không có chuyện element này xuyên qua element kia.
- Giữa các đối tượng có quan hệ mật thiết với nhau về không gian tồn tại. Khi một đối tượng dịch chuyển, các đối tượng xung quanh sẽ chịu tác động vật lý. Tùy theo cách bố trí, các đối tượng cũng thừa kế lẫn nhau thuộc tính của chúng. Designers phải "keep in mind" vấn đề này khi thiết kế motion và hiệu ứng tương tác trên giao diện.
Để làm nổi bật các đặc điểm vật lý trên, "Material Design" thường sử dụng các gam màu đậm và các mảng màu phẳng đặt sát nhau. Hiệu ứng blury cũng có chỗ đứng nhất định ở các phần không gian giao nhau.
Triết lý "Material Design" đặc biệt chú trọng đến tính "meaningful" của hiệu ứng chuyển tiếp và chuyển động. Có một số quy ước như sau:
- Phản ứng bề mặt (surface reaction): khi click/touch lên 1 đối tượng, sẽ xuất hiện hiệu ứng giúp nhận biết tác động đã diễn ra trên bề mặt đối tượng đó.
- Hình ảnh tiếp diễn (visual continuity): các chuyển tiếp dẫn đến thay đổi về trạng thái nên rõ ràng, loại trừ mọi cảm giác khó chịu/khó hiểu đối với người sử dụng. Chẳng hạn click vào 1 button, không nên bụp 1 cái hiện ra dialog, mà phải biểu đạt được mối quan hệ nhân-quả giữa cái click trước đó với giao diện dialog đang mở ra.
Trong 2 ví dụ dưới đây, tính "meaningful transition" có khác biệt rất dễ thấy:
- Good -
- Bad -
- Khi trình diễn một dãy chuyển động, các chuyển động phải có tính tuần tự thuận theo quan sát tự nhiên của người dùng. Chuyển động phải nhịp nhàng, các thời điểm trong toàn bộ tiến trình chuyển động phải liên kết chặt chẽ và được sắp xếp có chủ ý. Mọi chuyển động ngẫu nhiên bất thường (haphazard motion) phải bị loại bỏ. Quan sát 2 ví dụ sau. Mẫu đầu tiên hợp lý hơn vì các hình vuông xuất hiện theo đúng trải nghiệm thị giác phổ thông: từ trái sang phải, từ trên xuống dưới.
- Good -
- Bad -
Các nguyên tắc về phối màu, sử dụng font chữ, icons, layout và components được trình bày rất rõ trong bản đặc tả về "Material Design" của Google, kèm theo nhiều ví dụ minh họa dễ hiểu. Mời các bạn designers tham khảo tại:
Ngoài ra, video "Google I/O 2014 - Material design principles" có sự góp mặt của Matias Duarte, giám đốc thiết kế ở Google sẽ bổ sung thêm những kiến thức xung quanh:
Trên thực tế, Matias đã nuôi nấng một triết lý mới trong thiết kế từ những năm 2011, mà chúng ta có thể thấy bóng dáng tư tưởng "Material Design" trong một vài sản phẩm Google từ dạo đó. Nhưng phải đến 2014 anh và các cộng sự mới hoàn thiện được lý thuyết và chính thức công bố ra thế giới.
Đối với front-end developers, câu chuyện xem ra khá thuận lợi. Đã có không ít bộ công cụ được xây dựng với chủ đích hỗ trợ các thiết kế dựa trên triết lý "Material Design", mà dự án Polymer là tiên phong.
Polymer là dự án của Google nhằm đẩy nhanh việc áp dụng chuẩn Web Components vào thực tiễn. Các concepts về Web Components được mô tả lần đầu trong bản draft của W3C từ giữa năm 2012.
Nếu bạn còn xa lạ với Web Components, hãy thử MaterializeCSS :
MaterializeCSS dùng các tags truyền thống để markup.
Material-UI là một tập components được 1 Việt kiều tên là Hai Nguyen xây dựng cho dự án Call-Em-All mà anh đồng sáng lập.
CSS framework này dùng semantic tags và có Node.js module đem "Material Design" đến với React.
Nếu bạn quen thuộc với Bootstrap thì đây là một phiên bản Bootstrap dùng cho "Material Design":
Tin rằng, những resources trên sẽ giúp các front-end developers dễ dàng biến những thiết kế "Matirial Design" trở thành hiện thực.
Lời kết
Ở nơi triết lý "Material Design" có sự kết hợp giữa quan điểm minimalist trong "flat design" với phong cách skeuomorphism trong "ornamental design". "Material Design" cũng đơn giản hóa các đối tượng như "flat design", nhưng vẫn cố gắng phản ánh hiện thực thông qua các biểu tượng ẩn dụng (metaphor). Tuy nhiên điều mà tôi thích thú nhất ở "Material Design", cũng là điều khiến tôi không thích "flat design", chỉ đơn giản là hiệu ứng bóng đổ. Tôi đặc biệt ưa thích hiệu ứng bóng đổ. "Flat design" hủy diệt chúng, và giờ đây "Material Design" đã đem chúng trở về. Đó là điều tuyệt vời nhất!
