Material Design 是 Google 推出的一种设计语言和设计模板，旨在为应用程序和网站提供一致、现代、易于使用的界面设计。其目标是建立一种优雅的视觉和动态设计语言，同时提供易于使用的模板和工具。
Material Design 从外观上可以看作是现代化，扁平化，但其实它更加注重动态和交互体验的设计。在 Material Design 设计模板中，界面元素有其自身的动画效果，通过触摸、滑动等动作来展现出更加自然、流畅的交互效果。除了基本的 UI 元素（如按钮、文本框、图标等），Material Design 还为元素间的间距、颜色、字体等提供了一系列的指导，使得你可以轻松地设计一个漂亮、易用的用户界面。
特色
Material Design 的特点包括：
基于纸张和墨水的设计：借鉴了传统印刷设计和现代科技，将扁平化设计融入其中，带来清晰、整洁的界面设计。
自然的移动效果：在用户交互中，元素有着自身的动画效果，通过触摸、滑动等动作来展现出更加自然、流畅的交互效果。
易用性：Material Design 提供了一系列的指导，使得你可以轻松地设计一个漂亮、易用的用户界面。
适用于移动端和网站：Material Design 能够兼容各种设备，包括桌面端、移动端、甚至是电视端。
设计元素
Material Design 让设计更加规范化，以便让设计师和开发者易于理解和应用这个设计语言。以下是一些 Material Design 中最常用的设计元素：
卡片
卡片是 Material Design 设计模板中最常用的元素之一，它可以用来展示各种形式的内容，如文本、图片、按钮等。卡片通常有边框、阴影和圆角，用来模拟真实的纸张效果。
-- -------------------- ---- -------
---- -----------------
---- --------------- ----------------------- -------
---- -----------------------
--- -------------------------------------- ----------
-- ---------------------------------- ----------- ---- ---------
------
---- --------------------------
------- ----------------- ---------------- -------------------------------- ----------
------- ----------------- ---------------- -------------------------------- ----------
------
------按钮
按钮是一个用来引导用户完成特定操作的元素，通常包括文本、图标和位置信息。Material Design 中，按钮可以有不同的尺寸和形状，以适应不同的场景和设备。
<button class="mdc-button mdc-button--raised"> <span class="mdc-button__ripple"></span> <span class="mdc-button__label">Button</span> </button>
导航栏
导航栏是一个用来快速导航到应用程序中不同部分的元素。在 Material Design 中，导航栏可以有固定位置（常见于网页应用程序）或者滑动抽屉式位置（常见于移动应用程序）。
-- -------------------- ---- -------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
-- -------- --------------------- ------------------------------------------
----- ---------------------------------- ------------
----------
-------- ------------------------------- -------------------------------------
-- -------- --------------------- ------------------------------------------
-- -------- --------------------- ----------------------------------------
-- -------- --------------------- -------------------------------------------
----------
------
---------头部
头部是应用程序主内容的一部分，通常包括标题，图像和其他相关信息。在 Material Design 中，头部可以包含滚动时悬浮在屏幕顶部的工具栏。
-- -------------------- ---- -------
------- ---------------------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
-- -------- --------------------- ------------------------------------------
----- ---------------------------------- ------------
----------
-------- ------------------------------- -------------------------------------
-- -------- --------------------- ------------------------------------------
-- -------- --------------------- ----------------------------------------
-- -------- --------------------- -------------------------------------------
----------
------
---------案例
下面是一个使用 Material Design 设计模板的例子：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- --------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------
----- --------------- ---------------------------- -------------------
-------
------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
----- --------------------------------------- ------ -----------
----------
------
---------
---- -----------------
---- --------------------------------------------- ------------------------
---- -----------------------
--- -------------------------------------- ----------
-- ---------------------------------- ----------- ---- ---------
------
---- --------------------------
------- ----------------- ---------------- -------------------------------- ----------
------- ----------------- ---------------- -------------------------------- ----------
------
------
--------
---- ------------------- ---------------
-- -------------- ---------------- -------- ---------- ---------------------
----- -------------------------
----- -------------------- --------------- ------------------------------
----- ---------------------------------------
-------
----- ------------------------ ---------------------------
----- --------------------------------- ----------------------------------------------
-------
----- -------------------------------
----
-- --------------- -------- ---------- ----------------------
----- -------------------------
----- -------------------- --------------- --------------------------------
----- ------------------------------------------
-------
----- --------------------------
----- --------------------------------- ----------------------------------------------
-------
----- -------------------------------
----
-- --------------- -------- ---------- ----------------------
----- -------------------------
----- -------------------- --------------- ----------------------------------
----- -------------------------------------------
-------
----- --------------------------
----- --------------------------------- ----------------------------------------------
-------
----- -------------------------------
----
------
---------
-------
-------结论
Material Design 设计模板的出现，使得前端开发人员可以在开发时更加注重用户体验和界面设计。使用 Material Design 设计模板和指南能够提高网站和应用程序的用户体验，从而大大提高用户的满意度，让应用更具有竞争力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775a9a66d66e0f9aaff2fdf