教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
簡單的界面中的icon畫法

2018-09-19




 
畫過不少圖标,也總結了很多大神的方法,在此歸納一下簡單的圖标畫法,希望對大家有幫助。作為一名 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大小的圖标為例子。
複雜規範
畫一個44×44的正方形,顔色調為灰色,描邊選擇0.25pt(在此補充一個知識點,72ppi下的1pt是等于1px的,具體請自行百度),然後畫一個42×42的正方形居于其中。這個42×42的界線為安全界線,圖标不要畫超過這個界線,避免在給開發切圖的時候貼邊切,導緻圖标出現不自然的邊界。圖2.2.2詳細展示畫參考線的步驟。
那麼,以上的參考線應該怎麼使用?我們畫圖标的時候,物體會有長有扁,有圓有方,在統一體量感的時候,就需要用到裡面的一些參考線。但是記住,參考線是死的,人眼是活的,畫完以後,要靠感覺微調,直至視覺上體量感達到一緻。請看下圖2.2.3分析:

 
△ 圖标是 iconfont 比賽裡第二名的商務計劃書圖标,我臨摹了一遍,在此用以示範,原作者 回憶的沙漏2003
 
 

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

3. 如何在 AI 建立參考線來複用?
在畫布中用描邊 0.25pt 來畫好參考線,然後選中參考線,右鍵 – 建立參考線。詳細請看圖2.3.1。
 
4. 各種形狀的圖标如何在參考線中統一
前面說到,參考線是為了限定圖标的大小,從而達到整體的美觀與規範。在畫了很多圖标之後,我總結出兩個小訣竅:當你總結出你要畫的物體形狀時,隻要不影響辨識度,可以适當改變一下形狀,把高的或者扁的物品,畫成比較飽滿的樣子(圖2.4.1的鉛筆為例);


 
當物體形狀不适合畫得飽滿時,可以盡量上下或者左右撐滿,然後旋轉45度,以增加畫面的飽滿感(圖2.4.2的刀為例)。
5. 繪制過程中要注意的點
畫圖标的時候要對齊網格,改變圖标大小的時候,注意是不是兩邊同時縮放,有沒有造成半像素,有的話就手動拖動圖标對齊網格。可以使用内描邊來進行線性圖标的繪制,這樣更容易對齊網格,但是内描邊隻要使用鋼筆加點來斷點的話,就會自動變成居中描邊。那麼使用内描邊的時候怎麼進行斷點?可以把描邊進行對象 – 擴展,轉為形狀,然後用布爾運算來剪切。由于太麻煩,我一般使用居中描邊(不推薦居中描邊是因為在手機界面中的線性圖标一般是3像素,居中描邊怕出現半像素,影響清晰度),但經過檢驗,隻要注意把線拖動對齊網格,不會影響清晰度。補充一個知識點:手機界面中的圖标,線性一般是用3像素,因為2像素太細,4像素又顯得太笨重;當2倍圖的時候用3像素,3倍圖的時候就會變成4.5像素,所以3倍圖的時候要手動把4.5調成4或者5像素。
6. 什麼是圖标的統一性和差異性在這裡的統一性不是指所有的圖标裡面都要用一模一樣的元素,而是圖标的線粗細、斷點的距離、元素的大小、切割的距離、同樣的色調、風格的一緻。當所有的圖标在裡面都使用一樣的元素,會造成辨認困難。下圖2.6.1,一眼看過去,一模一樣的笑臉降低了識别率。差異性是指在統一的風格下,通過造型能力,進行圖标的區别,增加辨識度。


三、線性圖标畫完後如何創造風格
1. 多彩底色線性圖标風格
 
2. 同色調線面結合風格
 
圖标的造型塑造都是一樣的原理,關鍵是風格的形成,需要不斷的嘗試。前期可以在 dribbble、站酷、花瓣、各位大神的作品展示平台多看看,學習一些優秀的圖标造型塑造方法、風格、配色,通過大量練習和嘗試,慢慢就可以找到屬于自己的那套畫法。
四、圖标的導出及展示上面說過,我在 AI 中造型完畢,會拉到 sketch 或者 PS 裡面修飾。導到 sketch 裡面的方法(即導 svg 方法):把單獨的圖标擴展,然後編組,每個圖标是獨立的一個編組,拉到「資源導出」那裡,選擇導出 svg 格式,直接就可以拖到 sketch 裡面用。導到 PS 裡面的方法:選擇單獨圖标,複制粘貼到 PS 裡面,再進行美化。我常用的圖标展示方式之一:

五、創建屬于你的個人圖标庫阿裡的圖庫 iconfont 是國内非常強大的圖标庫,不僅圖标風格衆多,還有代碼可以調用,十分方便。個人還可以上傳到圖标庫裡給别人使用,并且現在 sketch、axure 裡面都有 iconfont 的插件,可以随時調用。iconfront 網站鍊接:http://www.iconfont.cn
六、總結隻有少數人是天才,大多數情況下我們都要通過大量的練習,才能促成質變。一開始畫不好不要氣餒,隻要勤奮,明天的你永遠會比今天的你要進步得多。不要偷懶套用别人的圖标,設計師最不應該丢的是自己的創造能力。如果我的文章能給你提供一點幫助,是我的榮幸。

(6)