網(wǎng)站建設中的圖標設計讓網(wǎng)站顯得更加生動(dòng)發(fā)布者：本站     時(shí)間：2021-01-27 10:01:06

層疊手法
顧名思義圖標之間有縱深前后關(guān)系，通過(guò)這樣去處理，可以讓圖標層次豐富，增加設計細節，打破枯燥無(wú)味的單色扁平圖標。

圖標怎么設計才能更受歡迎？

通常大部分人設計一個(gè)圖標就直接將圖形畫(huà)出來(lái)后，這樣就完事了，沒(méi)有繼續深入下去。這樣圖標看著(zhù)枯燥乏味，普通了一些。


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


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


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

 

圖標圖形化
這種比較好用，將圖標進(jìn)行抽象放大化處理，變成一種圖形方式。一般運用在卡片設計上面居多。

左側卡片上面，圖標直接使用描邊效果?？ㄆ锩骐m然加了一些底紋圖形，但是整體效果略顯平庸了一些 。


重新將圖標進(jìn)行圖形化處理，既能夠表達當前含義，同時(shí)設計上細節和品質(zhì)感有所提升。


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


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

 

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



如何處理這種圖標？

圖標怎么設計才能更受歡迎？

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

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