- 設(shè)計資訊 >
- 設(shè)計交流 >
- 設(shè)計經(jīng)驗 >
- 十條關(guān)于制作圖標(biāo)的建議
十條關(guān)于制作圖標(biāo)的建議
作者:網(wǎng)絡(luò)來源:優(yōu)設(shè)網(wǎng) 發(fā)布時間:2018-10-25 15:40:10 點擊:6296
編按:在UI設(shè)計中,少不了的是設(shè)計圖標(biāo)。圖標(biāo)的制作看似簡單,實則很有難度。整體的配色,主題,小細(xì)節(jié)等等,都能讓你的圖標(biāo)不夠完美。那么如何創(chuàng)建高質(zhì)量的圖標(biāo)呢?我們一起來看看吧。
將某一事物的特征概括出來成為圖標(biāo)是一件非常有意義的事,一眼就能識別事物的特征是不容易的,特別是設(shè)計需要48X48像素時,如何讓它跟256X256像素一樣清楚。一個令人難忘并且具備隱喻的圖標(biāo)是漂亮的、標(biāo)志性的,富有意義和功能性。
關(guān)于如何創(chuàng)造卓越圖標(biāo)的十個建議:
一、捕捉對象的特征
對于icon design 最重要的一點是當(dāng)你設(shè)計出一個圖標(biāo),用戶能不能立即辨認(rèn).無論是青蛙還是鉛筆,它所表達(dá)意義的識別性,必須一目了然.必須具備經(jīng)典的隱喻特征。
在一本雜志的圖標(biāo)教程里,圖標(biāo)大師Vu(scrape.sk)和Min Tran(frexy.com)討論了他們關(guān)于鉛筆圖形的背后進(jìn)程:
“圖標(biāo)需要突出對象的最典型特征,表現(xiàn)它所表達(dá)的概念和細(xì)節(jié)。
正如你所知:鉛筆一般有三種選擇:
1、棱柱形的筆身、光澤釉涂層
2、棱柱形的筆身、尾部橡皮擦、白色金屬環(huán)
3、圓柱狀筆身,沒有橡皮擦
我們選擇第二種,應(yīng)為它具備所有的必要元素,用戶更容易識別。有時候,一些對象會更為復(fù)雜,或者更加簡單,你必須列出它們的特點,畫出具體的形象。橡皮擦、白色金屬環(huán),這是鉛筆的特征,使它們成為表現(xiàn)鉛筆形象的“經(jīng)典”。
二、讓圖標(biāo)簡單、通用.從而讓它適應(yīng)一系列項目.
對于圖標(biāo)設(shè)計師DryIcons(dryicons.com)來說,設(shè)計圖標(biāo)的關(guān)鍵在于讓圖標(biāo)盡量簡單.瞄準(zhǔn)一個風(fēng)格和目標(biāo).這有助于讓軟件開發(fā)者更加靈活的使用圖標(biāo),增加圖標(biāo)的可用性.
如果你的圖標(biāo)設(shè)定范圍更廣,可以使用在首頁或其他地方,那它的潛在市場會更大.
“關(guān)于趨勢,我們覺得保持圖標(biāo)的簡單和基本特征是非常重要的,我們遵循這個趨勢”——DryIcons
三、使用一致的光源
一個特別有用的技巧:當(dāng)你在設(shè)計一系列圖標(biāo)時,不緊緊要在風(fēng)格上一致,像“光源”這些細(xì)節(jié)也需要注意.雖然這是次要的,但這會影響圖標(biāo)的整體質(zhì)量。在 Windows Vista 里面,圖標(biāo)會在操作系統(tǒng)間有不同的光源,但每一個單元的圖標(biāo)是一致的。
四、創(chuàng)建矢量格式的圖標(biāo)(Argument 1)
圖標(biāo)通常在一個尺寸范圍內(nèi)使用,因此創(chuàng)建一個視覺效果很棒的可縮放矢量圖形,可以有多種用途.(ps:在縮放到需要尺寸后,像素會磨損,所以需要對路徑進(jìn)行調(diào)整,精確到每一像素)
當(dāng)你需要不同尺寸時,矢量繪圖可以讓你不需要重繪.(ps:矢量繪圖軟件有photoshop、Illustrator、Fireworks、CorelDraw、Xara Xtreme等)
五、不創(chuàng)建矢量格式的圖標(biāo)(Argument 2)
相反:矢量繪圖并不是圖標(biāo)設(shè)計師們的最佳方法(ps:我一般結(jié)合著用)由于許多icon需要非常小的尺寸,矢量往往不能很好的呈現(xiàn),所以必須在指定尺寸內(nèi)重繪(我的理解是:圖層復(fù)雜、繪制時用到像素、多細(xì)節(jié)的圖標(biāo)改變尺寸時,必須重新繪制)
Wui設(shè)計師Firewheel對此的看法:位圖vs矢量
“當(dāng)你把一個原本24X24px的矢量圖形縮小到16X16px,有辦法可以把24個像素均勻的分布到16個像素呢?答案是否定的,所以圖像模糊.同樣也沒法將24px均勻擴大到32px.
所以當(dāng)你把24×24像素的圖形擴大到48×48,你將不再會有一個清晰的像素線,他們都是模糊透明的兩個像素線.”(關(guān)于小標(biāo):騰訊QQ、人人主頁、jodanfc、r.sky、blacksnail等國內(nèi)設(shè)計師的作品都很不錯)
六、注意文化差異
Turbomilk(turbomilk.com)的經(jīng)典例子,不同的國家有不同的郵箱
“圖標(biāo)的另一個重要方面就是圖標(biāo)擁有民族特色.不同國家的文化傳統(tǒng),環(huán)境和手勢等都會有所不同.”—Turbomilk
要特別注意:這一規(guī)則在設(shè)計預(yù)警圖標(biāo)和交通標(biāo)志時,每個國家的根據(jù)都有所不同。
七、使用別樣的色彩組合
如果icon的顏色很平淡普通,那它就會被忽視.圖標(biāo)脫穎而出的方法就是:使用很棒色彩搭配和有趣的形狀.記住,圖標(biāo)很傷在單一的背景下顯示,所以他們需要站出來.除此之外同時還可以使用更多的光澤和適當(dāng)?shù)年幱皝硎顾M量動人.(ps:jjying和kidaubis的作品尤為突出)
Jasper Hauser( Camino icon designer )(www.jasperhauser.nl )接受采訪時說到:什么是一個好的圖標(biāo)設(shè)計.
“好的圖標(biāo)需要兩個良好的基礎(chǔ):1,形狀 2,顏色的使用 (ps:我認(rèn)為必須在畫出一個完美的圖形(形狀有趣,不能有鋸齒等等)的基礎(chǔ)上,再去添加它的顏色,繪制它的質(zhì)感)
如appzapper(www.appzapper.com)圖標(biāo)所示,你看到它有一個基本的形狀,使用了多種顏色搭配,如果你做一個藍(lán)色的圓圈則不會脫穎而出。
八、設(shè)計icon,從大尺寸圖標(biāo)到小尺寸,圖標(biāo)要一樣清楚.
藝術(shù)家Brian Brasher在Firewheel Design接受的采訪:
FD:如何讓圖標(biāo)變大,但在不同的分辨率下都顯示清楚?(ps:依次畫出各種尺寸,標(biāo)準(zhǔn)尺寸1024,512,256,128,56,48,32,16,按需制作,不必框死,jodanfc的作品尤為突出.我的經(jīng)驗是:在繪制不同尺寸時,可將最基本的形狀進(jìn)行縮放,然后對齊像素,微調(diào)后,再重新上色繪制質(zhì)感和細(xì)節(jié))
BB:大圖標(biāo)意味著很多細(xì)節(jié),具有豐富圖形用戶界面的設(shè)計師會將各種尺寸一一畫出,如果拋除尺寸的限制,那意味著很多大小的圖標(biāo)看起來會很模糊,最恐怖的就是圖標(biāo)在低于32px時.
(ps:繪制小標(biāo)時要省略不必要細(xì)節(jié),在16或12等px時可以使用正視,只要能看出隱喻即可,不必跟大標(biāo)一模一樣)
九、仔細(xì)規(guī)劃出你的設(shè)計過程
從想法到想法躍然紙上(建立紙面原型)使其符合隱喻和項目需要,然后仔到軟件繪制,確定它的尺寸大小等這些過程規(guī)劃是很重要的.
Michael Matas( Mac OS X platform icon designer)分享了他自己的工作方法:
“開始我總是在白板上畫.我試著畫出良好的圖標(biāo)和明確的隱喻.我勾勒出不同的想法
各種idea總會覆蓋整個白板.當(dāng)我想出一個很好的比喻后,我就去開始畫出圖標(biāo)的布局和構(gòu)圖,我會想用什么角度(透視)去表現(xiàn)它.我在谷歌圖片里搜索一切可以利用的照片,再對著照片根據(jù)自己的想法將它畫出來,直到理想為止.然后我在ps中繪制路徑.搜索圖片,可以幫助我獲得紋理和形狀的想法.如果我可以,我總是試圖通過實物獲得靈感.
(ps:我也是,當(dāng)有實物照片時,你就能更好的掌握圖標(biāo)的細(xì)節(jié),質(zhì)感、紋理等.生活中要注意觀察,我每到一個地方都會仔細(xì)觀察,看有沒有好玩的物體,結(jié)構(gòu),紋理等可以為我的設(shè)計服務(wù),然后拍照)
十、創(chuàng)造一個有趣的富有隱喻的圖標(biāo).
圖標(biāo)是富有含義的圖形符號,因此隱喻是影響用戶行為的關(guān)鍵點。
下面是一個團隊關(guān)于一個圖標(biāo)集的隱喻討論,感興趣的大家可以去看,在此就不翻譯了。
一個人的idea有限,所以對于一些較難表現(xiàn)的圖標(biāo)、重要項目的圖標(biāo),有必要進(jìn)行腦暴并且跟客戶交流溝通,而不是直接讓一個icon designer埋頭做。
補充:
如果你是一個初學(xué)者,你必須勤奮,要多畫,多看好作品,少交流,有一定基礎(chǔ)后,遇到各種瓶頸,可以去請教他人.好的designer人品都很nice,只要你問,他們都會耐心的去幫助你。
或者你也可以去iconfans,跟大家交流,那里有各種教程.你也可以加入iconfans特工隊跟大家一起做練習(xí)。
除此之外,較好的美術(shù)功底(敏感的光影和色彩搭配技巧,良好的手繪技巧等)也是畫好icon所必須的。
最后一點:要以一個專業(yè)圖標(biāo)設(shè)計師的要求來要求自己。
我相信只要你記住這些,然后用“心”去畫,堅持下去,你就可以成為一個“awesome icon designer”!
相關(guān)文章推薦:
【設(shè)計干貨】設(shè)計師應(yīng)該掌握的17個小技巧
作者: aricworks
文章來源: https://www.uisdc.com/ten-icon-design-skills