Material Design 是由 Google 推出的一种设计语言，旨在创造出界面更加美丽，更贴近现实的体验。其中，样式是 Material Design 设计语言的重要组成部分。本文将对 Material Design 样式进行详细讲解。
色彩
在 Material Design 中，色彩应用十分重要，体现在很多方面，比如按钮、图标、背景等。 Material Design 色彩有以下几个特点：
- 大胆鲜明：鲜亮、生动、充满活力
- 常用的是强度递减的色系
- 卡片、深度和波纹的应用需要更深的分层
Material Design 在色彩方面有现成的设计规范，可以方便地应用到各种场景中。例如在使用 Angular Material 库的 Angular 项目中，可以直接使用以下代码引入常用颜色变量：
-- -------------------- ---- -------
------- -----------------------------
---------------- -------------------------
--------------- ---------------------- ----- ----- ------
------------- ----------------------
-------------- -----------------
------ -
-------- ----------------
------- ---------------
----- -------------
--
---这样，我们在定义自己的组件时就可以直接使用 $my-app-primary 等色彩变量。
排版
Material Design 利用排版来构建合理的层级结构，帮助用户理解信息层次。在排版中， Material Design 包括以下几个元素：
- 文字
- 间距
- 对齐
- 按比例缩放的元素：按钮、图标、卡片
在文字方面， Material Design 强调字体的可读性和可用性。常用正文字体有 Roboto、Noto Sans、Open Sans 等。其中，Roboto 是 Android 默认字体。下面是 Roboto 字体在不同字号下的样式：
/* H1，字号为 96dp，即 1072px */ font-size: 6rem; font-weight: 300; letter-spacing: -0.01562em; line-height: 1.04;
/* H6，字号为 20dp，即 224px */ font-size: 1.25rem; font-weight: 500; letter-spacing: 0.0075em; line-height: 1.6;
在间距方面， Material Design 采用固定的间距尺度来构建间距关系。常用的间距单位有 4dp、8dp、16dp、24dp、32dp。 Material Design 站点提供了一个 spacing tool 可以直观地看到不同间距的效果。
在对齐方面， Material Design 强调对齐的一致性。一致的对齐可以增强信息的可读性和可视性，同时还可以提供更好的可用性。 Material Design 指南中推荐使用 8dp 的方格来对齐元素。
图像
在 Material Design 中，图像是重要的交互元素。 Material Design 将图像分为两种类型：装饰型图像和实用型图像。装饰型图像的作用是为用户提供更好的视觉体验，它们通常不承载实际信息。而实用型图像则是承载实际信息的元素，比如用户头像、产品主视图等。在应用实用型图像时， Material Design 推荐使用圆形图片，这样可以让用户更容易识别图片中的内容。
实际开发中， Material Design 库提供了一些常用的图标，可以直接在应用中使用。例如在使用 Angular Material 库的 Angular 项目中，可以直接使用以下代码引入图标：
<mat-icon>home</mat-icon>
可以在 Material Design 站点的 icon 页面查看全部的 Material Design 图标。此外，还可以在 Material Design Icons 网站上查看更多的图标资源。
卡片
在 Material Design 中，卡片是一种常用的元素。卡片可以用于展现内容、列表、文章等信息。在 Material Design 中，卡片具有以下特点：
- 底纹用于卡片的区分
- 卡片可叠加使用
- 可在卡片上添加波纹交互效果
以下是一个简单的卡片示例：
-- -------------------- ---- -------
----------
-----------------
-------------------------------------
------------------
------------------
----
-------------------
------------------
------- ------------------------
-------------------
-----------以上是 Material Design 样式的一些笔记。希望本文能对您有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67807986ce7f4861253cf078