我們?cè)O(shè)計(jì)師，在畫圖時(shí)總是要經(jīng)歷各種各樣的嘗試，一種是自己的嘗試，一種是被逼得嘗試來(lái)自甲方爸爸的建議。

畫 icon 也是同樣的，我們都不知道什么是最好的，只能在多次的嘗試后得出最優(yōu)解。

挑選最優(yōu)解很簡(jiǎn)單，重要的是哪來(lái)那么多的方案/靈感？這篇文章我就以繪制四個(gè)底部 tab 的 icon——首頁(yè)、低碳生活、低碳商城、我的，跟大家分享一下我的方案從哪來(lái)。

一、尋找參考：要先腦爆，再找參考

我們以最常見的「首頁(yè)」icon 為例，想到首頁(yè)你會(huì)想到什么圖形？

那一定是「房子」對(duì)不對(duì)？如果你直接去 iconfont 上搜首頁(yè)，也是給你出來(lái)一堆房子：

如果你的思路在開頭就僅限于此，那后續(xù)方向嘗試也會(huì)受到局限。

我們需要在這一步就發(fā)散下思路，腦爆一下，可以從行業(yè)角度和自身產(chǎn)品的角度去出發(fā)。

比如我現(xiàn)在畫的這個(gè)首頁(yè) icon，屬于是環(huán)保行業(yè)內(nèi)的，那我的首頁(yè) icon 是不是可以是「地球」「樹苗」？再?gòu)淖陨懋a(chǎn)品角度出發(fā)，看看我們 app 內(nèi)的 LOGO、吉祥物。

那么現(xiàn)在光首頁(yè)這個(gè) icon 就能想到 5 個(gè)可設(shè)計(jì)的方向。

只有聯(lián)想的關(guān)鍵詞越多，可檢索的范圍就越廣。

按照這種思路我們每個(gè) icon 都能找到很多參考，我們?cè)俑鶕?jù)參考畫出 icon

此時(shí)「首頁(yè)」這個(gè)圖標(biāo)我們畫出了以上六種圖標(biāo)造型，「樹苗」「地球」的圖標(biāo)都比較獨(dú)特，但是目前房子這個(gè)圖標(biāo)就太常見、太大眾了。

我們?cè)诋媹D標(biāo)時(shí)不可避免地也會(huì)有一些比較常見的、普通的 icon，我們可以對(duì)這些常見的 icon 進(jìn)行調(diào)整，讓它不至于這么大眾。

二、細(xì)化圖形：從小到大將差異化融入

我們可以賦予普通圖標(biāo)一點(diǎn)差異化，讓它看起來(lái)更不同一些。

從小點(diǎn)入手，我們可以將它基礎(chǔ)形進(jìn)行微調(diào)，從大點(diǎn)入手，我們可以將行業(yè)屬性和品牌圖形融入圖標(biāo)。

如果從小的調(diào)整入手，可以考慮將圖標(biāo)外輪廓做一些微調(diào)。我們將房子的外部造型進(jìn)行調(diào)整，一共微調(diào)出 5 種房子的造型：

小的調(diào)整能讓這個(gè)圖標(biāo)稍微變得不一樣一些。而從大方向上可以發(fā)生更明顯、直觀的變化，讓圖標(biāo)的差異化特征也更加明顯。

如何對(duì)圖標(biāo)進(jìn)行更大的改觀？

大家可以從行業(yè)屬性的融入、品牌圖形的融入去嘗試。比如這個(gè)首頁(yè)圖標(biāo)我們希望他帶有環(huán)保的行業(yè)屬性，而環(huán)保類 icon 的參考里常見的元素有樹苗、樹葉、閃電：

這些元素都可以和房子進(jìn)行很好地結(jié)合：

除了融入行業(yè)屬性，大家也可以將自己產(chǎn)品的品牌圖形融入 icon，比如像飛豬、馬蜂窩 app 都有將自己的吉祥物 or 品牌圖形融入其中：

三、細(xì)化風(fēng)格：優(yōu)先參考 app 的設(shè)計(jì)風(fēng)格

通過(guò)以上兩步，我們把 icon 的外形確定下來(lái)后，就可以開始細(xì)化圖標(biāo)風(fēng)格了，如果不知道該采用什么風(fēng)格，不如先看看自家 app 的風(fēng)格或設(shè)計(jì)語(yǔ)言是什么，可以根據(jù) app 風(fēng)格細(xì)化圖標(biāo)風(fēng)格。

我們這款 app 的頁(yè)面風(fēng)格是扁平、漸變、線條：

那么 icon 就可以按照扁平、漸變、帶線條的方向去走。以首頁(yè)這個(gè) icon 舉例，我們就能畫出以下幾種方向：

四、整體調(diào)整：最關(guān)鍵最基礎(chǔ)的設(shè)計(jì)修養(yǎng)

我們用上面講到的三大步驟，補(bǔ)齊剩下三個(gè) icon，最后一步就是對(duì)這一組 icon 進(jìn)行整體的調(diào)整。

我們基于三大點(diǎn)去做調(diào)整：

1. 要保證一套圖標(biāo)起碼有 2 個(gè)以上的不同點(diǎn)，個(gè)別圖標(biāo)沒有過(guò)多的想法，可以保持普通。

2. 遵循統(tǒng)一性

我們要最后檢查一遍整體 icon 統(tǒng)一性，包括視覺大小統(tǒng)一、圓角統(tǒng)一、正負(fù)形比例統(tǒng)一、描邊粗細(xì)統(tǒng)一。

3. 視覺平衡。每一個(gè) icon 在視覺上看起來(lái)都要在中央

總結(jié)

以上就是我在設(shè)計(jì)圖標(biāo)時(shí)必須經(jīng)歷的幾大步驟和我獲取圖標(biāo)設(shè)計(jì)靈感的辦法。其實(shí)無(wú)論經(jīng)驗(yàn)豐富與否，只有反復(fù)的嘗試才能得出最好的方案，希望大家都越來(lái)越牛！

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