UI設(shè)計中線性圖標設(shè)計總結(jié)

　　UI界面中的圖標主要可分為三類：線性圖標、面性圖標、線面結(jié)合圖標。結(jié)合三種基礎(chǔ)類型可以創(chuàng)造出各式各樣的圖標形式。今天AAA教育郭老師就針對UI設(shè)計中線性圖標設(shè)計總結(jié)進行簡單的說明。
 

　　基礎(chǔ)款如下圖：

 

　　今天先跟大家分享第一大類型線性圖標。
 

　　01
 

　　圖標基礎(chǔ)形狀
 

　　圖標基礎(chǔ)形狀一般由外輪廓+內(nèi)部線條組成。在造型上可以從線條粗細、圓角半徑大小、圖標復(fù)雜程度等方面來考慮。
 

　　1、線條粗細
 

　　線條粗細不同，圖標的力度和重量感也會有差異。
 

　　粗線的圖標：粗壯、厚重，視覺上看更加突出。
 

　　細線的圖標：精致、透氣。
 

　　如下圖所示：

 

　　2.圓角半徑大小
 

　　圓角越小：視覺上越硬朗和穩(wěn)重
 

　　圓角越大：視覺上越柔美和活潑
 

　　如下圖所示：

 

　　3.圖標復(fù)雜度
 

　　過度簡潔會導(dǎo)致圖標失去該有的識別性，圖標太過復(fù)雜視覺上會更繁重。
 

　　建議在不影響圖標識別度的情況下，提升圖標的簡潔程度同時要表意準確。
 

　　如下圖所示：

 

　　4、斷點圖標
 

　　在線形圖標基礎(chǔ)上面，尋找一個缺口剪斷，使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小，另外需要控制開口個數(shù)，一般不會超過2個。
 

　　如下圖所示：

 

　　5.兩種線條粗細
 

　　外輪廓線條和內(nèi)部線條用2種粗細大小，豐富圖標細節(jié)。
 

　　如下圖所示：

 

　　02
 

　　顏色
 

　　1、 單色圖標單色圖標簡潔明了，不會有太多的視覺干擾，如下圖所示：

 

　　2、 雙色圖標
 

　　相較于單色圖標更具表現(xiàn)力，細節(jié)上也會更豐富。常見的處理手法有使用近似色、對比互補色、漸變色、透明度變化等。
 

　　2.1近似系：如下圖所示，藍色為主色，綠色點綴豐富細節(jié)，注意點綴色一般用在內(nèi)部線條上。

 

　　2.2對比互補色：顏色跨度更大，層次更加分明。如下圖所示，紅色與藍色的撞色相比單色的圖標更加出彩和具有記憶點。

 

　　2.3漸變色：使用漸變色使圖標更有質(zhì)感。如下圖所示：

 

　　2.4透明度變化通過透明度的疊加和變化，可以提升圖標的層次感和空間感。

 

　　2.5顏色疊加線條交接處用疊加效果豐富整個圖標的視覺表達，提升了圖標的設(shè)計感，色彩更有活力。

 

　　2.6黑色+品牌色

 

　　2.7白色+品牌色

 

　　好了，今天的分享就到這里，因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。