什么是 Material Design？
Material Design 是一种由谷歌所提出的设计语言，旨在提供一种新的、更美观的设计风格，使用户界面更加直观和自然。Material Design 的设计风格具有三个基本特征：形态（Material），光影（Light & Shadow）和动画（Motion），其中 Material 是最为重要的一项，它是指元素的形状、颜色、尺寸等方面的设计。
Material Design 图标的样式和尺寸
Material Design 中的图标是一种非常重要的设计元素，展示其中的信息是必不可少的。Material Design 中的图标都是以矢量图的形式出现的，因此可以轻松地扩大或缩小它们而不失去其清晰度和图形质量。在 Material Design 中，图标可以分为两类：系统自带的图标和自定义图标。系统自带的图标可以使用原生的 Material Design 图标库，而自定义图标需要使用 Adobe Illustrator 或类似的工具进行设计。
Material Design 图标样式
Material Design 中的图标主要分为以下两种类型：
扁平化图标：具有清晰的线性图像和缺少任何机械细节的特点。扁平化图标又被称为线框图标。这种类型的图标通常是简化的、纯粹的和直接的。
实体图标：由于具有较为真实的外观，实体图标通常更具有现实感。这些图标的示例包括带有颜色的箭头、开关、按钮和开关等。
Material Design 图标尺寸
Material Design 中的图标有多个尺寸供选择，具体来说有 18dp、24dp、36dp、48dp 的尺寸，其中全局高度与宽度的值推荐使用 24、36、48 dp 三种尺寸。
当设计图标的时候，应该以 24dp 作为基本的尺寸进行设计，而 18dp 和 36dp 是在某些特定场景下使用的。在设计过程中，还应注意保持图标的结构和线性稳定性，避免使用细线和小细节，以及将图标与其它较小的图标合并在一起以避免出现多余的细节。
Material Design 图标的使用
Material Design 图标的使用应该基于一些基本的注意事项。下面我们将介绍一些常见的使用方式。
将 Material Design 图标添加到您的网站或应用程序中
要将 Material Design 图标添加到您的网站或应用程序中，您需要执行以下步骤：
您可以直接访问 Material Design 官方网站 中的图标库，选择您需要的系统自带图标，然后下载使用。Material Design 中的图标库包含多种尺寸和颜色的图标，因此可以根据需要使用。
如果您需要定制自己的图标，则可以使用 Adobe Illustrator 或类似的工具进行设计并导出为 SVG 文件。导出后，您可以将其添加到您的网站或应用程序中。
自定义 Material Design 图标
如果 Material Design 中的现有图标无法满足您的需求，您可以创建自己的自定义图标。为了满足标准的 Material Design 要求，您需要遵循以下几个步骤：
首先，您应该确定您需要的图标类型，例如扁平化图标或实体图标。
然后，您需要定义图标的基本形状和线框。图标必须直观、简化和易于识别。
然后，您需要考虑图标的细节、阴影和颜色。这些细节对于让图标表现地更加生动、自然非常重要。
最后，导出您的图标为 SVG 或 PNG 格式的文件。
下面是一个简单的自定义 Material Design 图标代码示例：
---- ---------- - -- --- ------------ ------------- ------------------- ----- ------------------- ------------------- ----- ----------------- ------------- - ------ --- -------- ------- ----------- -------------------- --------------- --------------------------- ----- ----- ----------- ------------------- ------
结论
Material Design 中的图标是重要的设计元素，能够使您的网站或应用程序看起来更加现代和易于使用。通过了解正确的图标尺寸和样式要求，您可以定制自己的 Material Design 图标，并将其添加到您的网站或应用程序中。此外， Material Design 中的图标通常是使用 SVG 格式的矢量图像，因此您可以轻松地扩大或缩小它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673416790bc820c582466fca