我在 UI 課上告訴大家，圖標(biāo)做成下面這樣是不可能的，精致度、統(tǒng)一性、差異化都沒有：

其實(shí)你只需要有一定的審美，就可以做出足夠優(yōu)秀精致的圖標(biāo)，我在課上現(xiàn)場給大家演示了一下，今天也在這分享一下。

你只需要做三件事情，就可以讓你做出足夠優(yōu)秀的作品

第一：找到合適的圖標(biāo)素材

第二：增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

第三：給設(shè)計(jì)素材加入自己的想法

我們這次做的圖標(biāo)分別為：通知、商城、發(fā)現(xiàn)、我的。

第一：找到合適的圖標(biāo)素材

我就拿最常用的阿里巴巴圖標(biāo)庫，打開網(wǎng)址，找通知圖標(biāo)，直接下載第一頁，第 1 排第 2 個(gè)：

放大如下：

接下來是商城圖標(biāo)，繼續(xù)搜索商城，我們選用第一頁，第 2 排第 2 個(gè)：

放大如下：

相同的方式，我們找到以下四個(gè)圖標(biāo)的原始素材：

這里面我們需要注意，在找素材的時(shí)候，你至少需要找到一兩個(gè)不太一樣的圖標(biāo)，否則整體就會(huì)比較普通，我們現(xiàn)在這樣看上去，第四個(gè)"我的"圖標(biāo)，相對(duì)來說不一樣一點(diǎn)，至少?zèng)]那么常見：

第二：增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

有了素材之后，我們首先要讓他們看起來是一套的，所以在統(tǒng)一性上需要優(yōu)化，先優(yōu)化大小和線條粗細(xì)

大小和粗細(xì)優(yōu)化完之后，我們再優(yōu)化下圓角統(tǒng)一性，現(xiàn)在很明顯，只有第二個(gè)圖標(biāo)是圓潤的，其他的都是有點(diǎn)硬朗的，可以進(jìn)行統(tǒng)一下：

直角圓角統(tǒng)一了之后，還有一個(gè)統(tǒng)一性就是斷線，只有第二個(gè)沒有斷開的設(shè)計(jì)，所以我們再把商城進(jìn)行斷線處理：

第三：給設(shè)計(jì)素材加入自己的想法

大家要明白，雖然我們可以直接下載圖標(biāo)素材，而且可以通過審美讓他們變得相對(duì)精致統(tǒng)一，但素材畢竟還是通用的，我們還是需要融入自己的想法和設(shè)計(jì)，不能完全依賴素材，舉一個(gè)最簡單的例子，"我的"這個(gè)圖標(biāo)，圖標(biāo)的頭部是圓形的，那我們是不是可以把他改成矩形的

比如一些細(xì)節(jié)的調(diào)整，像通知圖標(biāo)，感覺有點(diǎn)禿，是不是可以讓中間伸出一點(diǎn)寬度來：

細(xì)微調(diào)整之后，如果覺得還不夠，我們還可以繼續(xù)添加新的設(shè)計(jì)語言，比如增加配色點(diǎn)綴：

就這樣，這幾個(gè)圖標(biāo)，漸漸的就成為了你自己的作品！

我們適當(dāng)包裝一下：

我們再對(duì)比一下原始的素材：

效果還是提升很大的！

所以，做任何事情，一定要講究方法，不能死腦筋，否則進(jìn)步就很慢。

我估計(jì)大家肯定還沒看夠，菜心老師這么多年的經(jīng)驗(yàn)，大家跟著我學(xué)習(xí)，我再拿一個(gè)更有難度的，比如也是咱們同學(xué)問我，老師這種古風(fēng)的圖標(biāo)怎么做，上面是他找的參考，下面是他自己做的：

我問他，普通圖標(biāo)做成啥樣？他說做成這樣：

我就。。。。。

這里面他犯了兩個(gè)邏輯問題：

第一個(gè)問題：基礎(chǔ)圖標(biāo)都差很多，卻想著做更難的古風(fēng)圖標(biāo)

第二個(gè)問題：他在做更有難度的圖標(biāo)時(shí)，依然在自己想著做，而不是在別人的基礎(chǔ)上去進(jìn)行二次創(chuàng)新，雖然他找了參考，但是他畫的東西和別人的參考沒有半毛錢關(guān)系。

這兩個(gè)邏輯問題，就導(dǎo)致他一定是沒結(jié)果的。

假設(shè)現(xiàn)在是我來做幾個(gè)古風(fēng)圖標(biāo)，分別為首頁、文物、推薦，我們依然用剛才的方法論：

1. 找到合適的圖標(biāo)素材
2. 增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性
3. 給設(shè)計(jì)素材加入自己的想法

① 找到合適的圖標(biāo)素材：

② 增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

社區(qū)的房子，我們都改成線性語言，然后再加一個(gè)豎線：

文物圖標(biāo)這個(gè)鼎，我們可以縮短四個(gè)角落的線條，讓中視覺更加聚焦中間：

扇子，我們做一定的簡化處理，讓它變得更加工整：

最后我們整合到一起，效果就可以變成這樣：

是不是看起來就精致統(tǒng)一很多啦。

③ 給設(shè)計(jì)素材加入自己的想法

接下來就是繼續(xù)融入自己的想法，比如融入一些粗細(xì)的筆觸，看起來更有古香古色的味道：

甚至你還可以增加更多細(xì)節(jié)：

當(dāng)然，你也可以做減法，做更簡潔的版本：

能玩的還是挺多的，而且也很有意思，但不管怎樣，我都是在一個(gè)基礎(chǔ)之上進(jìn)行局部創(chuàng)新，而不是在經(jīng)驗(yàn)不足的情況下追求 100%的創(chuàng)新，哪怕是這么火爆的哪吒 2 和黑悟空，那也是站在歷史文化的基礎(chǔ)上進(jìn)行的局部創(chuàng)新，但是很多沒有經(jīng)驗(yàn)的設(shè)計(jì)師，就喜歡自己瞎琢磨，最后導(dǎo)致啥也做不出來，然后開始懷疑自己！

作者：菜心設(shè)計(jì)鋪