设计清晰易读的图标的6个技巧|英特尔®开发人员专区 戴夫·甘迪（Dave Gandy）| 堡真棒文章

建立一个很棒的图标集，第 2 部分

在设计了数百个以 14 像素或更小的像素精美呈现的矢量图标之后，我们了解了一些有关设计清晰易读的图标的知识。这是我们的一些秘密。

不要错过“构建令人敬畏的图标集 - 视觉一致性和设置” 的第 1 部分，在这里我们将讨论在 Illustrator 中工作时创建视觉上具有凝聚力的集的方法以及文件设置的细节。

向量如何成为像素

在开始之前，让我们先聊一下图标字体如何从矢量变为单个像素。基本上，它将矢量覆盖在像素网格的顶部，然后查看每个单个像素中有多少矢量形状。如果像素没有重叠的矢量形状，则将其渲染为背景颜色的 100％。如果 100％充满，它将呈现为矢量形状颜色的 100％。当像素恰好是半满（或，一半为空）时，它将呈现为 50％透明。（真正的字体渲染要比这复杂得多，但是此模型现在可以为我们服务。）

这是最简单的。当线条是直线时，可以确保图标的像素为 14px 时非常清晰。如果我们的线条正好是 1 像素粗，我们可以选择如何渲染它们。让我们看一下第一个示例，我们要创建一系列垂直线，每条垂直线的宽度分别为 1 像素和 1 像素。如果我们做错了，实际上我们可以得到一个不透明度为 50％的正方形，并且没有任何迹象表明我们打算渲染垂直线：

矢量设计中的半像素偏移（左）使图像在 50％灰度下呈现模糊（右）。

但是，如果我们在像素内部正确对齐边缘，则可以得到完美的清晰边缘：

矢量设计中没有像素偏移（左）导致图像清晰呈现（右）。

对角线比直线要复杂一些。在像素编辑的美好时光中，您可以通过逐步降低边缘的边缘来获得清晰的对角线。让我们看看用矢量形状做类似的事情，创建一个在像素角处有点的三角形时会发生什么：

矢量设计将像素直接分成两半（左），使图像像素在 50％的灰度下呈现模糊（右）。

当我们考虑它时，这是有道理的。我们已经将像素线完美地切成两半，所以当然它在 50％的不透明度下呈现模糊效果！但是，如果我们将线向任意方向移动半个像素，我们将改善结果。我们将获得一组 12.5％灰度的像素和另一组 87.5％灰度的像素。在视觉上，这非常接近我们的阶梯，我们可以保持直线：

矢量设计将偏移分开半个像素（左），从而使图像像素以 87.5％和 12.5％的灰度（右）清晰呈现。

如果要选择线条的宽度，则在渲染清晰线条时应使用整个像素。但是，如果您需要边框的分数宽度，请使内部边框模糊而不是外部边框模糊。由于首先将眼睛吸引到外部边界，因此可以提高图标的清晰度。

矢量设计在外部（左）偏移了半个像素，从而导致在外部边框（右）上出现了模糊的像素。

向量设计在内部（左）偏移半个像素，导致内部边框（右）模糊。

通常，图标形状会迅速变得复杂和分层，但是您需要将它们降低到仅一层，以供您喜欢的字体编辑器使用。Illustrator 的探路者工具（或等效的 Sketch）是您的朋友。它使您可以轻松地制作各种形状的图层，并做很多有用的事情，例如合并，查找相交，负前部等等。学习吧。这是无价的。

视网膜显示器非常漂亮。图标字体是利用它们的好方法。但是在创建图标时，我建议为非 Retina 显示器设计。上面的示例在 Retina 上都可以完美呈现。因此，如果图标在非 Retina 上看起来不错，它们的像素也将达到 4 倍。

通常，您的形状比直线和 45° 对角线更复杂。知道图标将如何以 14px 渲染的最好方法是给它一个镜头并进行迭代，并一路学习。当为 Font Awesome 设计图标时，经历 20 次迭代并花 8 个小时以上的时间制作一个棘手的图标并不少见。但是最终值得创建清晰易读的图标，以小尺寸显示效果很好。
https://articles.fortawesome.com/creating-an-awesome-icon-set-part-2-6-tips-for-designing-crisp-readable-icons-78339363eb80