![](http://image.woshipm.com/wp-files/img/36.jpg)
圖標(biāo)設(shè)計(jì)如何具有品牌性?這可能是設(shè)計(jì)師工作中經(jīng)常會遇到的問題。但很多新人也許并不了解什么是品牌性,更不知道如何將品牌性融入到圖標(biāo)當(dāng)中,不過沒關(guān)系,看了這篇文章你就不會那么困惑了!
前一陣子寫了一篇《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》,但只講了一種提取視覺基因的方法,不夠全面。菜心擔(dān)心大家因?yàn)榉椒ǖ牟蝗娑鴮?dǎo)致設(shè)計(jì)效果過于死板,所以近期將整個(gè)品牌基因法的體系重新梳理了一遍,增加了一些提取基因的路徑,可以擴(kuò)展我們的設(shè)計(jì)思維與制作方法。
需要強(qiáng)調(diào)一點(diǎn),文中所講的品牌基因是指視覺上的哦!
來看下大綱:
- 提取特定形狀
- 吸取品牌顏色
- 抓取風(fēng)格特點(diǎn)
1. 提取特定形狀
通過對logo或品牌元素提取特定形狀,這個(gè)形狀是固定的、具象的,例如圓形,三角形、字母甚至是logo本身等等。
提取出形狀基因后,如何與圖標(biāo)相結(jié)合呢?有三種方法:
1.1 直接應(yīng)用
最常見的用法就是直接將整個(gè)logo作為圖標(biāo)(比如首頁),如下圖:
![](https://image.woshipm.com/wp-files/2017/04/fnaMFEnMfp0msE40ITdK.png)
再比如MONO的標(biāo)簽欄圖標(biāo),設(shè)計(jì)的非常大膽,提取logo上面的4個(gè)字母——M、O、N、O后,直接將其作為圖標(biāo),如下圖:
![](https://image.woshipm.com/wp-files/2017/04/4tdZKMsvVIOhFurYBq7u.png)
但是這種方法還是有很大的風(fēng)險(xiǎn),因?yàn)楫吘姑總€(gè)字母與功能本身的含義沒什么聯(lián)系,如果不是非常個(gè)性化的app,還是盡量少用吧!
1.2 做為外輪廓
將提取的形狀作為整套圖標(biāo)的外輪廓,例如谷歌play一樣,提取出三角形后,整套圖標(biāo)都是以三角形作為外形,如下圖:
![](https://image.woshipm.com/wp-files/2017/04/p90mL1rCCrsT4uvMd1ZK.png)
再比如你提取出一個(gè)圓形基因,也可以將其作為外輪廓使用,如下圖:
![](https://image.woshipm.com/wp-files/2017/04/nSPHG1iStVQNlSNrWJLf.png)
1.3 將圖形與圖標(biāo)巧妙融合
假如我在logo上面提取出一個(gè)圓形作為基因,我們可以將這個(gè)圓形巧妙的與圖標(biāo)進(jìn)行融合,如下圖:
![](https://image.woshipm.com/wp-files/2017/04/RZpJal5hvHlcdvVVNRRq.png)
但這里必須要強(qiáng)調(diào)一點(diǎn),很多時(shí)候,我們很難將一個(gè)特定形狀融入到所有的圖標(biāo)當(dāng)中,如果強(qiáng)行融合,難免會讓人覺得死板生硬,所有一定要有所取舍,例如案例中的圖標(biāo)也不是所有都融入了圓形,如下圖:
![](https://image.woshipm.com/wp-files/2017/04/xknca2oMlnOZl8j0WzqY.png)
有同學(xué)可能會問,為什么案例中有些圖標(biāo)沒有融入圓形基因,也不影響整套圖標(biāo)的和諧統(tǒng)一呢?
因?yàn)樗鼈內(nèi)谌肓肆硗庖粋€(gè)品牌基因——顏色。也就是我們接下來要講的內(nèi)容。
2. 吸取品牌顏色
這招是最簡單直接的方法,直接吸取品牌色作為視覺基因,以此來進(jìn)行圖標(biāo)設(shè)計(jì),舉幾個(gè)例子:
![](https://image.woshipm.com/wp-files/2017/04/rYGj9KExZa9il4GjZhS7.png)
![](https://image.woshipm.com/wp-files/2017/04/3E1XUDR9XUZySn4sELDl.png)
顏色基因,我就不多講了,比較容易理解。
但是大家仔細(xì)觀察優(yōu)酷這套圖標(biāo),我們會發(fā)現(xiàn)除了顏色基因以外,好像在logo上還提取了一個(gè)疊層的效果,而這種疊層的效果又屬于另外一種品牌基因——風(fēng)格特點(diǎn),我們繼續(xù)往下看。
3. 抓取風(fēng)格特點(diǎn)
這部分是今天內(nèi)容的重點(diǎn),也是我最近做圖標(biāo)的一些感受。
我們先來講講如何抓取風(fēng)格特點(diǎn)!
又要開始拿我的作品來舉例了,還是iwork那個(gè)logo:
![](https://image.woshipm.com/wp-files/2017/04/4XSpwXQbQxuDoua48nlH.png)
除了顏色以外,我在logo上面提取出兩個(gè)特點(diǎn):
- 斷:是指整個(gè)logo有兩個(gè)斷開的地方
- 層:是指logo有三個(gè)不同顏色的深淺,形成前后關(guān)系,也就是層級。
那如何將這兩個(gè)特點(diǎn)運(yùn)用到圖標(biāo)上呢?我們看下圖:
![](https://image.woshipm.com/wp-files/2017/04/OlNcsjyBvo96h9qwhP2K.png)
- 第一步:先畫好基礎(chǔ)形;
- 第二步:將合適的地方斷開;
- 第三步:將局部(小塊)調(diào)整顏色,以區(qū)分層級。
這樣一個(gè)具有品牌基因的圖標(biāo)就誕生了!
其它的圖標(biāo)也是一樣的道理,最后得到整套圖標(biāo)如下圖:
![](https://image.woshipm.com/wp-files/2017/04/kZbi2HGuF7XDRGW1Wbpl.png)
上面這個(gè)案例只是抓取風(fēng)格特點(diǎn)的一種結(jié)果,不同的案例會有不同的結(jié)果,例如網(wǎng)易云音樂的圖標(biāo),是抓取logo上圓潤的風(fēng)格特點(diǎn),如下圖:
![](https://image.woshipm.com/wp-files/2017/04/FdFpgS3JkcEGzPO9DcQ4.png)
而優(yōu)酷的圖標(biāo)則是抓取疊層的風(fēng)格特點(diǎn),如下圖:
![](https://image.woshipm.com/wp-files/2017/04/YaYf6uysvaginlslZHVy.png)
小密圈則是抓取斷線的風(fēng)格特點(diǎn),如下圖:
![](https://image.woshipm.com/wp-files/2017/04/EqSLIyBlzJLFmXay2XVl.png)
以上就是菜心近期總結(jié)的《品牌基因法做圖標(biāo)》整套知識體系,后期會不斷的優(yōu)化改進(jìn),如果你有什么好的想法也歡迎和我私下交流,我們一起將這個(gè)系統(tǒng)完善起來,幫助那些需要幫助的好朋友們。
最后再提醒大家一下,當(dāng)一種品牌基因無法突顯品牌性的時(shí)候,我們可以使用多種基因相互組合。方法一定要靈活運(yùn)用,切記不要鉆牛角尖,不然菜心就白總結(jié)了!
相關(guān)閱讀
經(jīng)驗(yàn)分享|利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)
#專欄作家#
菜心,微信公眾號:菜心設(shè)計(jì)鋪,人人都是產(chǎn)品經(jīng)理專欄作家,華為ITUX用戶體驗(yàn)設(shè)計(jì)師(主視覺),3年工作經(jīng)驗(yàn),參與華為Welink、3MS、連長社區(qū)等多個(gè)項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
學(xué)到了
??