上周为大家介绍了面型图标的设计样式解析，本期则继续介绍线性图标的设计样式解析。


一、基本线性

基本线性图标以简单线条造型，搭配单个纯色，主要是功能性图标，常见于顶部导航栏、个人中心列表功能等，如下图：




延伸：

在基本线性的基础上，对线条做一些简单的改变，包括改变色彩、改变透明度以及增加厚度。

1）线条多个色彩

在基本线性图标的基础上，线条采用多个色彩，常见的搭配是黑白灰无彩色系搭配一个有彩色系，如下图：

或者是如下图这种使用2个及以上的有彩色系搭配，更加丰富。

2) 改变透明度

在基本线性的基础上，改变某一段线条的透明度，丰富线条的前后层次感。（可采用降低饱和度达到同样效果）

3）增加厚度

在线条内部加上一小部分浅灰阴影，增加图标的厚度，如下图：

二、断点

断点线性图标，图标在线条交汇处进行小部分截断，形成一个小缺口，风格年轻活泼。需要注意的是断点图标的绘制有诸多细节：

1.断点的间距统一
2.断点位置选择线条交汇处
3.不要在图形中线上断点
4.断点图标造型尽量使用布尔运算，否则截断后可能出现虚边

因此不建议新手直接在项目中尝试该风格，可以在练习稿中多绘制。

三、渐变

1.常规线型渐变

常规线性渐变，渐变样式按照常用的线型渐变，线性渐变以某一点为起点，直线链接到任意终点，所有色值点都在一条直线上，如下图：

2.沿着线条渐变

沿着线条渐变，渐变色彩沿着线条的走向依次延伸，比起常规线性渐变更具有视觉冲击力，搭配断点图标，渐变效果明显，如下图：

在AI中有一个描边渐变的选项，在sketch中可以通过角度渐变得到相同的效果。

对于无断点的完整线条，还可通过增加交汇线条，得到更明显的效果。




四、叠加

线性图标的叠加与面型图标的叠加是同一个道理，只是将重合的面换成了重合的线。线与线的重合多数是转折的线或是延伸交汇的线。

叠加的方法也是将上层图形的混合模式改成正片叠底即可。如下图：




划重点

以上介绍的基本线性、断点、渐变以及叠加只是最基础的方式，很多时候我们也可以几个样式混合使用。

不知道你发现没有，除了色彩本身的调整，线性图标的造型多数是在线与线交汇转折出做调整，根据这个方法，我们还可以自己尝试一些不一样的方式。


参考引文：

《从零开始画图标系列：超全面的基础知识》http://dwz.date/aZf9

《断线图标规律》http://dwz.date/beM3



本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：海盐社！