圖標(biāo)怎么設(shè)計(jì)設(shè)計(jì)才能更受歡迎？

2022-02-10 點(diǎn)擊量：

最近發(fā)現(xiàn)一些能提高圖標(biāo)細(xì)節(jié)和高級(jí)感的小技巧，今天與大家分享下這幾種風(fēng)格的設(shè)計(jì)思路，以及需要注意的點(diǎn)。從以下3個(gè)方面去解析圖標(biāo)的流行畫法！

分享大綱：

1.層疊手法

2.圖標(biāo)圖形化

3.單色弱漸變透明圖標(biāo)

層疊手法

顧名思義圖標(biāo)之間有縱深前后關(guān)系，通過這樣去處理，可以讓圖標(biāo)層次豐富，增加設(shè)計(jì)細(xì)節(jié)，打破枯燥無味的單色扁平圖標(biāo)。

通常大部分人設(shè)計(jì)一個(gè)圖標(biāo)就直接將圖形畫出來后，這樣就完事了，沒有繼續(xù)深入下去。這樣圖標(biāo)看著枯燥乏味，普通了一些。

如上圖，將圖標(biāo)在接口處進(jìn)行細(xì)節(jié)弱透明度處理，那么效果就完全不一樣了。

這里需要注意，一般都是在圖標(biāo)的接口處進(jìn)行層疊處理，從A到B的一個(gè)線性漸變。

下面來看看案例：

Atlassian的品牌圖標(biāo)系統(tǒng)

使用建議：運(yùn)用在面形圖標(biāo)效果會(huì)更好些，或者線條粗一些的圖標(biāo)，一般運(yùn)用在TabBar上面居多。

圖標(biāo)圖形化

這種比較好用，嘉瑞廣告，將圖標(biāo)進(jìn)行抽象放大化處理，變成一種圖形方式。一般運(yùn)用在卡片設(shè)計(jì)上面居多。

左側(cè)卡片上面，圖標(biāo)直接使用描邊效果。卡片里面雖然加了一些底紋圖形，但是整體效果略顯平庸了一些 。

重新將圖標(biāo)進(jìn)行圖形化處理，既能夠表達(dá)當(dāng)前含義，嘉瑞廣告，同時(shí)設(shè)計(jì)上細(xì)節(jié)和品質(zhì)感有所提升。

其他思路延展示例：

當(dāng)然還有一種類似的思路，可以將圖標(biāo)進(jìn)行放大化，并進(jìn)行色彩分割處理為背景，前景放圖標(biāo)和文案等。

如圖，我將前面兩個(gè)思路綜合運(yùn)用，圖形化背景和層疊圖標(biāo)。這里的圖形希望大家不要亂用，盡量使用圖標(biāo)的圖形來演變。

單色弱漸變透明圖標(biāo)

圖標(biāo)通過弱漸變透明處理，其思路有點(diǎn)類似第一個(gè)。但是這個(gè)方法圖標(biāo)整體帶透明度的范圍更大。

先來直接看個(gè)案例：

這種圖標(biāo)給人比較新穎的時(shí)尚感，層次也豐富。

如何處理這種圖標(biāo)？

非常重要的一點(diǎn)，需要注意不識(shí)別度問題。如左側(cè)圖，圖標(biāo)和背景之間幾乎融為一體，看不清主體元素。右側(cè)處理剛好，能夠識(shí)別出圖標(biāo)含義。

處理時(shí)候一定要注意透明度的關(guān)系，當(dāng)然也與卡片背景色有關(guān)系。

寫在最后

關(guān)于圖標(biāo)設(shè)計(jì)三個(gè)小技巧，可多看幾遍，思路比較簡單直接。當(dāng)然最重要的是靈活運(yùn)用，也可以將三個(gè)思路都融合起來去設(shè)計(jì)圖標(biāo)。

本文只是拋磚引玉，這些圖標(biāo)處理的技法，并不是能適用所有場景。大家還是需要根據(jù)自己產(chǎn)品特征，找到合適的突破點(diǎn)去設(shè)計(jì)。

原文地址：功夫UX（公眾號(hào)）