UI界面图标终极设计指南

相同的原理适用于线性图标和填充图标。 如果你把它们混为一谈，人们可能会认为它们具有不同的重要性或地位。 当然，除非你刻意想要那个。 例如，填充图标用于键命令，线图标用于其他命令。

当然，我们可以用填充图标表示当前态，线性图标代表非选中状态，这样也是不错的选择。

与基于十进制的大小调整相比，8像素网格和12列布局用于许多接口更灵活。 12可以分为2,3,4和6。因此，24或48像素图标区域已成为标准。 如果需要更大的尺寸，可以缩放这些图标。是时候补习下数学啦！

对于完美主义，设计师不能钻牛角尖，因为没有完美的事物。但是在你的最终设计稿里边，正确的，不扭曲的图标设计还是非常重要的。特别要注意，确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。

一定要避免 "8.999 px"或"100.001 px"这样的尺寸。如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！

我们都知道SVG图标最终是一串代码。在Sketch中生成的SVG图标通常会包含很多不必要的冗余代码，比如组，颜色图层还有遮罩。下面的这个图标在Sketch中看起来很棒，但是.......

我们把Sketch生成的SVG图标在AI中打开的时候，你会发现它的图层非常混乱。这些混乱的图层都可以会让前端开发工程师在转换代码的时候出现问题。

我们可以把这些不必要的图层删除掉，这样看起来简洁多了：

当然，以上我们讨论的建议只是建议，他们不是刻板的公式。如果你知道自己在做什么，则可以仅仅把它们当作参考，而不一定要完全遵从它们。设计是灵活多变的，只要符合用户体验的规律，都可以被我们所用。

作者：Slava Shestopalov

原文：http://medium.muz.li/icon-set-3b4fc87dc6b5

翻译：静电

更多设计干货内容，欢迎关注静电的个人微信号： hixulei

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

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