1.利用视觉框架

界面icon通常可近似看作一个基本形状，例如横向矩形、纵向矩形、对角矩形、圆形、三角形、正方形。模糊显示这些形状，它们都变为差不多的斑点，拥有同等的视觉重量。

将这些基本形状置于同样的视觉框架中，我们发现，方形图标会比三角形或细长图标更紧凑。

图标越紧凑，它所需的空间就越小；拥有锐利边缘及小细节的图标，它所占据的空间就越大。

但是，我们不要完全依赖于视觉框架，它只是起到了辅助作用，而不是限制作用。如果一些超出框架范围的元素能让一个icon达到更好的效果，那尽管按你的想法来。

2.注意像素网格

要想icon在非视网膜上保持锐利，一定要使用像素网格，并且线条icon优先选用2像素宽度的居中描边，它可以让icon拥有足够的厚度和清晰的轮廓。

如果你采用1像素的描边，则应该采用向外描边或向内描边（如下），不应该采用居中描边。

1像素的居中描边（如下）会让icon在百分百显示的情况下变得模糊，即便它放大是清晰的。

如果icon中有斜对角线，借助像素网格来确定其起始点并且尽量采用常规角度。相比于13.7度／81度这类不规则角度，30度，45度，60度这类规则角度的斜线会更加锐利。

3.保持一定的细节

设计一套icon时，从其中最复杂的那个icon开始设计，它将定义整套icon的细节程度，并且确保所有icon拥有相同的视觉重量。（如下图）

当同一套图标中的icon细节程度不一样时，细节程度高的会占有较高的视觉比重并且更容易吸引用户注意。（如下图）

4.注意控制icon的最小间隙

一个icon中不同元素之间的间隙不应该太小，且同一套图标中的所有icon应该保持间隙的一致性。我们需要定义“最小间隙”，以避免icon元素间产生视觉上的粘连。

对于线条icon，最好让“最小间隙”等于线条粗细。并且线条与线条之间的关系应该明确，要么相连，要么断开，不应该又模棱两可的情况。

5.去掉重复的部分

在一套图标中，如果存在重复的元素，我们需要将其省去。这样做的目的是让用户的注意力都放在各个icon的不同点上。你看到的视觉干扰越少，你的理解就会越清晰。这就像数学中的分数（如图），我们会将其简化到最简模式。

如果目标用户已经意识到自己所用的工具或所处的环境，我们没有必要一再的重复这一点。例如，在邮件app内，我们不需要再重复“邮件”这一图形元素，可以将其省略，用户依然能够理解。

这条规则对于icon周围的装饰元素或者icon背景等同样适用。尽量省去这些对icon没有实质性作用的装饰元素。

6.选择一种风格并遵循它

同一套图标应该保持一致的风格，不可多种风格混合使用。风格的一致性能帮助用户识别icon，并且让icon们具有同等的重要性。

这一规则也适用于线条类icon和填充类icon。如果混合使用，用户会认为icon具有不同的重要性。一般不建议这样使用，除非你有意要强调icon之间的重要性区别。

在界面中，每个icon拥有两种状态是很好的。线状icon用于禁用或常规状态，填充icon用于点击状态。

7.利用的尺寸系统（2-based sizing system）

与十进制的尺寸相比，8像素网格系统和12列布局的方式在界面设计中更常用且更具灵活性。12可以被2、3、4、6整除。因此，24或48像素成为icon的标准尺寸。如果需要更大的尺寸，可以通过缩放得到。

8.保持轮廓的整洁精确

完美主义并不是目标，但会影响到icon在最终产品中的表现。请确保icon没有多余的锚点及相邻元素间没有间隙。

（例如下图icon放大后有间隙存在，应该避免这些细节问题）

同样的，类似“8.999px”或“10.001px”这类问题同样需要注意，如果icon形状锚点定位准确，则边缘看起来很清晰。当你在合并形状时，不会产生偏差。（如下图）

9.清理svg中的多余内容

许多像sketch这样的界面设计软件都能够导出SVG格式文件，导出的文件中包含过多的组、颜色层、剪切蒙版等。

例如，这个icon在sketch中，效果不错。

用其他软件打开它的SVG格式（例如用Adobe Illustrator），你会注意到，出现了很多空白图层、不必要的群组以及一些剪切蒙版。当前端开发人员将图标转换为iconfont或在网页中使用svg时，这些多余的内容可能会导致一些问题。

你可以删除这些多余内容后再保存。

在电脑中预览处理前后的svg文件时，你可以看到明显的区别（如下）。

原文作者：Slava Shestopalov

翻译者：AugustTree

【 注 】本文翻译已经过原作者允许，未经许可请勿转载，谢谢！