前言
Material Design 是一种由 Google 所推出的设计语言，旨在通过现代的交互体验和美学展示出令人愉悦的功能。它致力于提供一种有层次感的体验，并促进设计元素之间的和谐匹配和直观性。
在这篇文章中，我们将探讨 Material Design 的工作原理及开发技巧，并对其进行详细地解释和演示。
Material Design 的基础原理
在了解 Material Design 的开发技巧之前，我们首先需要了解其基础原理。Material Design 引入了一些设计原则，这些原则在组成设计时通常被遵循：
景深效果
通过使用实际物理中存在的景深效果，Material Design 增强了用户的感官体验。为了达到这一效果，同时保持一致的外观，它需要定义层的级别并沿 z 轴布局它们以产生物理景深的错觉。
网格布局
网格布局是 Material Design 的另一个关键元素。它通过将屏幕划分为均匀的网格来创建一种有层次感的外观和感觉。这种布局允许设计师创建一致性、规范性和可预测性的界面。
控制设备行为
Material Design 强调让用户准确预测和控制设备行为。为此，它必须保持一致的事件反应和拟物化元素，以允许用户感知设备的反应并建立信任。
Material Design 的开发技巧
了解了 Material Design 的基础原理之后，我们可以开始研究其开发技巧。以下是一些我们应该注意的关键部分：
颜色设计
颜色可以在 Material Design 中的许多方面发挥重要作用。 Material Design 引入了一种名为“色板”的概念，这是一组预定义颜色和色调的集合。 Material Design 色板由基本颜色、强调颜色和文本的主题颜色组成。根据应用程序的功能和目的，开发人员可以选择合适的颜色组合。
-- -------------------- ---- ------- -- -- -------- -- -- ------- ------------------------------------- -- ------ -- ---- - ------ -------------------------------------------- - -- ------ -- ------ - ----------------- ------------------------- -
按钮
Material Design 建议将按钮看作有力的、在单一的明显动作上执行的元素。它们能引起强烈的响应，因此应该被设计得突出、具有统一的外观。 Material Design 按钮可以使用 强调颜色 实现关键操作效果。
<!-- 引入 Material 按钮 --> <button class="mdc-button mdc-button--raised"> <span class="mdc-button__ripple"></span> <span class="mdc-button__label">Click me</span> </button>
卡片
卡片是 Material Design 用来呈现相关信息、操作和内容的UI元素。卡片可以包含图像、文本和操作，以帮助用户轻松找到所需的信息。
-- -------------------- ---- -------
---- -- -------- -- ---
---- -----------------
---- ---------------------------------
---- ------------------------------
---- --------------------------
--- ---------------------- -----------------------------
--- --------------------------------
------
---- ----------------------------------
---- -----------------------------------
------- ---------------------- -------------- ---------------- -----------------------
--------------- ---- -------- -------------------- ---- ---------
---- --------------------------------------
-- ---------------------------- -----------------------------------
---------
------
------
------文本域
在 Material Design 中，文本域被视为一种输入框，用于增加用户互动的持续时间和深度。这个元素可能包括标签、错误处理和计数。
-- -------------------- ---- -------
---- -- -------- --- ---
---- --------------------- --------------------------
--------- ----------------------------- -------- ---------------------
---- ----------------------------
---- -------------------------------------------
---- --------------------------------------------
------
---- ------------------------------------
---- ------------------------------------------------
------
------开发 Material Design 应用程序的工具
除了上面提到的 HTML 和 CSS 以外，Material Design 还提供了一组强大的工具和资源，以帮助开发人员快速创建 Material Design 应用程序。
Material Components for Web
Material Components for Web 是一个开源项目，其中包含用于创建 Material Design 风格的 Web 应用程序的轻量级、模块化组件。
<!-- 引入 Material Components for Web --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/textfield@13.0.0/dist/mdc.textField.css"> <script src="https://cdn.jsdelivr.net/npm/@material/textfield@13.0.0/dist/mdc.textField.min.js">
Material Design Lite
Material Design Lite 是一种易于使用的框架，其中包含用于创建 Material Design 风格的 Web 应用程序的大量组件和样式。
<!-- 引入 Material Design Lite --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-yellow.min.css" /> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
结论
Material Design 引入了一些设计原则和开发技巧，以提供一致性的体验和美学效果。开发人员可以使用强大的工具和资源，例如 Material Components for Web 和 Material Design Lite，来创建 Material Design 应用程序。
在了解了 Material Design 的基础原理和开发技巧之后，我们可以开始构建精美的界面来增强用户的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710cc87ad1e889fe2fc1bf9