2016-11-28 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
來源：UI中國
筆者供職于Iconfinder,當(dāng)用戶將自己制作的圖標(biāo)上傳到Iconfinder后，我們都會對這些圖標(biāo)進(jìn)行審核與評級。界定平庸與優(yōu)秀的圖標(biāo)是件很有挑戰(zhàn)性的工作，因為這兩者之間的差異往往很小，然而正是這些細(xì)微的差異會對圖標(biāo)整體質(zhì)量產(chǎn)生巨大的影響。細(xì)節(jié)決定成敗這句話在圖標(biāo)設(shè)計上面體現(xiàn)的尤為明顯。
文中所舉例的圖片來自于Iconfinder用戶Kem Bardly，他圖標(biāo)最初版本已經(jīng)很優(yōu)秀了，但是仍有著很大的提升空間。我們給他提供了一些小的修改意見，他修改了以后圖標(biāo)的質(zhì)感立馬就提升了一個檔次。在接下來的文中，我將一一列舉這些圖標(biāo)繪制中的小竅門。
圖標(biāo)的三個特性
首先我們要知道(合格)圖標(biāo)的三個主要特性：形狀，視覺統(tǒng)一和可識別性。在設(shè)計過程中，這三個特性是設(shè)計師需要反復(fù)考慮的。即使我們在設(shè)計單個圖標(biāo)的時候，這三個特性也要牢記著。當(dāng)然圖標(biāo)不是僅僅這三個特性，但是這些特性可以幫助我們很快的提高自己的圖標(biāo)設(shè)計水平。
形狀
形狀是一個圖標(biāo)的基本結(jié)構(gòu)，相當(dāng)于圖標(biāo)的骨架。主要的幾何形狀 —— 圓形，矩形和三角形 —— 構(gòu)成了圖標(biāo)設(shè)計的視覺基礎(chǔ)。在我們下圖的例子中，柯基狗的頭是由兩個三角形和兩個橢圓構(gòu)成的。大部分人都會選擇先畫大的部分，然后再處理那些小細(xì)節(jié)，其實圖標(biāo)需要著重表現(xiàn)的細(xì)節(jié)并不多。圖標(biāo)上細(xì)節(jié)也是越多越好，這個后面詳細(xì)再說。
視覺統(tǒng)一
在一個圖標(biāo)集里每一個圖標(biāo)都具有的元素的集合我們稱之為圖標(biāo)的視覺統(tǒng)一。這些相同的元素可能是相同半徑的圓角，線寬（描邊），用色等。比如下面的例子里，Kem的圖標(biāo)集中，小狗的耳朵上的圓角都是2像素的，描邊都是2像素的，鼻子都是心形的。這些共享的元素將圖標(biāo)集里的每個單個圖標(biāo)都聯(lián)系在一起。
可識別性
可識別性是一個圖標(biāo)的靈魂，是真正讓你的圖標(biāo)的關(guān)鍵。圖標(biāo)其實也是一種語言，其作用就是來共同交流，不同的是這里信息的載體不是文字而是圖形。
你的圖標(biāo)是否成功就在于用戶能否在極短的時候內(nèi)很容易的破譯你的信息。當(dāng)然圖標(biāo)的可識別性作用不僅僅于此，一個精妙的可識別性元素的使用會將整個圖標(biāo)集里的圖標(biāo)都聯(lián)系成一個整體，這里和上面說的視覺統(tǒng)一很相像。比如下面的圖中，我們可以一眼看出左邊的是柯基，右邊的是哈士奇。因為它們有著自己特有的毛色，頭型與耳朵也可以看出來這兩個圖標(biāo)出自同一個設(shè)計師之手或者直接來自同一個圖標(biāo)集，因為相同的設(shè)計元素（眼睛，鼻子，描邊，圓角）。
六大竅門
1 使用網(wǎng)格
所謂“無以規(guī)矩，不成方圓”，網(wǎng)格對圖標(biāo)的規(guī)范化設(shè)計有著極大的“約束”作用，不同尺寸的網(wǎng)格用途與用法也更不相同。在這里，我們主要說的是32*32像素的網(wǎng)格。我們將網(wǎng)格劃分為不同的區(qū)域，不同的區(qū)域在整個圖標(biāo)里起到的作用也各不一樣。
首先，最外層的兩像素的位置我們通常空著，不加任何東西。這樣做的原因是給圖標(biāo)創(chuàng)造出一些空間感，而不至于太擠。我們稱這個區(qū)域為“留白區(qū)”。里面的我們稱之為“內(nèi)容區(qū)”。
圓形圖標(biāo)處于網(wǎng)格中心位置時經(jīng)常會觸及到內(nèi)容區(qū)的邊緣，但是不會侵入留白區(qū)。當(dāng)然在一些特殊情況下，比如為了保持設(shè)計的完整性，有時候圖標(biāo)中的一些次要元素進(jìn)入了留白區(qū)也是允許的。如下圖所示
正方形圖標(biāo)大部分情況都會處于網(wǎng)格的中心位置，但不會過度延伸導(dǎo)致占據(jù)留白空間。為了保持與圓形和三角形一致的視覺權(quán)重，我們可以通過使用參考線將圖標(biāo)保持在網(wǎng)格的核心區(qū)（下圖的橙色區(qū)域）。當(dāng)然每個圖標(biāo)的核心區(qū)是由它自身的視覺權(quán)重所決定的。
2 勾勒
在圖標(biāo)設(shè)計的初始階段，我們可以通過使用圓形、矩形和三角形這些基本幾何形狀將圖標(biāo)的大致形狀勾勒出來。如果我們直接手繪圖標(biāo)輪廓的話，那么到圖標(biāo)制作階段一些手繪所帶來不的缺點就會凸顯出來。不僅如此，使用形狀工具勾勒出草圖的圖標(biāo)在后期尺寸調(diào)整的中也會有據(jù)可循。誠然一個圖標(biāo)集是由很多個元素構(gòu)成的，但是一個元素的脫節(jié)與不標(biāo)準(zhǔn)會影響圖標(biāo)集的整體質(zhì)量。所以直接使用形狀工具勾勒出草圖能起到規(guī)范化的作用，確保圖標(biāo)到像素級別。
3 常見的設(shè)計元素
通常情況下，45°是一個完美角度。因為45度角所產(chǎn)生的鋸齒會均勻的成階梯狀分布，不會產(chǎn)生模糊效果。圖標(biāo)可以以一直清晰的狀態(tài)展現(xiàn)出來，這很符合人類眼睛的審美需求。當(dāng)然在特殊情況下打破這個慣例也是允許的。嘗試使用22.5度，11.25度或者15度角的倍數(shù)。
曲線如果繪制的不好會極大的影響圖標(biāo)的質(zhì)量，所以從曲線可以看出設(shè)計師的功底。人眼可以輕易的看出曲線上細(xì)微的差異，所以這對設(shè)計師的要求就很高。我們盡量使用形狀工具或者數(shù)字來創(chuàng)建曲線。非要用手繪來解決問題的時候，推薦使用Adobe Illustrator，當(dāng)然Vectorscrible和Inkscrible也可以完成精細(xì)曲線的繪制。下圖中就是手繪曲線時導(dǎo)致左邊右邊的不對稱。
我們在設(shè)計過程中往往會遇到圖標(biāo)邊緣出現(xiàn)鋸齒的情況，這樣的圖標(biāo)會模糊影響整體效果。出現(xiàn)這種情況是因為圖形沒有達(dá)到像素級別的對齊。
兩種線寬是最合理的，當(dāng)然某些特定情況下三種也是必要的。我們引入不同的線寬的目的就是提升視覺層次感與多樣性。使用太多的線寬會破壞整個圖標(biāo)集的一致性，這里指的是超過三個。在大部分情況下，我們要盡量避免使用過細(xì)的線條，除非你是特意想制作一套“線性風(fēng)格”的圖標(biāo)集。
4 使用統(tǒng)一的設(shè)計元素
Dutch Icon的Hemmo de Jonge曾在圖標(biāo)沙龍2015的活動上談到了這一點。在他和荷蘭政府合作的一個圖標(biāo)系統(tǒng)項目里，Hemmo和他的設(shè)計伙伴加一個缺口。不是每一個圖標(biāo)都有這個缺口，但大多數(shù)都是。這種做法可以將這些單獨的圖標(biāo)有機(jī)的聯(lián)系在一起。
重新回到狗狗的例子中來，我們也使用了同樣的手法，那就是心形的鼻子。這個心形鼻子不僅將這些圖標(biāo)聯(lián)系起來還表現(xiàn)了狗是人類好朋友這條信息。
大部分情況下，即使圖標(biāo)集中的大部分元素都發(fā)生了變化，但是相同的設(shè)計風(fēng)格會將這些圖標(biāo)聯(lián)系在一起。
5 把握細(xì)節(jié)尺度
圖標(biāo)中細(xì)節(jié)不是越多越好，越詳細(xì)越好。因為圖標(biāo)的主要功能就是在短時間內(nèi)給用戶傳遞信息。過多的細(xì)節(jié)會增加圖標(biāo)的復(fù)雜性進(jìn)而影響圖標(biāo)的可辨識度。把握小細(xì)節(jié)的尺度是整個圖標(biāo)集的視覺統(tǒng)一性和可識別性中的重要一點。
6 跨界思維
現(xiàn)在每天都有很多設(shè)計師在各種設(shè)計網(wǎng)站上上傳自己的圖標(biāo)作品，其中不乏一些精品。但是這些作品大部分都很相似，這些設(shè)計師說好聽點是“緊跟時代潮流”，說不好聽點就是跟風(fēng)。真正去“創(chuàng)作”圖標(biāo)，你應(yīng)該將目光放得更遠(yuǎn)一點，去其他領(lǐng)域看看。比如，建筑、隱私、工業(yè)設(shè)計、心理學(xué)和其他任何專業(yè)。從這些看似與圖標(biāo)設(shè)計毫無聯(lián)系的領(lǐng)域里汲取靈感，給你的圖標(biāo)注入不同的思想。
總結(jié)
方法其實只要多加練習(xí)其實很容易掌握，難的是思想層面的轉(zhuǎn)變。圖標(biāo)設(shè)計是一個由整體到個體，由形狀到可識別性的過程。要時刻牢記你是在設(shè)計一整套圖標(biāo)集而不是一個圖標(biāo)，不要為了吸引眼球而刻意追求個體的標(biāo)新立異。
藍(lán)藍(lán)設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.jghy.net