如何從0到1 ，設計一組UI圖標？
本文轉自：菜心設計鋪（微信公眾號）
圖標，界面設計最重要的元素之一。
菜心經常寫關於圖標的教程和感悟，可見圖標設計在我日常工作中佔了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一！
這裡拿幾個月前做的第一版小說模塊圖標為例（目前已經改版為2.0，等正式上線後會再次與大家分享），簡單介紹下我的圖標設計思路，大綱如下：
1.風格設定
2.創意腦爆3.設計執行
一、風格設定
在開始構思之前，我們首先需要確定圖標的設計風格，風格可以根據整體產品的設計語言推導，需要符合目標人羣的喜好以及產品的屬性定位。
雖然我們是小說模塊，但還是附屬於動漫產品體系之下，前期的種子用戶還是產品原有的動漫人羣，所以我將風格鎖定在原有動漫的視覺風格之上，大家可以看下當時動漫標籤欄圖標的樣式：
由此小說模塊圖標與上圖保持一致，設定為「描邊與色塊結合」風格。
二、創意腦爆
鎖定風格之後，就要構思創意了，也就是如何在這樣的風格之下去表達你的內容。
這一步很關鍵，如何讓圖標不普通，大部分因素都就體現在內容表達上（因為風格其實也就那麼幾種），我的方法是盡量去發散核心關鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子：
第一個，「人氣」圖標的腦暴路徑
這裡選詞有個小技巧，我會遵循兩個原則，「具象」與「二層」。
首先來說具象：其實很好理解，如果辭彙太抽象，你是很難表達的，比如「流行」這個詞，你是很難表達的，而「火」就很具象，很容易表現。
再來說「二層」：指的就是盡量不要選擇核心關鍵詞延展出來的第一層辭彙，因為這些詞是大家都能想到的，並且用爛的，比如人氣直接延展出來的「火」、「獎盃」等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風格上做些差異化表現）。
所以在上面兩個原則下，我最後設定人氣圖標使用「愛的手勢」，如下圖：
因為看到有些同學把「愛」與「搖滾」的手勢弄混，所以說下它們的區別：
希望大家在使用的時候不要搞錯哦！
第二個，「完結」圖標的腦暴路徑
也是通過「具象」與「二層」原則，最後使用了商店掛的打烊門牌這一創意來延展：
每個關鍵詞的腦暴都會產生很多辭彙，各不相同，我們需要學會篩選，盡量避開過於抽象或者過於普通的辭彙，避開抽象等於具象，可以方便執行；避開普通等於特別，如果所有的設計都是大家用爛的創意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。
我們需要讓自己產出的每一套設計至少有一個「特別」出現，不然如何體現自己的價值呢？
三、設計執行
這一步就是根據前面得到的靈感圖來進行設計，我們來看下執行對比圖：
對於執行需要注意的基礎細節，之前有寫過《圖標設計五維自檢法》，有興趣的同學可以看一下，除此之外這裡再補充一點，如何讓圖標做到有細節！本次設計總結了三個方法供大家參考：
3.1 設計技法的細節
比如給描邊增加短線風格：
再比如線條增加面形色塊的組合：
3.2 根據事物本身特徵增加細節
比如一個木質門牌的細節：
3.3 俏皮的那一筆
比如書架上歪著的一本書：
再比如一根線條的破局：
當然增加細節的方法有太多種，總的目的就是防止圖標過於簡單、簡陋，希望你也可以有自己的一套祕方來進行設計，大家互相學習。
最後再看下圖標整體的效果吧：
附上過程中的一些稿子，哈哈，別嚇到你：
對於執行這一塊，別人再怎麼說，你不做大量的練習與思考也是無濟於事，這個道理毋庸贅言了。效果圖如下：
接下來分享的也是這幾個圖標，不過是延伸版，切入的角度會略有不同。
這次改版背景很簡單：首頁整體架構調整的同時，主圖標的設計語言改成了面性，而由於時間緊，小說圖標還沒來得及改，所以這次的設計目標就一個，把第一版圖標改成面性的。
本來我以為，直接由線性改成填充的形式就可以了，分分鐘搞定，但沒想到改過來的效果是這樣的：
於是經過調整又得到這樣的：
為什麼還是不好看？
我也不知道啊！
這種情況就去多找參考，分析分析別人的優秀作品，比如下圖谷歌的圖標：
為什麼人家的看起來就那麼好看，那麼精緻？
我個人覺得最大原因就是它的透氣感比較好，導致透氣感好的原因在於，它採用了多元素組合的方式，並且使用大量留白與彩色形成對比。
在這樣的分析之下，我對圖標進行了重新構思，直接在腦暴階段就重新思考（因為原有圖標是一個元素，很難再拆分成兩個元素來進行組合）。
為了能做到獨特，我最終選用的圖標含義如下（盡量避開用爛的辭彙）：
書架：兩本書互相依靠
熱門：手捧愛心
免費：冰淇淋甜筒（創意來自甜筒經常會有第二份半價，或者買一 送一的活動）
完結：黑子手捧完結的牌子
最後的執行效果如下：
新版圖標也是利用元素的組合，並且圖標內有大量留白使圖標更加透氣。
除了透氣以外，我還在圖標之中融入了一些「有生命感的內容」，比如手，品牌形象，擬人化的書等等：
使圖標變更加可愛，有情感，充滿一些故事感。
除此之外，對圖標還增加了一點點的小細節作為小彩蛋：
一般我們在做一組東西的時候，都希望能夠有一個主旨貫穿始終，這樣解釋起來更加有說法，有說服力。
比如上面這組小說圖標，設計關鍵詞是溫暖，情感，可愛，在這樣的理念下，我將溫暖轉化為陽光作為視覺語言。
可是陽光怎麼落地呢，我當時能想到的就是高光和投影，本次使用的就是充滿光感的長投影：
當然，為了使圖標輕量化，投影不宜過重，起到點睛的作用即可：
除此之外，像前面所說，為了體現可愛的主旨，融入了手，品牌形象等有生命的元素（並且整體圖形都是比較圓潤，避免尖角的出現），這也是貫穿主旨的一條路徑。
方法很多，各不相同，其本質目的還是希望大家做設計的時候要有適當的理念貫穿！
整個設計過程就差不多這些了，其實花在調整細節的時間還是比較多的，隨便一個圖標有了大方向和思路之後，還是需要不斷的修改修改再修改。
顏色的搭配、五官的間距、元素之間的大小關係等等，都需要不斷的調整，而真正考驗我們的也就在這些細節當中。
這裡再補充兩個增加可愛度的實用小技巧：
① 五官緊湊
一般情況下，縮小五官的間距，可以一定程度上實表情更加可愛，尤其是嘴鼻和眼睛的間距：
② 腮紅
一般來說，在我的印象中只有可愛的東西才會有腮紅，五大三粗的大老爺們加個腮紅，咦～，不敢想！
所以畫可愛的形象或表情時，可以考慮加個腮紅：
不過我這次由於元素太多，所以沒加，大家可以根絕實際情況自行實踐。
四、最後
看萬卷書，行萬里路！不走，書白看。
看萬篇文，練萬個習！不練，文白看。
以上僅供參考，最終還是要靠自己實際中去鍛煉，摸索···
平面設計學習日記，是一個分享高質量設計教程、書籍、經驗文章的學習平臺。匯聚推薦國內優秀設計導師、以及優質的平面、網頁、UI設計教程資源，讓自學有路可循，成長更加高效。
訂閱本專欄>
推薦閱讀：
