扁平化风格图标设计终极指南

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）在您的文件查看器中具有不同的预览。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/