APP圖標設計小技巧:如何設計出最簡單的圖標組合

關于APP圖標設計的一些教程和干貨,25學堂已經(jīng)分享了很多。比如:

1、APP設計小技巧:教你一個設計統(tǒng)一圖標大小的方法

2、APP設計視頻教程:APP啟動圖標設計的四個步驟

3、教你使用PS路徑繪制APP線性圖標教程

4、在線生成自定義APP圖標字體利器:IconVault

5、什么樣的icon圖標才算是好的APP圖標設計呢

下面這種最常見的APP分類圖標設計案例:

%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e5%ae%ab%e6%a0%bc%e5%bc%8f%e5%b8%83%e5%b1%80

 

今天,25學堂的小編跟大家分享一個APP圖標設計小技巧:如何構想出最簡單的圖標組合。

當然,如果你如果有自己一套快速構建icon圖標的方法,也可以跟我們分享哦~

UI設計師都明白,圖標越小,需要展示的詳細細節(jié)就越少,對設計師的能力要求也較高。

相對于較大的圖標而言,64px 的圖標設計應該減少一些不必要的細節(jié),以此來提升圖標的識別度,但是你需要非常小心的去掉那些不必要的元素,以免過多的簡化,造成了整體的不可識別。

 

第一個小技巧:使用最簡單的圖形

簡單的形狀可以組合成復雜的圖標。你只需要從不同的角度去觀察他們。將注意力放在每一個圖標是如何通過簡單元素組合而成的。

比如下圖所示:

%e5%9b%be%e6%a0%87%e6%98%af%e5%a6%82%e4%bd%95%e9%80%9a%e8%bf%87%e7%ae%80%e5%8d%95%e5%85%83%e7%b4%a0%e7%bb%84%e5%90%88%e8%80%8c%e6%88%90%e7%9a%84%e3%80%82

以上這些APP icon風格屬于:霓虹燈風格的線性圖標設計。

還有一種純色的線性風格。比如我們在阿里巴巴矢量圖標庫下載的所有圖標大部分都是這種純色的。

如下圖:

4px線性圖標下載

 

所謂的icon 圖標, ?不是對照片和實物的重繪,它們帶有特定的信息,所以你的工作是將這些信息通過圖標的形式清晰的表達出來,圖標是將復雜的信息通過小的象形圖案展現(xiàn)出來。

也是APP ui設計師將抽象的實物轉換成可識別性的圖標。

 

當然,作為初學者,初次學習設計Icon圖標的時候,如何通過簡單的形狀去表達復雜的含義是一件比較困難的事情,但是只有不斷的實踐才是提升的關鍵。

比如下面2個案例可以幫助大家打開設計icon 圖標設計的思維。

%e5%bf%83%e5%9e%8b-%e5%9b%be%e6%a0%87%e7%bb%98%e5%88%b6

心形 ?圖案的 icon 線性圖標繪制方法

%e6%af%94%e5%a6%82-%e7%9c%bc%e7%9d%9b-icon-%e5%9b%be%e6%a0%87%e7%9a%84%e7%bb%98%e5%88%b6

眼睛 ?圖案的 icon 線性圖標繪制方法

 

%e5%ae%9a%e4%bd%8d-%e5%9b%be%e6%a0%87%e7%9a%84%e7%bb%98%e5%88%b6%e6%96%b9%e6%b3%95

地理定位 ? 圖案的 icon 面型扁平圖標繪制方法

 

看完這三個圖案化的 icon 繪制方法,有沒有覺得其實icon的設計沒想象中的復雜和苦難呢?

看完,其實你也可以設計出來,也可以舉一反三的去設計別的icon 圖標。

請大家記住下面的icon圖標設計的知識點:

所以,關注對象所有的主要功能,劃分層級,突出顯示圖標的關鍵元素是至關重要的。

少即是多,圖標并不應該過度設計。他們必須盡可能簡單地傳遞正確信息。如果你能發(fā)現(xiàn)一些可以刪除的不必要元素,使它看起來更簡單,更加易于識別,請大膽的做吧。

線性圖標設計知識

第二個繪制icon 圖標設計小技巧:手繪草圖

這也是最能提高設計師圖形表達力的更高效的方式。不信,你可以去試試。

使用最簡單的圖形繪制圖標。你可以更加直觀方便的得到反饋和做出修改。所以嘗試使用幾何形狀去構建圖標,并且通過觀察別人的圖標作品是如何做到的。

感興趣的同學可以圍觀追波網(wǎng)知名國外UI設計師?Paulius Kairevic?ius?的作品,基本幾何形狀的組合設計,或許會給你的圖標設計帶來很大啟發(fā)。

symboldr

值得大家看的是6步制作一個精美圖標。下期,25學堂繼續(xù)跟大家分享最實用的的APP設計干貨。其實logo設計的方法也是這樣。

希望大家在APP設計道路上有所進步。加油~ ?各位小伙伴們。

 

 

 

每天更新,
全站高品質素材免費下載!