1.使用光栅

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

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

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

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

2.像素网格的使用要点

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

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

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

3.保持一定水平的细节

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

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

4.控制最小间隙尺寸

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

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

5.去掉重复部分

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

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

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

6.遵循统一的设计风格

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

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

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

7.使用基于2px的尺寸调整系统

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

8.保持轮廓清晰准确

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

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

9.从垃圾桶中清除SVG

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

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

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

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

10.图标≠ 魔法棒

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

• 空状态——如果您要创建空状态屏幕，例如“没有剩余任务”或“所有E-mail已阅读”，最好用情感图标说明它们或只使用文本描述。情感图标可以提升用户兴致，而无情感的几何图标不会为交互增加任何价值。

• 吉祥物和插图——如果你的界面有吉祥物或插图，这种类型的图形应该是感性的。我不知道设计师应该怎样通过有限的形状选择和网格来表达情感。

谢谢阅读！

以上就是热腾腾新鲜出炉的文章，希望同样帮助到你们！话说我的发文速度还是挺快的~哈哈 o(*￣▽￣*)ブ 持续更新 敬请期待~