1.使用视觉网格

    一个应用内的icon通常近似一个基本形状：一个斜方形，一个长方形，一个菱形，圆形，三角形，正方形。模糊显示后，它们的视觉重量会近似，因为它们或多或少有增有补。

    根据图标形状，可以将其装进栅格框架中。比如说，接近正方形的就比长条形或三角形更加紧凑。

    图标形状越紧凑，它需要的空间就越小；越锋利的形状，或者带有越多细节，占用框架内的空间就越大。

    别变成网格的奴隶，不要太受限。如果视觉效果更好的话，可以适当让元素突出网格线。

2.注意像素格

    优先设计小图标，要在非视网膜屏上看得清，要看像素网格。优先选择2px作为线宽（1倍），线构成的矢量的图标，最好用宽度居中的模式。

    如果线性图标线宽1px（1倍大），就必须让宽度处于外侧。

    1px线宽如果相对于路径居中，它就会出现虚边、模糊，尽管你在工程稿看的是清晰的。

    如有斜边，起点和终点必须在交叉点上。经实验45°, 30° 和60°角度的斜边更干净，好过像是13.7° 或 81°这样的角度。

3.保持一定细节程度

    设计一个图标包，最好从最复杂的开始。它能有效控制图标重量的统一性。

    细节程度不同的图标，容易造成视觉重量不同。会吸引用户更关注视觉重量更重的。

4.控制最小间歇点

    图标中的元素间隔不应该太小或大小不一。这样能避免图标的元素轮廓粘滞。

    图标中“最小距离”和线宽一样粗。要么就把线合在一起，要么就设计明确的断点，不要出现“好像连在一起”的情况。

5.去除重复部分

    图标库中的图标，你可能会重复某些元素，则摆脱它们，让用户聚焦图标的差异点。像数学中的化简一样。你的图标越少重复越易懂。

    如果用户明白一个元素的意义，没必要一再重申。就看你会不会让用户误读。如果在一个邮件app里就可以去除这些冗杂了。

此规则还包括背景、装饰等等。如果不能帮你读懂图标，它就会阻碍界面整体辨识度。

6.选择一个风格，并遵循

    在一个系列里不要混合设计风格。统一风格会帮用户辨识其意思，区分它们的层级和适用范围是否相同。

    同样的道理，线性图标和面性图标，如果你混搭，用户会认为它们是不同层级或用途。当然，除非你刻意为之。比如，面性图标代表关键命令，线性代表普通行为。

    每个界面中有两种风格的图标是好的，线性代表未被惦记、可点击的状态。面性代表被选中状态。

7.基于两倍大的尺寸体系

    8小格12柱廊布局广泛应用于界面中，它更加灵活。12栏可以被2、3、4、6整除；所以24、48px大小的图标成为标准。成倍地缩放它们也不成问题。

8.保持路径干净精准

    完美不是目标，没人去看你路径。但是产品中不扭曲的图标是很重要的。记住尽量用最少的锚点，并且不要在靠在一起的形状间留间隙。

    同样的道理，锚点处于“8.999 px” 或“100.001 px”，也会造成虚化。锚点卡在整像素点会让图形更加干净。在路径闭合为一的时候，经常会有这种风险。

9.清理SVG垃圾

    sketch这样的应用中能直接输出SVG，其中有许多分组和遮罩，层层叠叠但工程里看不出来。

    在其他应用中打开这个SVG（比如AI），你会看见很多空的图层，不必要的分组和遮罩。开发人员在网页或应用使用字体图标时可能会出现问题。

    你可以移除这些垃圾再保存。

    你能看见这个svg在重新编辑前后，在预览中的差异。当然也可以直接调代码，如果你懂画布的机制。

    10.图标不是魔杖

    当然，每个规则都不是定死的，它们都是经验总结，如果你知道自己的意图，可以随意跳过这些法则。在我看来，有至少两种情况可以不用几何构成图标。

    1、空状态。如果你要显示“没更多任务”或者“全部邮件都已读”，最好用插画、情感化的图标或者仅仅是文字表明，更具有感情的图像或插画会让用户愉悦，几何的无感情的插画对交互没有半点帮助。

    2、吉祥物和插图。如果界面中有插图，这些图像应该是情绪化的。不知设计师如何用几何网格能描绘这么多图像。

    回到产品本身，问自己是否真的需要这样平衡、时尚、统一的图标呢？这是否是最佳的解决方案？