线面图标设计制作解析

本篇文章跟大家分享线面图标设计制作解析，希望对大家有所帮助！

一、线面图标组合基础

在介绍线面图标的设计样式前，我们要先来了解一下线面图标的组合基础，根据这些基础知识我们能更好地理解下面介绍的设计样式，也许还能自己超创出新的设计样式。

1.面的比例

线面图标在组合时，面所占比例大致有三种情况：小比例、大比例、全比例。

小比例的线面图标本身色块与背景色能形成一定的对比，丰富层次；大比例的线面图标可以很好的将高光表现出来；全比例的线面图标通过色彩的变化可以做出更加复杂的插画图标。

2.面的位置

线面图标造型时，色块面的位置大致也有四种情况：色块面包含在线条内部、色块面与线条交叉错开、色块面与线条有交集拼接、色块面与线条无交集拼接。

了解线面图标的基础知识后，不知道你有没有发现，其实线面图标造型的重点就是线面位置关系以及面的多少，在这两点的基础上线与面本身的设计样式完全可以参照线性图标与面型图标。

二、线包含面

线包含面，色块面位于线条内部，与线条没有分离，根据面的所占比例分为部分包含以及全包含。

1.部分包含

线面图标本身只有部分充满色块，如下图：

这是一种常见的线面图标，色块面采用主题色，线条采用深黑色系。除了以上这种，再为大家举几种常见的处理方式。

线面不透明度改变

线条与色块面采用同一色彩，部分色块面降低不透明度与线条色彩形成差异，整体风格清新简约，并不会有线面图标刻板的可爱风格。

在这个基础上可以对线条进行同色系的渐变处理，又是一种新的效果，如下图：

多色色块

色块面采用多个色彩，线条采用深黑色系。比起单一色块，更加丰富，色彩面面积更广。

色彩渐变

色块面采用多色彩渐变，是一种较常规的面型处理方式，也能使线面图标整体更加丰富。

不透明度渐变

色块面采用渐变色，一侧色彩不透明度100%，一侧色彩不同明度调至0~20%，比起纯色色彩渐变，变化更加清新明快。

2.全包含

线面图标的内部面全包含色块，色块面的处理方式与部分包含区别不大（可以自己动手试试用部分包含面的处理方式绘制），这里主要介绍扁平线面插画图标以及MBE风格线面图标。

1）扁平线面插画图标

图标造型相对复杂，会将图形的细节表现出来，适合绘制有实物参考的图形，常用在徽章、头图banner等偏向强视觉的运营处。

图标参考实物进行线稿绘制后，对不同位置进行色彩填充，可以通过深色阴影以及白色高光增加图标的厚度。

2）MBE线面图标

MBE图标是线面图标中非常具有辨识度的一种风格，最大的特点就是采用断点线条，用色明亮并搭配一些简单几何做点缀。

三、线面分离

线与面分离开，根据线面分离的位置可以分为线条内部分离、外部错位以及拼接线面。

1.线条内部分离

线条图形内部色块面与线条分离，常见的处理方式有缩小内部面、内错高光、内部面型图形。

1）缩小内部面

将线面分离，并缩小内部色块面与外部线条形成一定的间距，如下图：

2）内错高光

内部色块面通过布尔运算错位与外部线条形成一个空白高光，对于规则的形状可以直接通过形状绘制。

3）内部面型图形

在线型图标的基础上，内部采用色块面增加一个图形，可以将图标本身内部图形改成面型色块，也可以在图标内部增加一个规则色块面，如下图：

2.外部错位

线条图形色块面与线条错位分离，常见的处理方式有规则图形错位、图标形状错位。

1）规则图形错位

在线性图标的基础上，在底层增加一个规则图形（圆、矩形等）的色块面形成错位感，色块面可根据面型图标样式进行各种尝试，常见的如纯色色块、渐变色块、不透明渐变色块等。

2）图标形状错位

线面图标的线与色块面直接分离并错位交叉，一般会选择将色块面置于线条下部留出错位感。

3.拼接线面

线条图形与色块面共同拼接形成完整的图标，常见的处理方式有：有交集线面拼接、无交集线面拼接。

1）有交集线面拼接

图标一半采用线条绘制，一半采用面型绘制，且线条与面有交集。这种拼接风格较个性化，色块面常常用色彩渐变添加。

2）无交集线面拼接

图标一部分采用线条绘制，一部分采用面型绘制，且面与线之间没有交集。与断点线性图标原理相似，不过将线与线断点的一部分线型形状改成了面型，如下图：

划重点

线面图标的设计重点在于线面位置的改变以及面的所占比，在这两点的基础上线与面本身的设计样式完全可以参照线性图标与面型图标。

常见的面占比大小：小比例、大比例、全比例。

常见的线面位置：色块面包含在线条内部、色块面与线条交叉错开、色块面与线条有交集拼接、色块面与线条无交集拼接。

原文地址：海盐社（公众号）

作者：人类君