您現在的位置:首頁 > LOGO教程 > ui如何畫好一組線性圖標簡單的圖標畫法

ui如何畫好一組線性圖標簡單的圖標畫法

時間:2018-04-28 11:31 [ ] 來源:網絡 已被瀏覽590

 畫過不少圖標,也總結了很多大神的方法,在此歸納一下簡單的圖標畫法,希望對大家有幫助。作為一名 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中紅框部分:

uisdc-tb-20180425-2.jpg

△ 好享瘦 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 中的圖標。

uisdc-tb-20180425-3.jpg

二、如何畫圖標

1. 畫圖標的軟件

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

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

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

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

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

2. 參數設置與參考線的繪制

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

uisdc-tb-20180425-4.jpg

參數設置完畢后,新建畫布,我一般新建800×600(dribbble 的展示尺寸),圖標應小而精致,不宜建過大的畫布。

參考線是為了規范圖標而存在,一般有兩種參考線畫法(復雜規范與簡單規范),它們原理都是一樣的,習慣哪種就用哪種。不要糾結參考線的大小應該是多少,根據你圖標使用的位置來確定圖標大小(也就是參考線的范圍),有的朋友知道了 46px 的參考線怎么畫之后,又糾結 88px 應該怎么畫,其實就是一樣的原理。你可以根據自己的感覺來微調,稍微大點小點無所謂,重要的是不要出現單數的像素大小就可以。在此以44px大小的圖標為例子。

復雜規范

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

uisdc-tb-20180425-5.jpg

那么,以上的參考線應該怎么使用?我們畫圖標的時候,物體會有長有扁,有圓有方,在統一體量感的時候,就需要用到里面的一些參考線。但是記住,參考線是死的,人眼是活的,畫完以后,要靠感覺微調,直至視覺上體量感達到一致。請看下圖2.2.3分析:

uisdc-tb-20180425-6.jpg

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

簡單規范

用復雜規范的參考線畫到熟練的時候,就可以用比較簡單的參考線去限制圖標范圍,因為你已經十分熟悉體量感的控制了。

簡單的畫法是只需要畫三個正方形,同樣線性選擇顏色是灰色,描邊選擇0.25pt。這里有個小口訣:長物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。下圖2.2.4詳細展示畫簡單參考線的方法。

uisdc-tb-20180425-7.jpg

3. 如何在 AI 建立參考線來復用?

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

uisdc-tb-20180425-9.jpg

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

前面說到,參考線是為了限定圖標的大小,從而達到整體的美觀與規范。在畫了很多圖標之后,我總結出兩個小訣竅:

當你總結出你要畫的物體形狀時,只要不影響辨識度,可以適當改變一下形狀,把高的或者扁的物品,畫成比較飽滿的樣子(圖2.4.1的鉛筆為例);

uisdc-tb-20180425-10.jpg

當物體形狀不適合畫得飽滿時,可以盡量上下或者左右撐滿,然后旋轉45度,以增加畫面的飽滿感(圖2.4.2的刀為例)。

TAGS: ui圖標
本文原文地址:http://www.wdkvh.tw/photoshop/106436.html轉載請注明原站地址
 1/2    1 2 下一頁 尾頁
猜你喜歡
網友評論
热门棋牌游戏代理加盟 江苏五分彩票计划 北京赛车不定位6码原理 江苏时时开奖规则 全天飞艇pk10在线计划 pt平台是哪个公司的 抢庄牌九怎么玩 测你怎么发财 98彩票网手机登录 篮球比分直播网360 重庆时时开彩结果