a、界面图标通常可以定义的基本格式：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。模糊显示图标后依然具有相同的视觉质量，因为图标变成或多或少相同的点。

b、根据图标形状，将其导入相应框架的栅格中。例如，方形图标比三角形或长方形图标更紧凑。

c、图标越紧凑，所需空间就越小；如果图标具有更锐利的边缘或小细节，那么图标占据的画板空间就越多。

注意不要把设计禁锢在网格内。它只是辅助，而不是限制。如果一个图标用一些拉伸的元素能在视觉上效果更好，那就让它们伸出来。

a、要在非视网膜屏幕上使图标清晰，需要用到像素网格，并优先选择 2px 线条图标作为边框。居中的 2px 边框通常提供足够的厚度和清晰的轮廓。

b、如果为图标选择 1px 的边框，则边框应该是在图标边缘外侧或内部而不是居中。

c、在像素网格后面设置对角线的起点和终点。角度为 45°、30°和 60°的对角线比角度不均匀（如 13.7°或 81°）的对角线更锐利。目前大部分用户还在使用低分辨率屏幕设备，这就是为什么图标清晰度仍然很重要的原因。

a、制作图标最好从复杂图标的部分起始。这样才能更好的定义细节级别并有助于制作相同视觉权重的图标。

b、当图标具有不同的细节层次时，更细致的图标会吸引更多用户的注意力，这样的图标看上去也会比一般图标更出类拔萃。

a、图标的相邻元素间的间隙在整个图标中不应太小或不一致。确定好最小间隙的位置并将其调整到最合适的尺寸。不要出现粘连感。

b、对于线图标，最小间隙尺寸应当等于线条粗细的尺寸。线条分离的位置应当明显分离，连接的位置也要彻底连接上，切忌出现分离不清的粘连感。

a、在一组图标中，您可能会重复细节。要去掉重复部分，将观众的注意力集中在不同的东西上。这就像数学中的分数简化一样。您看到的视觉噪音越少，您的理解就越清晰。

b、如果目标用户已经意识到他自己在用什么的话，那就无需一次又一次地重复出现。如下图，就算去掉信封图标，用户也清楚这是和 E-mail 相关的 app。

此设计原则还包括图标周围的各种装饰、边框、背景。如果这些元素没有帮助阅读图标，那么这些元素就等于画蛇添足，会阻碍用户阅读图标。

a、不要在一组图标中同时出现 2.5D 和 2D 两种效果。设计风格统一将有助于用户识别图标，而且可以理解到每个图标都具有相同的重要性或状态。

b、统一的设计风格也适用于线图标和填充图标。如果你用了不同的设计风格来绘制图标的话，人们可能会认为这些图标具有不同的重要性或地位。当然，除非你刻意的想突出某个部分。例如，填充图标用于键命令，线图标用于其他命令。

c、在界面中每个图标有两个变体就非常好。线图标 - 用于禁用或常规状态。填充图标 - 用于单击状态。

a、与基于十进制的大小调整相比，8px 和 12 列布局在许多界面应用更为灵活。12 可以分为 2,3,4 和 6.因此，24px 或 48px 在图标中已成为标准尺寸。如果需要更大的尺寸，可以缩放这些图标。

a、没有像素点就不可能实现图形的设计，但是在作图时应注意少的节点更有利于渲染，并且删除无用且重复的像素点很关键

b、那些令人讨厌的“8.999 px”或“100.001 px”尺寸呢？如果形状锚定位准确，图标边缘看起来很清晰。并且，在合并形状时，不存在获得过多锚点和间隙的问题。

a、许多界面编辑器（如 Sketch）会生成具有不必要伪影的 SVG - 过多的组，颜色层和剪切遮罩。让我们来看看。在 Sketch 中，一切看起来都不错。

b、在另一个编辑器（例如，Adobe Illustrator）中打开此 SVG。你会注意到空图层，不必要的组，有时还有剪贴遮罩。当前端开发人员将图标转换为代码或在网页上使用 SVG 时，所有这些都可能导致问题。

c、您可以删除多余垃圾并保存。

d、您将看到 Sketch SVG（picture.svg）和已编辑的 Illustrator SVG（picture_new.svg）在文件查看器中具有不同的预览。顺便说一下，可以在代码编辑器中删除垃圾。如果您知道 SVG 代码的具体名称，请尝试直接删除不必要的数据字符串。

当然，所有上述建议也要因人而异。如果你自己的方法更适合你的设计，可以随意跳过这些建议。严格的几何图标不一定是最佳选择。在我看来，至少有两种情况，

• 空状态——如果您要创建空状态屏幕，例如“没有剩余任务”或“所有 E-mail 已阅读”，最好用情感图标说明它们或只使用文本描述。情感图标可以提升用户兴致，而无情感的几何图标不会为交互增加任何价值。
• 吉祥物和插图——如果你的界面有吉祥物或插图，这种类型的图形应该是感性的。我不知道设计师应该怎样通过有限的形状选择和网格来表达情感。