图标设计师分享的ICON设计指南

Sponsor

哈喽小伙伴们~今天给大家推荐一篇干货文章，作者是来自旧金山的插画家和图标设计师Bonnie Kate Wolf，在本文中她为我们梳理了如何快速构建图标以及一些非常实用的设计技巧，相信一定会对你有所帮助~

写在前面

图标虽小，但它却是设计系统和产品体验的关键部分。不仅可以帮助我们快速导航、不受地域语言限制，体积也很小。除此之外它还是一个设计系统的基本组成部分，对营销宣传非常有帮助，也是插图的基础构件，看似简单，实则非常具有挑战性的。

无论你是设计系统专家、插画师、还是产品设计师，这份指南都可以帮助你学习如何绘制图标，让它们与你的品牌相一致，并将它们应用到你的设计系统中。让我们从基础开始。

图标的基本元素

大小

一致性是设计图标的关键，当我们绘制时，一定要确保所有的图标都相同大小。并且需要知道如何构建网格(比如8px还是10px)，所有图标大小都应该基于此来设计。比如我们有一个基于8px的网格，那么我们的图标尺寸最好是 16px、24px 或 32px 等。

通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。

24x24px, 40x40px, 80x80px下的商店图标

一般我喜欢从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

颜色

如果是产品图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，但我个人认为图标最好是单一颜色的，任何有3种或3种以上颜色的东西都是插图，而不是图标。

左：插画  中：带透视的图标  右：平面图标

栅格

基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时，我们总是希望将对象对齐到每一个像素，特别是直线。因为像素对齐不仅仅可以更好地渲染，还能让图标更加整洁、舒服。

下图展示了 Figma 中像素对齐和没对齐图标之间的差异：

左：像素对齐  右：像素不对齐

我喜欢在绘制图标之前就先设置好栅格，这是我在Figma中的设置。

像素栅格说完了，接下来就是视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。

在构建我的视觉栅格时，我喜欢边缘处设置和图标描边粗细相等的内边距。如果是1px描边，那么内边距可能会再增加一倍。在下面的示例中，可以看到不同的形状是如何影响内边距的。

在视觉上，图标中的主要部分应该垂直并水平居中。

如果你在设计中使用像素栅格，并且很好的利用视觉栅格，那么就已经领先于别人了。

描边和填充

还记得我说过一致性是关键吗?我再说一遍。没有什么比看到一个填充图标和一个线性图标放在一起更让我抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变体存在。

通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。

如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。

当我们绘制描边图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。

我不建议使用小于10px的描边图标(假设是1px-2px的笔划粗细)，它们很难辨认细节。

风格选择

图标往往也是一个品牌的视觉呈现。所以在开始这项工作前，我们需要了解自己品牌的核心价值以及它们的视觉风格。这里可以用一些形容词总结：坚硬/柔软、随意/正式、奢侈/经济、具象/抽象。或者也可以参考一些插图风格。

即使是那些最简单的图标(比如表示关闭的X，菜单≡，向下的∨等等)，也要求你了解图标系统的基本原理。所以我建议你从比较复杂的图标开始。当你熟悉和掌握一些规则后，就能更轻松的绘制这些简单图标了。

5种风格的5个产品图标——注意这些细微的差异是如何让每一组看起来一致和完整的。

绘制图标

几何形状

除非我绘制的是一个非常抽象的图标风格，否则我喜欢从基本形状开始绘制。矩形、正方形和圆形都能让我们绘制出完美图标。

在绘制几何图形时，如果需要绘制复杂的多边形，可以从正方形或矩形开始，也可以使用钢笔工具逐点绘制。不过这时最好能有一个清晰明了的网格，以方便我们看到这些点的走向。

当需要绘制有角度的几何图形时，我不建议你只是简单使用矩形并旋转它。而是根据像素栅格来逐点绘制。

抽象形状

在Figma中绘制抽象形状是很容易的。你可以使用传统的逐点绘制曲线的方法，也可以使用智能节点弯曲工具。我喜欢把所有的点画成直线，然后用弯曲工具把节点变为顺畅的曲线。这个工具能帮助我们绘制自然而平衡的形状。并且当我们移动节点时，Figma中的曲线和圆角还会自动调整。

角 /连接

角的绘制方式有几种：斜接(方形)、斜角、和圆角。我强烈建议你只使用一种方式处理图标。

圆角半径

当我们为正方形或矩形绘制圆角时，需要确保所有圆角半径相同。并且同心形状还需要重新调整圆角半径，让内部形状的圆角半径略小于外部形状的圆角半径。

以上公文包图标使用了不同的圆角半径

端点

端点可以是圆形或方形的，但无论是哪种，都请坚持一个选择。

内部物体

当我们需要在描边图标主元素内部填充另一个元素时（比如在房子里添加一个窗户），如果没有足够的空间容纳描边形状，那么最好使用与描边成比例的填充形状，并且一定不要太大。否则你将看到一个2px描边的图形中放置了一个大于4X4pt的填充形状的奇怪场景。

隐喻

隐喻在图标中很重要，比如房子意味着主页，X意味着错误。因此当我缩小图标时，喜欢保留这些隐喻元素，以更好的表达含义。

缩小图标意味着保留隐喻元素，而不是简单地直接按比例缩小

如果所有内容都不适合，请确定最重要的细节，然后删除多余的部分。

如果空间受到限制，你可以简化关键细节，而不是删除它们。

透视

给图标添加透视效果是一件棘手的事情，因为它会让本来就少的空间更加拥挤。所以如果你确实想要使用透视效果，要么就把所有元素看为一个整体添加，要么就只在它有助于提高可读性和清晰度时适当地使用。

文字

如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。

如何在设计系统中使用图标

如何让你的图标在设计系统中可以更好的协作，主要有三点：图标的命名组织、资源管理和交付。

组织

让我们从文件命名开始。图标的命名应该基于它们所显示的内容，而不是它们所代表的内容。例如，一个秒表图标应该被命名为秒表，而不是速度。灯泡应该叫灯泡，而不是idea。你应该让大家立即明白这个图标是什么，而不是它在概念层面上传达什么。并且名字越短越好。当你需要多个单词时，用破折号把它们分开。

像这样的图标可能需要多个单词—例如，chef-hat。

以此同时，为了与开发人员更好的对接，我们还需要同时借助框架和页面来组织图标的分类，页面表示最外层的分组(我喜欢按大小排序)。然后框架帮助我们缩小内容范围，如下面的示例所示。这个图标的命名系统为：大小>类>文件名。

当你有不同版本的图标时，这是我喜欢的处理方式：

大小不同:使用不同的页面，因为你很少会直接切换不同尺寸的组件。

填充和描边:当你同时使用了两种风格，可以在图标名称后面用斜线来表示填充或描边的图标。

左：coffee/stroked  右：coffee/filled

调整图像:当你有一个多个版本(例如多个货币变体)的图标时，你依然可以使用命名来帮助区分，使用的方法与上面一致。

shield、shield/dollar、shield/euro、shield/pound、shield/yen、shield/plus

资源管理

完成图标操作后，你一定希望它们尽可能整洁，以便实现最佳的导出效果。使用布尔运算可以简化我们的设计，避免任何多余的线条或形状。检查所有线条是否都在框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。

有了图标，你可能很想让你所有的设计师都有编辑权限，这样他们就可以添加新的图标。但我建议单独收集图标，对它们进行审计，合格后再加入资源库，这样避免多人同时修改而造成混乱。

文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。

交付

或许你能做出完美无瑕的图标，但如果不能让它们产品中有所作为的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将驱动你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。

作者：ByBonnie Kate Wolf｜ 整理：BIGD
原文地址：https://www.designsystems.com/iconography-guide/

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。