小男

畫過不少圖標,也總結了很多大神的方法,在此歸納一下簡單的圖標畫法,希望對大家有幫助~

 

作為一名UI設計師,必須要重視icon的作用,首先是需要大量地練習,其次是盡量不要一遇到要畫圖標的時候就隨便在網上下載,而是結合產品調性創造屬于這套產品的圖標。

 

一、圖標在UI中的應用

在本文中所說的圖標,是指界面中的icon。icon增加了界面的趣味性,也提高了識別性,現在是界面中不可或缺的部分。

 

1、icon在界面中的分類:

icon在功能上來說,分為不可點擊的展示圖標和可點擊的按鈕圖標。不可點擊的展示圖標,是為了輔助后面的文字內容,側重點在于文字,通常尺寸為24×24、28×28、32×32,在小尺寸內為了便于辨認圖像,也不要在界面中太搶眼,建議可以使用簡單的線性或者面性圖標;可點擊的按鈕圖標,常用于導航欄、操作欄、標簽欄,通常尺寸為44×44、48×48、56×56、64×64,這類圖標可以結合產品調性進行富有趣味性的設計。詳見圖1.1.1以及1.1.2中紅框部分(該示例為好享瘦app中的界面)。

2、icon的尺寸:

icon的尺寸一般選擇4的倍數,這樣有利于在成倍縮放的時候,不會造成半像素的情況。例如48×48的icon,縮小2倍的時候是24×24;而34×34的icon,縮小2倍的時候是17×17。在圖標中應盡量避免出現單數。

 

3、icon的風格:

時下流行的圖標可以歸納為:線性圖標、面性圖標、線面結合圖標。至于mbe風格、斷線風格、色塊風格、漸變風格、半透明風格、雙色搭配風格等等,都是基于以上三種來進行風格設計。圖1.3.1為在dribbble上看到一些比較好看的icon設計,作者ID均備注在右下角,在此僅供參考。除了在dribbble、站酷、花瓣、優設、iconfont等找好看的圖標以外,還可以參考市面上主流的那些app中的圖標。

二、如何畫圖標

 

1、畫圖標的軟件:

常用的畫圖標軟件有三個:AI、PS、sketch。

AI的好處是矢量,網格比較規范,容易處理圖標的線面轉換,其中直角一鍵轉圓角功能非常好用,缺點就是調色非常非常的難用,操作不便,只能處理普通色塊,復雜的色彩會耗費很多時間。

PS的好處是調色功能強大,形狀剪切中規中矩,缺點是做線性圖標的時候需要用布爾運算,描邊功能操作起來沒有AI方便。

Sketch的好處是矢量,調色十分智能,并且現在做界面多數用sketch,應用起來十分便捷,缺點是它的造型沒有AI和PS嚴謹,一些轉角的位置不夠流暢,小圖的時候不易察覺,放大后就能看到不流暢的線條。

我通常是三者結合來畫圖標:首先用AI構造基本的形狀。如果是要發作品做展示,就拉到ps里面進行調色和展示;如果是放在界面中使用,就拉到sketch調色使用。

 

2、參數設置與參考線的繪制:

在這里演示的是用AI畫圖標的方法。參數設置方面:首先在首選項-參考線和網格,網格線間隔10px,次分隔線10,勾選顯示像素網格;然后在畫布框內點擊鼠標右鍵,顯示網格;最后在視圖中打開“對齊網格”“對齊像素”“對齊點”。圖2.2.1為參數設置步驟。

參數設置完畢后,新建畫布,我一般新建800×600(dribbble的展示尺寸),圖標應小而精致,不宜建過大的畫布。參考線是為了規范圖標而存在,一般有兩種參考線畫法(復雜規范與簡單規范),它們原理都是一樣的,習慣哪種就用哪種。不要糾結參考線的大小應該是多少,根據你圖標使用的位置來確定圖標大?。ㄒ簿褪菂⒖季€的范圍),有的朋友知道了46px的參考線怎么畫之后,又糾結88px應該怎么畫,其實就是一樣的原理。你可以根據自己的感覺來微調,稍微大點小點無所謂,重要的是不要出現單數的像素大小就可以。在此以44px大小的圖標為例子。

 

a、復雜規范:

畫一個44×44的正方形,顏色調為灰色,描邊選擇0.25pt(在此補充一個知識點,72ppi下的1pt是等于1px的,具體請自行百度),然后然后畫一個42×42的正方形居于其中。這個42×42的界線為安全界線,圖標不要畫超過這個界線,避免在給開發切圖的時候貼邊切,導致圖標出現不自然的邊界。圖2.2.2詳細展示畫參考線的步驟。

那么,以上的參考線應該怎么使用?我們畫圖標的時候,物體會有長有扁,有圓有方,在統一體量感的時候,就需要用到里面的一些參考線。但是記住,參考線是死的,人眼是活的,畫完以后,要靠感覺微調,直至視覺上體量感達到一致。請看下圖2.2.3分析(圖標是iconfont比賽里第二名的商務計劃書圖標,我臨摹了一遍,在此用以示范,原作者是:回憶的沙漏2003)。

b、簡單規范:

用復雜規范的參考線畫到熟練的時候,就可以用比較簡單的參考線去限制圖標范圍,因為你已經十分熟悉體量感的控制了。簡單的畫法是只需要畫三個正方形,同樣線性選擇顏色是灰色,描邊選擇0.25pt。這里有個小口訣:長物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。下圖2.2.4詳細展示畫簡單參考線的方法。

3、弄懂參考線的畫法后,如何在AI建立參考線來復用?

在畫布中用描邊0.25pt來畫好參考線,然后選中參考線,右鍵-建立參考線。詳細請看圖2.3.1。

4、各種形狀的圖標如何在參考線中統一:

前面說到,參考線是為了限定圖標的大小,從而達到整體的美觀與規范。在畫了很多圖標之后,我總結出兩個小訣竅:a、當你總結出你要畫的物體形狀時,只要不影響辨識度,可以適當改變一下形狀,把高的或者扁的物品,畫成比較飽滿的樣子(圖2.4.1的鉛筆為例);b、當物體形狀不適合畫得飽滿時,可以盡量上下或者左右撐滿,然后旋轉45度,以增加畫面的飽滿感(圖2.4.2的刀為例)。

5、繪制過程中要注意的點(敲黑板,此處必須注意):

a、畫圖標的時候要對齊網格,改變圖標大小的時候,注意是不是兩邊同時縮放,有沒有造成半像素,有的話就手動拖動圖標對齊網格。

b、可以使用內描邊來進行線性圖標的繪制,這樣更容易對齊網格,但是內描邊只要使用鋼筆加點來斷點的話,就會自動變成居中描邊。那么使用內描邊的時候怎么進行斷點?可以把描邊進行對象-擴展,轉為形狀,然后用布爾運算來剪切。由于太麻煩,我一般使用居中描邊(不推薦居中描邊是因為在手機界面中的線性圖標一般是3像素,居中描邊怕出現半像素,影響清晰度),但經過檢驗,只要注意把線拖動對齊網格,不會影響清晰度。(補充一個知識點:手機界面中的圖標,線性一般是用3像素,因為2像素太細,4像素又顯得太笨重;當2倍圖的時候用3像素,3倍圖的時候就會變成4.5像素,所以3倍圖的時候要手動把4.5調成4或者5像素。)

 

6、什么是圖標的統一性和差異性:

a、在這里的統一性不是指所有的圖標里面都要用一模一樣的元素,而是圖標的線粗細、斷點的距離、元素的大小、切割的距離、同樣的色調、風格的一致。當所有的圖標都用一樣的元素在里面時,會造成辨認困難。下圖2.6.1,一眼看過去,一模一樣的笑臉降低了識別率。

b、差異性是指在統一的風格下,通過造型能力,進行圖標的區別,增加辨識度。

三、線性圖標畫完后如何創造風格(舉2個例子):

 

1、多彩底色線性圖標風格:

2、同色調線面結合風格:

圖標的造型塑造都是一樣的原理,關鍵是風格的形成,需要不斷的嘗試。前期可以在dribbble、站酷、花瓣、各位大神的作品展示平臺多看看,學習一些優秀的圖標造型塑造方法、風格、配色,通過大量練習和嘗試,慢慢就可以找到屬于自己的那套畫法。

 

四、圖標的導出及展示:

上面說過,我在AI中造型完畢,會拉到sketch或者PS里面修飾。

  • 1、導到sketch里面的方法(即導svg方法):把單獨的圖標擴展,然后編組,每個圖標是獨立的一個編組,拉到“資源導出”那里,選擇導出svg格式,直接就可以拖到sketch里面用。
  • 2、導到PS里面的方法:選擇單獨圖標,復制粘貼到PS里面,再進行美化。
  • 3、我常用的圖標展示方式之一,請看下圖~

 

五、創建屬于你的個人圖標庫:

阿里的圖庫iconfont是國內非常強大的圖標庫,不僅圖標風格眾多,還有代碼可以調用,十分方便。個人還可以上傳圖標庫到里面給別人使用,并且現在sketch、axure里面都有iconfont的插件,可以隨時調用~

iconfront的網址是:https://www.iconfont.cn

圖標庫:https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.9&manage_type=myicons&icontype=collections&keyword=

 

六、總結(打雞血)

只有少數人是天才,大多數情況下我們都要通過大量的練習,才能促成質變。一開始畫不好不要氣餒,只要勤奮,明天的你永遠會比今天的你要進步得多。

 

原文地址:站酷

作者:牙線姐姐

 

轉載請注明:學UI網 » 如何畫好一組線性圖標

登錄收藏
 
你可能喜歡的:
圖標這樣去做,更受歡迎圖標這樣去做,更受歡迎
底部導航欄圖標分析底部導航欄圖標分析
真正優秀的圖標,少不了這7個底層設計原則真正優秀的圖標,少不了這7個底層設計原則
9種吸引人的圖標樣式,能給你的設計帶來良好的用戶體驗9種吸引人的圖標樣式,能給你的設計帶來良好的用戶體驗
UI設計之圖標設計UI設計之圖標設計
視覺感知:UI中的圖標視覺感知:UI中的圖標
小元素,大影響。UI圖標的類型和功能小元素,大影響。UI圖標的類型和功能
這波投票,如何合理地選擇圖標樣式 (下)這波投票,如何合理地選擇圖標樣式 (下)
產品圖標體系是如何煉成的?產品圖標體系是如何煉成的?
了解圖標落地,讓前端再愛你一次了解圖標落地,讓前端再愛你一次
?
网球比分雷速 黑龙江11选五5什么时候开始 三羊期货配资 十一运夺金计划软件 加拿大快乐8开奖和值 加盟股票配资公司 河内5分彩是哪个平台 宏达高科股票行情 北京十一选五一定用 安徽11选五走势图下截 股票新手怎么玩