Material Design 风格 UI 设计规范与基础知识学习

Material Design 是 Google 推出的一种设计语言，旨在提供一种简单、直观、有层次感的设计体验，以及跨平台的一致性。在前端开发中，Material Design 风格的 UI 设计已经成为了主流，因此学习 Material Design 风格的 UI 设计规范与基础知识是必不可少的。

Material Design 风格的特点

Material Design 风格的特点主要有以下几个方面：

1. 扁平化设计：Material Design 风格的 UI 设计非常扁平，去掉了过多的边框和阴影，使得整个设计更加简洁明了。

2. 活力感：Material Design 风格的 UI 设计注重运动的感觉，通过过渡效果和动画来增加界面的活力感，使得整个界面更加生动。

3. 层次感：Material Design 风格的 UI 设计通过阴影和层叠的方式来增加元素之间的层次感，使得用户更容易理解界面的结构和重要性。

4. 鲜艳的颜色：Material Design 风格的 UI 设计使用鲜艳明亮的颜色，使得整个界面更加有活力。

Material Design 风格的设计规范

1. 布局：Material Design 风格的 UI 设计注重简单明了的布局，通常使用网格布局或者卡片式布局来组织界面。

2. 字体：Material Design 风格的 UI 设计使用简洁明了的字体，通常使用 Roboto 字体或者其他类似的字体。

3. 颜色：Material Design 风格的 UI 设计使用鲜艳明亮的颜色，通常使用 Material Design 的颜色体系。

4. 图标：Material Design 风格的 UI 设计使用简洁明了的图标，通常使用 Material Design 的图标库。

5. 过渡效果和动画：Material Design 风格的 UI 设计注重运动的感觉，因此过渡效果和动画非常重要，可以通过 CSS3 或者 JavaScript 实现。

Material Design 风格的基础知识

1. Material Design Lite：Material Design Lite 是一个基于 Material Design 风格的 UI 库，可以轻松地在网站中使用 Material Design 风格的 UI 元素。

2. Material Design Icons：Material Design Icons 是一个包含了 Material Design 风格的图标库，可以轻松地在网站中使用 Material Design 风格的图标。

3. Materialize：Materialize 是一个基于 Material Design 风格的前端框架，包含了大量的 UI 组件和 JavaScript 插件，可以快速地构建 Material Design 风格的网站。

示例代码

下面是一个基于 Material Design 风格的登录页面的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card">
        <div class="card-content">
          <span class="card-title">登录</span>
          <div class="row">
            <div class="input-field col s12">
              <i class="material-icons prefix">account_circle</i>
              <input id="username" type="text" class="validate">
              <label for="username">用户名</label>
            </div>
            <div class="input-field col s12">
              <i class="material-icons prefix">lock</i>
              <input id="password" type="password" class="validate">
              <label for="password">密码</label>
            </div>
          </div>
          <div class="card-action">
            <button class="btn waves-effect waves-light" type="submit" name="action">登录
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

上面的代码使用了 Materialize 框架来构建登录页面，其中使用了 Material Design 风格的卡片、表单、图标和按钮等元素，同时也使用了 Material Design 的颜色体系。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8762aa941bf7134eef900