icon 在设计系统或产品体验中是很重要的元素。icon 可以帮助我们快速导航，并且不受语言限制，即使是不同的国家的用户也都明白它的意思。还有一点特别重要的是，它体积很小，不会消耗大量资源。icon 一般是设计系统的一部分，也在市场宣传材料中发挥很大作用。它们是最基础的绘制图形元素，但同时也包含着大量的设计和技术细节。

这个世界上喜欢绘制 icon 的人并不太多，而精通这项工作的人更少。但是认真读完我这篇文章，你就会变成这少部分人中的一个。

无论你是精通于构建设计系统的大牛，或者一个插画师，还是一个产品设计师，这份指南都可以帮助你学会如何绘制 icon，如何让它和你的品牌保持一致，以及如何在设计系统中加入一套 icon 库。

让我们从最基础的部分开始吧。

对于 icon 来说，保持统一是最最最重要的，当你在设计时请确保所有 icon 都有相同的尺寸。首先，确定你设计稿栅格的基准多少像素（比如说 8px 和 10px）。然后，你的 icon 尺寸应该是基于这个基准值来设计的。比如说，如果你的栅格基准是 8px，那么你的 icon 尺寸最好是 16px、24px 或 32px 等。

一般来说，你可以只设计一种尺寸的 icon ，然后和开发人员沟通好可以在产品中以一些倍数变化，再让开发在写代码时给 icon 设置对应的尺寸，这样就不需要因为尺寸不同而一遍遍去绘制了。

但是，当你需要绘制比较复杂的 icon 时，可能就需要为不同的尺寸单独设计了。可能在产品设计中只需要 24px 的 icon，但是在市场宣传材料中需要 80px 的 icon，这时候就需要给 icon 增加一些细节让其看起来更加丰满。

一个商店 icon 分别在 24px、40px、80px 时的不同展现

我一般习惯先绘制大一些的 icon，这样当我需要一个小尺寸的变化时，只需要适当地移除一些细节就好了。简化的过程要比反过来逐渐添加细节要简单，而且这样做也会让你在简化时更加清楚哪些要移除。

对于产品中的 icon 来说，使用一种黑色就可以了。任何多于一种色值的 icon 都将变得复杂，并且很难和其他设计师一起协作。也许一些市场部人员需要多色 icon，这也有助于品牌的展示，但是我始终认为 icon 就应该是单色的，任何多于三色的图案都不再是 icon，而是插画。

左：插画；中：带透视 icon；右：扁平 icon。

像素栅格是最基础的栅格，它使用最小的参照单元：像素。当你在设计 icon 时，总希望能够将元素对齐到每一个像素上，尤其是直线。如果你是使用 Figma，它可以自动帮你贴合到像素。像素对齐不只会更好地渲染，也能够让 icon 处理起来更加直观方便。你可以通过下图感受一下在 Figma 中像素对齐的 icon 和没对齐的 icon 之间的差异：

左：像素对齐；右：未对齐。

我一般会在画 icon 之前先设置好像素栅格，下面是我的设置：

现在你应该掌握了像素栅格，让我们来看一下视觉上的栅格。视觉栅格可以帮助我们找到 icon 的重心所在，以及它在设计中所呈现的大小。通常，圆形或者曲线会显得比方形小一些。我们一般会把 icon 绘制在一个固定尺寸的容器中，这样导出时他们的尺寸就一致了。我们需要给不同的 icon 添不同的内边距，以保持每个 icon 在视觉上看起来重心和大小一致，而不需要在开发时再次调整。

我一般喜欢设置一个和描边粗细一致的内边距，但如果是 1px 的描边我会使用两倍的内边距。从下图中，你可以看出我为不同的形状设置了不同的内边距，以保持视觉上的一致。

在视觉上，icon 中的主要物体应该水平垂直居中。

主要物体（矩形）居中

如果你已经使用了像素对齐和视觉栅格，那么你绘制 icon 的水平已经领先了。

还记得我说的保持统一是最重要的嘛？现在我再强调一遍。最让我抓狂的事情就是，两个并排的 icon，一个是描边的而另一个是填充的。请确保你的产品中 icon 都是统一风格的，这非常重要。也许有时候你想用填充的 icon 来表示选中状态，但请一定要确保大部分都使用一种风格，只有少部分变体。

一般来说，填充 icon 更加易于识别，而描边 icon 则更加方便增加细节。当你想要确定哪一种风格更加合适时，还需要考虑品牌的调性。

当你选用描边风格时，要保证都是一样的粗细，空白处最好也和 icon 的线条保持一样的宽度。

空白处和线条尽量宽度一致

也许有时候你想要从一种风格的 icon 创建另一种风格。当你想要从描边风格 icon 创建填充风格 icon 时，可以适当地简化一下线条。一般来说，填充的部分是投影，而不是直接将描边 icon 进行反向转换。从填充风格创建描边风格的 icon，你需要确定好线条的粗细，以及需要保留多少细节。

我不推荐使用小于 10px 的尺寸来绘制描边 icon（假如线条粗细是 1px-2px 的话），因为这样将很难绘制细节。

icon 也是品牌的一种展示。开始绘制 icon 时，需要理解品牌的核心价值以及如何呈现它。这有一些形容词可以参考：坚硬/柔软、随意/正式、奢侈/经济、具象/抽象等等。或者你也可以参考你们品牌插画的风格。

有一些比较通用的 icon，比如关闭的叉叉、菜单、箭头，这些 icon 需要你先确定好整体风格之后再来绘制。我推荐你先绘制复杂一些的 icon，这样就能先搞清楚一些绘制规则，当你绘制简单的 icon 时就变得轻车熟路了。

5 种风格的 icon，可以观察一下每一种为了保持一致性在细节上的处理

这里有一些能展现其品牌特性的 icon 可供参考：

•Uber[1]•Google[2]•apple[3]•Airbnb[4]•Square[5]

除非我要设计一个非常接近自然物体的 icon，否则我一般都使用基本形状来排列组合。矩形、方形以及圆形都可以帮助你来绘制非常细腻的 icon。

这个橡胶鸭是由几个圆形和一个圆角矩形组成的

当你需要绘制多边形时，你可以在方形或者矩形的基础上绘制，也可以直接使用钢笔来逐点连线。最好你能够有一个清晰可见的像素栅格，可以参考绘制节点位置。

当你想要绘制一个旋转的图形时，我不推荐你先画一个形状再旋转它，最好是根据像素栅格来逐点连线绘制。

左：形状旋转，像素不能贴合；右：逐点连线，像素完美贴合。

在 Figma 中绘制自然形状 icon 也很简单。你可以使用传统的方式添加一个个节点并连接曲线，也可以使用 Figma 的智能节点弯曲工具（Bend Tool）。我一般是先用点连线，画出笔直的图形，再使用智能节点弯曲工具把每个节点变成自然曲线。当你创建比较自然或平衡的形状时这很有帮助，因为它是自动的，当你移动节点时曲线和圆角都会自动调整。

角有很多选项：方角、斜角和圆角。我强烈推荐你为所有 icon 设置同样风格的角。

当使用圆角的形状时，你需要保证圆角半径一致。而当你的 icon 中有几个同心的形状时，还需要对其圆角半径稍作调整，以保证看起来更加和谐。一般来说，内部形状的圆角半径比外部形状的圆角半径小一些。

在这个公文包 icon 中可以看到几个形状的圆角半径是不同的

你可以在右侧的属性面板中快速调节一个形状的圆角半径。当你选择了一整条路径时，它将改变这条路径的每一个角。你也可以进入编辑模式，单独设置某一个节点的圆角半径。

端点可以设置为圆的、方的，还可以设置为箭头。

当你的 icon 中的主物体中还有另一个物体，比如一个房子中有一扇窗户，一般都是在描边形状放置描边形状，或者在填充形状中放置填充形状。当一个描边形状内部不足以放置另一个描边形状时，你可能需要放置一个和描边粗细成比例的填充形状，但最好保证内部形状不要太宽。举个例子，当外部描边为 2px 时，内部放置一个大于 4x4px 的填充图形就会看起来很奇怪。

icon 中的隐喻元素很重要，它可以让我们一看到这个 icon 就知道是什么意思。比如，一个房子代表首页，一个叉叉代表出错或关闭。当我缩小一个 icon 时，我都会保留隐喻元素，来保证 icon 仍然可以准确传达信息。

缩小 icon 时，保留主要的隐喻元素，删减部分不重要元素，而不是直接缩小

当 icon 不能直接缩小适配时，保留最重要的元素

如果受限于空间大小，可以适当减少细节，而不是直接移除它们

给 icon 添加透视效果有点棘手——icon 尺寸一般较小，而透视会占用额外的空间。因此，如果要添加透视要么整体都添加，要么只是在一些必要的地方添加，来增强易读性和辨认度。

上一行：扁平的 icon。下一行：带有透视效果。

尽量避免在 icon 中使用文字，因为 icon 会在各种想不到的地方使用。如果你一定要添加一些文字，比如币种符号，可以自己照着文字绘制一遍，而不是直接使用文字。

布尔操作使用四种方式——结合、减去、相交以及排除，来组合图形。用它来绘制 icon 非常方便，因为它会保留每个图层，这样就可以随时回来编辑每一个细节。你不用进入到编辑模式裁切路径，也不需要手动寻找相交的部分，直接使用布尔操作会更加方便。

布尔操作之后的图层组会被视为一个图层，他们拥有相同的填充色和描边属性，还可以继续和其它布尔操作元素组合，做出更复杂的图形。

•结合：图形结合会把选中的形状打包成组。新的图层组是由它们相结合，并将重叠部分只算一次而组成的。如果给它添加描边，则只会在外圈起作用，而不会给重叠部分的路径描边。•减去：图形减去和图形结合正好相反。图形减去会以最底层的图层为基础，减去上面各个图层和它重叠的部分。•相交：相交则只取图层相重叠那一部分。•排除：排除和相交相反，它会减去重叠部分，而保留其它部分。

一般我经过上面一顿操作，画完一个 icon 之后，都会把它变成一个“图形结合”，这样当其他小伙伴需要调整颜色时，只需要在右侧面板统一调整填充色，而不用进入里面一会调填充色一会调描边颜色。

矢量网格是 Figma 比较独特的一个功能。大多数设计工具都只能按照一个方向绘制路径，一般到最后会闭合到初始点。矢量网格则完全不同，它不需要你按照一个方向绘制，你可以在任何时候从任何节点再引出一条路径，而不用单独分离画一个节点。这样的话，一些复杂形状就可以在一个图层中绘制，并且统一调节属性，大大节省了时间。想了解更多你可以看看这篇文章[6]。

在设计系统中使用 icon，并且让你的团队能够正确使用它，这里主要有三点：icon 的命名和组织、资源管理和交付。

让我们先说一下文件的命名和组织。首先，你的 icon 应该以英文单词命名，因为开发的代码是使用英文写的，这样最后交付给开发可以节省很多沟通成本（这一句是译者添加的）；其次，你的 icon 命名应该基于它是什么、长什么样，而不是它代表什么。比如说，一个秒表就应该命名为 stopwatch，而不是 speed。一个灯泡就应该命名为 lightbulb，而不是 idea。这样，大家一看就知道它是什么，并可以将其用于多个语境；最后，命名应该尽量简短明了，如果需要多个单词，最好用短线（-）隔开。

比如这个 icon 就需要多个单词描绘，例如：chef-hat

在 Figma 中，你最好将 icon 做成组件，这样当你复制组件时它会产生一个实例组件，而不只是一个简单复制。做成组件后，你就有了一个公共组件库，可以随时在其他文件中使用。当团队中的人更改了一个 icon 的 master 组件时，其他所有用到的地方就可以同步更新，方便维护统一性。在左侧面板的 Assets 中，你可以搜索 icon 组件，如果你想给它添加一些额外信息以方便搜索，可以在组件的描述中添加。当选中 master 组件时，在右侧面板中会有一个可以填描述的地方，你可以在里面添加一些关键词，比如你可以给一个房子 icon 添加“首页,主页,房子”这样的描述，这样当搜索时就不需要那么精确地输入 icon 名字。

你可以借助页面和 Frame 来组织 icon 的分类。页面代表最外面的层级，Frame 作为第二个层级。比如我一般是按照尺寸（页面）> 分类（Frame）> 文件名来分的。

一般一个 icon 会有一些变体，比如不同尺寸，不同风格，我一般这样处理：

不同尺寸：用不同页面来放置不同尺寸的 icon，这样尺寸就是最外面一个层级，因为你不会经常切换不同尺寸的 icon（在右侧快速切换组件显示的是最内层级下的相关组件）。

填充 vs. 描边：当你同时使用了两种风格，可以使用斜线命名区分。

左：coffee/stroked；右：coffee/filled

细微图像变化：有时候一个 icon 会有一些细微的图像变化，你也可以使用上面这种方式命名以区分。

最左的原始 icon 叫 ，后面的依次叫 、、、、

当你画完 icon，肯定希望最终能够导出整洁清晰的文件。你可以使用布尔操作（记得上面提到的最后图形结合的操作吗）让 icon 方便更改属性，还要避免线条或形状超出 Frame 容器，最好能让另一个人来帮你检查一下。

Figma 很适合做这种工作，因为它鼓励协作和透明化。你可以给其他小伙伴添加文件编辑权限，这样他们就可以添加 icon 了。但我更推荐你单独搜集每个人画的 icon，经过审核后再将符合标准的加入 icon 库。这样，你只需要给他们添加查看权限，他们也可以在 icon 库完善的过程中参考绘制自己的 icon。也许有些小伙伴想要创建一个 icon 的不同版本，比如说不同的颜色或名字，一般在产品设计的某个特定场景下会需要这样做，这时候你就可以在组件描述中追加新的名字，并且让他们在自己的文件中给 icon 组件设置不同颜色，以避免 icon 组件库变得不统一。

当你需要导出 icon 时，可能需要为不同的人导出不同的格式。比如说，对于一些外部合作伙伴需要导出一倍或二倍的 png 格式，而开发小伙伴需要的是矢量的 SVG 格式，这样他们就可以使用代码对 icon 的属性做一些调整。导出 SVG 时，Figma 会自动帮你压缩，移除一些不必要的 SVG 代码。详细细节可以参考这篇文章[7]。

也许你可以设计出很精致的 icon，但是如果你不能完美的让它们呈现于 app、网页或邮件中，那么你的工作并没有完成。在设计之前，你可以和开发对接人先聊一下，看看他们对 icon 交付的要求，好帮你确定 icon 的粗细或尺寸。同时，也和其他设计师同步一下信息，以免你们做了重复的 icon 。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多问一下别人，从而获得反馈和建议，这可以帮助更好地做设计决策。当你准备交付给开发人员时，可以尝试借助 Figma 的开放 API 来自动化导出[8]。

预告：最近在写一个 Figma icon 自动交付插件，到时候会发出来供大家使用。

•有任何问题你都可以通过邮件（[email protected][9]）联系 Bonnie Kate Wolf。•thenounproject.com 中有很多关于 icon 绘制的灵感和技巧。在公众号回复“icon”获取示例模板

•作者：Bonnie Kate Wolf•翻译：Juuun•原文：https://www.designsystems.com/iconography-guide

 Uber: https://www.uber.design/case-studies/rebrand-2018#section-5 Google: https://material.io/tools/icons/?style=baseline apple: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/ Airbnb: https://www.zachroszczewski.com/airbnb/ Square: https://www.bonniekatewolf.com/icon-system.html/ 这篇文章: https://help.figma.com/article/63-vector-networks/ 这篇文章: https://www.figma.com/blog/with-figmas-new-svg-exports-less-more/ 尝试借助 Figma 的开放 API 来自动化导出: https://johanronsse.be/2018/09/23/the-figma-api-for-the-rest-of-us/ [email protected]: mailto:[email protected]

本文使用 文章同步助手 同步