圖標設計so easy!史上最全UI設計圖標解析
圖標設計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)有一定的主題文化蘊含其中

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

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

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

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

 

來源:sketch中國

本文鏈接:http://www.casaleticia.com/ui-design-icon-parsing.html
本文標簽: , ,