【Icon】线性图标避坑指南

工作中我们会接触很多图标的绘制，时下流行的不外乎也就是：线性图标、面性图标和线面结合图标；

初学者可能接触的最多也就是线性图标，也可能认为是最容易掌握的吧……   

tab bar

线性图标的特征

目前市面上的线性图标以 2px、3px 最为主流。为什么大部分的产品会使用 2px 和 3px 的线性图标呢？因为图标线条的宽度越大，可展示的细节就越少，但是图标的表现力却能够得到极大的提升，这也是为什么面性图标的直观表现力一直都比线性要好的原因。

线面对比

线性图标线条的宽度越小，能展示的细节就越丰富，同时直观的表现力也会降低，因为东西太多会产生视觉干扰。

当然现在也有少数一些产品的线性图标用 1px 和 4px，而且也在图标上做了减法，所有我们会看到一些用 1px 的图标整个图形表现很简单，但是因为线条太细，导致整个底部操作栏的图标视觉表现上偏弱;

1px

而 4px 的图标会显得略微厚重；

4px

因此线性图标表达力最好的是在 2px 和 3px，同时减少一些图标细节，能够更大的提升图标的表达力。但是同样的图形，面性的图标直观表现力要优于线性图标，因此面性图标更易上手。

描边怎么选？（这是个知识点 ⚠️）

以 sketch 来画图标举例，首先我们需要遵循像素网格，点击 sketch 顶部右上角，选择显示像素，你会发现你的界面从矢量变成了像素，这么做的好处是能够保证我们的图标在画的时候能看出来有没有虚边。

在画线性图标的时候，我们首先面对的问题就是选择的是内描边、外描边还是居中？

这个时候我们面对的是两种情况，当你的描边像素是偶数的时候，比如：2px，4px，居中，内外描边视觉上看起来都是可以的，就算是在

显示像素网格的情况下，也不会发生虚边的情况。如下图所示：

但是如果描边数值变成奇数的时候，比如：1px，3px，5px，这个时候就不能用居中，应该使用内或者外描边，因为居中的描边会模糊掉。如下图所示：

在做闭合路径的线性图标时，通常采用内描边的对齐方式，因为外描边的矢量图形视觉上其实是比实际数值要大的，不利于我们控制图标大小。而且描边的数值一定不要出现 2.31 或者 1.68 这样的情况。

如上图，有小数点的描边同样也会出现虚边的问题，而这种情况经常会出现在图标的等比缩放之后，因此我们在缩放图标之后，需要每个小细节都确认一下。

断点图标怎么处理？

因此为了达到这样的效果，就需要将描边改成居中，如果选择内描边或者外描边就会变得复杂很多，因为线不居中的情况下是无法直接设置成断线处弧形的。如果直接设置，会变成下图所示：

这无疑增加了设计的工作难度，为什么要将线条端口变成圆形呢，同理可参照按钮为什么都选择圆角矩形作为底部的道理。因为直直的切割线会让图标整个变得很生硬，没有亲和力，让用户对界面整体营造的氛围产生抵触心理。

原文链接