五步圖標(biāo)設(shè)計(jì)法則
發(fā)布時(shí)間:2021-12-14 10:39 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 3473

圖標(biāo)的基本認(rèn)識(shí)

圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形,它不僅是一種圖形,更是一種標(biāo)識(shí),它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。

 

圖標(biāo)的分類(lèi)

圖標(biāo)主要分為工具類(lèi)裝飾類(lèi)

工具類(lèi)圖標(biāo),具有明確的含義、可以提示用戶(hù)的圖標(biāo),是工作中比較常用的圖標(biāo)。

裝飾類(lèi)圖標(biāo),可能沒(méi)有具體的含義,會(huì)帶有活動(dòng)、節(jié)日的運(yùn)營(yíng)目的。

我這次主要講一下工具類(lèi)的圖標(biāo)。

 

圖標(biāo)的類(lèi)型

1、線性圖標(biāo)(單色、多粗細(xì)、多色、斷點(diǎn)、漸變、疊加)

圖片

 

2、面性圖標(biāo)(單色、多色、漸變、疊加)

圖片

 

3、混合圖標(biāo)(面線混合)

圖片

混合圖標(biāo)除了我示意的這些,還有其他的樣式,我就不一一列舉了。以上圖標(biāo)是我用同一個(gè)基本樣式來(lái)變化出不同風(fēng)格,這樣可以更好的對(duì)比,但是美觀性上會(huì)略有犧牲。

 

圖標(biāo)的性格

簡(jiǎn)單知道了圖標(biāo)不同的繪制手法之后,就要了解圖標(biāo)的屬性性格。
影響圖標(biāo)風(fēng)格的主要因素有:線條的粗細(xì)、圓角的大小顏色的使用

線條越細(xì)越感覺(jué)精致,線條越粗越感覺(jué)踏實(shí);圓角越小越感覺(jué)硬朗,圓角越大越感覺(jué)可愛(ài);顏色的使用就是顏色本身的感覺(jué)。

圖片

繪制圖標(biāo)時(shí)選擇哪種性格可以依據(jù)產(chǎn)品的定位來(lái)確定,比如二次元、兒童教育類(lèi)的就適合活潑可愛(ài)的圖標(biāo),奢侈品牌類(lèi)的就適合高端精致的圖標(biāo)。

如何畫(huà)一個(gè)圖標(biāo)

了解了那么多的基礎(chǔ)知識(shí)之后,該如何畫(huà)一個(gè)圖標(biāo)呢?

下面告訴大家我畫(huà)圖標(biāo)的“獨(dú)家秘籍”,以畫(huà)一個(gè)「外賣(mài)」的圖標(biāo)為例。

 

第一步:確認(rèn)風(fēng)格

如果是在已經(jīng)有的一套圖標(biāo)中增加幾個(gè)圖標(biāo),那風(fēng)格和之前的保持一致就行;

如果是要自己從零開(kāi)始畫(huà)一套新圖標(biāo),那么可以依據(jù)產(chǎn)品的調(diào)性去確定圖標(biāo)的風(fēng)格。

我這次的例子是要在一套圖標(biāo)中增加一個(gè)圖標(biāo),所以風(fēng)格直接統(tǒng)一就行。

圖片

 

第二步:羅列關(guān)鍵詞、聯(lián)想詞

外賣(mài)聯(lián)想:吃飯、美食、米飯、面條、盒飯、碗、餐具、吃

這一步要發(fā)散思維,相關(guān)的詞匯都可以列出來(lái),不斷的去發(fā)散。

 

第三步:查找參考

接下來(lái)就是按照上面幾個(gè)關(guān)鍵詞去網(wǎng)上瘋狂的找參考,我一般會(huì)去「Iconfont」「花瓣」看直接相關(guān)的圖標(biāo)參考,有時(shí)候會(huì)用「度娘」看一些實(shí)物的參考,但是基礎(chǔ)不夠的話,看實(shí)物提煉會(huì)有點(diǎn)困難,還是直接看圖形參考會(huì)更直觀。

圖片

 

第四步:選取合適的參考繪制
找到一些覺(jué)得滿意的參考之后,可以按照關(guān)鍵詞,截圖放在一起,然后選擇比較好的,或者依照現(xiàn)有風(fēng)格比較好提煉去進(jìn)行繪制。這一步不是“抄”,而是借鑒參考,因?yàn)槟阒苯印俺辈患尤魏涡薷,很容易整體風(fēng)格不統(tǒng)一?吹缴厦娴膮⒖紩(huì)發(fā)現(xiàn)比較貼切的是外賣(mài)騎手的車(chē),但是圖標(biāo)樣式過(guò)于復(fù)雜,其他的圖標(biāo)雖然相關(guān),但是表示外賣(mài)會(huì)有點(diǎn)牽強(qiáng)。這個(gè)時(shí)候就要繼續(xù)聯(lián)想,外賣(mài)一般都是裝在盒子里面的,可以用外賣(mài)盒表示,再加一雙筷子,會(huì)更加貼切。圖片 

第五步:調(diào)整細(xì)節(jié)
畫(huà)出了大概的樣子,最重要的一步就是調(diào)整細(xì)節(jié),按照統(tǒng)一的風(fēng)格去修改。比如大小統(tǒng)一、圓角統(tǒng)一、復(fù)雜程度統(tǒng)一、描邊的粗細(xì)統(tǒng)一、不同顏色的視覺(jué)占比統(tǒng)一等等。 

  • 大小統(tǒng)一

這里的大小統(tǒng)一不是指的物理尺寸的統(tǒng)一,因?yàn)槿说难劬?huì)有視覺(jué)偏差,所以一般的大小統(tǒng)一是指視覺(jué)上的大小統(tǒng)一,說(shuō)人話就是用你眼睛看起來(lái)是大小統(tǒng)一的。

我一般會(huì)使用同一個(gè)尺寸的底板來(lái)控制圖標(biāo)的大小,例如都用一套圖標(biāo)都用48×48的底板,在繪制圖標(biāo)的時(shí)候不要整個(gè)填充,要留有一定的間隔,那么圖標(biāo)在繪制的時(shí)候可以依據(jù)視覺(jué)進(jìn)行調(diào)整,從而達(dá)到視覺(jué)統(tǒng)一。(網(wǎng)上也有很多推薦使用圖標(biāo)柵格的,如果是想走技術(shù)流的可以自行百度“圖標(biāo)柵格”)

圖片

  • 圓角、描邊粗細(xì)統(tǒng)一

圓角要使用的統(tǒng)一的圓角,描邊的粗細(xì)也要統(tǒng)一

圖片

  • 復(fù)雜程度統(tǒng)一

復(fù)雜程度就是一個(gè)圖標(biāo)是簡(jiǎn)約的還是復(fù)雜的,基本的線條多少,或者色塊的多少,要大致統(tǒng)一,這樣看起來(lái)才是一套的圖標(biāo)。

圖片

 

  • 不同顏色占比統(tǒng)一

使用顏色要統(tǒng)一,每個(gè)顏色在圖標(biāo)中的占比要大致一樣。

圖片

在調(diào)整完這些小細(xì)節(jié)之后,一個(gè)圖標(biāo)就繪制完成了。以上就是我畫(huà)圖標(biāo)的步驟,以及一些畫(huà)圖標(biāo)時(shí)的注意點(diǎn)。
UI設(shè)計(jì)圖標(biāo)案例實(shí)戰(zhàn)教程
我要自學(xué)網(wǎng)商城 ¥30 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC