用品牌基因法做圖標設計，高級UI設計師才會的手法！（升級篇）

圖標設計如何具有品牌性？這可能是設計師工作中經常會遇到的問題。

但很多新人也許并不了解什么是品牌性，更不知道如何將品牌性融入到圖標當中，不過沒關系，看了這篇文章你就不會那么困惑了！

前一陣子寫了一篇《用品牌基因法做圖標設計，這是高級UI設計師才會的手法》，但只講了一種提取視覺基因的方法，不夠全面。菜心擔心大家因為方法的不全面而導致設計效果過于死板，所以近期將整個品牌基因法的體系重新梳理了一遍，增加了一些提取基因的路徑，可以擴展我們的設計思維與制作方法。

需要強調一點，文中所講的品牌基因是指視覺上的哦！

來看下大綱：

1. 提取特定形狀

2. 吸取品牌顏色

3. 抓取風格特點

1. 提取特定形狀

通過對logo或品牌元素提取特定形狀，這個形狀是固定的、具象的，例如圓形，三角形、字母甚至是logo本身等等。

提取出形狀基因后，如何與圖標相結合呢？有三種方法：

1.1 直接應用

最常見的用法就是直接將整個logo作為圖標（比如首頁），如下圖：

再比如MONO的標簽欄圖標，設計的非常大膽，提取logo上面的4個字母——M、O、N、O后，直接將其作為圖標，如下圖：

但是這種方法還是有很大的風險，因為畢竟每個字母與功能本身的含義沒什么聯系，如果不是非常個性化的app，還是盡量少用吧！

1.2 做為外輪廓

將提取的形狀作為整套圖標的外輪廓，例如谷歌play一樣，提取出三角形后，整套圖標都是以三角形作為外形，如下圖：

再比如你提取出一個圓形基因，也可以將其作為外輪廓使用，如下圖：

1.3 將圖形與圖標巧妙融合

假如我在logo上面提取出一個圓形作為基因，我們可以將這個圓形巧妙的與圖標進行融合，如下圖：

但這里必須要強調一點，很多時候，我們很難將一個特定形狀融入到所有的圖標當中，如果強行融合，難免會讓人覺得死板生硬，所有一定要有所取舍，例如案例中的圖標也不是所有都融入了圓形，如下圖：

有同學可能會問，為什么案例中有些圖標沒有融入圓形基因，也不影響整套圖標的和諧統一呢？

因為它們融入了另外一個品牌基因——顏色。也就是我們接下來要講的內容。

2. 吸取品牌顏色

這招是最簡單直接的方法，直接吸取品牌色作為視覺基因，以此來進行圖標設計，舉幾個例子：

顏色基因，我就不多講了，比較容易理解。

但是大家仔細觀察優酷這套圖標，我們會發現除了顏色基因以外，好像在logo上還提取了一個疊層的效果，而這種疊層的效果又屬于另外一種品牌基因——風格特點，我們繼續往下看。

3. 抓取風格特點

這部分是今天內容的重點，也是我最近做圖標的一些感受。

我們先來講講如何抓取風格特點！

又要開始拿我的作品來舉例了，還是iwork那個logo：

除了顏色以外，我在logo上面提取出兩個特點：

斷：是指整個logo有兩個斷開的地方

層：是指logo有三個不同顏色的深淺，形成前后關系，也就是層級。

那如何將這兩個特點運用到圖標上呢？我們看下圖：

第一步：先畫好基礎形；

第二步：將合適的地方斷開；

第三步：將局部（小塊）調整顏色，以區分層級；

這樣一個具有品牌基因的圖標就誕生了！

其它的圖標也是一樣的道理，最后得到整套圖標如下圖：

上面這個案例只是抓取風格特點的一種結果，不同的案例會有不同的結果，例如網易云音樂的圖標，是抓取logo上圓潤的風格特點，如下圖：

而優酷的圖標則是抓取疊層的風格特點，如下圖：

小密圈則是抓取斷線的風格特點，如下圖：

以上就是菜心近期總結的《品牌基因法做圖標》整套知識體系，后期會不斷的優化改進，如果你有什么好的想法也歡迎和我私下交流，我們一起將這個系統完善起來，幫助那些需要幫助的好朋友們。

最后再提醒大家一下，當一種品牌基因無法突顯品牌性的時候，我們可以使用多種基因相互組合。方法一定要靈活運用，切記不要鉆牛角尖，不然菜心就白總結了！

學習圖標設計的同學，建議先掌握設計流程：《聊聊圖標設計流程及小技巧》

設計完成后從這四個方面來審視你的圖標：《好圖標怎么做？教你從四個方面來評價圖標設計的質量》

想讓圖標出彩，可以從頂尖設計師的分享汲取經驗：《頂尖設計師分享的6個圖標設計優化指南》。

動效圖標已是趨勢，來這看基礎的圖標動效設計：《高手常用的六種圖標動效設計思路（附大量實例）》

歡迎關注作者的微信公眾號：「菜心設計鋪」

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com