旗下產業: A產業/?A實習/?A計劃
沈陽區咨詢熱線:024-31048731
首頁 > 今日必讀 > UI大牛告訴你,一種ICon如何做出9種不同風格
UI大牛告訴你,一種ICon如何做出9種不同風格
時間:2018-01-25來源:www.aaa-cg.com.cn點擊量:
時間:2018-01-25點擊量:

我們通過實際案例講解如何設計具有獨特氣質的系統圖標風格。我們在同一套圖標的基礎上,通過變換不同的設計手法來變化圖標風格,真的都是圖標設計干貨。

 

系統圖標實例教程

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

2. 新建一個800*800px的畫布,按快捷鍵 Ctrl+” 鍵調出剛才設定的輔助線。現在每個方格是44*44px。

3. 打開上篇文章中推導出來的系統圖標柵格系統作為設計圖標的參考。這里考拉老師為大家提供了iOS系統圖標柵格系統的下載地址,自行下載即可。=分享的系統柵格體系是ai文件,請大家用AI打開,然后選擇柵格文件ctrl+c復制至PS,ctrl+v然后選擇智能對像選項。

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


風格設計1

首先我們先運用布爾運算做一個套方正的圖標,線條為2px,圖標邊角都采用直角的設計方式,給人方正硬朗的感覺。我們把這個圖標風格作為基礎造型,下邊我們將在這個圖標風格上進行不斷地變化,打造出各種不一樣的設計風格。



 

風格設計2

我們在風格1的基礎上優化尖角為圓角圖標。圓角大小設計定為4px,瞬間圖標的感覺就變得圓潤,親切了很多。這種風格也就是市面上最常用到的系統圖標設計風格。

風格設計3

在風格2的基礎上我們加粗線條為3px的視覺風格。由于線條粗細的調整,整套圖標的感覺已經比較粗壯有力,給人非常可靠穩定的感覺。

風格設計4

繼續加粗線條為4px的視覺風格,此時圖標已經十分粗壯,但是由于是搭配了圓角的設計,整套圖標反而給人感覺多了一點點可愛的感覺。這個圖標造型基本就是UC頭條的圖標設計風格了。當然由于圖標的加粗,我們發現訂單圖標內部的橫桿視覺上已經比其他圖標看起來更重,所以在這種時候我們就將圖標內的橫杠適當的刪減一個,以保證圖標的整體視覺一致。

風格設計5

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

風格設計6

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

風格設計7

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



風格設計8

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

風格設計9

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

圖標演變過程是一個設計思考過程,我們可以通過不斷的嘗試,尋找一些創意點。今天我們選擇一組圖標進行實例演變,還有很多圖標風格沒有說到,我們也可以再去嘗試挖掘更有創意的icon設計風格。以上就是今天講解的內容,希望能對大家有所幫助。


 

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

沈陽漫動者計算機培訓學校 備案號:遼ICP備14015306號-1郵箱:bjaaa@aaaedu.cc

芭比直播app_芭比barbie官网_芭比直播app官方下载地址ios