Material Design 是一种来自 Google 的视觉设计语言，类似的还有 Apple 的 Human Interface Guidelines。而 Material Design 中的图标是一个至关重要的部分。一个好的设计师需要能够创造出美观、易懂的图标，同时要保持符合 Material Design 的原则。本文将打造一组 Material Design 风格的图标，并分享一些制作过程中的经验和技巧。
图标制作工具
在制作图标之前，需要先选择一款制作工具。目前常用的有 Sketch、Illustrator、Photoshop 等工具。其中 Sketch 是最常见的一个，因为它专注于 UI 设计，并且支持导出为多种格式。如果没有 Sketch，也可以使用 Inkscape（开源）和 Figma（在线）等软件。
本文使用 Sketch 来制作图标。
图标设计流程
在进入设计流程之前，我们需要先确定图标的目的和功能。每个图标都应该注重表达其功能特征，同时也应该符合 Material Design 的一些基本原则。
根据 Material Design 的规范，在设计图标时需要考虑以下原则：
- 抽象性：图标需要是简单的形状，以帮助用户快速识别。
- 易识别：用户应该能够快速识别图标的功能，并且与文本相对应。
- 一致性：每个图标都应该遵循 Material Design 的设计原则，颜色、大小、比例等应该一致。
- 易读性：图标应该有足够的对比度，以便用户在不同背景下识别。
- 鲜明性：图标应该能够吸引用户的注意力，并且与其他元素区分开来。
1. 图标设计构思
在图标设计之前，需要先构思每个图标的功能和特征。我们可以查找现有的图标供应（Material Design Icons、Font Awesome等）以了解最佳实践。也可以从简单的形状开始，逐步改进和完善。
下面我们将制作一个“分享”功能的图标作为示例。首先我们需要将想法绘制成素描或草图，以便更清晰地了解图标的设计方向。
2. 绘制图标形状
在 Sketch 中，我们可以使用矢量工具创建图标，矩形、圆形、线条是基本元素。在设计之前，我们需要知道如何使用这些工具，例如剪裁、组合和调整。
为了制作“分享”图标，我们将使用“鹰嘴桥”形状作为基础形状，然后在其顶部添加一个箭头。
下面是制作过程的演示：
为了使箭头与基础形状对齐，我们可以使用 Sketch 中“对齐”功能。
3. 填充和线条设置
在设计过程中，我们需要选择图标的颜色并选择相应的线条样式。在 Material Design 中，常常使用 FAB 相同颜色的 Semi-transparent，例如：
另外，在图标设计中，我们也需要考虑线条的粗细和角度，通常使用 2px 粗细和 45° 角度，例如：
下面是实现“分享”图标这个例子的填充和线条设置演示：
4. 最终效果
最后，我们可以为图标添加动画效果，例如放大、缩小或变换颜色。在 Sketch 中，我们可以使用插件制作动画。
下面是“分享”图标的最终效果：
总结
制作 Material Design 图标需要考虑诸多因素，例如抽象性、易识别、一致性等等。通过了解这些原则，我们能够创建易于使用和易于理解的图标。在实践过程中，我们也需要掌握图标绘制工具的使用技巧。
下面是完整的代码示例（使用 SVG 格式）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"> <path d="M18 8V7a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v1m-6 8l6-6m-2 6l6-6m-6 6h12" /> </svg>
希望这篇文章对于初学者能有所帮助，并帮助你了解如何制作 Material Design 风格的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64578391968c7c53b0a3119d