AAA教育

在前邊的文章中我們已經(jīng)全方位立體式的講解了系統(tǒng)圖標的相關(guān)知識點。即講到了系統(tǒng)圖標的風格，系統(tǒng)圖標的設(shè)計風格，也講到圖標設(shè)計的柵格體系。之前我們都是紙上談兵那么我們今天就來實踐一下，畢竟實踐才是硬道理。今天我們通過實際案例講解如何設(shè)計具有獨特氣質(zhì)的系統(tǒng)圖標風格。我們在同一套圖標的基礎(chǔ)上通過變換不同的設(shè)計手法來變化圖標風格，真真的都是圖標設(shè)計干貨啊，廢話不多說下邊直接開始吧。

系統(tǒng)圖標實例教程：

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

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

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

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

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

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

風格設(shè)計1

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

風格設(shè)計2

我們在風格1的基礎(chǔ)上優(yōu)化尖角為圓角圖標。圓角大小設(shè)計定為4px，瞬間圖標的感覺就變得圓親切了很多。這種風格也就是市面上最常用到的系統(tǒng)圖標設(shè)計風格。

風格設(shè)計3

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

風格設(shè)計4

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

風格設(shè)計5

我們繼續(xù)在風格3的基礎(chǔ)上將每個icon進行斷點，形成斷線風格，注意斷點的位置，一般的是在右側(cè)或圖標下方，一般不會出現(xiàn)在左上側(cè)和圖標中心位置。這時圖標多了一個獨特的特性就是斷點，一個小小的變化就能呈現(xiàn)不同的視覺感覺，看起來更加的與眾不同了。

風格設(shè)計6

順著上邊的思路繼續(xù)我們在斷點中間添加一個小圓點，整套圖標又呈現(xiàn)出了不一樣的感覺。會顯得比較時尚有亮點，給人的印象也會更加深刻了。

風格設(shè)計7

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

風格設(shè)計8

當然我們也可以嘗試在圖標內(nèi)部填充色塊，并且給它一定的內(nèi)部錯位的設(shè)計營造高光的感覺。這種形式用于點擊選中的效果非常好，閑魚APP的菜單圖標選中效果就采用了這樣的設(shè)計風格。

風格設(shè)計9

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

圖標演變過程是一個設(shè)計思考過程，我們可以通過不斷的嘗試，尋找一些創(chuàng)意點，今天我們選擇一組圖標進行實例演變，還有很多圖標風格沒有說到，我們也可以再去嘗試挖掘更有創(chuàng)意的icon設(shè)計風格。以上就是今天講解的內(nèi)容，希望能對大家有所幫助能對大家有所幫助。制作實例教程非常的占用時間和精力，希望大家多多的點贊和評論互動你們的熱情就是我最大的動力。

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