Material Design 中图标使用与设计实践

什么是 Material Design

Material Design 是由 Google 推出的一套 UI 设计语言，通过对纸质设计原理的理解，建立起波纹效果、动画等多种元素，实现更加自然流畅、易于使用的用户界面设计。这种设计语言主要强调以下几个方面：

• 平面，矢量图形
• 强调响应性和动态效果
• 坚持协调和意图的移动和传输
• 具有真实感的环境阴影和灰度沉浸

Material Design 是一套适用于 Android、iOS 和 Web 设计的解决方案，它们都以类似的方式为应用程序提供一致的 UI 设计。

Material Design 中的图标设计

在移动设计中，良好的图标设计可以给用户带来更加友好的使用体验。Material Design 所包含的图标分为两种类型：系统自带图标和自定义图标。

系统自带图标

官方提供了一张由易于识别的、可选的向量图标组成的图标库，包括各种类型图标的示例和使用指南，开发者可以从中选择并使用，增加了设计的灵活性和效率。

使用 Material Design 中的系统自带图标，你只需要在 HTML 代码中添加 SVG 代码片段即可。

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M6 10h6v8H6z"/>
  <path d="M12 10h6v8h-6z"/>
</svg>

其中，<path> 标签包含了关于图标轮廓的路径信息，可通过调整路径颜色、线性细节等进行自定义设计。

<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M21,12c0,5.51-4.49,10-10,10S1,17.51,1,12S5.49,2,11,2s10,4.49,10,10z M8,10h2v7H8V10zM14,10h2v7h-2V10z"/>
  <path fill="none" d="M0,0h24v24H0V0z"/>
</svg>

自定义图标

如果官方提供的图标库中没有你需要的图标，你可以通过 Sketch 等工具自行设计并以 SVG 格式添加到项目中，然后进行调整、优化，以最终实现需求。

例如，我们要添加一个电话图标，则可以进行如下设计，生成 SVG 文件。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#333333" d="M15.3,19.3c-0.2,0-0.4-0.1-0.6-0.1c-1.6,0-3-0.8-3.9-1.9c-0.8-1.1-1.2-2.4-1.2-3.8c0-0.3,0-0.5,0-0.8c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.4-0.7,0.7-1.1c0.6-0.9,1.4-1.6,2.4-2c0.4-0.1,0.8-0.2,1.2-0.2c0.2,0,0.4,0,0.6,0.1c0.7,0.2,1.3,0.6,1.8,1.1l1.8-2.2c0.2-0.2,0.4-0.4,0.6-0.6c0.8-0.8,0.8-2,0-2.8l-3.6-3.6c-0.8-0.8-2-0.8-2.8,0c-0.2,0.2-0.4,0.4-0.6,0.6l-2.2,1.8c0.5,0.6,0.9,1.2,1.1,1.8c0.2,0.2,0.2,0.5,0.2,0.8c0,1.5-0.5,3-1.5,4.2c-0.9,1.2-2.3,2.1-3.9,2.6c-0.3,0.1-0.5,0.1-0.8,0.1c-0.2,0-0.4,0-0.6-0.1c-2.2-0.6-3.9-2.3-4.5-4.5c0-0.2-0.1-0.5-0.1-0.8c0-0.3,0-0.5,0.1-0.8c0.6-2.2,2.3-3.9,4.5-4.5C12.9,2,13.1,2,13.3,2c0.3,0,0.5,0,0.8,0.1c1.5,0.4,2.7,1.3,3.7,2.3l2.2-1.8c-1.1-1.1-2.5-1.9-4-2.2c-0.4,0-0.8-0.1-1.2-0.1C9.8,1.1,8.1,1.9,6.6,3.4c-1.6,1.6-2.6,3.8-2.6,6.1c0,2.3,1,4.5,2.6,6.1c1.6,1.6,3.8,2.6,6.1,2.6c2.3,0,4.5-1,6.1-2.6c1.6-1.6,2.6-3.8,2.6-6.1C19.9,23,18.1,21.2,15.3,19.3z"/>
</svg>

在 HTML 代码中，同样使用 SVG 代码片段添加自定义图标。

<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#333333" d="M15.3,19.3c-0.2,0-0.4-0.1-0.6-0.1c-1.6,0-3-0.8-3.9-1.9c-0.8-1.1-1.2-2.4-1.2-3.8c0-0.3,0-0.5,0-0.8c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.4-0.7,0.7-1.1c0.6-0.9,1.4-1.6,2.4-2c0.4-0.1,0.8-0.2,1.2-0.2c0.2,0,0.4,0,0.6,0.1c0.7,0.2,1.3,0.6,1.8,1.1l1.8-2.2c0.2-0.2,0.4-0.4,0.6-0.6c0.8-0.8,0.8-2,0-2.8l-3.6-3.6c-0.8-0.8-2-0.8-2.8,0c-0.2,0.2-0.4,0.4-0.6,0.6l-2.2,1.8c0.5,0.6,0.9,1.2,1.1,1.8c0.2,0.2,0.2,0.5,0.2,0.8c0,1.5-0.5,3-1.5,4.2c-0.9,1.2-2.3,2.1-3.9,2.6c-0.3,0.1-0.5,0.1-0.8,0.1c-0.2,0-0.4,0-0.6-0.1c-2.2-0.6-3.9-2.3-4.5-4.5c0-0.2-0.1-0.5-0.1-0.8c0-0.3,0-0.5,0.1-0.8c0.6-2.2,2.3-3.9,4.5-4.5C12.9,2,13.1,2,13.3,2c0.3,0,0.5,0,0.8,0.1c1.5,0.4,2.7,1.3,3.7,2.3l2.2-1.8c-1.1-1.1-2.5-1.9-4-2.2c-0.4,0-0.8-0.1-1.2-0.1C9.8,1.1,8.1,1.9,6.6,3.4c-1.6,1.6-2.6,3.8-2.6,6.1c0,2.3,1,4.5,2.6,6.1c1.6,1.6,3.8,2.6,6.1,2.6c2.3,0,4.5-1,6.1-2.6c1.6-1.6,2.6-3.8,2.6-6.1C19.9,23,18.1,21.2,15.3,19.3z"/>
</svg>

扩展实践：使用 Iconfont 实现自定义图标

Iconfont 是一个阿里巴巴矢量图标库，提供免费矢量图标下载、字体图标生成、图标管理与交流等服务。我们可以在这里寻找自己需要的矢量图标，并将其转换成字体文件，然后在项目中进行调用。

以 Iconfont 中的电话图标为例，首先在 Iconfont 上下载图标 SVG 文件，然后将其导入到 Sketch 等工具中进行设计调整。

接着，将设计好的图标导出成 SVG 文件，并上传到 Iconfont 平台中，生成字体文件。

最后，使用以下代码将 Iconfont 中的图标通过字体文件引入到项目中。

<!-- 引入字体文件 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1234567890.css">

<!-- 在 HTML 中调用图标 -->
<i class="iconfont">&#xeee5;</i>

结语

通过本文，我们了解了 Material Design 中图标设计的基本知识和实践方式，也进行了一些简单的扩展实践。希望对前端开发者有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6794c5a3504e4ea9bd96c055