本篇文章跟大家分享線面圖標設計制作解析，希望對大家有所幫助！

一、線面圖標組合基礎

在介紹線面圖標的設計樣式前，我們要先來了解一下線面圖標的組合基礎，根據這些基礎知識我們能更好地理解下面介紹的設計樣式，也許還能自己超創出新的設計樣式。

1.面的比例

線面圖標在組合時，面所占比例大致有三種情況：小比例、大比例、全比例。

小比例的線面圖標本身色塊與背景色能形成一定的對比，豐富層次；大比例的線面圖標可以很好的將高光表現出來；全比例的線面圖標通過色彩的變化可以做出更加復雜的插畫圖標。

2.面的位置

線面圖標造型時，色塊面的位置大致也有四種情況：色塊面包含在線條內部、色塊面與線條交叉錯開、色塊面與線條有交集拼接、色塊面與線條無交集拼接。

了解線面圖標的基礎知識后，不知道你有沒有發現，其實線面圖標造型的重點就是線面位置關系以及面的多少，在這兩點的基礎上線與面本身的設計樣式完全可以參照線性圖標與面型圖標。

二、線包含面

線包含面，色塊面位于線條內部，與線條沒有分離，根據面的所占比例分為部分包含以及全包含。

1.部分包含

線面圖標本身只有部分充滿色塊，如下圖：

這是一種常見的線面圖標，色塊面采用主題色，線條采用深黑色系。除了以上這種，再為大家舉幾種常見的處理方式。

線面不透明度改變

線條與色塊面采用同一色彩，部分色塊面降低不透明度與線條色彩形成差異，整體風格清新簡約，并不會有線面圖標刻板的可愛風格。

在這個基礎上可以對線條進行同色系的漸變處理，又是一種新的效果，如下圖：

多色色塊

色塊面采用多個色彩，線條采用深黑色系。比起單一色塊，更加豐富，色彩面面積更廣。

色彩漸變

色塊面采用多色彩漸變，是一種較常規的面型處理方式，也能使線面圖標整體更加豐富。

不透明度漸變

色塊面采用漸變色，一側色彩不透明度100%，一側色彩不同明度調至0~20%，比起純色色彩漸變，變化更加清新明快。

2.全包含

線面圖標的內部面全包含色塊，色塊面的處理方式與部分包含區別不大（可以自己動手試試用部分包含面的處理方式繪制），這里主要介紹扁平線面插畫圖標以及MBE風格線面圖標。

1）扁平線面插畫圖標

圖標造型相對復雜，會將圖形的細節表現出來，適合繪制有實物參考的圖形，常用在徽章、頭圖banner等偏向強視覺的運營處。

圖標參考實物進行線稿繪制后，對不同位置進行色彩填充，可以通過深色陰影以及白色高光增加圖標的厚度。

2）MBE線面圖標

MBE圖標是線面圖標中非常具有辨識度的一種風格，最大的特點就是采用斷點線條，用色明亮并搭配一些簡單幾何做點綴。

三、線面分離

線與面分離開，根據線面分離的位置可以分為線條內部分離、外部錯位以及拼接線面。

1.線條內部分離

線條圖形內部色塊面與線條分離，常見的處理方式有縮小內部面、內錯高光、內部面型圖形。

1）縮小內部面

將線面分離，并縮小內部色塊面與外部線條形成一定的間距，如下圖：

2）內錯高光

內部色塊面通過布爾運算錯位與外部線條形成一個空白高光，對于規則的形狀可以直接通過形狀繪制。

3）內部面型圖形

在線型圖標的基礎上，內部采用色塊面增加一個圖形，可以將圖標本身內部圖形改成面型色塊，也可以在圖標內部增加一個規則色塊面，如下圖：

2.外部錯位

線條圖形色塊面與線條錯位分離，常見的處理方式有規則圖形錯位、圖標形狀錯位。

1）規則圖形錯位

在線性圖標的基礎上，在底層增加一個規則圖形（圓、矩形等）的色塊面形成錯位感，色塊面可根據面型圖標樣式進行各種嘗試，常見的如純色色塊、漸變色塊、不透明漸變色塊等。

2）圖標形狀錯位

線面圖標的線與色塊面直接分離并錯位交叉，一般會選擇將色塊面置于線條下部留出錯位感。

3.拼接線面

線條圖形與色塊面共同拼接形成完整的圖標，常見的處理方式有：有交集線面拼接、無交集線面拼接。

1）有交集線面拼接

圖標一半采用線條繪制，一半采用面型繪制，且線條與面有交集。這種拼接風格較個性化，色塊面常常用色彩漸變添加。

2）無交集線面拼接

圖標一部分采用線條繪制，一部分采用面型繪制，且面與線之間沒有交集。與斷點線性圖標原理相似，不過將線與線斷點的一部分線型形狀改成了面型，如下圖：

劃重點

線面圖標的設計重點在于線面位置的改變以及面的所占比，在這兩點的基礎上線與面本身的設計樣式完全可以參照線性圖標與面型圖標。

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

常見的線面位置：色塊面包含在線條內部、色塊面與線條交叉錯開、色塊面與線條有交集拼接、色塊面與線條無交集拼接。

直線網公眾號，第一時間學習最新教程，看最新行業動態！！