設(shè)計圖標(biāo)的幾個技巧
作為一個UI設(shè)計師,畫圖標(biāo)是日常工作中的比較重要的一部分,本期小編就來聊聊關(guān)于圖標(biāo)設(shè)計那些技巧。
圖標(biāo)的基本認(rèn)識
圖標(biāo)是具有指代意義的具有標(biāo)識性質(zhì)的圖形,它不僅是一種圖形,更是一種標(biāo)識,它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。
圖標(biāo)的分類
圖標(biāo)主要分為工具類和裝飾類。
工具類圖標(biāo),具有明確的含義、可以提示用戶的圖標(biāo),是工作中比較常用的圖標(biāo)。
裝飾類圖標(biāo),可能沒有具體的含義,會帶有活動、節(jié)日的運營目的。
我這次主要講一下工具類的圖標(biāo)。
圖標(biāo)的類型
1、線性圖標(biāo)(單色、多粗細(xì)、多色、斷點、漸變、疊加)
2、面性圖標(biāo)(單色、多色、漸變、疊加)
3、混合圖標(biāo)(面線混合)
圖標(biāo)的性格
線條越細(xì)越感覺精致,線條越粗越感覺踏實;圓角越小越感覺硬朗,圓角越大越感覺可愛;顏色的使用就是顏色本身的感覺。
如何畫一個圖標(biāo)
了解了那么多的基礎(chǔ)知識之后,該如何畫一個圖標(biāo)呢?
下面告訴大家我畫圖標(biāo)的“獨家秘籍”,以畫一個「外賣」的圖標(biāo)為例。
第一步:確認(rèn)風(fēng)格
如果是在已經(jīng)有的一套圖標(biāo)中增加幾個圖標(biāo),那風(fēng)格和之前的保持一致就行;
如果是要自己從零開始畫一套新圖標(biāo),那么可以依據(jù)產(chǎn)品的調(diào)性去確定圖標(biāo)的風(fēng)格。
我這次的例子是要在一套圖標(biāo)中增加一個圖標(biāo),所以風(fēng)格直接統(tǒng)一就行。
第二步:羅列關(guān)鍵詞、聯(lián)想詞
外賣聯(lián)想:吃飯、美食、米飯、面條、盒飯、碗、餐具、吃
這一步要發(fā)散思維,相關(guān)的詞匯都可以列出來,不斷的去發(fā)散。
第三步:查找參考
接下來就是按照上面幾個關(guān)鍵詞去網(wǎng)上瘋狂的找參考,我一般會去「Iconfont」「花瓣」看直接相關(guān)的圖標(biāo)參考,有時候會用「度娘」看一些實物的參考,但是基礎(chǔ)不夠的話,看實物提煉會有點困難,還是直接看圖形參考會更直觀。

大小統(tǒng)一
這里的大小統(tǒng)一不是指的物理尺寸的統(tǒng)一,因為人的眼睛會有視覺偏差,所以一般的大小統(tǒng)一是指視覺上的大小統(tǒng)一,說人話就是用你眼睛看起來是大小統(tǒng)一的。
我一般會使用同一個尺寸的底板來控制圖標(biāo)的大小,例如都用一套圖標(biāo)都用48×48的底板,在繪制圖標(biāo)的時候不要整個填充,要留有一定的間隔,那么圖標(biāo)在繪制的時候可以依據(jù)視覺進(jìn)行調(diào)整,從而達(dá)到視覺統(tǒng)一。(網(wǎng)上也有很多推薦使用圖標(biāo)柵格的,如果是想走技術(shù)流的可以自行百度“圖標(biāo)柵格”)
圓角、描邊粗細(xì)統(tǒng)一
圓角要使用的統(tǒng)一的圓角,描邊的粗細(xì)也要統(tǒng)一
復(fù)雜程度統(tǒng)一
復(fù)雜程度就是一個圖標(biāo)是簡約的還是復(fù)雜的,基本的線條多少,或者色塊的多少,要大致統(tǒng)一,這樣看起來才是一套的圖標(biāo)。
不同顏色占比統(tǒng)一
使用顏色要統(tǒng)一,每個顏色在圖標(biāo)中的占比要大致一樣。

全部評論


暫無留言,趕緊搶占沙發(fā)
熱門資訊

什么是重復(fù)構(gòu)成?

【?PS教程】PS自動保存技巧,媽媽再也不用擔(dān)心我忘保存了!...

成長貼 | 4個月UI設(shè)計培訓(xùn)KO大學(xué)4年的付出,逆轉(zhuǎn)高薪就業(yè)...

深圳圖文設(shè)計培訓(xùn)學(xué)校哪家比較好?

深圳十大ui培訓(xùn)學(xué)校哪家推薦?

ue交互設(shè)計師要掌握什么技能嗎?

ui界面設(shè)計師培訓(xùn)學(xué)費一般多少錢?

學(xué)電商設(shè)計要用哪種電腦配置好?

ui設(shè)計和前端開發(fā)兩者有什么區(qū)別?
