@菜心設計鋪?：圖標——界面設計最重要的元素之一。
菜心經常寫關于圖標的教程和感悟，可見圖標設計在我日常工作中占了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一。
這里拿幾個月前做的第一版小說模塊圖標為例（目前已經改版為2.0，等正式上線后會再次與大家分享），簡單介紹下我的圖標設計思路，大綱如下：
- 風格設定
- 創意腦爆
- 設計執行
一、風格設定
在開始構思之前，我們首先需要確定圖標的設計風格，風格可以根據整體產品的設計語言推導，需要符合目標人群的喜好以及產品的屬性定位。
雖然我們是小說模塊，但還是附屬于動漫體系之下，前期的種子用戶還是產品原有的動漫人群，所以我將風格鎖定在原有動漫的視覺風格之上，大家可以看下當時動漫標簽欄圖標的樣式：
由此小說模塊圖標與上圖保持一致，設定為「描邊與色塊結合」風格。
二、創意腦暴
鎖定風格之后，就要構思創意了，也就是如何在這樣的風格之下去表達你的內容。
這一步很關鍵，如何讓圖標不普通，大部分因素都體現在內容表達上（因為風格其實也就那么幾種），我的方法是盡量去發散核心關鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子。
1. 「人氣」圖標的腦暴路徑
這里選詞有個小技巧，我會遵循兩個原則，「具象」與「二層」。
首先來說具象：其實很好理解，如果詞匯太抽象，你是很難表達的，比如「流行」這個詞，你是很難表達的，而「火」就很具象，很容易表現。
再來說「二層」：指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯，因為這些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的「火」、「獎杯」等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風格上做些差異化表現）。
所以在上面兩個原則下，我最后設定人氣圖標使用「愛的手勢」，如下圖：
因為看到有些同學把「愛」與「搖滾」的手勢弄混，所以說下它們的區別：
希望大家在使用的時候不要搞錯哦！
2. 「完結」圖標的腦暴路徑
也是通過「具象」與「二層」原則，最后使用了商店掛的打烊門牌這一創意來延展：
每個關鍵詞的腦暴都會產生很多詞匯，各不相同，我們需要學會篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執行；避開普通等于特別，如果所有的設計都是大家用爛的創意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。
我們需要讓自己產出的每一套設計至少有一個「特別」出現，不然如何體現自己的價值呢？
三、設計執行
這一步就是根據前面得到的靈感圖來進行設計，我們來看下執行對比圖：
對于執行需要注意的基礎細節，之前有寫過《騰訊設計師總結的圖標設計五維自檢法》，有興趣的同學可以看一下，除此之外這里再補充一點，如何讓圖標做到有細節。
本次設計總結了三個方法供大家參考：
1. 設計技法的細節
比如給描邊增加短線風格：
再比如線條增加面形色塊的組合：
2. 根據事物本身特征增加細節
比如一個木質門牌的細節：
3. 俏皮的那一筆
比如書架上歪著的一本書：
再比如一根線條的破局：
當然增加細節的方法有太多種，總的目的就是防止圖標過于簡單、簡陋，希望你也可以有自己的一套秘方來進行設計，大家互相學習。
最后再看下圖標整體的效果吧：
附上過程中的一些稿子，哈哈，別嚇到你：
對于執行這一塊，別人再怎么說，你不做大量的練習與思考也是無濟于事，這個道理毋庸贅言了。
歡迎關注作者的微信公眾號：「菜心設計鋪」
「菜心的圖標設計好文合集」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 5 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓