Material Design 设计规范中的图标设计技巧-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 提出的一套设计语言，它的设计风格简洁、纯粹、直接，具有良好的可读性与可识别性，广泛应用于各种产品的设计中。其中图标设计是 Material Design 中不可或缺的一部分，本文将介绍如何用 Material Design 设计规范中的图标设计技巧，优雅地完成前端开发项目中的图标设计。

什么是 Material Design？

Material Design 是由 Google 提出并推广的设计语言，它建立在纸质的概念基础之上，通过数字化的方式表现出纸的质感和阴影效果，使平面设计的平面性与层次感结合。

Material Design 并不是简单的拟物设计，而是一种抽象的、纯粹的设计语言，它强调以下三大特点：

平面设计之上的阴影效果
基于质感的图形设计
使用明确、一致、可扩展的“语言”

这三大特点形成了 Material Design 设计规范中图标设计的基础，为开发者提供了良好的设计引导和指导。

Material Design 对图标设计的要求

在 Material Design 设计规范中，图标被定义为一种“简洁、具体、可视化元素”。符合 Material Design 规范的图标应该具备以下特点：

一致性：图标应该符合广泛使用的暗示和和约定，让用户如“无意识地”理解它们。
可识别性：图标应该与它们代表的实际对象或者功能具有明确的相关性。
可扩展性：图标应该具有不同尺寸、不同精细度和不同颜色的版本，以满足不同的 UI 设计需求。
可读性：图标应该尽可能简洁明了，避免过多的细节和混乱不堪的颜色。
反应速度：图标应该占用尽量少的空间，以提高加载速度和响应速度。

符合上述要求，设计出来的图标一般可以被无意识地接受和使用，使用户体验更好。

Material Design 图标设计的技巧

下面介绍几个 Material Design 图标设计的技巧。

1. 使用基础图形元素

Material Design 中的图标设计通常都是由基础图形元素组成。基础图形元素包括：圆形、正方形、三角形、线、点等等。选择一个基础图形元素并修改其颜色、大小、位置等属性，就可以实现简洁明了的图标。

例如，我们可以使用圆形表示按钮，使用线表示在加载中的状态等等。下面是一些常见的基础图形元素及其使用方式。

圆形

// javascriptcn.com 代码示例
<div class="circle">按 钮</div>

<style>
.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 48px;
  font-weight: bold;
}
</style>

正方形

// javascriptcn.com 代码示例
<div class="square">照 片</div>

<style>
.square {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: green;
  color: #fff;
  text-align: center;
  line-height: 48px;
  font-weight: bold;
}
</style>

三角形

// javascriptcn.com 代码示例
<div class="triangle"></div>

<style>
.triangle {
  width: 0;
  height: 0;
  border-bottom: 24px solid blue;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
}
</style>

线

// javascriptcn.com 代码示例
<div class="line"></div>

<style>
.line {
  width: 48px;
  height: 2px;
  background-color: black;
}
</style>

2. 扁平化设计

扁平化设计是 Material Design 的一大特色，它建立在简洁明了的原则之上，强调设计元素的扁平化、纯净、鲜明，去除深度感和纹理等元素。

在图标设计中，扁平化的关键是选择合适的颜色和基础图形元素进行组合，使图标简洁明了、视觉冲击力强。如下代码中，我们使用矩形表示邮件提醒。

// javascriptcn.com 代码示例
<div class="mailbox"></div>

<style>
.mailbox {
  width: 48px;
  height: 24px;
  background-color: red;
  border-radius: 4px;
  position: relative;
}

.mailbox::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
  top: 4px;
  right: 4px;
}
</style>

3. 利用阴影、混合模式、渐变的效果

Material Design 的图标设计中，强调利用阴影、混合模式、渐变等效果来表现图标的层次感和立体感。这些效果可以让图标看起来更加美观、生动，增强用户的体验感。

例如，我们可以使用 simple-line-icons 字体库中的图标来实现混合模式和渐变效果，同时加入适量的阴影效果，让图标具备良好的视觉体验。

// javascriptcn.com 代码示例
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">

<div class="logo">
  <i class="icon-bubble"></i>
</div>

<style>
.logo {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.icon-bubble {
  font-size: 24px;
  color: #4367b2;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin-top: 6px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
  background: linear-gradient(to left, #3498db, #8e44ad);
}
</style>

总结

Material Design 设计规范的图标设计技巧非常具有指导意义。通过选用基础图形元素、扁平化设计、利用阴影、混合模式、渐变的效果，可以使图标更加简洁明了、生动、富有层次感。在实际的前端开发中，我们可以依据这些技巧灵活运用，提高开发效率，提高用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652fa56c7d4982a6eb0d45e4