译者：

本文翻译已获得作者的正式授权（授权截图如下）

大家好，我名为彩云。近来帮忙查看了不少我群里同学的作品集，会发觉众多人于图标设计的细节方面存在诸多问题，而这一块儿又是我给出建议较为多的地方。我期望借助今天这篇文章，能够促使大家自行检查自身作品集中的图标问题，说不定还有能够提升的地方。

再者，彩云还要讲，图标于设计里竟是一个极为基础的设计元素当中的一个，针对这部分知识付出再长时间去研究练习都是具价值的，就算是工作好多年的设计老手，也不容易讲自己能够令图标设计，做得卓越出众了。因而不管是复习旧知从而获得新的理解又或学习以求进步，花上几分钟瞧瞧这篇知识含量超高的文章，肯定会有收获的。

这篇文章将会把重点放在图标基础规则方面，对图标视觉重量及对齐问题展开深入探究。

1.使用栅格规范，保证相同的视觉大小

一个界面里的图标，常常能够大致地视作是一些基本形的组构，有横向放置的矩形，有纵向排列的矩形，有呈倾斜状的矩形，有圆形，有三角形，还有正方形。模模糊糊地瞧，它们具备相同的视觉重量，缘由在于它们或多或少已然变成了相同的斑点。

图标的基本轮廓

凭借图标的形状，针对其实施嵌入操作，使之进入对应的栅格里头。举例来讲，方形的图标相较于三角形的图标或者细长样式的图标，显得更为紧凑，是此种情况。

图标在栅格中

栅格中的基本图形

图标越是紧凑，所需的空间便越少。图标具备锐利的边缘或者小细节越多，其于画板上所占据的空间就越大。

图标示例，栅格中可以放不同异形的图标

栅格中放更多细节的基本图形：方形，圆形，三角形

须留意别沦为栅格的奴役对象，栅格是用以协助你而非去约束你的，倘若一个图标因某些显著的元素而于视觉方面具备更佳的效果，那就任由它们凸显。

2.注意像素网格，保证图标足够清晰

使得图标于非视网膜屏幕之上能够清晰被看见，为此要在使用像素网格时保持坚持，并且在线性图标方面优先选用2px粗细的描边，2px处于居中对齐状态的描边一般而言会提供充足的粗细以及清晰的轮廓。

2像素线型图标示例

2像素线型图标示例

要是图标选用了1px的描边这种情况，那么应当采用内描边或者外描边，而不是处于居中状态的那种。

1像素外描边图标示例

1像素外描边图标示例

在图标放大至100%时，1px呈现位置处于正中的描边，会致使图标变得模糊，然而sketch 图标打组，若对其进行更大程度的放大，图标则会显现出清晰的状态。

1像素居中描边线型图标示例

1像素居中描边线型图标示例

依照像素网格来设定斜线之起点与终点，当斜线角度为45°时，它会比形如13.7°这般的不规则角度更清晰，当斜线角度为30°时，亦比例如81°那样的不规则角度更清晰，当斜线角度为60°时，同样比不规则角度更清晰。此刻依旧存在数百万之人在运用低分辨率的屏幕设备，这便是图标清晰度仍旧颇为重要的缘由所在。

矢量和位图图标示例

3.保持一致的细节

最先得从复杂的图标着手去创建一组图标集，这组图标集将会界定详细程度，并且对于设计那些有着相同视觉重量的图标而言是有帮助的。

不同细节程度的图标示例

在图标细节程度存在差异的情况下，那些细节更为丰富的图标，更易于吸引用户的注意力，而且看上去视觉重量相较于细节少的图标更大。

细节不一致

4.控制最小间隙

于整个图标集合当中，图标内部彼此相邻元素之间的间距不会应当过小或者呈现不一致的状况。去定义最小间距并且在各个地方按照同样的方式予以使用，以此来防止轮廓出现“粘连”的情况。

不一致的间隙

间隙统一

对线型图标而言，最好使最小间距与线条粗细等同。线条要么清晰地分隔开，要么精准地连接起来，绝不要模棱两可。

不一致的间隙

间隙统一

5.删掉重复的部分

图标集中，或许存在某些重复的细节，将它们删除，以使用户注意力聚焦于其不同之处，宛如数学中分数须约分（化简分数）那般。你所见到的视觉干扰越少，你对它的理解会变得越加清晰。

倘若目标用户已然清楚他或者她所运用的是啥，那就没必要一次次不断重复，举例来说：防止运用基于信封的图标不会致使人们觉得这并非一个邮箱类app。

关于图标周遭的装饰（框架、背景），此条规则同样适用。要是这些对于图标识别而言并无助力，那么它们便会对图标识别造成妨碍。

6.遵循一种风格

切勿把样式各异、角度不同的元素掺和在一起处于同一个图标集当中sketch 图标打组，保持一致的风格会对用户于图标识别方面有所助益，并且能让用户清楚明白这些图标具备同等的重要程度以及状态。

同一纬度的图标

不同维度的图标

适用于线型图标和面型图标这套同样的原理，要是把它们混在一起，人们也许会觉得它们有着不一样的重要性或者状态，当然啦，除非那是你有意为之。就比如说，用于关键指令的是面型图标，用于其他指令的则是线型图标。

一组一致性图标

一组不一致的图标

于界面里头存在着两种不一样的图标，这是挺好的。线型图标发挥着用作不可点击状况亦或是正常状态的作用，面型图标则被用于点击状态。

7.使用2的倍数来设计图标

常用于诸多界面的8px网格以及12列布局，相较于基于十进制的尺寸而言更为灵活，12能被2、被3、被4、亦能被6整除，所以24或48px的图标已然成为了标准，要是需要更大尺寸，能够对它们予以缩放。

8.保证形状简洁和精确

我们的目标并非是完美主义，没有人需要为了像素的完美去追寻完美的线条，然而，这对于产品里最终呈现出正确且不失真的图标而言是极为重要的，要记住图形当中锚点数量需处于最少状态，并且相邻的元素之间不能存在间隙。

矢量图标的调整与优化

与之相关的令人厌烦的“8.999px”呀，或者是“100.001px”呢？倘若锚点所处位置精准无误，那么图标边缘呈现出来的视觉效果就会显得清晰分明。除此之外，于进行合并形状操作之际，也不存在会出现多余锚点以及间隙的那种风险。

矢量图标的调整与优化

9.清除SVG文件中的垃圾图层

由诸多设计软件（诸如）所生成的svg文件，皆附带有着不必要的文件，即多余的编组，还有颜色图层以及剪切蒙版。先让我们瞧一瞧，于其中，一切看上去仿若都挺美观良好的。

中的图标示例

当在诸如Ai这类的其它软件里打开此SVG文件你会瞧见诸多空图层，存在不必要的编组，偶尔还会有剪切蒙版，而在前端开发人员把图标转换为图标字体或者于网页上运用SVG文件之际，这些状况都极有可能致使问题出现。

Ai中的图标示例

你可以删除这些垃圾文件然后保存。

你能够瞧见生成出的SVG文件（.svg），以及编辑过后生成的SVG文件（.svg），在文件查看器里预览时展现出的效果并不相同。顺带提及一下，也能够于代码编辑器之中将这些垃圾图层给删除掉。要是你清楚SVG代码是怎样的模样，那么可以试着去直接把不必要的数据字符串给删除掉。

10.图标的进阶，情感和特色

当然，这些所提的建议并非是那不可被打破的规则，要是你明确知晓自身正在做些什么，那就随时能够跳过它们，在我个人的看法里，至少于两种情形状况下，严肃的几何图标并非是最好的可供选择之物。

出现空状态，要是你正着手设计一个页面的空那种状态（也就是缺省页），像“没有任务了”或者“所有邮件已读”这种情况，那最好是借助情感化的图标去呈现，或者仅仅只用文字来做出说明。情感化图标能够让用户产生快乐的感觉，然而没有情感的几何图标并不会增添任何交互方面的价值。

那些吉祥物以及插图。要是屏幕之上你所呈现的界面当中存在吉祥物或者插图，这般图案理应是感性的。我并不晓得设计师究竟是怎样借助有限的形状选择以及始终坚持运用网格去雕琢一个角色的。

仍然存在着另外一件事情，于某些特定、特殊的情形状况之下，最好去询问一下自己，是不是真的有需要用到图标。那么这究竟是不是解决问题的最佳方式呢？去撰写一些具备有意义的文字又如何呢？必须要得留意在使用过程当中的平衡状态，不然的话，那些可爱且时髦的图标将会使得人产生沮丧之感，所有付出的努力都将会变成是毫无成效的。

--------------结----------------束--------------。

UI充能站 Ⅱ群正式开放

定期分享设计资源 扫码进群

—   每日福利   —

图标网格模版PSD源文件

后台回复“图标网格”即可领取

—   回复关键词获取资源   —

小程序控件 | 包图小白体 | 面试技巧 | 图标规范

UI设计规范 | UI教程 | AE教程

字体设计 | 作品集 |

—   你可能错过的干货文章   —

设计交流  |  加设计群  |  商务合作

如有侵权请联系删除！