Material Design 是 Google 在设计方面的一种视觉语言，它提供了一系列类似于卡片、按钮、文本框、图标等组件，以及一些常见场景的设计模式，使得开发者可以更加方便、快速地进行设计和开发。在这些组件中，图标是非常重要的一个，因为它可以为用户提供简洁、直观的视觉指引，传递简洁明了的信息。本文将详细介绍 Material Design 中图标规范的相关内容，让读者了解如何正确地使用这些图标。
什么是 Material Design 中的图标？
在 Material Design 中，图标是指一个可以代表某种信息或动作的小型图形，通常是一些简单的矢量图形。这些图标通常被用在按钮、Tab、List 等组件中，以提供更加直观的体验。与传统网站使用的图标相比，Material Design 的图标更加明了、简约、统一、易于识别。
Material Design 中的图标与其它组件一样，都有一套规范，其中包含了基本的设计原则、使用场景、设计方法、尺寸宽度、颜色等方面，下面逐一进行说明。
1. 基本设计原则
Material Design 图标主要有如下三个基本设计原则：
简介明了： 高清晰度、单色、简约的线条、符合物品本身的特征，以及放大的厚度和空间，这些都是 Material Design 中图标的基本要求。图标要能够直接明了地传达信息，而不需要字面的解释。
充实生动： Material Design 中的图标着重于视觉效果和欣赏性的平衡。 图标应该是生动、有活力的，而且可以调节阴影、方向以及弧度等特性，以便创造有趣的设计。同时，图标应该不断散发着充实、鲜活的风格。
多功能颠覆： Material Design 中的图标不仅是重点，而且在设计方面也颠覆了以往。图标应该充满弹性，可以被用在各种情景中，而且不会耸肩或疯狂爆出来，而是涉及到因特网、动作和品质的深度颠覆。
基于这些基本设计原则，我们可以更好地掌握使用 Material Design 图标的方法和技巧。
2.使用场景
图标的使用场景包括以下四个方面：
导航：一般情况下把图标放在一个导航栏中，帮助用户快速定位他们想要的内容，以及帮助他们快速进入售后流程。
列表：根据美学方法将列表的每个项目集中在一个圆形、正方形或聚焦型边框内部，以防止选项条混淆，并且在每个项目旁边放一个相应的图标来标识。
内容：当我们需要强调某段内容的时候，可以使用短语或单词来搭配一个相关的图标，这样可以更好的突出这些内容。
其他：图标还可以用来标识音量、音频、视频、搜索、删除、拍照等。
使用场景的复杂性和创造性并不在于多少，而在于如何在特殊的设计中使用图标来突出重点。所以，当我们使用 Material Design 图标的时候，要特别注意选择合适的使用场景。
3. 尺寸
Material Design 中的图标大小需要根据设计的具体情况而定，但是可以在标准尺寸之间进行选择。 Material Design 必须确保图标与屏幕上的其他组件看起来适当，以便用户可以轻松地识别和识别图标。
下面是 Material Design 中推荐的标准尺寸：
- 18dp x 18dp
- 24dp x 24dp
- 36dp x 36dp
- 48dp x 48dp
- 72dp x 72dp
- 96dp x 96dp
- 144dp x 144dp
- 192dp x 192dp
4. 图标类型
Material Design 中的图标共有 4 种类型，它们是：状态图标（状态图标通常反映了某种状态信息），动作图标（动作图标通常执行一些动作），原始图标（原始图标通常表示可见的物体，如书、飞机、山等）和文件类型图标（文件类型图标表示文件类型）。这些图标都应该在每个给定的应用中保持一致，以便用户能够快速理解它们的意义。
5. 颜色
Material Design 中的图标需要遵循与其他组件相同的颜色规则：强调颜色（被用来传递主要的主题信息）和次要色彩（用来突出次要信息）两种。强调色彩通常指红、黄、绿、蓝这类鲜艳、饱和的颜色，而次要色彩则是白、灰等浅色调。
在使用颜色的时候，同样需要注意选择合适的场景和色调，并保持一致性和简洁性。
示例代码
下面是一个使用 Material Design 图标的示例代码：
--------- -----
------
------
--------------- ------ ----- ---------------
------ -------- ----- -----
----- -------------------------------------------------------------- -----------------
------ -------- -----
----- ---------------- ---------------------------------------------------------------- --
------ -------- -- ------
------- ----- ------------------------------------------------------------
-------
------
------------
------- ------------- ----------------- ------------- ------------------ -------------------- --------------------
-- ------------------------------
--
---------
-------
-------上述代码中，使用了 Google Material Design 的 JS、CSS 库以及相关的 Material Icons 字体，以实现在按钮中嵌入图标的效果。在实际的开发中，可以通过相应的技术栈或框架来引用或使用这些 Material Design 的资源库，并根据需要进行更复杂的图标设计和使用。
结论
图标是 Material Design 的组件之一，它为用户提供简单直观的视觉指引，与传统的图标相比， Material Design 的图标更加明了、简约、统一、易于识别。为了保证图标的使用效果，并更好的向用户传递信息，在使用 Material Design 图标时，需要遵循相关的规范和设计原则，并注意各种场景的合理性和一致性，这样才能更好地实现 Material Design 风格的设计。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fcc4a1447136260172e24b