Material Design 是谷歌推出的一种设计风格，旨在为用户提供更加直观、自然和统一的交互体验。随着移动和web应用程序的日益普及，越来越多的人开始关注 Material Design，试图将其应用于自己的项目中。本文将介绍如何使用 Material Design 打造具有品牌特色的界面。
Material Design 的关键概念
在使用 Material Design 构建 UI 时，需要牢记以下几个关键概念：
Material
“Material”是 Material Design 中最重要的概念之一。它代表了移动设备和 Web 应用程序中的纸张和墨水，提供了紧密耦合的物理世界和数字世界之间的联系。
元素
在 Material Design 中，UI 元素是用户与应用程序之间的桥梁。元素可以是按钮、菜单、卡片等。
主题
主题是应用程序的外观和感觉。它们包括颜色、字体和其他设计元素。
如何应用 Material Design
引入 Material Design
首先，在您的项目中引入 Material Design 的库。有多种方式可以将 Material Design 引入您的项目中，其中最简单的是使用 Google Hosted Libraries。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
布局与组件
在 Material Design 中，布局和组件是非常重要的。它们是您的 UI 构建的基础。Material Design 使用一些新的布局概念，例如网格系统、卡片和表格。在以前的设计中，这些都是常见的布局。在 Material Design 中，您可以使用这些概念来创建更加可读和优雅的布局和页面。
-- -------------------- ---- -------
---- ------------
---- ---------- --- -- ----
---- -------------
---- ---------------------
----- ----------------------- ------------
------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- ------------- -- - --------
-- ------------- -- ------- --------
------
------
------
---- ---------- --- -- ----
---- -------------
---- ---------------------
----- ----------------------- ------------
------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- ------------- -- - --------
-- ------------- -- ------- --------
------
------
------
---- ---------- --- -- ----
---- -------------
---- ---------------------
----- ----------------------- ------------
------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- ------------- -- - --------
-- ------------- -- ------- --------
------
------
------
------颜色
颜色在 Material Design 中扮演着重要的角色。颜色是应用程序的重要组成部分，可以用来强调重要性、增加信息密度或与品牌相关。Material Design 有一个内置的颜色系统，包括 10 种基本颜色和相关的变体。
-- -------------------- ---- -------
---- ------------
---- ---------- --- -- ----
---- ----------- ---- -----------
---- ---------------------
----- ----------------- ---------------- ------------
-- ----------------------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- -------- ----------------------- -- - --------
-- -------- ----------------------- -- ------- --------
------
------
------
---- ---------- --- -- ----
---- ----------- ----------- -----------
---- ---------------------
----- ----------------- ---------------- ------------
-- ----------------------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- -------- ----------------------- -- - --------
-- -------- ----------------------- -- ------- --------
------
------
------
---- ---------- --- -- ----
---- ----------- ---- -----------
---- ---------------------
----- ----------------- ---------------- ------------
-- ----------------------- -- ---- ---- ----------- ----- ---- ------- ---- -- ---- -------- ---- ------- -------
------
---- --------------------
-- -------- ----------------------- -- - --------
-- -------- ----------------------- -- ------- --------
------
------
------
------图标
图标在 Material Design 中发挥着越来越重要的作用。Material Design 为图标设计提供了准则，并在很大程度上规范了它们的外观和行为。Material Design 中的图标是矢量而不是位图，这意味着它们可以缩放到任意尺寸而不失真。Google Material Design 遵循国际在线材质指数（ISO）来确定图标的外观和行为。
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
结论
Material Design 是一种有趣、灵活和有用的设计语言。它可以帮助您打造精美、统一、易于使用的界面，并提供非常好的用户体验。如果您是一位前端开发人员，并且正在寻找一种方法来创建具有品牌特色的 UI，那么 Material Design 绝对可以帮助您实现这个目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fe597fbd23cf89070bff7