如何系統(tǒng)性優(yōu)化一組圖標(biāo)?

2020-6-16    資深UI設(shè)計者

和大家分享一下,楊楊在年前做的一套新年主題圖標(biāo),整個過程成長很大,也希望能給大家一些啟發(fā)。

其實一套主題圖標(biāo)對于一個剛畢業(yè)的大學(xué)生來說,難度不小,但只要愿意學(xué)習(xí),還是可以攻克重重困難,最后把需求做好的。

新年嘛,關(guān)鍵詞的發(fā)散就不多說了,無非就是鞭炮、對聯(lián)、福、燈籠等等。

我們直說重點:

  • 風(fēng)格如何選取
  • 找不足的維度
  • 透視角度優(yōu)化
  • 顏色優(yōu)化
  • 怎么增加亮點

風(fēng)格如何選取

對于風(fēng)格,應(yīng)該如何選擇呢,比如有描邊扁平風(fēng)格:

△ Martin David作品

有輕質(zhì)感的擬物風(fēng)格:

△ Man King作品

這里可以給大家一個參考維度:

界面常駐功能性圖標(biāo)一般會使用描邊、扁平風(fēng)格的圖標(biāo),而對于節(jié)日主題圖標(biāo),圖標(biāo)如果太平會顯得比較冷靜,所以加一些質(zhì)感的渲染會更有氣氛。

而且增加質(zhì)感一定程度上可以彌補造型上的不足,而且很出效果,對于時間有限的需求,是個不錯的選擇。

所以這次新年主題圖標(biāo)的需求,我們選擇了輕質(zhì)感的風(fēng)格。

找不足的維度

由于沒有做圖標(biāo)的經(jīng)驗,所以第一版的樣式犯了一些基礎(chǔ)型的問題:

有不足不可怕,可怕的是不知道不足在哪里,所以清晰有條理的找到問題也是我們設(shè)計必須具備的能力。

我們從以下三個維度進行問題拆解,供大家參考

  • 厚度的一致性:既然是輕質(zhì)感風(fēng)格,那就需要讓圖標(biāo)有一定的立體感,也就是厚度,而圖中的鞭炮、小鼓看起來有些平,沒有體現(xiàn)出厚度。
  • 顏色的一致性:一組圖標(biāo)顏色一定要看起來是和諧,用的色相要保持一種,比如現(xiàn)在鞭炮的紅色有些偏暗紅,而小鼓的顏色偏黃紅,這也是比較明顯的問題。
  • 創(chuàng)意亮點的發(fā)掘:圖標(biāo)中有一個老鼠的形象,想表達一定的創(chuàng)意性,但是老鼠的造型還不夠可愛飽滿,并且這個創(chuàng)意點和平臺品牌關(guān)聯(lián)性不強,如果用在別的平臺也可以的話,那就證明還可以再想象獨特性。

燈籠是五個圖標(biāo)中做的相對比較穩(wěn)的一個。

問題和優(yōu)化方向都有了,接下來就是調(diào)整了!

造型方面的優(yōu)化

首先我們來優(yōu)化造型方面的。

既然我們要做立體化質(zhì)感的圖標(biāo),那圖標(biāo)就不能太平,原有的鞭炮角度太正,所以在角度上進行了優(yōu)化。

并且因為一個鞭炮有些太單調(diào),所以把數(shù)量增多,優(yōu)化如下:

除了鞭炮以外,我們認為那個鼓的造型本身不夠飽滿,短時間內(nèi)比較難出效果,所以及時更換了元素——錦鯉(錦鯉和推薦貌似還點關(guān)系):

多次調(diào)整后,圖標(biāo)在立體化方面有了很重要的突破。

顏色方面的規(guī)范

之前的顏色有些偏暗,有些發(fā)黃,所以我們定了一個顏色規(guī)范,在主色上都使用統(tǒng)一的顏色,這樣在延展的時候,就不容易跑偏:

只要嚴格保持顏色規(guī)范的使用,不停的對比調(diào)整,一定可以讓一套圖標(biāo)的顏色不跑偏。

創(chuàng)意方面的優(yōu)化

咱不說一組圖標(biāo),每個都有亮點,但至少有一個是相對比較特別的,這是非常有必要的,否則整體看起來就會非常平庸。

產(chǎn)生亮點的方法有很多,比如風(fēng)格、透視、顏色、品牌基因等等。

由于我們在風(fēng)格、顏色等方面都已經(jīng)固定,所以選擇在品牌基因的維度出發(fā)進行優(yōu)化。

一說到品牌基因,我們就可以聯(lián)想到吉祥物,由于又是鼠年的新年主題,所以我們將自己的吉祥物黑子與老鼠的元素結(jié)合,讓「吉祥物黑字」穿上了「老鼠外衣」,并且手舉春聯(lián):

可謂是整組圖標(biāo)最大的亮點,這個生產(chǎn)創(chuàng)意的方法其實很常用,大家一定要多多練習(xí)。

最后我們看一下優(yōu)化前后的效果:

優(yōu)化前:

優(yōu)化后:

文章來源:優(yōu)設(shè)    作者:菜心設(shè)計鋪

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔