想绘制线性图标，这里有 6 个前辈为你踩过的坑

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

线性图标的特征

目前面上的线性图标 2px、3px 最为流。为么大分的产会使 2px 和 3px 的线性图标呢？因为图标线条的宽越大，可展示的细节就越，但是图标的表现却够得到极大的升，这是为么面性图标的直观表现一直都线性要好的原因。如图最右面性和线性图标的对图：

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

当然现在有数一些产的线性图标 1px 和 4px，而且在图标上做了减法，有我们会看到一些 1px 的图标整个图形表现很简单，但是因为线条太细，导致整个操作栏的图标视觉表现上偏弱，如图示：

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

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

描边怎么选？

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

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

这个时候我们是两情况，你描边像素是偶数时候，比如：2px，4px，居，内描边视觉上看起来都是可以，算是在显示像素网格情况下，也不会发生虚边情况。如下图所示：

是如描边数值变成奇数时候，比如：1px，3px，5px，这个时候不能用居，应该使用内或者描边，为居描边会模糊掉。如下图所示：

在做闭合路径线性图标时，常采用内描边齐，为描边矢量图形视觉上其实是比实数值要大，不利于我们控制图标大小。而描边数值定不要出现 2.31 或者 1.68 这样情况。

如上图，有小数描边样也会出现虚边问题，而这情况经常会出现在图标等比缩放后，此我们在缩放图标后，需要个小细节都确认下。

选择钢笔还是布尔运算？

很多新手开始画图标时候都不知选择钢笔是矢量图形，或者认为用钢笔会简单上手易操作，我般不太议大家用钢笔去画图标。

首先是因为钢笔画的条果不是闭合的状态，就只有居中描边一个选项，就意味着你的图标条必须是偶数才不虚边，而且需要自己手动整参数，因为条很容易面有小数点，严重影响效率。

如果钢笔闭合的状态下，就会矢图形一样，会三种描的选项，但也仅仅只很常的图形下区别，一旦我们的图标稍微复杂一些的时候，就不太好用了。

举简单的例子，我们一般画插画的时候，应该都先画草图，修修改改会选择到软件里用钢笔始勾初稿，什么呢？因完全草图的时候，用钢笔勾会把握不好度，易失去视觉平衡。

用钢笔画图标是一的道理，除非是临摹，照着别人画好的临摹，用钢笔不会出现大的问题。如果二次创作呢？难道需要先画草图吗？（仅针对线性图标），如下图所示：

爱心，WiFi，置这些刚开始不知道怎下的图标，第一个想的是不是就是用钢笔画？其实用简的布尔运算就能解决。

因此能用布尔运算解决的问题，就不要用钢笔来解决，不止描边容易虚边，同还更耗费力和间。

断点图标怎么处理？

相大家都了机上多产品的线性图标，配上断线的方式来让图标变得更俏皮，断线的规则就不多说了，这要说的是根据上面得的结论，要如何理断点图标。

为了图标更有亲和，大分的断点图标都会择将端口变成圆形，如图示：

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

这无疑增了设计的工作难，为么要将线条端口变成圆形呢，同可参照按钮为么都择圆角矩形作为的道。因为直直的切割线会图标整个变得很生硬，没有亲和，户对界面整体营的氛围产生抵触心。

线性图标的注意事项

1. 为什你的图标不清晰？

上面围绕画线性图标会引起虚边的问题说了那多，大家应该都知道为什画线性图标总是不清晰了。因为如果在画的候没有注虚边的问题，开发实现的候，图标经过倍率缩放就会变模糊，如下图所示：

如果在 @2x 倍率下绘制的描边为 3px、5px 等不能被 2 整除的数值，那在适配 @1x、@3x ，会因为出现数点导致图标边缘变虚，如下图所示：

或者如果是偶数居中，在倍率更改后变成奇数边缘还是会变虚，如下图所示：

这个候需要动修改和校正相应的参数后，才能够确保输出的切图清晰可靠，而这一切都是在备以上的知识之后才能够有识地去完成这些息。

2. 修改了还是虚边怎？

当都备了这些知识候，图标中还是会出现虚边怎呢，如下图所示：

像圆形，斜的直线等这些都是不可避免会出现虚线的怎呢？这种属于不可避免出现，并且目前也没有术拯救的情况，除非换别的图标，目前来说还没有找别的方法来解决。

3. 新该不该选择线性图标？

并不是建议新计在刚开始触图标设计的时候，采用断点线性图标，首先因处理起比较麻烦，处理端点的变化，还避免虚的问题，线实阶段，切图就一很的作。

其次也要避免使用断点图标，虽然多图标断点之后的确更耐，但是介于产品规范及视觉一致性，整个产品的图标都需要断点，因此在一些简的图标上断点就成了最大的工作难点，如下图界面中经常出现的图标，要怎确定断点呢？

总结

虽然只小小的线性图标，但都设师需了解的一些很细节的知识，这样设的时候能够规避一些问题，同时也能保证产品线的细节质。

新计在一开始计图标的候不建议使用断点图标，除了要懂得避免虚边，还有动适配不同尺寸的切图，以及解决断点图标的问题。

这在一定程度上会需要投入更多的力来避免这些问题，而且面性的表现方式优于线性，因此不建议新计一上来就选择线性图标。