圖標設計能做到這5點,你就及格了!
圖標設計能做到這5點,你就及格了!-移動閱讀二維碼

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

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

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

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

還是先來看下大綱:

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

1. 像素對齊

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

我們來看下面這張圖:

uisdc-icon-20170108-1

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

uisdc-icon-20170108-2

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

uisdc-icon-20170108-3

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

2. 多用布爾運算

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

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

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

uisdc-icon-20170108-4

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

uisdc-icon-20170108-5

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

 

3. 獨特的風格

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

uisdc-icon-20170108-6

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

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

uisdc-icon-20170108-8

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

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

4. 視覺大小統一

uisdc-icon-20170108-9

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

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

 

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

uisdc-icon-20170108-10

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

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

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

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

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

uisdc-icon-20170108-11

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

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

uisdc-icon-20170108-12

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

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

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

相關推薦:
圖標的可用性測試
圖標設計流程及小技巧
頂尖設計師分享的6個圖標設計優化指南
歡迎關注作者的微信公眾號:「菜心設計鋪」

cxsjpqr

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