小游说：昨天看到一个很好的问题，详细解释了图标设计流程的各个方面。 明天我们来看看设计师Slava的文章：

1.使用光栅更好地设计图标

UI界面的图标一般可以视为以下基本格式之一：垂直正方形、水平圆形、对角线圆形、正方形、三角形、正圆形。 如果将它们设为高斯模糊效果，您会发现它们都具有相同的视觉权重，因为它们或多或少会产生相同的光斑效果。

根据图标形状，将它们放置在相应的框架中。 您会注意到圆形图标比三角形或窄图标更紧凑。

图标越紧凑，所需的空间就越少。 图标的边缘越锋利、细节越多sketch icon边框范围，它们占用的画板空间就越大。

注意不要过多依赖网格来设计图标。 他们是来帮助你的，而不是限制你的。 如果图标的各个元素看起来拉伸得更好，那就让它们自然拉伸。

2.注意像素网格的重要性

在非黄斑屏幕上设计图形时，请非常紧密地使用像素网格sketch icon边框范围，并更喜欢使用 2 像素边框作为图标的腰线。 因为它可以让这个显示器上的图标更加清晰。

如果给图标设置了1像素的边框，此时边框应该使用outer或inner mask样式，但不建议居中。 在右侧，您可以听到差异。

用于使蒙版居中的一像素边框，即使在放大时它们也看起来很清晰。 但当以 100% 列大小显示时，它们会变得模糊。 所以，请谨慎使用~下面两张图是图标居中、屏蔽后形成的效果：

根据像素的网格线设置线条的起点和终点将使您的图标看起来更清晰。 一般来说，当线条的倾斜角度为45°、30°、60°时，锐度会比一些不常见的角度（如13.7°、81°等）更好。 因此，尽量避免使用此类值。

3.保留某些图标细节

从一组中最复杂的图标开始通常是最有效的，因为它将帮助我们定义相同的视觉权重并保持所有图标的视觉权重一致。

当图标具有不同的细节级别时，更复杂的图标会吸引更多用户的注意力，但在视觉上显得更重。

4、控制最小间隙规格

图标的相邻元素之间的间距不应太小或在整个图标集中不一致。 在任何情况下，都会定义最小间隙以防止型材“粘住”。 例如下图，如果间隙太小，形成的粘性要非常小心：

下面这个是调整后的疗效，是不是很多？

对于线性图标，图标线段之间的最小间隙应等于线条的粗细。 另外，腰线应明显分开或绝对闭合。 右图来自错误的案例：

下面这个是改变后的疗效，是不是很多？

5. 删除重复项

在图标集中，您可能会重复一些细节，例如右侧的细节。 尽量不要这样做，让观众的注意力集中在不同的事情上。 这就像物理学中的分数简化。 您看到的图形噪音越少，用户的理解就越清晰。

比如下面的邮件收发主题的图标，当用户已经非常熟悉自己的具体操作，比如接收邮件、发短信、回复等时，就不要重复点“信封”了设计图标时的图形。 简化它们，疗效会更好。

该规则还涵盖图标周围的各种装饰、框架和背景。 如果它们不能帮助更好地阅读图标，最好使它们更加简化。

6.保持图标风格统一

下面两张图可以很好地展示正确和错误的例子。 例如，对于一组灯图标，如果其中一个图标以45°的倾斜角度绘制，那么其他图标也应该尽量保持这个角度。 一是不能正视眼睛，二是目光短浅。 看看下面两张图，哪一张是正确的？

同样的原理适用于线性图标和填充图标。 如果你将它们混为一谈，人们可能会认为它们具有不同的重要性或地位。 事实上，除非你故意想要那样。 例如，实心图标用于键盘命令，线条图标用于其他命令。

其实我们可以用实心图标来表示当前状态，用线形图标来表示非选中状态，这也是一个不错的选择。

7、基于双打测量系统的设计

对于许多套接字来说，8 像素网格和 12 列布局比基于十补码的大小调整更加灵活。 12可以分为2、3、4和6。因此，24或48像素图标区域已成为标准。 如果需要更大的尺寸，可以缩放该图标。 又到了上物理课的时间了！

8.保持轮廓干净、准确

对于完美主义来说，设计师不能钻入死胡同，因为完美的东西是不存在的。 而在你的最终设计稿中，正确、不扭曲的图标设计仍然非常重要。 请务必小心确保相邻节点和相邻元素完全对齐或没有间隙。

请务必避免使用“8.999px”或“100.001px”等规格。 如果节点位置正确，图标边缘将看起来很锐利。 这是特别必要的，保持整数！

9. 清理SVG图标中的垃圾代码

我们都知道，SVG 图标最终是一串代码。 生成的SVG图标一般会包含很多不必要的冗余代码，比如组、颜色视口和笔画。 下面的图标看起来很棒，并且......

当我们在AI中打开生成的SVG图标时，你会发现它的视口非常混乱。 这种混乱的视口会给后端开发工程师在转换代码时带来问题。

我们可以删除这个不必要的视口，这样看起来就简单多了：

10.不要把这篇文章当作公式

事实上，我们上面讨论的建议只是建议，并不是硬性的公式。 如果您知道自己在做什么，则可以将它们用作参考，而不必完全遵循它们。 设计灵活多变，只要符合用户体验的规则，就可以为我们所用。

又一客（陌陌公众号sx-uek）UI设计、Web全栈开发、JAVA开发等免费试听课程目前正在报名考试。 希望这个时代的每个人都能站在聚光灯下，成就更好的自己！

四月坚持读书，九月就业！

如有侵权请联系删除！