2017-8-2 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
圖標(biāo)設(shè)計如何具有品牌性？這可能是設(shè)計師工作中經(jīng)常會遇到的問題。
但很多新人也許并不了解什么是品牌性，更不知道如何將品牌性融入到圖標(biāo)當(dāng)中，不過沒關(guān)系，看了這篇文章你就不會那么困惑了！
前一陣子寫了一篇《利用品牌基因法進行圖標(biāo)設(shè)計》，但只講了一種提取視覺基因的方法，不夠全面。菜心擔(dān)心大家因為方法的不全面而導(dǎo)致設(shè)計效果過于死板，所以近期將整個品牌基因法的體系重新梳理了一遍，增加了一些提取基因的路徑，可以擴展我們的設(shè)計思維與制作方法。
需要強調(diào)一點，文中所講的品牌基因是指視覺上的哦！
來看下大綱：
1.提取特定形狀
2.吸取品牌顏色
3.抓取風(fēng)格特點
1.提取特定形狀
通過對logo或品牌元素提取特定形狀，這個形狀是固定的、具象的，例如圓形，三角形、字母甚至是logo本身等等。
提取出形狀基因后，如何與圖標(biāo)相結(jié)合呢？有三種方法：
1.1 直接應(yīng)用
最常見的用法就是直接將整個logo作為圖標(biāo)（比如首頁），如下圖：
再比如MONO的標(biāo)簽欄圖標(biāo)，設(shè)計的非常大膽，提取logo上面的4個字母——M、O、N、O后，直接將其作為圖標(biāo)，如下圖：
但是這種方法還是有很大的風(fēng)險，因為畢竟每個字母與功能本身的含義沒什么聯(lián)系，如果不是非常個性化的app，還是盡量少用吧！
1.2 做為外輪廓
將提取的形狀作為整套圖標(biāo)的外輪廓，例如谷歌play一樣，提取出三角形后，整套圖標(biāo)都是以三角形作為外形，如下圖：
再比如你提取出一個圓形基因，也可以將其作為外輪廓使用，如下圖：
1.3 將圖形與圖標(biāo)巧妙融合
假如我在logo上面提取出一個圓形作為基因，我們可以將這個圓形巧妙的與圖標(biāo)進行融合，如下圖：
但這里必須要強調(diào)一點，很多時候，我們很難將一個特定形狀融入到所有的圖標(biāo)當(dāng)中，如果強行融合，難免會讓人覺得死板生硬，所有一定要有所取舍，例如案例中的圖標(biāo)也不是所有都融入了圓形，如下圖：
有同學(xué)可能會問，為什么案例中有些圖標(biāo)沒有融入圓形基因，也不影響整套圖標(biāo)的和諧統(tǒng)一呢？
因為它們?nèi)谌肓肆硗庖粋€品牌基因——顏色。也就是我們接下來要講的內(nèi)容。
2.吸取品牌顏色
這招是最簡單直接的方法，直接吸取品牌色作為視覺基因，以此來進行圖標(biāo)設(shè)計，舉幾個例子：
顏色基因，我就不多講了，比較容易理解。
但是大家仔細觀察優(yōu)酷這套圖標(biāo)，我們會發(fā)現(xiàn)除了顏色基因以外，好像在logo上還提取了一個疊層的效果，而這種疊層的效果又屬于另外一種品牌基因——風(fēng)格特點，我們繼續(xù)往下看。
3.抓取風(fēng)格特點
這部分是今天內(nèi)容的重點，也是我最近做圖標(biāo)的一些感受。
我們先來講講如何抓取風(fēng)格特點！
又要開始拿我的作品來舉例了，還是iwork那個logo：
除了顏色以外，我在logo上面提取出兩個特點：
斷：是指整個logo有兩個斷開的地方
層：是指logo有三個不同顏色的深淺，形成前后關(guān)系，也就是層級。
那如何將這兩個特點運用到圖標(biāo)上呢？我們看下圖：
第一步：先畫好基礎(chǔ)形；
第二步：將合適的地方斷開；
第三步：將局部（小塊）調(diào)整顏色，以區(qū)分層級；
這樣一個具有品牌基因的圖標(biāo)就誕生了！
其它的圖標(biāo)也是一樣的道理，最后得到整套圖標(biāo)如下圖：
上面這個案例只是抓取風(fēng)格特點的一種結(jié)果，不同的案例會有不同的結(jié)果，例如網(wǎng)易云音樂的圖標(biāo)，是抓取logo上圓潤的風(fēng)格特點，如下圖：
而優(yōu)酷的圖標(biāo)則是抓取疊層的風(fēng)格特點，如下圖：
小密圈則是抓取斷線的風(fēng)格特點，如下圖：
以上就是菜心近期總結(jié)的《品牌基因法做圖標(biāo)》整套知識體系，后期會不斷的優(yōu)化改進，如果你有什么好的想法也歡迎和我私下交流，我們一起將這個系統(tǒng)完善起來，幫助那些需要幫助的好朋友們。
最后再提醒大家一下，當(dāng)一種品牌基因無法突顯品牌性的時候，我們可以使用多種基因相互組合。方法一定要靈活運用，切記不要鉆牛角尖，不然菜心就白總結(jié)了。
藍藍設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.jghy.net