7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Material Design Lite

Tổng quan về Material Design Lite

Scroll to top
Read Time: 6 mins

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, MaterializeMaterial 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

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:

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.

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

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.

Meet the componentsMeet the componentsMeet the components
Gặp gỡ các thành phần

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
The MDL blog layout templateThe MDL blog layout templateThe MDL blog layout template
Template cho layout blog của MDL khá ngon

Tuỳ biến

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 builderTheme builderTheme builder
Theme builder của MDL

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, querySelectorclassList, 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.

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:

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.