用品牌基因法做圖標(biāo)設(shè)計(jì)，這是高級UI設(shè)計(jì)師才會(huì)的手法！

編者按：給界面做圖標(biāo)，如何做才能有理有據(jù)呢？今天這篇好文的作者總結(jié)了工作中的一些經(jīng)驗(yàn)，幫你制作出有說服力的圖標(biāo)。

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計(jì)鋪」

在看這篇文章之前你需要清楚，我所講的東西并不是什么權(quán)威，只是在工作中總結(jié)出來的一些的小經(jīng)驗(yàn)而已，制作圖標(biāo)的方法也有很多種，這里只是給大家一個(gè)思路上的啟發(fā)，希望能對你有所幫助吧！

按照慣例，我們還是先來看一下本次《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》的大綱：

1. 什么是品牌基因？
2. ?如何提取品牌基因
3. 如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中
4. 圖標(biāo)制作過程中需要注意的事項(xiàng)

一、什么是品牌基因？

品牌包括了理念、視覺、行為三個(gè)部分，而本文所講的品牌基因只是視覺層面的。

既然是視覺上的，那就一定是可以看見的東西。沒錯(cuò)，簡單來說，品牌基因就是一個(gè)符號，而這個(gè)符號可以來源于任何事物，就像三星GALAXY SIII的靈感是來自于大自然的鵝卵石，國際版QQ的靈感是來自于氧氣...，但不論怎么樣，最后我們都需要將這些基因、靈感可視化，變成一個(gè)或者一組符號傳達(dá)給用戶。

一句話總結(jié)：品牌基因（視覺層面）就是通過一件事物提取出一個(gè)（或一組）視覺符號。

二、如何提取品牌基因

就拿上期那套圖標(biāo)來說吧，靈感來自于哪里呢？

最初在做“我的”圖標(biāo)時(shí)，找了很多參考，網(wǎng)上一搜一大把，如圖：

但是如果隨便下載一個(gè)改一改就直接用，你會(huì)有一種很不踏實(shí)的感覺，因?yàn)楫?dāng)別人問你為什么這樣設(shè)計(jì)的時(shí)候，你總不能說“我看網(wǎng)上都這么做的啊”。

那問題就來了，如何能做一個(gè)有理有據(jù)的圖標(biāo)呢？這時(shí)候你的腦袋里就可以思考“品牌基因”了。我們可以去觀察品牌的logo、輔助圖形、設(shè)計(jì)來源等等，這些都可以幫助你去提取符號、特征。

所以通過這個(gè)思路我去觀察了logo，如圖所示

將logo的“i”字母放大后，我們會(huì)發(fā)現(xiàn)下面這個(gè)局部形狀和人型（“我的”圖標(biāo)）很相似，

所以在經(jīng)過優(yōu)化之后得到下圖:

這樣當(dāng)別人問你為什么設(shè)計(jì)成這個(gè)樣子的時(shí)候，你可以很自信的告訴他，你是通過logo上的元素提取優(yōu)化得到的！

但是僅僅做這一個(gè)圖標(biāo)是不夠的，我們需要提煉出一個(gè)能夠貫穿整套圖標(biāo)的視覺符號，于是我再次去觀察和思考logo的樣式，細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn)，其實(shí)整個(gè)logo的每一筆開頭都有一個(gè)共同的特征，如下圖

而這個(gè)共同的特征就是我們要找的符號，也就是所謂的品牌基因，是貫穿整個(gè)logo的靈魂所在，至于這個(gè)特征是怎么來的，那是做logo之前的事情，這里我們就不在闡述了。

后經(jīng)過優(yōu)化后，我將符號總結(jié)為以下特征：

三、如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中？

得到這個(gè)視覺符號之后，就需要將這個(gè)特征注入到我們的圖標(biāo)設(shè)計(jì)中了，舉個(gè)例子，我們現(xiàn)在來做“收藏”的圖標(biāo)，也就是一個(gè)愛心。

那首先我們還是需要去找一些參考，去了解愛心的結(jié)構(gòu)，并在本子上畫一些草圖，最后思考如何與我們提取出來的符號相結(jié)合。如果這些前期內(nèi)容你都做完了，恭喜你，我們可以開始電腦繪制了，步驟如下：

就這樣一個(gè)有理有據(jù)的圖標(biāo)就完成了。同理，其他圖標(biāo)也用類似的方法進(jìn)行繪制！

四、圖標(biāo)制作過程中需要注意的事項(xiàng)

首先我們來看一下整套圖標(biāo)的效果

關(guān)于圖標(biāo)設(shè)計(jì)中注意的事項(xiàng)，之前有寫過一篇，大家可以自行查閱：《從零基礎(chǔ)到合格，我總結(jié)了這5個(gè)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)方法》，這里針對這一套圖標(biāo)再來增加兩點(diǎn)。

1. 避免過于生硬的結(jié)合

當(dāng)有些圖標(biāo)與提取出來的視覺符號很難完全結(jié)合時(shí)，那就不要去強(qiáng)行結(jié)合，只要大體調(diào)性是對的就ok，比如“掃一掃”的圖標(biāo)，最開始我就強(qiáng)行使用了一個(gè)10px的圓角和三個(gè)2px的圓角，如下圖：

做完后，我總覺得怪怪的，并且有點(diǎn)復(fù)雜，那這時(shí)候倒不如讓四個(gè)圓角都是10px，可能會(huì)看著更舒服一些。再比如有些圓形圖標(biāo)，我們也無法將符號特征融入進(jìn)去，這時(shí)候只要最后的風(fēng)格與基本特征保持一直就ok，例如斷線和雙色。

所以大家在執(zhí)行的過程中千萬不要生硬的將符號特征與圖標(biāo)相結(jié)合，避免造成過于死板的情況出現(xiàn)。

2. 制定好斷線及粗細(xì)規(guī)范

制作斷線的時(shí)候，一定要制定好斷線的規(guī)則，比如說我在做這套圖標(biāo)的時(shí)候，我會(huì)以50x50px的大小來繪制圖標(biāo)，線條描邊是2px，所有斷線的開口大小為10px，所有的斷點(diǎn)要在大圓角拐角處破開（圓形圖標(biāo)除外），有了這些規(guī)則之后，才能夠保證你輸出的圖標(biāo)統(tǒng)一、規(guī)范！

3. 圖標(biāo)的特征不要太多

我這一套其實(shí)是有一點(diǎn)點(diǎn)復(fù)雜的，因?yàn)樗瑫r(shí)擁有三個(gè)屬性，分別是不同大小的圓角、雙色、斷線，正常來說有1-2個(gè)特性就可以了，不然可能會(huì)讓圖標(biāo)顯的過于繁瑣，所以大家在作圖標(biāo)的時(shí)候，這一點(diǎn)可以斟酌一下！

好了，以上就是本期分享的《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》，希望能對大家有所啟發(fā)！

看文章呢，你需要取其精華去其糟粕，不斷的將精華內(nèi)容納入到自己的知識體系當(dāng)中，不然...你懂得，科科！

學(xué)習(xí)圖標(biāo)設(shè)計(jì)的同學(xué)，建議先掌握設(shè)計(jì)流程：《聊聊圖標(biāo)設(shè)計(jì)流程及小技巧》

設(shè)計(jì)完成后從這四個(gè)方面來審視你的圖標(biāo)：《好圖標(biāo)怎么做？教你從四個(gè)方面來評價(jià)圖標(biāo)設(shè)計(jì)的質(zhì)量》

想讓圖標(biāo)出彩，可以從頂尖設(shè)計(jì)師的分享汲取經(jīng)驗(yàn)：《頂尖設(shè)計(jì)師分享的6個(gè)圖標(biāo)設(shè)計(jì)優(yōu)化指南》。

動(dòng)效圖標(biāo)已是趨勢，來這看基礎(chǔ)的圖標(biāo)動(dòng)效設(shè)計(jì)：《高手常用的六種圖標(biāo)動(dòng)效設(shè)計(jì)思路（附大量實(shí)例）》

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計(jì)鋪」

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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