從零基礎到合格,我總結了這5個圖標設計實戰方法

圖標設計是界面設計最重要的組成部分之一,作為UI視覺設計師,這項技能已經是我們必須要掌握的基本技能,那圖標設計要遵循什麼樣的原則呢?這5個圖標設計方法都是我實戰後總結的,適合新手進階學習。

“識別性”“符合行為習慣”“原創性”“易用性”···

上面這些原則都是大的標準,在圖標設計的時候起到了指導性的意義,但是這些規則其實都被大家說爛了,如果你對上面這幾點還不太瞭解,可以自行百度一下,這裡我就不多說了,我要分享的是能夠幫助你提升專業度的一些實戰經驗,如果你所做的圖標能做到以下這幾點,那麼恭喜你,你及格了!

(本文沒有對圖標進行詳細的分類,所談範圍也只是App中一些功能性圖標的設計經驗)

還是先來看下大綱:

  1. 像素對齊
  2. 多用布爾運算
  3. 獨特的風格
  4. 視覺大小的統一
  5. 2017年圖標的流行趨勢預測

1. 像素對齊

我記得以前在小公司的時候,一個人負責整個app的交互設計與視覺設計,設計團隊只有兩個人,有什麼問題都沒人可以請教,當時困惑我最大的一個問題就是:為什麼我做的圖標總是發虛的呢?直到來了大公司和前輩們學習之後,才知道原來是因為像素沒有對齊。

我們來看下面這張圖:


從零基礎到合格,我總結了這5個圖標設計實戰方法


圖片背景的網格就是我們所說的像素網格,我標明紅點是想告訴大家,第一條豎線做到了像素對齊,而第二條豎線沒有做到。我們沒有看到二者的區別,是因為現在是在矢量圖形的環境下顯示的,如果導出來圖片就會變成下面這樣:


從零基礎到合格,我總結了這5個圖標設計實戰方法


這就是圖標發虛的原因,因為我們沒有嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時,如果不嚴格的遵循像素對齊,那最終的顯示效果就會出現問題,比如說下面這種情況:


從零基礎到合格,我總結了這5個圖標設計實戰方法


所以在你通往專業UI設計師的路上,這一點是必須要注意的。

2. 多用布爾運算

在做圖標的時候,能用基本圖形進行布爾運算的時候,儘量不要使用鋼筆,這樣做的好處有如下幾點:

  • 讓你的圖標更加規範
  • 對圖形結構理解更加深刻
  • 後期更改形狀更加方便

舉個例子,下面這個圖標:


從零基礎到合格,我總結了這5個圖標設計實戰方法


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


從零基礎到合格,我總結了這5個圖標設計實戰方法


在平時,我們可以多去嘗試分析並練習一些好看的圖標或者真實的物體,去理解其中的結構與製作方法,當你積累的經驗足夠多時,你就可以很自如的去設計你想要的精美圖標了。

3. 獨特的風格

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


從零基礎到合格,我總結了這5個圖標設計實戰方法


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


從零基礎到合格,我總結了這5個圖標設計實戰方法


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


從零基礎到合格,我總結了這5個圖標設計實戰方法


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

在這裡值得一提就是,我們在做線性圖標時,一定要保證描邊粗細相同、圓角相同,如果這些基礎的規則都沒有遵循,那也就談不上風格的統一、創新了。

 

 4. 視覺大小統一


從零基礎到合格,我總結了這5個圖標設計實戰方法


看上面這張圖,同樣都是44x44px尺寸的形狀,方形就會比圓形看著大一些,雖然我們統一了物理尺寸,但是在視覺大小上沒有進行統一。

在進行圖標設計的時候,我們會使用柵格輔助線來幫助我們更加嚴格謹慎,但一定不要被輔助線困住,學會靈活運用,保持視覺上的大小統一。

這個方法具體可參見優設之前的文章:《高階技巧!聊聊LOGO 設計中的視覺矯正法》

再舉個英文字體的例子,如下圖:


從零基礎到合格,我總結了這5個圖標設計實戰方法


雖然在設計的時候,使用了輔助線,但是設計者並沒有被輔助線所束縛,為了達到視覺大小的統一,將曲線字母(例如o)進行了適當的放大,這樣整體看起來才會和諧穩固。

設計圖標的時候也是一樣,不僅僅是圖標的大小,包括元素與元素的距離、正形與負形的比例都是我們需要考慮的內容,如果有哪些內容自己還不太清楚,那就需要利用業餘的時間去好好補充一下系統知識了。

5. 2017年圖標的流行趨勢預測

觀察了很多App的改版,發現功能性圖標的變化趨勢在某種程度上有一定的共性可尋,在這裡我來分享兩個自己的預測:

1. 利用局部顏色差異來突顯圖標風格


從零基礎到合格,我總結了這5個圖標設計實戰方法


這種風格一直出現在dribbble網站上的概念圖標,現在也慢慢的在移動app上面使用起來,如果現在你正在尋找圖標風格,這個方向不妨一試。

2. 閱讀類App圖標的無色化


從零基礎到合格,我總結了這5個圖標設計實戰方法


底部導航圖標的無色化風格,在閱讀類App開始慢慢流行起來,這種情況也可以理解,是為了讓用戶更好的聚焦閱讀內容,優化閱讀體驗。

但不知道以後其它類型的App圖標會不會也走這個風格路線呢?

以上就是我本次分享的內容,其實一些很基本的原則,例如:識別性、易用性,也都是十分重要的,但我覺得沒什麼好解釋的,就沒有特別拿出來闡述,希望大家能把所有重要的原則都銘記於心,不斷地分析、練習,也許未來的圖標設計大師就是你了!


分享到:


相關文章: