Tổng quan về Material Design Lite

https://webdesign.tutsplus.com/vi/articles/an-overview-of-material-design-lite--cms-24370

Tổng quan về Material Design Lite

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)

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ó!

Các Thành phần Material Design

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:

Layout

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

Button

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.

Thẻ

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".

Badge

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.

Và Còn nữa

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:

  1. Blog

  2. Bài viết

  3. Một ứng dụng hoặc một trang Landing

  4. Một dashboard

  5. Một trang web chứa nhiều văn bản

Tuỳ biế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.

Trình duyệt Hỗ trợ

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.

Tóm tắ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é!

Tài liệu Tham khảo

PreviousThẻ colgroup cho phép chúng ta điều chỉnh độ rộng của table (ok)NextFullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider scroll template html (ok)

Last updated