圖標設計so easy！史上最全UI設計圖標解析

UI最重要組建之一就是圖標，隨著扁平化設計的發展趨勢，越來越注重圖標的簡潔與寓意表達，平面圖標已佔主導地位。

什麼是圖標？

圖標正確打開方式是這樣的！

ico圖標其實是icon file的縮寫形式，它是基於windows而開發的一個圖形格式，大多用於電腦，手機或其它設備中為各種文件，應用程序或快捷方式設置的一種圖形標誌。想必大家看完以後會對什麼ico圖標有一個初步的印象了。那麼我們再來看看圖標的一些分類，各有什麼區別特點？

圖標的分類

按功能分類圖標分為：

1、啟動類圖標

這類圖標的典型代表有我們手機上的app應用，在手機界面上的展示狀態就是屬於啟動圖標！比如有微信，qq，酷狗音樂，等。（如下圖所示）

2、系統圖標

系統圖標也是現階段在我們手機屏幕上出現最多的圖標，在app界面中是不可或缺的一部分！那什麼是系統圖標呢？比如像返回，刪除，保存等代表當前功能，或操作的一類圖標我們稱之為系統圖標，這種圖標的要點在於簡潔，易認，也就是辨識度高就行了。（如下圖所示）

按設計形式分類分為：

1、扁平化圖標

扁平化設計特點：簡潔，清新，設計感強，沒有更多的細節與特效修飾。直接明了的表達出出圖標的本意。缺點是識別性差。

2、擬物化圖標

特點，精緻，細膩，識別性強，比較接近真實物品，但是就是因為擬物化比較接近真實物品，所以在繪製的過程中具有一定的難度，在ui設計圖標發展至今，已經漸漸的淡出了用戶的視野，全面的被扁平化圖標所代替了！為了讓大家了解，還是給大家展現一下：

圖標設計原則

說完圖標的分類之後，我們來說說設計這些圖標，我們需要去遵循什麼原則呢？

1、可識別性原則

可識別性原則即清晰明了的表達清楚相應的功能和和操作。通俗的講就是用戶一眼看過去就知道它是做什麼的。比如撥打電話圖標，用戶不需要看文字只需要看圖標就知道是撥打電話用的！這樣才能使用戶的體驗達到滿意！否則的話就等於是廢的設計！

2、差異性原則

這個差異性講的就是圖標與圖標之間的差異，如果說每個圖標彼此之間很相似，就會很難分辨這樣就很可能導致用戶群體的誤操作！切不可模稜兩可。所以這點也是至關重要的！

3、統一性原則

這點在我們設計主題圖標也好，系統圖標也好，是必須要遵循的一點！統一性原則表現在形狀，樣式等風格層面有共同點，這樣讓人看起來就會賞心悅目，已經更能受到用戶的喜愛！

4、尺寸大小尺寸與格式

圖標一般有以下幾種尺寸：

ios

Android

圖標有以下幾種格式：

png , jpg ,svg

圖標UI設計初級技法

1. 多用布爾運算

做圖標時，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆，這樣做的好處有如下三點：

1）讓你的圖標更加規範

2）對圖形結構理解更加深刻

3）後期更改形狀更加方便

如果使用鋼筆直接去畫，其實我們很難畫的特別規範，而且後期調整也很麻煩，最正確的方法就是去思考他的結構，這樣一個外形是否可以使用基本圖形進行組合來實現，在經過思考與嘗試後會發現，其實他是用一個圓形和三個矩形組合而成的，如下圖：

2. 圖形的比例關係

圖形內部結構要注意元素構成之間的比例，有黃金比例分割也有感性的平衡方法。嚴謹的圖標比例可參照蘋果IOS圖標規範案例，打好內部統一結構線進行圖形繪製和比例分配。

3. 圖標的識別性

圖標識別性分：可辨識性和區別性，這本身就是一對矛盾體，我們在實際操作時就是不斷解決矛盾的過程。

☆ 設計師們有時會過於注重形式，忽略了本身的功能，導致圖標難以識別，這打破了它最重要的圖形意象屬性—圖標的傳達含義功能必須放在首位。

☆ 圖標設計理念的本質是減到最簡形態-簡化圖標是出於降低學習曲線的需要；

☆ 良好的用戶體驗可以定義在很多方面，但衡量標準之一是減少了多少用戶思考的成本。清晰是一個 好界面的最重要特徵。

4.圖標的美觀性

1）圖標的風格統一、整體性強

2）傳達含義清晰、準確、容易記憶

3）有一定的主題文化蘊含其中

有主題性文化的圖標，一般更具備娛樂性和欣賞性。是的，圖標設計本身也是有故事性的，在單獨的個體中體現出「道具」的概念，更容易引起用戶的興趣。

因此，作為專業視覺設計師的你，在時間充足的情況下，千萬不要去網上下幾個圖標直接拿來用，你會上癮的，並且也會被一些行內人進行批判，因為他們很容易就能看出來你做的圖標是直接在網上下載的，比如下面這樣的圖標：

我們在做系列圖標的時候，一定要在前期給圖標設定一個風格及原則，使之看起來與眾不同，例如下面的圖標：

一眼看上去，我們就可以看出上面圖標的特點，線條是斷開的、所有的圖標都是一筆畫出來的，這些都可以讓你的圖標變得與眾不同。再比如你也可以從顏色上做文章，如下圖：

其實方法還有很多，大家可以多多嘗試與創新。

------

來源公眾號：靜Design（JingDesign91）

商業轉載請聯繫作者獲得授權，非商業轉載請註明出處！

關注優秀網頁設計官方微信號：youshege；和百萬設計師一起來學習設計吧