圖標——界面設計最重要的元素之一。

菜心經常寫關于圖標的教程和感悟，可見圖標設計在我日常工作中占了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一！

這里拿幾個月前做的第一版小說模塊圖標為例（目前已經改版為2.0，等正式上線后會再次與大家分享），簡單介紹下我的圖標設計思路，大綱如下：

1.風格設定

2.創意腦爆

3.設計執行

1.風格設定

在開始構思之前，我們首先需要確定圖標的設計風格，風格可以根據整體產品的設計語言推倒，需要符合目標人群的喜好以及產品的屬性定位。

雖然我們是小說模塊，但還是附屬于動漫體系之下，前期的種子用戶還是產品原有的動漫人群，所以我將風格鎖定在原有動漫的視覺風格之上，大家可以看下當時動漫標簽欄圖標的樣式：

由此小說模塊圖標與上圖保持一致，設定為“描邊與色塊結合”風格。

2.創意腦爆

鎖定風格之后，就要構思創意了，也就是如何在這樣的風格之下去表達你的內容。

這一步很關鍵，如何讓圖標不普通，大部分因素都就體現在內容表達上（因為風格其實也就那么幾種），我的方法是盡量去發散核心關鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子：

第一個，“人氣”圖標的腦暴路徑：

這里選詞有個小技巧，我會遵循兩個原則，“具象”與“二層”。

首先來說具象：其實很好理解，如果詞匯太抽象，你是很難表達的，比如“流行”這個詞，你是很難表達的，而“火”就很具象，很容易表現。

再來說“二層”：指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯，因為這些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的“火”、“獎杯”等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風格上做些差異化表現）。

所以在上面兩個原則下，我最后設定人氣圖標使用“愛的手勢”，如下圖：

因為看到有些同學把“愛”與“搖滾”的手勢弄混，所以說下它們的區別：

希望大家在使用的時候不要搞錯哦！

第二個，“完結”圖標的腦暴路徑：

也是通過“具象”與“二層”原則，最后使用了商店掛的打烊門牌這一創意來延展：

每個關鍵詞的腦暴都會產生很多詞匯，各不相同，我們需要學會篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執行；避開普通等于特別，如果所有的設計都是大家用爛的創意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。

我們需要讓自己產出的每一套設計至少有一個“特別”出現，不然如何體現自己的價值呢？

3.設計執行

這一步就是根據前面得到的靈感圖來進行設計，我們來看下執行對比圖：

對于執行需要注意的基礎細節，之前有寫過《圖標設計五維自檢法》，有興趣的同學可以看一下，除此之外這里再補充一點——如何讓圖標做到有細節！

本次設計總結了三個方法供大家參考：

3.1 設計技法的細節

比如給描邊增加短線風格：

再比如線條增加面形色塊的組合：

3.2 根據事物本身特征增加細節

比如一個木質門牌的細節：

3.3 俏皮的那一筆

比如書架上歪著的一本書：

再比如一根線條的破局：

當然增加細節的方法有太多種，總的目的就是防止圖標過于簡單、簡陋，希望你也可以有自己的一套秘方來進行設計，大家互相學習。

最后再看下圖標整體的效果吧：

附上過程中的一些稿子，哈哈，別嚇到你：

對于執行這一塊，別人再怎么說，你不做大量的練習與思考也是無濟于事，這個道理毋庸贅言了。

好了，這期就這么多，后面會有一大波文章更新，盡量保證兩周一篇，先來預告幾篇：

設計中的情商

騰訊動漫小說模塊視覺優化

需求拆解秘訣——兵分三路進攻法

我的良性循環工作法

快速上手動效設計

感謝大家的持續關注，么么扔！