2021-4-19 周周
最近發(fā)現(xiàn)一些能提高圖標細節(jié)和高級感的小技巧，今天與大家分享下這幾種風(fēng)格的設(shè)計思路，以及需要注意的點。
分享大綱：
顧名思義圖標之間有縱深前后關(guān)系，通過這樣去處理，可以讓圖標層次豐富，增加設(shè)計細節(jié)，打破枯燥無味的單色扁平圖標。
通常大部分人設(shè)計一個圖標就直接將圖形畫出來后，這樣就完事了，沒有繼續(xù)深入下去。這樣圖標看著枯燥乏味，普通了一些。
如上圖，將圖標在接口處進行細節(jié)弱透明度處理，那么效果就完全不一樣了。
這里需要注意，一般都是在圖標的接口處進行層疊處理，從A到B的一個線性漸變。
下面來看看案例：
△ Atlassian的品牌圖標系統(tǒng)
使用建議：運用在面形圖標效果會更好些，或者線條粗一些的圖標，一般運用在TabBar上面居多。
這種比較好用，將圖標進行抽象放大化處理，變成一種圖形方式。一般運用在卡片設(shè)計上面居多。
左側(cè)卡片上面，圖標直接使用描邊效果。卡片里面雖然加了一些底紋圖形，但是整體效果略顯平庸了一些 。
重新將圖標進行圖形化處理，既能夠表達當(dāng)前含義，同時設(shè)計上細節(jié)和品質(zhì)感有所提升。
其他思路延展示例：
當(dāng)然還有一種類似的思路，可以將圖標進行放大化，并進行色彩分割處理為背景，前景放圖標和文案等。
如圖，我將前面兩個思路綜合運用，圖形化背景和層疊圖標。這里的圖形希望大家不要亂用，盡量使用圖標的圖形來演變。
圖標通過弱漸變透明處理，其思路有點類似第一個。但是這個方法圖標整體帶透明度的范圍更大。
先來直接看個案例：
這種圖標給人比較新穎的時尚感，層次也豐富。
如何處理這種圖標？
非常重要的一點，需要注意不識別度問題。如左側(cè)圖，圖標和背景之間幾乎融為一體，看不清主體元素。右側(cè)處理剛好，能夠識別出圖標含義。
處理時候一定要注意透明度的關(guān)系，當(dāng)然也與卡片背景色有關(guān)系。
關(guān)于圖標設(shè)計三個小技巧，可多看幾遍，思路比較簡單直接。當(dāng)然最重要的是靈活運用，也可以將三個思路都融合起來去設(shè)計圖標。
本文只是拋磚引玉，這些圖標處理的技法，并不是能適用所有場景。大家還是需要根據(jù)自己產(chǎn)品特征，找到合適的突破點去設(shè)計。
文章來源：優(yōu)設(shè)網(wǎng) 作者：功夫UX
藍藍設(shè)計( m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.gerard.com.cn