AAA教育

在前邊的文章中我們已經(jīng)全方位立體式的講解了系統(tǒng)圖標(biāo)的相關(guān)知識(shí)點(diǎn)。即講到了系統(tǒng)圖標(biāo)的風(fēng)格，系統(tǒng)圖標(biāo)的設(shè)計(jì)風(fēng)格，也講到圖標(biāo)設(shè)計(jì)的柵格體系。之前我們都是紙上談兵那么我們今天就來(lái)實(shí)踐一下，畢竟實(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)始吧。

系統(tǒng)圖標(biāo)實(shí)例教程：

1.首先我們打開(kāi)PS的編輯,選擇首選項(xiàng)，然后打開(kāi)參考線選項(xiàng)，我們?cè)O(shè)定網(wǎng)格間隔為44px，也就是ios系統(tǒng)中標(biāo)準(zhǔn)圖標(biāo)的大小。然后設(shè)定子網(wǎng)格為8px。

2.新建一個(gè)800*800px的畫(huà)布，按快捷鍵  Ctrl ” 鍵調(diào)出剛才設(shè)定的輔助線。現(xiàn)在每個(gè)方格是44*44px。

3.打開(kāi)上篇文章中推導(dǎo)出來(lái)的系統(tǒng)圖標(biāo)柵格系統(tǒng)作為設(shè)計(jì)圖標(biāo)的參考。這里考拉老師為大家提供了IOS系統(tǒng)圖標(biāo)柵格系統(tǒng)的下載地址自行下載即可。

（下載鏈接：https://pan.baidu.com/s/1dGFskZv 密碼：d30b）分享的系統(tǒng)柵格體系是ai文件請(qǐng)大家用AI打開(kāi)然后選擇柵格文件ctrl c復(fù)制至PS，ctrl v然后選擇智能對(duì)像選項(xiàng)。

4. 這次我們選擇UC頭條的圖標(biāo)作為原形進(jìn)行重新設(shè)計(jì)。

選擇UC頭條的icon作為原型的原因是UC頭條菜單的5個(gè)圖標(biāo)比較有代表性，分別是圓形圖標(biāo) 豎長(zhǎng)形圖標(biāo)和異性圖標(biāo)。唯獨(dú)還缺一個(gè)正方形圖標(biāo)所以我們把第一個(gè)首頁(yè)圖標(biāo)換為一個(gè)正方形的咨訊圖標(biāo)。這樣我們就能夠在同一套圖標(biāo)中對(duì)比5種不同形狀的圖標(biāo)設(shè)計(jì)。

風(fēng)格設(shè)計(jì)1

首先我們先運(yùn)用布爾運(yùn)算（不會(huì)布爾運(yùn)算的同學(xué)自行搜索教程哈）做一個(gè)套方正的圖標(biāo)，線條為2px，圖標(biāo)邊角都采用直角的設(shè)計(jì)方式，給人方正硬朗的感覺(jué)。我們把這個(gè)圖標(biāo)風(fēng)格作為基礎(chǔ)造型下邊我們將在這個(gè)圖標(biāo)風(fēng)格上進(jìn)行不斷地變化打造出各種不一樣的設(shè)計(jì)風(fēng)格。

風(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)格。

風(fēng)格設(shè)計(jì)3

在風(fēng)格散的基礎(chǔ)上我們加粗線條為3px的視覺(jué)風(fēng)格，由于線條粗細(xì)的調(diào)整整套圖標(biāo)的感覺(jué)已經(jīng)比較粗壯有力，給人非?？煽糠€(wěn)定的感覺(jué)。

風(fēng)格設(shè)計(jì)4

繼續(xù)加粗線條為4px的視覺(jué)風(fēng)格，此時(shí)圖標(biāo)已經(jīng)十分粗壯，但是由于是搭配了圓角的設(shè)計(jì)，整套圖標(biāo)反而給人感覺(jué)多了一點(diǎn)點(diǎn)可愛(ài)的感覺(jué)。這個(gè)圖標(biāo)造型基本就是UC頭條的圖標(biāo)設(shè)計(jì)風(fēng)格了。當(dāng)然由于圖標(biāo)的加粗我們發(fā)現(xiàn)訂單圖標(biāo)內(nèi)部的橫桿視覺(jué)上已經(jīng)比其他圖標(biāo)看起來(lái)更重，所以在這種時(shí)候我們就將圖標(biāo)內(nèi)的橫杠適當(dāng)?shù)膭h減一個(gè)，以保證圖標(biāo)的整體視覺(jué)一至。

風(fēng)格設(shè)計(jì)5

我們繼續(xù)在風(fēng)格3的基礎(chǔ)上將每個(gè)icon進(jìn)行斷點(diǎn)，形成斷線風(fēng)格，注意斷點(diǎn)的位置，一般的是在右側(cè)或圖標(biāo)下方，一般不會(huì)出現(xiàn)在左上側(cè)和圖標(biāo)中心位置。這時(shí)圖標(biāo)多了一個(gè)獨(dú)特的特性就是斷點(diǎn)，一個(gè)小小的變化就能呈現(xiàn)不同的視覺(jué)感覺(jué)，看起來(lái)更加的與眾不同了。

風(fēng)格設(shè)計(jì)6

順著上邊的思路繼續(xù)我們?cè)跀帱c(diǎn)中間添加一個(gè)小圓點(diǎn)，整套圖標(biāo)又呈現(xiàn)出了不一樣的感覺(jué)。會(huì)顯得比較時(shí)尚有亮點(diǎn)，給人的印象也會(huì)更加深刻了。

風(fēng)格設(shè)計(jì)7

我們還可以將icon結(jié)合app的主色進(jìn)行結(jié)合設(shè)計(jì)，將icon設(shè)計(jì)成雙色圖標(biāo)，提取icon一部分線條或色塊進(jìn)行色彩變換。這里我們將所有圖標(biāo)內(nèi)的圖形填充主題色進(jìn)行搭配，黑色和檸檬皇黃的色彩搭配使得圖標(biāo)的時(shí)尚感和形式感大大增強(qiáng)，會(huì)給用戶眼前一亮的感覺(jué)。

風(fēng)格設(shè)計(jì)8

當(dāng)然我們也可以嘗試在圖標(biāo)內(nèi)部填充色塊，并且給它一定的內(nèi)部錯(cuò)位的設(shè)計(jì)營(yíng)造高光的感覺(jué)。這種形式用于點(diǎn)擊選中的效果非常好，閑魚(yú)APP的菜單圖標(biāo)選中效果就采用了這樣的設(shè)計(jì)風(fēng)格。

風(fēng)格設(shè)計(jì)9

也可以采用半透明的設(shè)計(jì)方式，比如我們將圖標(biāo)內(nèi)部的圖形設(shè)定為50%的透明度。營(yíng)造不一樣的視覺(jué)感受。

圖標(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ì)大家有所幫助能對(duì)大家有所幫助。制作實(shí)例教程非常的占用時(shí)間和精力，希望大家多多的點(diǎn)贊和評(píng)論互動(dòng)你們的熱情就是我最大的動(dòng)力。

相關(guān)文章--《UI大牛教你產(chǎn)品的設(shè)計(jì)心得》