圖標設計是界面設計最重要的組成部分之一铣猩,作為UI視覺設計師溺欧,這項技能已經是我們必須要掌握的基本技能喊熟,那圖標設計要遵循什么樣的原則呢?這5個圖標設計方法都是我實戰(zhàn)后總結的姐刁,適合新手進階學習芥牌。
“識別性”、“符合行為習慣”聂使、“原創(chuàng)性”壁拉、“易用性”···
上面這些原則都是大的標準拐叉,在圖標設計的時候起到了指導性的意義,但是這些規(guī)則其實都被大家說爛了扇商,如果你對上面這幾點還不太了解凤瘦,可以自行百度一下,這里我就不多說了案铺,我要分享的是能夠幫助你提升專業(yè)度的一些實戰(zhàn)經驗蔬芥,如果你所做的圖標能做到以下這幾點,那么恭喜你控汉,你及格了笔诵!
(本文沒有對圖標進行詳細的分類,所談范圍也只是App中一些功能性圖標的設計經驗)
還是先來看下大綱:
像素對齊
多用布爾運算
獨特的風格
視覺大小的統(tǒng)一
2017年圖標的流行趨勢預測
1. 像素對齊
我記得以前在小公司的時候姑子,一個人負責整個app的交互設計與視覺設計乎婿,設計團隊只有兩個人,有什么問題都沒人可以請教街佑,當時困惑我最大的一個問題就是:為什么我做的圖標總是發(fā)虛的呢谢翎?直到來了大公司和前輩們學習之后,才知道原來是因為像素沒有對齊沐旨。
我們來看下面這張圖:
圖片背景的網格就是我們所說的像素網格森逮,我標明紅點是想告訴大家,第一條豎線做到了像素對齊磁携,而第二條豎線沒有做到褒侧。我們沒有看到二者的區(qū)別,是因為現在是在矢量圖形的環(huán)境下顯示的谊迄,如果導出來圖片就會變成下面這樣:
這就是圖標發(fā)虛的原因闷供,因為我們沒有嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時统诺,如果不嚴格的遵循像素對齊歪脏,那最終的顯示效果就會出現問題,比如說下面這種情況:
所以在你通往專業(yè)UI設計師的路上篙议,這一點是必須要注意的唾糯。
2. 多用布爾運算
在做圖標的時候怠硼,能用基本圖形進行布爾運算的時候鬼贱,盡量不要使用鋼筆,這樣做的好處有如下幾點:
讓你的圖標更加規(guī)范
對圖形結構理解更加深刻
后期更改形狀更加方便
舉個例子香璃,下面這個圖標:
如果我們使用鋼筆直接去畫这难,其實我們很難畫的特別規(guī)范,而且后期調整也很麻煩葡秒,最正確的方法就是去思考他的結構姻乓,這樣一個外形是否可以使用基本圖形進行組合來實現嵌溢,在經過思考與嘗試后,我們會發(fā)現蹋岩,其實他是用一個圓形和三個矩形組合而成的赖草,如下圖:
在平時,我們可以多去嘗試分析并練習一些好看的圖標或者真實的物體剪个,去理解其中的結構與制作方法,當你積累的經驗足夠多時,你就可以很自如的去設計你想要的精美圖標了梢灭。
多做點布爾運算的教程也可以:《15分鐘繪制一個春晚吉祥物「康康」(布爾運算實例)》
3. 獨特的風格
作為專業(yè)視覺設計師的你悔橄,在時間充足的情況下,千萬不要去網上下幾個圖標直接拿來用侵歇,你會上癮的骂澄,并且也會被一些行內人進行批判,因為他們很容易就能看出來你做的圖標是直接在網上下載的惕虑,比如下面這樣的圖標:
我們在做系列圖標的時候坟冲,一定要在前期給圖標設定一個風格及原則,使之看起來與眾不同溃蔫,例如下面的圖標:
一眼看上去樱衷,我們就可以看出上面圖標的特點,線條是斷開的酒唉、所有的圖標都是一筆畫出來的矩桂,這些都可以讓你的圖標變得與眾不同。再比如你也可以從顏色上做文章痪伦,如下圖:
其實方法還有很多侄榴,大家可以多多嘗試與創(chuàng)新。
在這里值得一提就是网沾,我們在做線性圖標時癞蚕,一定要保證描邊粗細相同、圓角相同辉哥,如果這些基礎的規(guī)則都沒有遵循桦山,那也就談不上風格的統(tǒng)一、創(chuàng)新了醋旦。
4. 視覺大小統(tǒng)一
看上面這張圖恒水,同樣都是44x44px尺寸的形狀,方形就會比圓形看著大一些饲齐,雖然我們統(tǒng)一了物理尺寸钉凌,但是在視覺大小上沒有進行統(tǒng)一。
在進行圖標設計的時候捂人,我們會使用柵格輔助線來幫助我們更加嚴格謹慎御雕,但一定不要被輔助線困住矢沿,學會靈活運用,保持視覺上的大小統(tǒng)一酸纲。
這個方法具體可參見優(yōu)設之前的文章:《高階技巧捣鲸!聊聊LOGO 設計中的視覺矯正法》
再舉個英文字體的例子,如下圖:
雖然在設計的時候闽坡,使用了輔助線摄狱,但是設計者并沒有被輔助線所束縛,為了達到視覺大小的統(tǒng)一无午,將曲線字母(例如o)進行了適當的放大媒役,這樣整體看起來才會和諧穩(wěn)固。
設計圖標的時候也是一樣宪迟,不僅僅是圖標的大小酣衷,包括元素與元素的距離、正形與負形的比例都是我們需要考慮的內容次泽,如果有哪些內容自己還不太清楚穿仪,那就需要利用業(yè)余的時間去好好補充一下系統(tǒng)知識了。
5. 2017年圖標的流行趨勢預測
觀察了很多App的改版意荤,發(fā)現功能性圖標的變化趨勢在某種程度上有一定的共性可尋啊片,在這里我來分享兩個自己的預測:
1. 利用局部顏色差異來突顯圖標風格
這種風格一直出現在dribbble網站上的概念圖標,現在也慢慢的在移動app上面使用起來玖像,如果現在你正在尋找圖標風格紫谷,這個方向不妨一試。
2. 閱讀類App圖標的無色化
底部導航圖標的無色化風格捐寥,在閱讀類App開始慢慢流行起來笤昨,這種情況也可以理解,是為了讓用戶更好的聚焦閱讀內容握恳,優(yōu)化閱讀體驗瞒窒。
但不知道以后其它類型的App圖標會不會也走這個風格路線呢?
以上就是我本次分享的內容乡洼,其實一些很基本的原則崇裁,例如:識別性、易用性束昵,也都是十分重要的拔稳,但我覺得沒什么好解釋的,就沒有特別拿出來闡述妻怎,希望大家能把所有重要的原則都銘記于心壳炎,不斷地分析、練習逼侦,也許未來的圖標設計大師就是你了匿辩!