層疊手法

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

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

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

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

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

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

圖標(biāo)圖形化

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

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

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

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

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

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

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

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

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

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

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

分享標(biāo)題：網(wǎng)站開發(fā)中的圖標(biāo)設(shè)計讓網(wǎng)站顯得更加生動
本文網(wǎng)址：http://m.rwnh.cn/news46/223346.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)建站、電子商務(wù)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)