作為一名 UI 設(shè)計(jì)師,必須要重視 icon 的作用,那么新手UI設(shè)計(jì)師在設(shè)計(jì)線形圖標(biāo)的時(shí)候,應(yīng)該怎么做,才能使自己的圖標(biāo)既美觀又富有創(chuàng)意呢?首先是需要大量地練習(xí),其次是盡量不要一遇到畫圖標(biāo)的時(shí)候就隨便在網(wǎng)上下載,而是結(jié)合產(chǎn)品調(diào)性創(chuàng)造屬于這套產(chǎn)品的圖標(biāo)。
在本文中所說的圖標(biāo),是指界面中的 icon。icon 增加了界面的趣味性,也提高了識別性,是界面中不可或缺的部分。
icon 在功能上來說,分為不可點(diǎn)擊的展示圖標(biāo)和可點(diǎn)擊的按鈕圖標(biāo):
詳見圖1.1.1以及1.1.2中紅框部分:
△ 好享瘦 app 中的界面
icon 的尺寸一般選擇4的倍數(shù),這樣有利于在成倍縮放的時(shí)候,不會(huì)造成半像素的情況。例如48×48的 icon,縮小2倍的時(shí)候是24×24;而34×34的 icon,縮小2倍的時(shí)候是17×17。在圖標(biāo)中應(yīng)盡量避免出現(xiàn)單數(shù)。
時(shí)下流行的圖標(biāo)可以歸納為:線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)。至于 mbe 風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等,都是基于以上三種來進(jìn)行風(fēng)格設(shè)計(jì)。圖1.3.1為在 dribbble上看到一些比較好看的 icon 設(shè)計(jì),作者 ID 均備注在右下角,在此僅供參考。除了在 dribbble、站酷、花瓣、優(yōu)設(shè)、iconfont 等找好看的圖標(biāo)以外,還可以參考市面上主流 app 中的圖標(biāo)。
常用的畫圖標(biāo)軟件有三個(gè):AI、PS、sketch。
AI 的好處是矢量,網(wǎng)格比較規(guī)范,容易處理圖標(biāo)的線面轉(zhuǎn)換,其中直角一鍵轉(zhuǎn)圓角功能非常好用,缺點(diǎn)就是調(diào)色非常的難用,操作不便,只能處理普通色塊,復(fù)雜的色彩會(huì)耗費(fèi)很多時(shí)間。
PS 的好處是調(diào)色功能強(qiáng)大,形狀剪切中規(guī)中矩,缺點(diǎn)是做線性圖標(biāo)的時(shí)候需要用布爾運(yùn)算,描邊功能操作起來沒有 AI 方便。
Sketch 的好處是矢量,調(diào)色十分智能,并且現(xiàn)在做界面多數(shù)用 sketch,應(yīng)用起來十分便捷,缺點(diǎn)是它的造型沒有 AI 和 PS 嚴(yán)謹(jǐn),一些轉(zhuǎn)角的位置不夠流暢,小圖的時(shí)候不易察覺,放大后就能看到不流暢的線條。
我通常是三者結(jié)合來畫圖標(biāo):首先用 AI 構(gòu)造基本的形狀。如果是要發(fā)作品做展示,就拉到 ps 里面進(jìn)行調(diào)色和展示;如果是放在界面中使用,就拉到 sketch 調(diào)色使用。
在這里演示的是用 AI 畫圖標(biāo)的方法。參數(shù)設(shè)置方面:首先在首選項(xiàng) – 參考線和網(wǎng)格,網(wǎng)格線間隔10px,次分隔線10,勾選顯示像素網(wǎng)格;然后在畫布框內(nèi)點(diǎn)擊鼠標(biāo)右鍵,顯示網(wǎng)格;最后在視圖中打開「對齊網(wǎng)格」「對齊像素」「對齊點(diǎn)」。圖2.2.1為參數(shù)設(shè)置步驟。
參數(shù)設(shè)置完畢后,新建畫布,我一般新建800×600(dribbble 的展示尺寸),圖標(biāo)應(yīng)小而精致,不宜建過大的畫布。
參考線是為了規(guī)范圖標(biāo)而存在,一般有兩種參考線畫法(復(fù)雜規(guī)范與簡單規(guī)范),它們原理都是一樣的,習(xí)慣哪種就用哪種。不要糾結(jié)參考線的大小應(yīng)該是多少,根據(jù)你圖標(biāo)使用的位置來確定圖標(biāo)大?。ㄒ簿褪菂⒖季€的范圍),有的朋友知道了 46px 的參考線怎么畫之后,又糾結(jié) 88px 應(yīng)該怎么畫,其實(shí)就是一樣的原理。你可以根據(jù)自己的感覺來微調(diào),稍微大點(diǎn)小點(diǎn)無所謂,重要的是不要出現(xiàn)單數(shù)的像素大小就可以。在此以44px大小的圖標(biāo)為例子。
復(fù)雜規(guī)范
畫一個(gè)44×44的正方形,顏色調(diào)為灰色,描邊選擇0.25pt(在此補(bǔ)充一個(gè)知識點(diǎn),72ppi下的1pt是等于1px的,具體請自行百度),然后畫一個(gè)42×42的正方形居于其中。這個(gè)42×42的界線為安全界線,圖標(biāo)不要畫超過這個(gè)界線,避免在給開發(fā)切圖的時(shí)候貼邊切,導(dǎo)致圖標(biāo)出現(xiàn)不自然的邊界。圖2.2.2詳細(xì)展示畫參考線的步驟。
那么,以上的參考線應(yīng)該怎么使用?我們畫圖標(biāo)的時(shí)候,物體會(huì)有長有扁,有圓有方,在統(tǒng)一體量感的時(shí)候,就需要用到里面的一些參考線。但是記住,參考線是死的,人眼是活的,畫完以后,要靠感覺微調(diào),直至視覺上體量感達(dá)到一致。請看下圖2.2.3分析:
△ 圖標(biāo)是 iconfont 比賽里第二名的商務(wù)計(jì)劃書圖標(biāo),我臨摹了一遍,在此用以示范,原作者 回憶的沙漏2003
簡單規(guī)范
用復(fù)雜規(guī)范的參考線畫到熟練的時(shí)候,就可以用比較簡單的參考線去限制圖標(biāo)范圍,因?yàn)槟阋呀?jīng)十分熟悉體量感的控制了。
簡單的畫法是只需要畫三個(gè)正方形,同樣線性選擇顏色是灰色,描邊選擇0.25pt。這里有個(gè)小口訣:長物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。下圖2.2.4詳細(xì)展示畫簡單參考線的方法。
在畫布中用描邊 0.25pt 來畫好參考線,然后選中參考線,右鍵 – 建立參考線。詳細(xì)請看圖2.3.1。
前面說到,參考線是為了限定圖標(biāo)的大小,從而達(dá)到整體的美觀與規(guī)范。在畫了很多圖標(biāo)之后,我總結(jié)出兩個(gè)小訣竅:
畫圖標(biāo)的時(shí)候要對齊網(wǎng)格,改變圖標(biāo)大小的時(shí)候,注意是不是兩邊同時(shí)縮放,有沒有造成半像素,有的話就手動(dòng)拖動(dòng)圖標(biāo)對齊網(wǎng)格。
可以使用內(nèi)描邊來進(jìn)行線性圖標(biāo)的繪制,這樣更容易對齊網(wǎng)格,但是內(nèi)描邊只要使用鋼筆加點(diǎn)來斷點(diǎn)的話,就會(huì)自動(dòng)變成居中描邊。那么使用內(nèi)描邊的時(shí)候怎么進(jìn)行斷點(diǎn)?可以把描邊進(jìn)行對象 – 擴(kuò)展,轉(zhuǎn)為形狀,然后用布爾運(yùn)算來剪切。由于太麻煩,我一般使用居中描邊(不推薦居中描邊是因?yàn)樵谑謾C(jī)界面中的線性圖標(biāo)一般是3像素,居中描邊怕出現(xiàn)半像素,影響清晰度),但經(jīng)過檢驗(yàn),只要注意把線拖動(dòng)對齊網(wǎng)格,不會(huì)影響清晰度。
補(bǔ)充一個(gè)知識點(diǎn):手機(jī)界面中的圖標(biāo),線性一般是用3像素,因?yàn)?像素太細(xì),4像素又顯得太笨重;當(dāng)2倍圖的時(shí)候用3像素,3倍圖的時(shí)候就會(huì)變成4.5像素,所以3倍圖的時(shí)候要手動(dòng)把4.5調(diào)成4或者5像素。
在這里的統(tǒng)一性不是指所有的圖標(biāo)里面都要用一模一樣的元素,而是圖標(biāo)的線粗細(xì)、斷點(diǎn)的距離、元素的大小、切割的距離、同樣的色調(diào)、風(fēng)格的一致。當(dāng)所有的圖標(biāo)在里面都使用一樣的元素,會(huì)造成辨認(rèn)困難。下圖2.6.1,一眼看過去,一模一樣的笑臉降低了識別率。
差異性是指在統(tǒng)一的風(fēng)格下,通過造型能力,進(jìn)行圖標(biāo)的區(qū)別,增加辨識度。
圖標(biāo)的造型塑造都是一樣的原理,關(guān)鍵是風(fēng)格的形成,需要不斷的嘗試。前期可以在 dribbble、站酷、花瓣、各位大神的作品展示平臺多看看,學(xué)習(xí)一些優(yōu)秀的圖標(biāo)造型塑造方法、風(fēng)格、配色,通過大量練習(xí)和嘗試,慢慢就可以找到屬于自己的那套畫法。
上面說過,我在 AI 中造型完畢,會(huì)拉到 sketch 或者 PS 里面修飾。
我常用的圖標(biāo)展示方式之一:
只有少數(shù)人是天才,大多數(shù)情況下我們都要通過大量的練習(xí),才能促成質(zhì)變。一開始畫不好不要?dú)怵H,只要勤奮,明天的你永遠(yuǎn)會(huì)比今天的你要進(jìn)步得多。不要偷懶套用別人的圖標(biāo),設(shè)計(jì)師最不應(yīng)該丟的是自己的創(chuàng)造能力。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.mwtacok.cn 北京漫動(dòng)者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc