扁平风icon设计终极指南（译）

图片居然不能等比例缩小 有点变形了。。。。大家将就着看吧。。。

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）。 您会注意到空白图层，不必要的群组，有时还会剪裁蒙版。 当前端开发人员将图标转换为iconfont或在网页上使用SVG时，所有这些可能会导致问题。你可以删除这个垃圾并保存。您会看到Sketch SVG（picture.svg）和编辑的Illustrator SVG（picture_new.svg）在您的文件查看器中具有不同的预览。