Trong sự kiện I / O 2014 vừa qua, Google đã trở lại với những bất ngờ mới. Bên cạnh việc chính thức phát hành bản cập nhật Android mới với tên mã Lollipop, Google cũng giới thiệu ngôn ngữ thiết kế mới, Vật liệu thiết kế . Đây là một hệ thống thiết kế không chỉ dành cho cải tiến giao diện người dùng Lollipop mới mà còn dành cho các thiết bị và môi trường.
Thiết kế Vật liệu có một số tính năng chính giúp phân biệt nó với các xu hướng thiết kế khác với những cách độc đáo riêng. Giống như tên của nó, nó được lấy cảm hứng từ các vật liệu thực và kết hợp chúng thành một hệ thống thiết kế để tạo ra trải nghiệm người dùng đẹp, trực quan, đẹp và tương tác nhất. Trong bài đăng này, chúng tôi sẽ xem xét những gì bên trong Thiết kế Vật liệu và cung cấp cho bạn một hướng dẫn nhanh về cách triển khai nó. Bằng cách trích dẫn blog của Google, tôi sẽ nói, Đây là Thiết kế Vật liệu.
Một lời giới thiệu
Thiết kế Vật liệu là một hệ thống thiết kế thống nhất, có nghĩa là nó được tạo ra để hoạt động với tất cả các thiết bị và nền tảng hiện có. Từ máy tính bảng, điện thoại thông minh đến máy tính để bàn và từ các nền tảng Android, iOs, Windows đến Web. Tất cả các thiết kế trông và cảm giác nên giống nhau ở mọi nơi.
Nguyên tắc chính
Có ba nguyên tắc chính xây dựng Thiết kế Vật liệu. Đây là phần cơ bản nhất của những gì Vật chất nói chung.
- Vật chất là phép ẩn dụ . Sự phát triển của Vật liệu được lấy cảm hứng từ nghiên cứu các yếu tố xúc giác mà chúng ta sử dụng hàng ngày, giấy và mực . Nó làm cho vật thể nhẹ, bề mặt và chuyển động tốt hơn khi tương tác với nhau.
- Táo bạo, đồ họa và có chủ ý . Kiểu chữ, lưới, không gian, tỷ lệ, màu sắc và sử dụng hình ảnh được sử dụng trong nền tảng thiết kế dựa trên in ấn làm cho nội dung của Vật liệu tốt hơn.
- Chuyển động cung cấp ý nghĩa . Đây là một trong những điều được chú ý nhất. Trong Tài liệu, bạn nên có chuyển động có ý nghĩa và phù hợp, phản hồi tinh tế & rõ ràng và chuyển đổi hiệu quả và mạch lạc.
Các thành phần
Thiết kế Vật liệu chú ý đến từng chi tiết của các thành phần của nó để chúng có thể được sử dụng phổ biến. Những thành phần này sẽ giúp bạn xây dựng ứng dụng và trang web tuyệt vời. Có rất nhiều thành phần được cung cấp bởi Vật liệu như nút, chuyển đổi, thẻ, nhập văn bản, fab (nút hành động nổi), hộp thoại, bánh mì nướng, menu phụ, tab và nhiều hơn nữa. Mỗi người trong số họ có quy tắc riêng và hướng dẫn về cách xây dựng chúng để bạn không có bất kỳ yếu tố không quan trọng nào.
Mô hình điều
Bên cạnh các thành phần, Vật liệu cũng cung cấp cho bạn một số mẫu cơ bản cho giao diện người dùng bổ sung. Các mẫu này sẽ cải thiện giao diện người dùng bạn đã tạo với các thành phần của Vật liệu. Các mẫu bao gồm định dạng dữ liệu, ngăn kéo điều hướng, lỗi, cử chỉ, kỹ thuật cuộn, tìm kiếm, cài đặt, tải hình ảnh, vuốt để làm mới và nhiều hơn nữa.
Chất liệu thiết kế màu sắc
Màu sắc trong Chất liệu được thiết kế theo cách không khiến bạn cảm thấy khó chịu, lạ và phẳng. Lấy cảm hứng từ môi trường hàng ngày của chúng tôi như biển báo đường, kiến trúc đương đại, băng đánh dấu mặt đường và sân thể thao, Thiết kế Vật liệu mang đến cho bạn những màu sắc bất ngờ và có tinh thần cao. Có rất nhiều bảng màu để lựa chọn giúp bạn thuận tiện hơn khi phát triển ứng dụng hoặc trang web. Bạn cũng có thể tải xuống các mẫu màu để sử dụng cục bộ như cho bộ sưu tập Photoshop của bạn.
Biểu tượng của vật liệu
Nếu bạn là nhà phát triển Android, thì bạn phải làm quen với một số gói biểu tượng miễn phí do Google cung cấp. Chúng thường chỉ được sử dụng cho phần tử chính và thanh hành động. Trong khi đối với các tài nguyên khác, chúng tôi phải tìm kiếm các biểu tượng khác như thư mục, tệp, sao chép và dán, v.v. Trong Thiết kế Vật liệu, Google đã khắc phục sự cố với hàng tấn gói biểu tượng bạn có thể sử dụng.
Mỗi biểu tượng đã trải qua một số phương pháp thiết kế cũng sử dụng nghiên cứu các vật liệu xúc giác. Họ đang duy trì nguyên tắc Vật chất quá, đó là nhất quán. Bạn có thể tải xuống các biểu tượng này trên GitHub, chúng đi kèm với một số tùy chọn cho việc sử dụng khác nhau như cho iOs, web, Android hoặc svg. Nếu bạn muốn một tùy chọn rộng hơn để dễ dàng tùy chỉnh, có lẽ bạn muốn xem các gói biểu tượng Thiết kế Vật liệu trên FlatIcon. Trong gói, bạn sẽ nhận được vector biểu tượng (SVG & EPS), phiên bản PSD và PNG.
Chất liệu hoạt hình
Đây là tính năng của Vật liệu tôi thích nhất. Các hình ảnh động trong Vật liệu rất thật và trực quan. Mỗi hoạt hình có một chuyển tiếp thời gian có ý nghĩa, nhất quán và đúng. Bản demo gif cho bạn thấy dưới đây chỉ là một trong những hình ảnh động Vật liệu đẹp. Để cung cấp sự tương tác hấp dẫn và đáp ứng, nhóm Google cũng tạo hoạt hình giống như gợn nước cho hiệu ứng đầu vào của người dùng. Nó chủ yếu được sử dụng trên các nút và thẻ.
Những tính năng tôi giải thích chỉ là một phần nhỏ của những gì Thiết kế Vật liệu cung cấp. Để tìm hiểu thêm về thế giới Vật chất, chỉ cần vào trang tài liệu.
Thực hiện
Theo mặc định, Thiết kế Vật liệu là bản cập nhật giao diện người dùng mới cho Android Lollipop. Tất cả các hướng dẫn mà Vật liệu đã được áp dụng bên trong nó. Vì Vật liệu dành cho tất cả các loại môi trường, nên việc triển khai nó sang một hệ thống khác sẽ không khó. Và nhờ có cộng đồng, việc tạo ra một số công cụ thậm chí còn dễ dàng hơn nhiều.
Đây là một số cách bạn có thể đạt được để có được Thiết kế Vật liệu bên ngoài Android, ví dụ như web.
Sử dụng CSS Framework
Đây là cách dễ nhất nếu bạn muốn triển khai Thiết kế Vật liệu trong nền tảng web. Với các khung công tác, tất cả những gì bạn cần làm là khởi tạo nó sau đó viết các phần tử bạn cần. Có nhiều khung bạn có thể sử dụng như Materialize, UI UI hoặc Polymer để đặt tên cho một số. Sự lựa chọn cá nhân của tôi rơi vào vật chất. Nó dễ sử dụng và hiểu hơn và có tài liệu tuyệt vời với bản demo đẹp.
Theo hướng dẫn
Nếu bạn muốn triển khai Tài liệu mà không có sự trợ giúp của khung công tác và thích gây rối nhất với mã, thì bạn phải tuân theo các nguyên tắc Vật liệu. Ở đó, bạn sẽ tìm thấy tất cả những điều nên và không nên làm để đạt được các nguyên tắc Vật chất. Bạn sẽ thấy tất cả các hướng dẫn cơ bản để tạo các thành phần, bố cục, hoạt hình, màu sắc, hoa văn và nhiều hơn nữa. Bạn có thể muốn xem một số danh sách kiểm tra Vật liệu để phát triển dễ dàng hơn.
Phần kết luận
Thiết kế vật liệu là một hệ thống thiết kế tuyệt vời và đã trở thành một trong những xu hướng được mong đợi nhất trong năm. Trong vài tháng tới, chúng ta có thể thấy nó ở khắp mọi nơi. Nhiều ứng dụng và trang web sẽ được đánh bóng bằng bản cập nhật thiết kế mới này của Google.
Và với Thiết kế Vật liệu, Google đã chứng minh sự vượt trội của mình là một trong những công ty công nghệ lớn nhất. Nó làm cho Google không chỉ dẫn đầu trong lĩnh vực công cụ tìm kiếm và hệ điều hành di động mà còn trong lĩnh vực thiết kế. Cho đến nay, không có công ty nào khác phát triển điều lớn lao như Google đã làm. Nhưng kinh nghiệm nói, nó sẽ không tồn tại lâu. Chúng ta hãy chờ đợi các công ty khác phản hồi về Thiết kế Vật liệu của Google.
