搞懂这7个图标设计原则，你就能像专业图标设计师一样

编者按：设计原则总是看来简单抽象不言自明的，但是在细分的设计领域，原则其有着各自不同适用情况，有着「特定的条件」。图标设计，是如此。今天这篇文章，来自专业图标设计师 Helena Zhang，她结合自己制作 Phosphor 系列图标经验，来分享她于图标设计原则理解。

这些设计原则像份晰设计框架，或者设计自查表单样，帮你规避设计陷阱，让你设计成更加出色。

创建高质量系列图标，你得使用一套周到系统的方法，需要有练有素的双眼，大量的迭代学习，以及坚持践，才能做到。下面，我将结合7项设计原则，和大量的际案例，来为你详细说明，何创建高质量的图标。

掌握这些设原则，就创造出优质图标的关键。

额外推界上最大的图标库：

以及找图标神器：

1、清晰

图标存在的目的，是快速传达概念。

下图 Prius Prime 仪表板的图标。

这一系列符当中，能明白其中哪些的含义？对于这款车的驾驶者言，可能会随使用时间的积累，逐渐明白其中一部分图标的含义。很程度，这因这些图标本身并不直观。可能需对明书，能明白它们各自的含义。

可以从下面，图标是怎一步步变得难以识别的：

当图标开始使用不熟悉的含义和隐喻候，它就然变得难以理解。从左往右数第三个图标，是安全带的提示灯图标，当它亮起的候，味着你没有系好安全带。这个含义相对直观，你可能能够快掌握。而最右边的这个「动助力转向系统警告灯」含义就非常模糊了。

通，清晰的图标设计会你感到沮丧，但是对于开车的人而言，含义模糊的图标意味着误解，而误解的结果可是生命全。

下是我们更为熟悉图标——喜爱、警告、音乐和上。

上图为 Phosphor Carbon 图标

向上的箭头在很场当中，是非常清晰、用的符号。

纽约地铁标识

最成功图标设计，不仅仅是让图标本身易于理解，而于不文化背景、不年龄段、不知识背景都能理解，有做到这样才。

果你想要表达的信息抽象，么单独使用图标，能不是最清晰的决方案，应当将图标和文标签结合来使用。

2、可读性

有易理的图标之，你需要确它的读够强。

Icons in the Amtrak mobile app

由于细节太过精细，很难让 Amtrak 图标被晰地感知到。

Transit 应用图标也有相同的问题。它们的剪贴板个图标中的细节很难看清：

Icons in the Transit mobile app

稍加调后，好了很多：

Adjusted clipboard icon

当你在处图标中多个同的图形元素的时候，应该确保中的空间留足。太细小的笔触细节、更多的信息量会图标显得更难阅读。

Google Maps 公交图标常出色——它看起来足够小，是可读性也很强。

Google Map icons

3、对齐

确保每个图标都觉衡，尽量进行视觉对齐

平衡的播放图标

Unbalanced play icon

在这个播放图标当中，尽管三角形被放置在中间位置，但是它并没有视觉对齐，的眼睛的候，会觉得中间的三角形说向左靠的。三角形靠左的这一边在视觉上更重，因此它应该向右移动一点来确保衡。

就像字体版设计师，他们经会微调字的布来确保视觉平衡。如字母 i 和 j 顶上的小圆点会偏移，而字母 O 的上分则为稍微超边界，来确保字体的平衡。

设计的时候，适当的微调就达到平衡的效果。

Balanced play icon

显更好了。

要点：要单纯的相信数据，要你的双眼来进行检查和修正。

4、简洁

尽可的词汇来进行表达和描述，这样会更优雅效。

「将你的知识分享，可增强你对于这门科的解。」

Material Design 在他们的导视系统中，使的图标大都足够简洁，他们善图标而是说话：

这是个复杂船图标：

它有更为简约版本：

Succinct boat icon (Source: Material)

简洁是图标设计的精髓之一，因为我们经需要在很小的屏幕上操作，图标可传达很多信息，而同本或者他复杂的容。

在用户界，简约准确设计风格能够凸显，让内容发挥效用。Telegram 图标设计，常简约有趣：

Telegram icons

有的时候，UI图标会更偏向插画的样式。面这些于美食的图标就设计得非令人愉悦，代表国菜的图标中，的描绘就非传神：

Yelp icons by Scott Tusk

图标可以适用于各种不同的硬件，机、 脑、板，适当的息量味着计可以在色彩、层次纵深上，有更大的操作空间。因为图标本身会应用于定的APP 或者网站当中，因此图标可以适地凸显品牌和产品征。

iOS 平台的 Procreate 、火狐 Netflix 的图标

5、一致性

为让图标家族显得更加和谐，始终证相同的样式和设计规则

 iOS 13 之，苹果的图标设各种不同的粗细笔触，不同的填充样式，小也各不相同：

仔细看看这套图标，不的图标看起比其他的重？

任何图标都有着相应的视觉重量。而视觉重量取决于图标笔触的粗细、填充模式、大和形状这个属性。而图标计的难点就在于，如何控制所有的这些参数，做整体的一致性。

苹果公最近引入了 SF Symbols 这个功能，将图标直制作成为图标字体，在这套字体当中，图标有 9 种不同的「字重」和3种不同的的风格（也许有点复杂，但是绝对充够用）。从图标符号，在填充模式、笔触轮廓等多个不同的属性上，确保你能挑出觉更加和谐的图标。

Icons from Apple’s SF Symbols

对于一型的套图标言，保持一致性并不一件易的事，尤其当这套图标涉及到多制作者的时候。遵循清晰的原则规范此时至关重的。

这套 Phosphor 图标是由和另一位朋友共同制作并严格测的，使用一套准则确保这 700 个图标保持一致性。尽管每个形状都不尽相同，但是它给人的整体视觉重量是完全相同的，并且好地相互组一起：

Subset of the Phosphor Carbon icon family

6、个性化

每套图标应当尤其独有的风和气质。是什么让它们与众不同？它们对品牌是否有所助益？它们给人什么样的情绪？

Waze icons

Waze 大受欢迎用户界，很大程度上是它本身所使用图标设计所造。这些用色跳脱斑斓图标，仿佛在说「我们是特立独！」

Twitter 的图标是柔和、清晰明亮的：

Sketch 的图标则是精致而通透的：

Freemojis 的图标是爱爱的：

而 Android 的图标则风各异，抽象风、像素风、霓虹风，不一而：

7、易用性

完美地绘制了套图标后，你工作并没有完成。接下来，你需要继续做测试和其他准备工作，比如让参与图标制作志愿者可以更好地参与后续制作和完善，让设计师在日常设计工作使用和测试，在数屏幕和印刷品上应用确保效，让开发者将它们成到其他服务，确保能够应用。

一套高质量的图标，需要经良的组织、录，并且在不同的应用场中进行测试，并且最能够得到个化图标工具的支持。

7.1、组织

你需要确图标集的整齐规范，有合理的命名，便查找，并且想清楚以什么样的方式来进行分类。按照字母顺序？按照大小，还是类型？

套 Nucleo Sketch 图标，是按照也没类型来进行组织分类的

7.2、有据查

你需要阐明整套图标的核心原则：

我以我所制作的 Phosphor 系列图标例（以原则内重复）行明：

• 清晰：首先要清晰，确图标被识别，具有读，不能牺牲图标的意义和清晰度。
• 简洁：尽可能少使用细节。Phosphor 系列图标的原则还原。每笔触都简洁明了，传达准确信息。
• 个性：可以立独行一点。谨慎的添加独的细节，让本可能非常冷硬的图标计变得温暖。

下面技规则。我还以 Phosphor 图标作返利：

• 使用 48×48 px 的画
• 使用 1.5 px 居中笔触
• 笔触末端使用圆角
• 使连续的笔触，除非断开的线条有助于解
• 尽可能使用线、完美弧线，度以15度为增量
• 必要时整曲以符合设计原则
• 尽可能使用整数、使用偶数作度，必时可以减少 1px 或者 0.5px
• 尽可能使用下面的素来进行计：28×28 px 的圆圈，25×25 px 的正方形，28×22 px 的矩形
• 保留6 px 的裁切区域

按照这这的步骤来进行计，并根据需求来公开相应的文档，就像下面这：

• Material System icons
• IBM’s UI icons, App icons, and contributor guide for icons
• Shopify Polaris Icons

7.3、行测试

检查一致性。确保图标不同场合可以使用，并且尺寸合理。确保它们型视觉系统能够协调存。

将图标排列在一起，并且按照以上的 7 个则来进行检测。

Phosphor 的品质控制流程中所用的测表。

7.4、定制化工

最后，如果你有足够的资源，可以开发相应的工来方便用户使用图标。

Material Design 户可通过自定义库来访问图标，搜索件，择的格式、配色、大小和题。

Font Awesome 的图标设计并没有全遵循上面到的全原则，但是它依然是目前来说最易的图标集。它供的功甚至超了上到的范畴：它支持前端框架、CDN、图标字体及 SVG。

Font Awesome 的图标排行榜

下面是一些额外的图标素材资源。

7.5、资源

• Feather：是一款精美的简约图标合集，包含有 200+ 图标，以轻松缩放
• Material system icons：包含 1000+ 实用的 UI 图标，5 种不同样式
• Nucleo：这套图标非常全，有3万多个，有三种不同式，线性、多彩扁和符号式
• Streamline：这是一组精美的、包含万多个线性图标的图标合集图标合集

这个图标集项目虽然在质量上参差不齐，但却是非常适拿来搜集灵、作为参考好地方。

Icon Managers

这是款来自 Nucleo 应用程序，你可以导入图标，查看，改，导出，常实用。

? 特别感谢: Toby Fried, Monica Chang, Darcy O’Donnell, Sara Thompson, Lonny Huff, Stephany Shigekuni, Clarissa Soto, Tate Chow, Christine Lee, Victor Vasquez, Chris Rodemeyer, David Landa, Pawel Piekarski, Matthew Vargas, and Marlon Bishop