抽絲剝繭 最具深度圖示設計學習指南（一）

系列文章目錄

1.搭建架構

1.1搭建架構並填充圖示底層知識一（本文內容）

2.填充知識

2。1填充圖示底層知識二

2。2填充圖示底層知識三

2。3填充圖示底層知識四

2。4填充圖示底層知識五

2。5填充圖示知識——圖示設計深度解析

3.內化知識-刻意練習

3。1。圖示設計完全指南——三維圖示設計法則

一 為什麼優先去搭建並填充圖示的知識體系呢？

在前面的系列文章中我們系統的講解了如何搭建設計知識體系，我想各位小夥伴肯定在學習的過程中會有各種各樣的疑問或不解，

不知道如何下手開始搭建

其實也不用太擔心，這是非常正常的情況，我一開始也是這樣的，所以呢在本次的系列文章中，我將

和大家一起來搭建並填充 UI設計知識體系

下圖是我當前搭建的適合於我現階段的UI設計知識體系架構腦圖（架構的搭建並非要一次完成，可以邊填充邊內化邊完善），紅框中標註出來的內容就是我們今天所要搭建的主題——專業知識——圖形能力——圖示模組

下面說到為什麼要優先搭建圖示模組，因為

圖示是組成 UI介面的關鍵一環

，圖示質量的好壞直接

決定了 UI介面的視覺美觀度和你的設計專業程度

，不同的圖示風格也決定著不同的產品風格，在日常的設計工作中也會

高頻

用到此項技能知識，也符合前面講到的建立知識體系首先要明確建立學習主題的

目的

——有實際的高頻的運用場景（沒有看過或遺忘的小夥伴們可以回顧下之前的乾貨文章哦——-設計師倍速成長終極寶典01——設計知識體系之初識知識體系 ）

好了，明確了學習填充的主題之後我們開始搭建圖示知識體系的框架

搭建架構可以透過各種

可靠渠道建立架構，無需自己創造

此時我有兩個思路，一是直接在站酷等專業設計分享網站搜圖標繪製流程或者圖示設計理論知識，二是

從更為底層的設計知識體系開始填充

，大家可以思考一下圖示的本質是什麼？是不是平面設計的知識，品牌圖形的設計知識？圖示設計的知識其實是從這兩大底層知識體系中延伸出來並不斷演繹的

我填充知識體系的理念是儘量從最核心的底層知識體系開始填充，這樣你填充內化的知識才是真正最核心，最有用的知識核心，掌握了這些之後再去繪製圖標，你會發現其實是

降維打擊

，因為

圖示的知識只是平面構成中的一小部分而已

因此我將從設計基礎知識中的平面構成開始搭建架構並填充有關圖示設計知識的內容，那我應該從哪裡去獲取這些知識呢？

可以站在巨人的肩膀上建立知識之間的連線，可以

借鑑專家的知識體系、專業網站、經典書籍

因此我找到了兩本經典書籍作為搭建圖示知識體系的核心內容——

《平面構成》和《品牌設計法則》

，我們可以把書中涉及到的與圖示設計關聯度高的內容填充到我們的知識體系中，然後透過刻意練習和費曼學習法去內化吸收，大家也可以跟我一起填充哦

二 搭建圖示知識體系架構

接下來我會把兩本書的目錄呈現出來然後找出更適合圖示的基礎知識架構，最終將其應用在我的UI設計知識體系-圖示知識體系的細分架構中，之後再去填充內化

《平面構成》

第一章概述

一、平面構成的確立與發展

二、平面構成的概念與目的

三、平面構成研究與解決的問題

四、從具象到抽象的訓練

第二章形式美的原理與法則

一、平衡

二、對比

三、調和

四、節奏

五、變異

第三章造型的基本要素

一、點

二、線

三、面

四、形與形的關係

五、形與空間的關係

第四章形象的構成

一、基本形

二、規定形中的變化

三：單形切除

四、形的群化

五、多形組合

第五章平面構成的基本形式法則

一、重複與近似

二、分割與比例

三、漸變與發射

四、對比構成

五、特異構成

六、空間構成

七、打散重構

八、肌理

《品牌設計法則》

第一篇品牌設計的核心理念

第一章品牌理念

第二章品牌符號

第三章品牌標誌

第二篇品牌標誌的三大基石

第四章圖形符號設計

第五章中文標準字設計

第六章西文標準字設計

第七章品牌色彩設計

第三篇品牌設計流程

第八章品牌設計流程

抽取整合為圖示知識體系

造型的基本要素

一、點

二、線

三、面

四、形與形的關係

五、形與空間的關係

形象的構成

一、基本形

二、規定形中的變化

三：單形切除

四、形的群化

五、多形組合

圖形符號設計

最終圖示知識體系的細分架構完成，接著我們

進入填充環節

在填充之前想和小夥伴們說下，你

完全可以把本系列文章當做學透圖示知識並內化吸收的圖示設計教科書來閱讀

，推薦你

找一段充足的時間去閱讀，理解，學習其中的內容

，可能有些內容不是那麼好理解，沒關係你可以反覆多閱讀幾遍去加深印象，從而去理解它，我想效果會更好，

千萬不要只讀一遍就認為可以掌握了

具體填充時也

不要過分糾結用哪個工具去填充

，你可以使用我推薦的RE，也可以使用更為主流的語雀，notion，熊掌記，印象筆記，有道雲筆記等等等等。記住，工具只是載體而已，

你把知識放在上面也僅僅是填充，這些知識此時並不屬於你，更重要的是填充之後的內化環節

你可以

直接複製我填充的內容到你的知識體系裡

，但切記要根據自己填充的主題去複製我相應的內容哦

三 填充圖示知識體系

造型的基本要素

點

點的定義

幾何學對“點”的定義是：

點是線的開端和終止

，兩線相交而成的交點顯示了點的位置。因此，

點只具有位置，不具有大小

，

既無長度也無寬度，是最小的單位

從造型要素來看，“點”是一切形態的基礎，也是造型要素的最小單位

點的大小

點的大小是有限度的，超越限度將會失去點的性質成為“面”

。因此，點的確定是由點與環境空間的對比而決定的，關鍵在於點在空間中所佔的面積是極少的。

舉個例子，飛機在機場起飛前，飛機所佔的面積與機場對比，飛機成面不是點。當飛機在幾千米高空時，飛機與天空對比，飛機就成為點了。

點的形狀

另外，

點的形狀是多樣的，無任何限定

，一般可分為規則形狀和不規則形狀兩類。規則形狀主要是指有序的幾何形圓、方、三角、星形、菱形、梯形，等等。不規則形狀指的是隨意自由和偶然產生的點的形狀。因此，

如何成為“點”的，不在於它的形狀，重要的是保持著點是細小單位的性質。

點的作用

從幾何學的角度看“點”的作用

點是力的中心。如，三腳架的三線相聚於一點，是最穩定的狀態，這一點就是

力的中心點

。

具有張力，吸引視線

作為視覺造型，“點”的作用是：點在版面空間中，具有張力作用。因為，當版面空間中只有一點時，由於點的刺激而產生集中力，將

視線吸引聚集在此點上

。這就說明了，點有緊張性。

點的情緒

點的緊張性和張力在人們的心理上，有一種擴張感

。點在版面空間中的位置不同、數量不同、大小不同，給人的感覺也不同。

點的情緒根據位置而變化

點在中央時，能提高和加強注目性，

有安定和平穩感

，但缺少變化、過於單一。

點在上方偏邊緣，有失平衡感覺，不穩定，但帶有較強的

動感

。

點在上方中央，

平衡性較好

，有上升的感覺。

點在下方中央，

穩定性較強

，有下沉的感覺。

點在下方偏邊緣，

平衡性差

，感覺失重。

在版面中兩個較接近的點，由於點的張力作用，在心理上會產生

連線

的感覺；三個或四個點在不同的方向散開，其張力作用在心理上就表現為

三角形或正方形

。

大小

兩個大小懸殊的點同時出現在版面上，視線往往先被大的、優勢的一方吸引，然後才向小的點轉移，從而形成

強弱和節奏

一組大小按照數列變化的漸變點群，會產生

運動感和進深感

。大小不同的類似形，無論是規則的排列或自由排列，都容易產生進深感。

數量

一組距離接近的點，向一個方向排列就形成虛線的效果；幾組距離接近的點，向水平和垂直方向排列就形成虛面效果。

點在 UI圖示中的應用

從整個頁面看，紅框內的圖示就是點，仔細看這些點的形狀是多樣的，有圓形，方形，三角形等等，因此點不在於它的形狀，重要的是這個點和其他圖形的對比關係，同理在介面中，

圖示相對於介面是一個個的點，如果放大去看又是一個個的面

再把紅框內的點放大去看就成了一個的面

下方左圖中，我們把整個圖示當成一個面，面的四個邊角，或左上角或右上角會有一個四分之一圓，我們可以把它當成一個點，處在邊角的點有失平衡的感覺，不穩定，但帶有較強的動感，把原本較為嚴肅，穩定的圖示風格中融入了一絲靈動，活潑的感覺

下方右圖中可以把圖示中白色鏤空的部分看做一個點，四個圖示的點均處在中央的位置，能提高和加強注目性，有安定和平穩感

線

線的定義

造型對“線”的概念是：線與點有同樣的性質，即是可見的視覺形象。因此，線不但有位置，而且有一定的

長度和寬度

。

點的移動產生線。因此，當點向一個方向移動時，就成為

直線

；

當點在移動的過程中經常變化方向，就形成

曲線

；當點的移動方向間隔變換，則為折線。

線與點一樣，形狀是多樣的，無任何限定。這是由於線有一定的寬窄度，特別是較粗的線條，其線兩端的形狀是不容忽視的

線的種類

根據線的性質來分，線有兩大類，

一是直線；二是曲線

。

直線又可分為：

不相交的線

——平行線；

相交的線

——折線、包格線、集中的線；

交叉的線

——直交格子、斜交格子等。

曲線又可分為：

開放的曲線

——弧、旋渦線、拋物線、雙曲線等；

封閉的曲線

——圓、橢圓、心形等。

線的方向

線是有長度的形象，因此，就具有

方向性

的特徵。

直線有朝縱向走的垂直線、朝橫向走的水平線、方向性很強的各個角度的傾斜線。

曲線有彎曲、迴轉、波浪式流向等方向性。

舉個例子

金屬線材構成埃菲爾鐵塔，是規則的直線

線的性格

線對心理上的影響比點更強烈，也就更具感情性格。不同種類的線有著不同的性格，不同性格的線在心理上形成的感覺也各不相同，

大體上的感覺是：

直線表示靜，曲線表示動，折線表示不安定。

直線的性格

速度感、緊張感

，有直接、銳利、明快、簡潔等特性，從生理和心理的角度看，直線具有

男性要素

。

粗直線

象徵著豪放、厚重、力量和強壯。

細直線

象徵著纖細、敏感、微弱並帶有神經質。

折線

象徵著焦慮、不安定和躁動等。

不同方向的直線同樣也顯示了不同的感情性格

，線的方向比線的性質、感情性格更明顯更強烈。

垂直線

使人聯想起莊重、嚴肅的場面，讓人肅然起敬，因而又具有

堅挺、強直的性格特徵

：上下走向使垂直線有下落、上升的趨勢，並帶有較強的

緊張感

。

水平線

使人聯想到無限擴充套件的地平線及大地給予的

安定、穩妥感

。因此，表現出

安定、穩重、平靜、永恆的性格

。另一方面，過於的安穩夾帶著保守因素，有

寂寞、疲勞、無生氣

的感覺。

斜線

從平衡的角度來說，斜線首先給人的感覺是

失衡產生的不安定感

，但也使人聯想起飛機的起飛與降落。因此，有著強烈的向上或衝刺前進的運動感；同時，斜線的不安定中卻又表現了

青春的活力

。

下圖中用紅線標註出來了線的不同方向，屬於斜線，斜線表現出

青春的活力，再結合俏皮的畫風，清晰明確的營造出這款APP輕鬆，活力，年輕的風格調性

幾何曲線

是規矩繪製的曲線，與直線相比顯得較

溫和、柔軟，含有女性特徵

，具有幽雅、有秩序的性格，並有較強的柔韌性和速度感。

幾何曲線的典型表現是圓周，它有

對稱和秩序性的美，極富現代性

。因而，它表現的是一種

理性

的節奏。

自由曲線

是不借助任何工具，隨意徒手而成的曲線。自由曲線與幾何曲線相比顯得更

圓潤，富有彈性，因而象徵著女性

。自由曲線的輕鬆自如充分體現了自然美，它有著流暢、柔美、富於變化的性格。因此，自由曲線表現出

極自然的節奏

。

線的作用

封閉的線構成形

，因為面的輪廓是由線來決定的。

線有

分割和限制

作用。

線有

引導視線和指示

作用。

線的

間隔距離不同，會產生不同的效果

；有秩序的變化線的間隔，可表現強烈地進深感和立體感；大量密集的線，將會形成面的感覺；逐漸變化角度的傾斜直線，有扭曲的曲面感。

線在 UI圖示中的應用

下方左一圖的圖示用的是直線中的

粗直線

，象徵著豪放、厚重、力量和強壯，有直接、銳利、明快、簡潔等特性，從生理和心理的角度看，直線具有男性要素。因此這組風格的圖示就非常適合 PP體育這一

運動+男性風格

的 App 中使用

中間的圖示是芒果 TV 的 logo，用的是

斜線+粗直線

的手法，有著強烈的向上或衝刺前進的運動感；同時，斜線的不安定中卻又表現了青春的活力，和芒果 TV 年輕活力的調性非常匹配

右圖是閒魚 App 的底部 tab 欄圖示，整體是透過

幾何曲線

的手法表現，與直線相比顯得較

溫和、柔軟，含有女性特徵

，具有幽雅、有秩序的性格，並有較強的柔韌性和速度感，因此也多用於風格較為可愛，具有親和力的 App 中使用

四 本文回顧

在本篇文章中我們主要講了三大點

1.為什麼優先去搭建並填充圖示的知識體系呢？

因為

圖示是組成 UI介面的關鍵一環

，圖示質量的好壞直接

決定了 UI介面的視覺美觀度和你的設計專業程度

，不同的圖示風格也決定著不同的產品風格，在日常的設計工作中也會

高頻

用到此項技能知識，也符合前面講到的建立知識體系首先要明確建立學習主題的

目的

——有實際的

高頻

的運用場景

2.搭建圖示知識體系架構

把兩本書的

目錄

呈現出來然後找出更適合圖示的

基礎知識架構

，最終將其應

用在我的UI設計知識體系-圖示知識體系的細分架構中，之後再去填充內化

3.填充圖示知識體系

填充了造型的基本要素裡的點和線的模組

五 總結

好了，以上就是本篇的全部內容了，也非常希望你能夠跟我一起來逐步搭建起這個知識體系，在下一篇文章中我將繼續更新圖示篇的系列文章，敬請期待哦