Material Design 百科全书-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是由 Google 推出的一种设计语言，旨在提供一种更加统一、清晰、直观的用户界面设计体验。该设计语言不仅仅是一种美学风格，还包括了一系列的设计原则、组件和工具，可以帮助开发者快速构建出符合 Material Design 规范的网站和应用程序。本文将详细介绍 Material Design 的设计原则、组件和工具，以及如何在前端开发中使用它。

设计原则

Material Design 的设计原则主要包括以下几个方面：

Material

Material Design 的设计基于物质的概念，即所有的元素都是由实际的物质构成的。这些元素可以是纸张、沙子、水滴等等，每个元素都有自己的厚度、大小、形状和颜色等属性。这种设计风格让用户更容易理解和操作界面上的元素，同时也增强了用户的沉浸感。

Bold Graphics

Material Design 的设计风格非常大胆、鲜明，注重使用大面积的颜色和图形来传达信息。这种风格可以让用户更加容易地注意到界面上的重要信息，同时也增强了用户的视觉体验。

Motion

Material Design 强调界面元素之间的过渡效果和动画效果，这些效果可以让用户更加自然、流畅地操作界面。例如，在切换页面时可以使用渐变效果或者滑动效果，这些效果可以让用户感觉到页面之间的连续性和流畅性。

Responsive Interaction

Material Design 也注重界面元素的交互性，即用户可以通过手势、鼠标等方式与界面元素进行交互。例如，在滑动页面时可以使用惯性滑动效果，或者在点击按钮时可以使用水波纹效果等等。这些交互效果可以让用户更加容易理解和操作界面上的元素。

组件

Material Design 包含了一系列的组件，可以帮助开发者快速构建出符合 Material Design 规范的网站和应用程序。下面介绍几个常用的组件：

Buttons

按钮是网站和应用程序中最常用的交互元素之一，Material Design 中的按钮风格非常鲜明、大胆，使用大面积的颜色和图形来传达信息。例如，可以使用不同的颜色和形状来表示不同的按钮类型，如下所示：

<button class="mdc-button mdc-button--raised mdc-button--primary">
  Primary Button
</button>
<button class="mdc-button mdc-button--raised mdc-button--secondary">
  Secondary Button
</button>

Cards

卡片是一种常用的 UI 元素，可以用于显示各种类型的信息，如文章、图片、视频等等。Material Design 中的卡片有明显的阴影和边框，可以让用户更加容易地理解卡片的边界和内容。例如，可以使用以下代码创建一个简单的卡片：

// javascriptcn.com 代码示例
<div class="mdc-card">
  <div class="mdc-card__primary-action">
    <div class="mdc-card__media mdc-card__media--square">
      <div class="mdc-card__media-content">
        <img src="https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg" alt="Placeholder">
      </div>
    </div>
    <div class="mdc-card__primary">
      <h2 class="mdc-card__title mdc-card__title--large">Card Title</h2>
      <h3 class="mdc-card__subtitle">Card Subtitle</h3>
    </div>
  </div>
  <div class="mdc-card__actions">
    <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
    <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
  </div>
</div>

Dialogs

对话框是一种常用的 UI 元素，可以用于提示用户进行某种操作或者显示一些重要信息。Material Design 中的对话框有明显的阴影和边框，并且可以包含标题、正文、操作按钮等内容。例如，可以使用以下代码创建一个简单的对话框：

// javascriptcn.com 代码示例
<div class="mdc-dialog">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface">
      <h2 class="mdc-dialog__title">Dialog Title</h2>
      <div class="mdc-dialog__content">
        Dialog Content
      </div>
      <div class="mdc-dialog__actions">
        <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
        <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
      </div>
    </div>
  </div>
  <div class="mdc-dialog__scrim"></div>
</div>

Forms

表单是网站和应用程序中最常用的 UI 元素之一，可以用于收集用户输入的信息。Material Design 中的表单风格非常清晰、直观，可以让用户更加容易理解和填写表单。例如，可以使用以下代码创建一个简单的表单：

// javascriptcn.com 代码示例
<form class="mdc-form">
  <div class="mdc-text-field mdc-text-field--outlined">
    <input type="text" class="mdc-text-field__input" id="username" name="username">
    <label class="mdc-floating-label" for="username">Username</label>
    <div class="mdc-notched-outline">
      <svg>
        <path class="mdc-notched-outline__path"></path>
      </svg>
    </div>
  </div>
  <div class="mdc-text-field mdc-text-field--outlined">
    <input type="password" class="mdc-text-field__input" id="password" name="password">
    <label class="mdc-floating-label" for="password">Password</label>
    <div class="mdc-notched-outline">
      <svg>
        <path class="mdc-notched-outline__path"></path>
      </svg>
    </div>
  </div>
  <button class="mdc-button mdc-button--raised mdc-button--primary">Submit</button>
</form>

工具

Material Design 还提供了一些工具，可以帮助开发者更加轻松地使用 Material Design。下面介绍几个常用的工具：

Material Design Lite

Material Design Lite 是一个基于 Material Design 的前端框架，可以帮助开发者快速构建出符合 Material Design 规范的网站。该框架提供了一系列的组件和样式，可以直接在 HTML 中使用。例如，可以使用以下代码引入 Material Design Lite：

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

然后可以使用以下代码创建一个简单的按钮：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  Button
</button>

Material Design Icons

Material Design Icons 是一个包含了大量 Material Design 图标的图标库，可以帮助开发者更加轻松地使用 Material Design 图标。该图标库提供了 SVG、PNG、Webfont 等多种格式的图标，可以直接在 HTML 中使用。例如，可以使用以下代码引入 Material Design Icons：

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">

然后可以使用以下代码创建一个简单的图标：

<i class="mdi mdi-heart"></i>

如何在前端开发中使用 Material Design

在前端开发中使用 Material Design 可以帮助开发者更加轻松地构建出符合规范的网站和应用程序。下面介绍如何在前端开发中使用 Material Design：

使用 Material Design Lite

使用 Material Design Lite 可以帮助开发者快速构建出符合 Material Design 规范的网站。开发者可以使用 Material Design Lite 提供的组件和样式，也可以根据自己的需求进行定制。例如，可以使用以下代码创建一个简单的网站：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Material Design Lite Demo</title>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">Material Design Lite Demo</span>
        <div class="mdl-layout-spacer"></div>
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="#">Link 1</a>
          <a class="mdl-navigation__link" href="#">Link 2</a>
          <a class="mdl-navigation__link" href="#">Link 3</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Menu</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Link 1</a>
        <a class="mdl-navigation__link" href="#">Link 2</a>
        <a class="mdl-navigation__link" href="#">Link 3</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--4-col">
            <div class="mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Card Title</h2>
              </div>
              <div class="mdl-card__supporting-text">
                Card Content
              </div>
              <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#">Action</a>
              </div>
            </div>
          </div>
          <div class="mdl-cell mdl-cell--4-col">
            <div class="mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Card Title</h2>
              </div>
              <div class="mdl-card__supporting-text">
                Card Content
              </div>
              <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#">Action</a>
              </div>
            </div>
          </div>
          <div class="mdl-cell mdl-cell--4-col">
            <div class="mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Card Title</h2>
              </div>
              <div class="mdl-card__supporting-text">
                Card Content
              </div>
              <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#">Action</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>

使用 Material Design Icons

使用 Material Design Icons 可以帮助开发者更加轻松地使用 Material Design 图标。开发者可以使用 Material Design Icons 提供的图标，也可以根据自己的需求进行定制。例如，可以使用以下代码创建一个简单的按钮和图标：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  <i class="mdi mdi-heart"></i>
  Button
</button>

总结

Material Design 是一种非常流行的设计语言，可以帮助开发者构建出符合规范的网站和应用程序。本文介绍了 Material Design 的设计原则、组件和工具，以及如何在前端开发中使用它。希望本文能够对广大开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655c6c3ed2f5e1655d687724