新手设计师为什么要对断点图标Say No

我们作为UI设计师，一开始入门接触最多的就是图标，而现在很多设计师都钟爱线性图标，导致很多新手设计师也跟随主流的脚步选择线性图标去设计，但是线性图标是不是真的像我们看起来那么简单呢？

今天跟大家说一下绘制线性图标的一些技巧，我将这些这些技巧分成了一下几点：

• 一、线性图标的特征
• 二、描边怎么选？
• 三、选择钢笔还是布尔运算？
• 四、断点图标怎么处理？
• 五、线性图标的注意事项
• 六、划重点
  

线性图标的特征目前市面上的线性图标以2px、3px最为主流，如下图：

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

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

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

而4px的图标会显得略微厚重，如下图所示：

因此线性图标表达力最好的是在2px和3px，同时减少一些图标细节，能够更大的提升图标的表达力，但是同样的图形，面性的图标直观表现力要优于线性图标，因此面性图标属于更易上手。
描边怎么选？以sketch来画图标举例，首先我们需要遵循像素网格，点击sketch顶部右上角，选择显示像素，你会发现你的界面从矢量变成了像素，这么做的好处是能够保证我们的图标在画的时候能看出来有没有虚边。

在画线性图标的时候，我们首先面对的问题就是选择是内描边、外描边还是居中？这个时候我们面对的是两种情况，当你的描边像素是偶数的时候，比如：2px，4px，居中，内外描边视觉上看起来都是ok的，就算是在显示像素网格的情况下，也不会发生虚边的情况。如下图所示：

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

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

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