设计师不容错过的扁平风图标的终极设计指南

前言：之前读过《视觉重量》和《光学矫正》的老朋友们会发现，这篇文章作者一改之前的写作风格，内容以动图为主，文字为辅。

1.使用视觉栅格

界面图标通常可能与某个基本的格式近似: 横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。模糊显示使他们具有相同的视觉重量，因为它们变成了或多或少相同的团块。

根据图标的形状，将其嵌入到相应的光栅框架中。例如，方形的图标比三角形或细长的图标更紧凑。

图标越紧凑，所需的空间就越小。图标边缘越锐利或者细节越多，那么所占据的画布空间就会越大。

设计师不要因为栅格而限制了图标的设计。栅格的存在是为了辅助设计，而不是妨碍设计。如果一个图标添加一些突出的元素会带来更好的视觉效果，那不妨抛开栅格的规则限制，大胆使用这些元素!

2.使用像素网格

设计师如果要想在非视网膜屏幕上突显图标，则需要使用像素网格，并优先考虑用2像素的线条作为图标边框。

居中的2像素边框能够使图标具有足够的厚度和清晰的轮廓。如果选择1像素边框设计图标，这样的大小只适用外部边框或者内部边框，而不是居中的边框。否则，图标在100%的比例下显示会变得模糊。

根据像素网格设置对角线的起点和终点。度数为45°、30°和60°的对角线比特殊度数（如13.7°或81°）的对角线更锐利。

3. 在一定程度上保持细节

设计一个图标集最好从最复杂的图标开始。这样做可以帮助定义不同细节的层次，并创建相同视觉重量的图标。

当图标有不同层次的细节时，细节更详细的图标会引起更多用户的注意，而且在视觉上看起来更重。

4． 控制图标最小间距

图标中的相邻元素之间的距离不应该太小或不一致。因此设计师要定义图标的最小间距，并保证任意元素之间保持这种大小，以避免图标轮廓重叠。

对于线条图标，最小的间距等于线的厚度就刚刚好。而线条也应该明显地分开或精确地连接，绝对不要让线条的分开和连接看起来模模糊糊

5． 删除图标中重复部分

在设计师设计的图标集中，可能存在一些重复的细节。将观看者的注意力转移到不同的地方，这就像数学中的分数化简一样。你看到的图像杂物越少，你的理解也就越清晰。

如果目标用户已经意识到他或她的正在进行什么操作或工作，就不需要反复提示。如下图所示，避免基于信封的图标让人们认为这是一个电子邮件应用程序。

这个规则也涉及到各种各样的装饰——框架、背景——围绕着一个图标。如果它们不能帮助用户阅读图标，它们的存在则会阻碍用户阅读图标。

6． 统一图标风格并遵循它

在同一个图标集内，不要将侧面图标与正面图标混合在一起。风格的一致性有助于用户识别图标并了解它们相同的重要性或状态。

在一个图标集中，不要将线性图标和填充图标混在一起。

但是，在某种情况下，界面中有两个不同类型的图标也不错。使用线条图标来表示禁用或正常状态；使用一个填充的图标用于表示单击选中状态。

7．使用8像素倍数的分级系统

总所周知，8像素网格和12列栅格布局被用于许多界面设计，因为它们比基于十进制的分级系统更灵活。12可以被2 ，3 ，4 ，6整除，使用起来更加方便。因此，24或48像素的图标区域已经成为标准。如果需要更大的尺寸，这些图标也可以按比例缩放。

8 . 保持图标轮廓整洁和准确

完美主义并不是我们追求的目标，没有必要为了追求像素完美的线条而去设计。图标的最终显示更为最重要，一定要确保最基本的形状锚点数量和相邻元素之间没有多余的间隙，保持轮廓的干净整洁。

在设计中设计师如果遇到“8.999 px”或“100.001 px”这样特殊的数值，你必须将其修改为整数。只有形状锚定位准确，图标边缘看起来才会非常清晰。当你合并形状时，你也不会承担图标锚点过多和间隙过大的风险。

9.清除svg图中的垃圾

许多界面编辑器（如Sketch）可能会产生许多不必要的的SVG 垃圾-过多的组，颜色层和剪切遮罩。让我们一起来看看下图的这个例子，在Sketch中，这个图标看起来一切正常。

在其他编辑器中打开这个SVG(例如，Adobe illustrator), 你会注意到有空图层，不必要的组，有时还会有剪切遮罩。当前端开发人员将图标转换为字体图标或在网页上使用SVG时，所有这些都会引起一些问题。

这个时候，你可以选择清除这些垃圾并保存图标。

你将会看到Sketch SVG (后缀为 图片. SVG)和编辑的Illustrator SVG (后后缀为 图片_new.svg)在你的文件查看器中有不同的预览。

如果你有什么建议，欢迎在评论区分享你的建议，让我们让一起让这个图标设计指南更加全面！

原文作者：Slava Shestopalov

原文链接：https://medium.muz.li/icon-set-3b4fc87dc6b5