https://webdesign.tutsplus.com/vi/articles/an-overview-of-material-design-lite--cms-24370
Last updated
by Thoriq Firdaus8 Jul 2015Length:ShortLanguages:EnglishEspañolFrançaisItalianoPolskiPortuguêsPусскийTiếng ViệtMaterial Design LiteMaterial Design
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Tôi có cảm giác rằng CodePen sẽ tràn ngập các thiết kế Material Design trong những tháng tới. Tại sao ư? Bởi vì Google vừa phát hành Material Design Lite (MDL) của họ. Thư viện các thành phần cho front-end này cho phép các nhà thiết kế web cài đặt đặc tả thiết kế Material Design của Google bằng HTML, CSS và JavaScript thuần tuý. Đó là một phiên bản nhẹ hơn của đặc tả Material Design (ít phụ thuộc, không nặng, rất tập trung) vì thế nó được gọi là "Lite".
Khi phát hành MDL, Google đã đáp ứng một nhu cầu rất rõ ràng. Họ ghi nhận thực tế rằng có những nỗ lực từ cộng đồng nhằm xây dựng các framework lấy cảm hứng từ Material Design, ví dụ một vài cái tên như Bootstrap Material Design, Materialize và Material UI. Với MDL, được xây dựng bằng sự cộng tác chặt chẽ với nhóm Chrome UX, Google đã đưa ra một tiêu chuẩn về cách thiết kế Material Design nên được cài đặt trên các trang web.
Hãy cùng tìm hiểu về những gì mà MDL đã cung cấp trong lần phát hành đầu tiên của nó!
Không giống như các Phần tử Material Design của Polymer (còn gọi là Paper Elements) được phát triển cho các trang web và ứng dụng có tính tương tác cao, MDL tập trung chủ yếu vào các trang web có nội dung đơn giản hơn như blog, tiếp thị và landing.
Trong bản phát hành đầu tiên này, MDL đi kèm với một số ít các thành phần, bao gồm:
Thành phần layout bao gồm một số khối xây dựng để cấu trúc các trang. Ví dụ, Grid: một tính năng cơ bản của bất kỳ framework nào dành cho front-end. Grid của MDL được xây dựng bằng Flexbox và một ít trợ giúp từ calc() của CSS. Nó có mười hai cột thiết lập cho các viewport lớn, tám cột cho viewport có kích thước như máy tính bảng và bốn cột cho các viewport nhỏ hơn.
Thành phần Layout của MDL cũng bao gồm điều hướng, các tab và footer—mỗi cái đều được tối ưu hóa cho các kích thước viewport khác nhau.Advertisement
Theo các nguyên tắc Material Design, có một số kiểu button trực quan khác nhau, một số đó là:
Button thông thường: một button hình chữ nhật cơ bản với màu nền khác với màu chữ.
Button phẳng: một button không có nền.
Float Action Button (FAB) là một button rất riêng của Material Design: một nút tròn chạy trên giao diện, thường chứa hành động chính của màn hình hiện tại hoặc, trong trường hợp này là trang.
Mỗi nút có thể được cải tiến bằng hiệu ứng gợn sóng quen thuộc.
Một thẻ là một vùng chứa (container) để hiển thị nội dung, như văn bản và hình ảnh, thường quảng bá một số loại hành động. Ví dụ, một hình ảnh có nút "like" hoặc "share", danh sách nhạc có nút "play" hoặc có thể là ghi chú có nút "Save".
Một badge là một vòng tròn nhỏ, được đặt gần một phần tử UI, thường chứa một con số (có thể để chỉ những thư chưa đọc hoặc các tin nhắn đến) hoặc một biểu tượng. Ngày nay, khi thông tin liên tục đi qua các thiết bị của chúng ta, một "badge" có thể được xem là một thành phần UI rất quan trọng trong bất kỳ thiết kế nào.
Ngoài ra, Google cũng cung cấp một vài template để giúp bạn nhanh chóng làm quen với cấu trúc Layout thích hợp. Có năm kiểu template trong phiên bản đầu tiên này:
Blog
Bài viết
Một ứng dụng hoặc một trang Landing
Một dashboard
Một trang web chứa nhiều văn bản
Tập tin kết quả material.min.css là khá nhỏ (17.6kB gzip), nhưng đối với những người cần kiểm soát hoàn toàn để giảm xuống tối đa, thì mã nguồn có sẵn trong kho Github.
Vì hầu hết các thành phần trong MDL được xây dựng bằng các kỹ thuật web tiên tiến, chẳng hạn như calc(), Flexbox, querySelector và classList, nên MDL sẽ chỉ hoạt động hoàn hảo trong các trình duyệt hiện đại: Chrome, Firefox, Opera, Microsoft Edge. MDL sẽ suy giảm đáng kể trong các trình duyệt cũ hơn, chẳng hạn như IE9, bằng cách chỉ phục vụ phiên bản CSS. Các phần tử tương tác (chẳng hạn như hiệu ứng gợn sóng trong button) sẽ không có mặt.
Bây giờ bạn đã có thêm một framework cho front-end trong hộp công cụ của bạn cùng với Bootstrap và Foundation. Tuy nhiên, MDL không có ý định thay thế, hoặc trở thành một người kế nhiệm Bootstrap. Material Design là một phần trong sứ mệnh của Google nhằm đảm bảo rằng các giao diện, cũng như trải nghiệm người dùng trong các dòng sản phẩm của họ đều nhất quán, thống nhất và được cân nhắc kỹ.
Hãy tự nhắc mình về ý tưởng cốt lõi:
"Chúng ta thử thách bản thân để tạo ra một ngôn ngữ trực quan cho người dùng của chúng ta, tổng hợp các nguyên tắc cổ điển của thiết kế tốt cùng với sự đổi mới và khả năng của công nghệ và khoa học." —Giới thiệu về Material Design của Google
Vì vậy hãy nhớ, mặc dù MDL phù hợp với các sản phẩm của Google, nhưng nó có thể không tốt khi được triển khai trong một trang web không liên quan gì đến Google. Tuy nhiên, như chúng ta đã vừa khám phá, Google cung cấp toàn bộ quyền kiểm soát mã nguồn, cho phép chúng ta tùy biến nó từ chi tiết nhỏ nhất. Và đó là những gì chúng ta sẽ đề cập đến trong bài tiếp theo. Vì vậy, hãy nhớ theo dõi nhé!
Giới thiệu về Material Design Lite của Addy Osmani
Các thành phần cơ bản khác bạn sẽ tìm thấy trong MDL bao gồm các input, slider, toggle, menu, tooltip, và các biểu tượng của Material Design.Gặp gỡ các thành phần
Template cho layout blog của MDL khá ngon
Các phong cách của MDL được cấu trúc bằng Sass và phương pháp BEM. Các phong cách có thể được tùy biến bằng nhiều cách, ngay cả trước khi bạn tải xuống gói framework. Một trong những cách đó là với bánh xe màu trên trang Customize. Bánh xe màu cho phép bạn lựa chọn các màu tương phản dựa trên việc chọn các màu chính. Customizer sau đó sẽ tạo ra stylesheet để bạn có thể tải về hoặc liên kết trực tiếp từ Google CDN.Theme builder của MDL
Tuy vậy, UI vẫn còn hoạt động tốt trong IE8. Ví dụ, hãy xem các button và phần tử table:
