許多知名大品牌支付寶，谷歌，京東，網(wǎng)易云等等他們都有一套屬于自己特有風(fēng)格的系統(tǒng)圖標(biāo)。一般都是根據(jù)產(chǎn)品定位，同時(shí)集合當(dāng)下主流的趨勢(shì)去做圖標(biāo)風(fēng)格定義，最終得出圖標(biāo)使用線的還是面的、還是卡通、色彩重疊或者還是彌撒漸變的？
圖標(biāo)風(fēng)格定義三大原則：
A.符合產(chǎn)品調(diào)性
B.極致簡(jiǎn)約
C.符合流行趨勢(shì)
今天我們通過(guò)實(shí)際案例講解如何設(shè)計(jì)具有獨(dú)特氣質(zhì)的系統(tǒng)圖標(biāo)風(fēng)格。我們?cè)谕惶讏D標(biāo)的基礎(chǔ)上通過(guò)變換不同的設(shè)計(jì)手法來(lái)變化圖標(biāo)風(fēng)格，真真的都是圖標(biāo)設(shè)計(jì)干貨啊，廢話不多說(shuō)下邊直接開(kāi)始吧。
第一步：打開(kāi)ps軟件
第二步?圖標(biāo)網(wǎng)格：
新建一個(gè)800*800px的畫(huà)布，按快捷鍵 Ctrl+” 鍵調(diào)出剛才設(shè)定的輔助線?，F(xiàn)在每個(gè)方格是44*44px。
第三步：
設(shè)計(jì)我們自己的網(wǎng)格圖標(biāo)，并且注意每個(gè)部分之間的角度。一般都是15°，30°，45°，90°等依次類推，這樣子可以使整個(gè)一套圖標(biāo)規(guī)范又好看。
其實(shí)，它俗稱“美學(xué)統(tǒng)一”
圖標(biāo)最關(guān)鍵的在于視覺(jué)符號(hào)一致性，線條粗細(xì)一致，內(nèi)外倒角一致，圖標(biāo)傾斜角度方向遵循一定的設(shè)計(jì)規(guī)則，使用幾何造型并貼緊網(wǎng)格設(shè)計(jì)，保證在最小尺寸都清晰可見(jiàn)。
第四步：注意細(xì)節(jié)，我們首先設(shè)計(jì)一組“風(fēng)格設(shè)計(jì)1?”
首先我們先運(yùn)用布爾運(yùn)算做一個(gè)套方正的圖標(biāo)，線條為4px，圖標(biāo)邊角都采用直角的設(shè)計(jì)方式，給人方正硬朗的感覺(jué)。我們把這個(gè)圖標(biāo)風(fēng)格作為基礎(chǔ)造型下邊我們將在這個(gè)圖標(biāo)風(fēng)格上進(jìn)行不斷地變化打造出各種不一樣的設(shè)計(jì)風(fēng)格。
第四步：接下來(lái)我們?cè)诘谝唤M的基礎(chǔ)上，調(diào)整設(shè)計(jì)出第二組“風(fēng)格設(shè)計(jì)2”
我們?cè)陲L(fēng)格1的基礎(chǔ)上優(yōu)化尖角為圓角圖標(biāo)。圓角大小設(shè)計(jì)定為4px，瞬間圖標(biāo)的感覺(jué)就變得圓親切了很多。這種風(fēng)格也就是市面上最常用到的系統(tǒng)圖標(biāo)設(shè)計(jì)風(fēng)格。
第五步：于是乎，鐺鐺~~~我們?cè)O(shè)計(jì)第三組“風(fēng)格設(shè)計(jì)3”又誕生了。
在風(fēng)格散的基礎(chǔ)上我們加粗線條為3px的視覺(jué)風(fēng)格，由于線條粗細(xì)的調(diào)整整套圖標(biāo)的感覺(jué)已經(jīng)比較粗壯有力，給人非常可靠穩(wěn)定的感覺(jué)。
第六步：于是我們繼續(xù)在第三組的基礎(chǔ)上繼續(xù)添加元素~我們?cè)O(shè)計(jì)第三組“風(fēng)格設(shè)計(jì)4”又誕生了。
當(dāng)然我們也可以嘗試在圖標(biāo)內(nèi)部填充色塊，并且給它一定的內(nèi)部錯(cuò)位的設(shè)計(jì)營(yíng)造高光的感覺(jué)。這種形式用于點(diǎn)擊選中的效果非常好，閑魚(yú)APP的菜單圖標(biāo)選中效果就采用了這樣的設(shè)計(jì)風(fēng)格。
圖標(biāo)演變過(guò)程是一個(gè)設(shè)計(jì)思考過(guò)程，我們可以通過(guò)不斷的嘗試，尋找一些創(chuàng)意點(diǎn)，今天我們選擇一組圖標(biāo)進(jìn)行實(shí)例演變，還有很多圖標(biāo)風(fēng)格沒(méi)有說(shuō)到，我們也可以再去嘗試挖掘更有創(chuàng)意的icon設(shè)計(jì)風(fēng)格。以上就是今天講解的內(nèi)容，希望能對(duì)大家有所幫助。
制作實(shí)例教程非常的占用時(shí)間和精力，希望大家多多的點(diǎn)贊和評(píng)論互動(dòng)，你們的熱情就是我最大的動(dòng)力。
