UI設(shè)計(jì)中線(xiàn)性圖標(biāo)設(shè)計(jì)總結(jié)

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

　　基礎(chǔ)款如下圖：

 

　　今天先跟大家分享第一大類(lèi)型線(xiàn)性圖標(biāo)。
 

　　01
 

　　圖標(biāo)基礎(chǔ)形狀
 

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

　　1、線(xiàn)條粗細(xì)
 

　　線(xiàn)條粗細(xì)不同，圖標(biāo)的力度和重量感也會(huì)有差異。
 

　　粗線(xiàn)的圖標(biāo)：粗壯、厚重，視覺(jué)上看更加突出。
 

　　細(xì)線(xiàn)的圖標(biāo)：精致、透氣。
 

　　如下圖所示：

 

　　2.圓角半徑大小
 

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

　　圓角越大：視覺(jué)上越柔美和活潑
 

　　如下圖所示：

 

　　3.圖標(biāo)復(fù)雜度
 

　　過(guò)度簡(jiǎn)潔會(huì)導(dǎo)致圖標(biāo)失去該有的識(shí)別性，圖標(biāo)太過(guò)復(fù)雜視覺(jué)上會(huì)更繁重。
 

　　建議在不影響圖標(biāo)識(shí)別度的情況下，提升圖標(biāo)的簡(jiǎn)潔程度同時(shí)要表意準(zhǔn)確。
 

　　如下圖所示：

 

　　4、斷點(diǎn)圖標(biāo)
 

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

　　如下圖所示：

 

　　5.兩種線(xiàn)條粗細(xì)
 

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

　　如下圖所示：

 

　　02
 

　　顏色
 

　　1、 單色圖標(biāo)單色圖標(biāo)簡(jiǎn)潔明了，不會(huì)有太多的視覺(jué)干擾，如下圖所示：

 

　　2、 雙色圖標(biāo)
 

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

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

 

　　2.2對(duì)比互補(bǔ)色：顏色跨度更大，層次更加分明。如下圖所示，紅色與藍(lán)色的撞色相比單色的圖標(biāo)更加出彩和具有記憶點(diǎn)。

 

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

 

　　2.4透明度變化通過(guò)透明度的疊加和變化，可以提升圖標(biāo)的層次感和空間感。

 

　　2.5顏色疊加線(xiàn)條交接處用疊加效果豐富整個(gè)圖標(biāo)的視覺(jué)表達(dá)，提升了圖標(biāo)的設(shè)計(jì)感，色彩更有活力。

 

　　2.6黑色+品牌色

 

　　2.7白色+品牌色

 

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