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)文章。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學(xué)習,可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc