Nếu bạn làm Android thì bạn đã không còn xa lạ gì với Material Design. Được chính thức giới thiệu tại Google I/O 2014, MD đã trở thành ngôn ngữ thiết kế chủ đạo của Google không chỉ trong các ứng dụng Android, mà còn là cho iOS và Web nữa. Vậy, để thiết kế ứng dụng theo phong cách MD thì bạn cần thực hiện bố trí bố cục như thế nào?
1. Material Design là gì?
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. (https://material.io/)
Triết lí chung của MD là thiết kế một giao diện phẳng, với tông màu đậm và tương phản ở mức độ hài hòa, vừa giúp các cặp mắt của người dùng dễ dàng phân biệt các đối tượng, vừa tránh sự choảng nhau của các màu sắc. Khác với giao diện Metro/Modern của Microsoft hay giao diện thiết kế mới của Apple trên iOS7 và Mac OS X Yosemite về sau, Material Design mặc dù cũng mang cảm giác phẳng, tuy nhiên, sự phẳng này mang tính tầng lớp, nhiều tầng, và chịu ảnh hưởng của ánh sáng chứ không phải chỉ gồm mỗi một tầng như trên Metro hay các phần mềm của Apple.
Không dừng lại ở đó, Material Design còn bao gồm các hiệu ứng, không chỉ hiệu ứng gắn với toàn thể đối tượng, ví dụ khi đối tượng xuất hiện hoặc ẩn đi, mà còn là các hiệu ứng gắn với các sự kiện khi chúng ta tương tác với đối tượng đó, chẳng hạn đối tượng thay đổi độ cao với hiệu ứng đổ bóng khi bạn rê chuột lại chúng, hoặc hiệu ứng ripple khi bạn click vào chúng. Ngoài ra, MD còn gồm các hiệu ứng chuyển cảnh nữa.
2. Các đặc điểm nổi bật của Material Design so với các phong cách khác:
Điểm nổi bật nhất và làm MD trở nên khác biệt có lẽ là phong cách thiết kế dạng card (CardView nếu là trên di động). Đối với các ngôn ngữ thiết kế khác như Metro/Modern hay Apple, do các thành phần giao diện được thiết kế theo hướng cùng nằm trên một mặt phẳng duy nhất, nên hầu như không có khái niệm đổ bóng. Còn với MD, như đã nói, các thành phần được sắp xếp phân tầng, thể hiện qua phần bóng (shadow) và màu sắc, mỗi thành phần là một mảnh giấy có chiều dài và chiều rộng xác định. Các biên của chúng là phần rìa của mảnh giấy, chứ không phải là đường phân chia như trong các giao diện khác. Chẳng hạn:
Ngoài ra, MD còn hạn chế sử dụng chữ hơn so với các ngôn ngữ khác. Thông thường thì các nút hành động nhanh (trên Toolbar chẳng hạn) thường sử dụng các biểu tượng (icon) để minh họa, thay vì sử dụng chữ để diễn giải. Việc sử dụng chữ nghĩa để giải thích hành động đơn giản là cực kì hạn chế, trừ khi là không thể không dùng chữ. Và do đó, việc thiết kế các biểu tượng trừu tượng nhưng dễ hiểu, thể hiện ý nghĩa hành động. Chẳng hạn như bên dưới:
Trái hẳn với phong cách Metro “đời đầu” (tôi sẽ gọi là Metro từ bây giờ, còn hiện tại sẽ là Modern) vốn sử dụng chữ tới mức lạm dụng, bạn sẽ thấy MD thoáng hơn nhiều so với “đám rừng” bên dưới. Đó là hình ảnh về ứng dụng Cài đặt/Settings của Windows Phone 7/8.
Sự thật mà nói, tôi cho rằng chính vì cái “đám rừng” kia mà Windows Phone không thể cất cánh nổi. Bố cục kì cục và màu sắc quá đơn điệu, tương phản quá cao gây khó chịu cho người dùng chỉ có thể làm hài lòng mỗi fan “ruột” nguyện “sống chết” cùng Nokia. Họ yêu thích Windows Phone chỉ vì quyến luyến thương hiệu “Nó kìa” đã đồng hành với họ quá lâu.
Material Design “ưa” các màu sắc sặc sỡ làm các màu chính và phụ (Primary và Accent), ngoài ra thì còn có màu PrimaryDark trên di động. Tuy nhiên, việc sử dụng số màu lớn hơn 4 (ngoài các màu nền và màu của nội dung – chẳng hạn ảnh) ra lại là một điều bạn nên hạn chế. Tóm lại, ở đây có nghĩa là MD không đơn điệu nhưng cũng không quá phức tạp một cách không cần thiết về mặt tông màu.
Về mặt chữ nghĩa, thì MD cũng có một số yêu cầu. Cụ thể, về mặt Typeface, bạn nên chọn các font chữ dễ nhìn, dễ phân biệt, mang tính bình dị để làm nội dung. Phần font cho tiêu đề có thể là kiểu chữ “điệu” hơn một chút, và phải vừa đậm vừa to hơn so với font chữ nội dung. Tuy nhiên, chỉ là to hơn ở một mức độ vừa phải đủ để người dùng nhận ra đó là tiêu đề, chứ không phải bạn dùng font 40pt cho tiêu đề và font 11pt cho nội dung thì ông Matias Duarte (xin mời Google – bạn có để ý tên ông ấy không) sẽ “cạn lời, sa mạc lời, hạn hán lời” với bạn.
MD còn giới thiệu một thành phần tương đối mới, đó là Snackbar. Snackbar vừa là một View mới, vừa là một sự nâng cấp đáng kể cho Toast. Nếu bạn làm ứng dụng Android, thì bạn nên cân nhắc đổi Toast sang Snackbar.
3. Tiêu chuẩn của MD:
Các nội dung tôi đã nói ở phần 2 bên trên cũng là một số tiêu chuẩn của MD. Còn các thông tin khác về margin, padding, shadow size, elevation thì bạn vui lòng tham khảo hướng dẫn chính chủ của họ tại địa chỉ tôi đã đưa ra ở phần 1. Tuy nhiên, các tiêu chuẩn đó cũng có thể “co dãn” tùy bạn. Miễn sao bạn cho là bố cục đẹp, vừa mắt, không gây lẫn lộn thì bạn cứ làm.
Mặc dù các màu sắc MD được cung cấp ở https://material.io/guidelines/style/color.html#color-color-palette nhưng thực tế Google cũng có sử dụng các màu nằm ngoài bảng palette đó. Vì vậy, nếu bạn không dùng màu MD thì cũng không thành vấn đề.
4. Áp dung Material Design trong các ứng dụng Android:
Material Design được sinh ra là để dành cho Android Lollipop về sau. Nó kế thừa, duy trì những Views đã có từ thời Android đầu tiên và nâng cấp, “trùng tu” các Views được giới thiệu với giao diện Holo ra mắt với Android ICS. Vì vậy, việc thiết kế ứng dụng cho “con rô bô xanh” theo phong cách Material Design là vô cùng dễ dàng. Thực tế, Google có AppCompat để đem giao diện MD tương thích ngược trở lại tận Android 2.3 Gingerbread và “ép buộc” các developers sử dụng AppCompat ngay từ lúc tạo project. Họ đã cấu hình gần như toàn bộ các Views nên bạn chỉ việc drag and drop hay điền các thông tin vào XML layout mà thôi, còn phần giao diện của từng View thì đã được lo liệu sẵn.
5. Áp dụng Material Design trong các ứng dụng iOS:
Google sử dụng MD làm ngôn ngữ thiết kế mang tính “global” cho các sản phẩm của mình. Và trên di động thì các dịch vụ của Google cho iOS cũng sử dụng MD thay cho “giao diện Google cũ” vốn pha trộn giữa Holo và giao diện gốc của iOS. Trước đây thì Google “giữ khư khư” các thành phần MD cho iOS riêng cho họ nên nếu bạn muốn dùng MD để thiết kế ứng dụng cho iPhone và iPad, bạn buộc phải dùng các thư viện ngoài mà chủ yếu là từ GitHub. Còn bây giờ, “The Big G” đã phát hành rộng rãi các thiết kế “chính chủ” của họ, nên bạn có thể dùng chúng luôn. Về chi tiết, bạn tham khảo tại đây: https://material.io/components/ios/docs/tutorial/.
6. Áp dụng Material Design cho ứng dụng Web:
Vì MD là ngôn ngữ xuyên suốt trong các sản phẩm của cty tại Mountain View, CA, nên việc nó xuất hiện trong các phiên bản web của các sản phẩm Google là điều không có gì lạ. Chúng được tạo với Project Polymer. Tuy nhiên, bạn vẫn có thể dùng CSS để biến các HTML elements trên trang trông giống như MD mà không cần dùng Polymer, đặc biệt là đối với các trang web tĩnh. Sắp tới, tôi sẽ làm một series về Material Design CSS tại đây và hi vọng các bạn sẽ đón theo dõi.
7. “Tôi có nên sử dụng Material Design không?”
Đối với iOS và Web thì bạn cũng đã tự nghĩ ra câu trả lời rồi: Thích thì dùng, không thích thì không dùng và Mĩ cũng chẳng lấy đó làm cớ mà đánh VN đâu.
Riêng với Android, thì do theo mặc định, khi bạn create a new project thì giao diện gốc chính là MD. Do đó, sẽ có khả năng rất cao là bạn sẽ sử dụng MD để làm ứng dụng, đặc biệt là các bạn “chân ướt chân ráo” mới code Android. Tuy nhiên, Google cũng không cấm bạn sử dụng phong cách bạn tự thiết kế, nên bạn thích tự thiết kế thì cứ dùng, không sao cả. Quan trọng nhất là tính dễ dùng, dễ nhận biết. Bạn cho là người dùng sẽ cảm thấy thoải mái với giao diện bạn làm thì cứ triển khai thôi. Có “đầy” các ứng dụng của Android không được thiết kế theo quy chuẩn MD nhưng người dùng vẫn đón nhận nồng nhiệt đó thôi, nhất là các ứng dụng làm bằng React Native.
