Google Material Design 框架的指南和类型分类-JavaScript中文网-JavaScript教程资源分享门户

Google Material Design 是一种基于“材料”的设计语言，旨在通过清晰的设计和动画来提供直观、自然和舒适的用户体验。该框架被广泛应用于移动端和 web 端应用程序的设计中。本文将向读者介绍 Google Material Design 框架的指南和类型分类，通过详细的说明和示例代码，帮助开发者更好地理解和应用这个框架。

指南

布局

Google Material Design 的布局基于网格系统。应用程序中的内容被定义为纸片（Cards）和纸团（Sheets）。纸片是展示单一内容单元的最基本形式。它们可以组合成视图。纸团是纸片的强化版，可以展示更多的信息和内容，常常作为模态窗口（Modal Window）使用。

材料

Google Material Design 中的材料是指任何和屏幕接触的元素。材料被分为三种类型：实体（Solid）、表面（Surface）和海拔高度（Elevation）。实体是有质感的、可以引起触感的元素，例如按钮、图标等；表面是材料的可视区域，例如卡片的内容；海拔高度是指材料在 z 轴上的位置，不同高度的材料可以产生不同的视觉效果。

类型分类

Google Material Design 将 UI 元素按照不同的类型分类，以下是其中的几种。

文本输入框（Text Fields）

文本输入框是一种用于接受用户输入的 UI 元素。它们既可以用于独立的表单元素，也可以用于对话框或内嵌在其他 UI 元素中。Google Material Design 中的文本输入框具有以下特点：

包含标签和提示文字（Label and Hint Text）
支持错误和成功的状态反馈（Error and Success State Feedback）
具有可清除输入内容的功能（Clear Input）

以下是一个文本输入框的示例代码：

<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

按钮（Buttons）

按钮是一种触发操作并引导用户进行某种流程的 UI 元素。Google Material Design 中的按钮具有以下特点：

包含标签和图标（Label and Icon）
支持文本和图标的不同颜色和状态设置（Different Colors and States for Text and Icon）
对按下和松开的状态进行了视觉反馈（Visual Feedback for Pressed and Released States）

以下是一个按钮的示例代码：

<button class="mdc-button">
  <span class="mdc-button__label">提交</span>
</button>

底部导航栏（Bottom Navigation）

底部导航栏是一种位于屏幕底部，用于展示应用程序的导航结构的 UI 元素。Google Material Design 中的底部导航栏具有以下特点：

最多包含 5 个图标和标签（Max 5 Icons and Labels）
支持未读提示（Support for Unread Counts）
对选中和未选中状态进行了视觉区分（Visual Differentiation for Selected and Unselected States）

以下是一个底部导航栏的示例代码：

// javascriptcn.com 代码示例
<nav class="mdc-tab-bar">
  <a class="mdc-tab mdc-tab--active" href="#">
    <span class="mdc-tab__icon material-icons">home</span>
    <span class="mdc-tab__text-label">首页</span>
  </a>
  <a class="mdc-tab" href="#">
    <span class="mdc-tab__icon material-icons">favorite</span>
    <span class="mdc-tab__text-label">收藏</span>
  </a>
  <a class="mdc-tab" href="#">
    <span class="mdc-tab__icon material-icons">account_circle</span>
    <span class="mdc-tab__text-label">我的</span>
  </a>
</nav>

总结

Google Material Design 是一套流行且实用的设计语言，它提供了许多方便且易于使用的 UI 元素，开发者可以通过使用这些元素，快速创建一个符合该框架的 web 应用程序或移动应用程序。但是要注意，Google Material Design 只是一种设计语言，它并不能解决所有的设计问题，开发者需要以其为参考，结合实际需求进行具体实现。

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