圖標(biāo)設(shè)計，找到合適的參考十分關(guān)鍵。不要拘泥于當(dāng)前的任務(wù)的狀態(tài)，過于拘束于同類產(chǎn)品的設(shè)計風(fēng)格，尋找更多優(yōu)秀的圖標(biāo)參考，從中汲取一些合適的元素以及創(chuàng)作靈感，或許你的設(shè)計就能更上一層樓。

我們之前一直講的都是理論篇，今天來一個關(guān)于界面底部圖標(biāo)的實戰(zhàn)總結(jié)吧，故事的開始是我們?nèi)ツ昴昴┑臅r候做的界面練習(xí)，我們要完成漫畫類APP的首頁界面設(shè)計，僅僅是由7個模塊組成的首頁設(shè)計，我足足花了將近兩個月才做出來一個半成品（想哭一會o(╥﹏╥)o）。我們今天就好好說一下我歷時兩周，做了四稿才完成的底部圖標(biāo)吧。

做圖標(biāo)的時候整個過程大概分為以下幾個階段：

1. 收到任務(wù)
2. 找參考
3. 根據(jù)參考執(zhí)行
4. 被駁回陷入沉思
5. 再次執(zhí)行

一、收到任務(wù)

我們每天在工作中都會收到不同的設(shè)計任務(wù)，作為正在成長的設(shè)計師，順利完成這些任務(wù)是我們最基本的能力，所以主角登場啦！噔噔噔噔~先做一套漫畫類的底部圖標(biāo)，師傅覺得ok才可以！當(dāng)時的我覺得很簡單（too naive），下載了一些漫畫類的APP，認(rèn)真的構(gòu)思中。

二、找參考

下載到的漫畫APP這個時候發(fā)揮了作用，我在找了很多參考，先看看別人是怎么做的，給你們先展示一下，如下圖：

根據(jù)參考執(zhí)行有了這么多參考的我無疑是很自信的，覺得自己肯定會做的很好，先給你們看一下我第一稿和第三稿（第二稿我沒找著，跟第一稿只有顏色差別）

第一稿：

第一稿是我直接找的某一個APP的底部圖標(biāo)抄的，只改動了一點點，被駁回的理由是因為外形太常見了，不夠特別也不夠有趣，我相信應(yīng)該很多剛?cè)腴T的設(shè)計師應(yīng)該也會跟我一樣吧，很懶的同時還不會找參考，全世界那么多參考，偏偏我就能看中最丑那一堆（也可能只有我自己是這樣）。

第三稿：

然后我就改變了方向也吸取了上一次的教訓(xùn)，找一些外形比較特別，并且把有趣的點定在點擊前后圖標(biāo)會有變化的。這個時候的參考已經(jīng)沒有局限在漫畫類的APP上了，我把手機(jī)上所有看著外形比較特別的APP的底部icon都找了一遍，沒有的就去花瓣找，給你們看一下我的參考：

雖然還是沒過，沒過的原因是不夠有趣，當(dāng)時覺得簡直是要被逼死了，要多有趣啊，我的天哪！不過現(xiàn)在回頭來看，可能是因為外形不夠出彩同時沒什么特點，第三稿的圖標(biāo)與市面上的并沒有讓人記住的點，同時也不適合用在漫畫類的APP上。

不過當(dāng)時我的思路不對，思路已經(jīng)陷入了”有趣”的圖標(biāo)里面，沒整明白就去追波找有趣的圖標(biāo)尋找靈感了。大家應(yīng)該都有過這樣的經(jīng)歷吧，被駁回的設(shè)計因為別人說的點，然后針對某個點來修改，但往往越改越找不到感覺，于是我要給你們看我當(dāng)時信心滿滿的第四稿啦！

第四稿：

是不是很有趣的，滑板車都出來了，我當(dāng)時畫圖標(biāo)的時候思維限死在了有趣這個點上了，畫完我還挺滿意的。

以下是我的參考：

這一稿自然也是沒有過，因為細(xì)節(jié)太多了，老實說我那時的內(nèi)心就是吶喊的土撥鼠。想要創(chuàng)新要特別同時還要有趣，真的好難啊，畫個圖標(biāo)不應(yīng)該這么難啊，也許真的是我的思路和方法有問題。

三、被駁回陷入沉思

正好這時候師傅讓我嘗試面性圖標(biāo)，因為面性的圖標(biāo)比較好豐富細(xì)節(jié)，并且能夠發(fā)揮的修飾程度比較廣泛，比較適合目前陷入瓶頸的我。而線性的圖標(biāo)比較具有品牌感，非常好規(guī)范并且能夠設(shè)計出一定的基調(diào)，比較考驗設(shè)計師。

其他的小伙伴都進(jìn)入到下一個組件了，就只有我，還卡在底部的圖標(biāo)上，我把所有的小伙伴通過了的圖標(biāo)和參考都拿過來做研究了一下。他們的圖標(biāo)不復(fù)雜，但是又都很有看點，并且也不乏有趣。

很認(rèn)真的總結(jié)了一下，我發(fā)現(xiàn)了我的問題在哪里了：外形不夠有特征同時細(xì)節(jié)太多，放在手機(jī)上，沒有辨識度的同時還會提高用戶的理解成本。

四、再次執(zhí)行

滿足圖標(biāo)的含義同時減少細(xì)節(jié)，再結(jié)合漫畫APP的特點，開始尋找新的圖標(biāo)設(shè)計方向，比如：我的圖標(biāo)中有一個社區(qū)的圖標(biāo)，參考了很多社區(qū)的圖標(biāo)，都沒有外觀和表現(xiàn)形式上很特別的，然后我看見了ACfun的APP圖標(biāo)，同時想到了社區(qū)是個提供很多信息的地方，于是帶著兩個小包的八卦小圖標(biāo)就誕生啦！

這是最后通過了的第五稿：

對我來說，最明顯的進(jìn)步就是：在不斷試錯的過程中，提高了對參考的審美和篩選，以及在自己產(chǎn)出時加入自己的思考，包括點擊前后的趣味變化，保證自己畫出來的圖標(biāo)能夠與市面上的有所區(qū)別（大家不要太在意主題色的問題，因為是我們自己畫的原型圖，沒有品牌基因，所以在剛開始練習(xí)的時候顏色是隨便定的）。

五、劃重點

1. 找到好的，以及合適的參考是一件非常重要的事情。不要拘泥于現(xiàn)在當(dāng)前的任務(wù)和狀態(tài)，盡可能地搜集眾多優(yōu)點的圖標(biāo)參考，參考已有的設(shè)計，獲取靈感（并不局限在某一類的APP中，也不要過多的參考飛機(jī)稿，這個結(jié)論適用在任何組件里面）。
2. 確定圖標(biāo)的樣式，既然確認(rèn)了要做面性的圖標(biāo)，就開始做面性圖標(biāo)的設(shè)計思考，必要時借助輔助工具來確保圖標(biāo)的大小視覺一致，以及小細(xì)節(jié)的設(shè)計規(guī)范保持統(tǒng)一。
3. 可能大家會覺得這篇文章說的實操性不是很大，其實我最想表達(dá)的是找到好的參考很重要，但是前提在于你有一雙發(fā)現(xiàn)好參考的眼睛，而這也是需要練習(xí)和試錯才會知道什么樣的參考和輸出才是合適的。

參考引文《品牌基因法做圖標(biāo)——實戰(zhàn)篇》

本文由 @潘團(tuán)子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議