6個(gè)步驟教你設(shè)計(jì)一個(gè)完美的Icon發(fā)布者：本站     時(shí)間：2020-06-05 15:06:13

6個(gè)步驟將會(huì)運(yùn)用到改進(jìn)一只狗上（確切地說(shuō)，是一只柯基），這個(gè)圖標(biāo)是由iconfinder的用戶Kem Bardly最近提交的。這個(gè)圖標(biāo)是有潛質(zhì)的，但還不是夠優(yōu)美到可以稱為“高質(zhì)量”。我們給Kem一些簡(jiǎn)單的小技巧，只要做一些小小的改進(jìn)。他的圖標(biāo)已經(jīng)準(zhǔn)備被作為優(yōu)質(zhì)圖標(biāo)通過(guò)了。下面展示的圖片顯示了Kem的圖標(biāo)改進(jìn)前后的版本。在接下來(lái)的章節(jié)，我們將循序漸進(jìn)地解釋它是怎么從最初版變到最終版的。


左邊的圖片是原始圖標(biāo)。右邊的圖片是重新設(shè)計(jì)過(guò)的圖標(biāo)，運(yùn)用了本文中提到的原則。

注意，文章中討論的原則適應(yīng)到網(wǎng)頁(yè)圖標(biāo)時(shí)，他們通常也適用于印刷圖標(biāo)。典型的300 dpi的印刷材料，使得像素化呈現(xiàn)本質(zhì)上是毫無(wú)意義的。如果你是一個(gè)平面印刷設(shè)計(jì)師，文中提到的所有原則都是適應(yīng)的，但是你可以忽略像素化呈現(xiàn)的作品。

有效圖標(biāo)設(shè)計(jì)的三個(gè)特性

對(duì)于組成圖標(biāo)的3個(gè)屬性：形式、統(tǒng)一審美和識(shí)別性，好的圖標(biāo)顯示了一套系統(tǒng)的經(jīng)過(guò)深思熟慮的方法。當(dāng)新設(shè)計(jì)一套圖標(biāo)，把這些屬性都考慮在迭代的途徑中，從整體（形式）出發(fā)，進(jìn)入到細(xì)節(jié)（識(shí)別性）。即使你只設(shè)計(jì)單個(gè)圖標(biāo)，這3個(gè)屬性也仍然能被應(yīng)用，能從單個(gè)圖標(biāo)中推測(cè)出。

毋庸置疑，設(shè)計(jì)一個(gè)有效的圖標(biāo)不止這3個(gè)屬性，但有這3個(gè)精選屬性是設(shè)計(jì)一個(gè)好的圖標(biāo)的開端。為了相對(duì)簡(jiǎn)潔性，我們專注于考慮這3個(gè)主要的屬性。

形式

形式是一個(gè)圖標(biāo)根本的結(jié)構(gòu)，或者說(shuō)是它的組成部分。如果你忽視圖標(biāo)的細(xì)節(jié)，在主要圖形周圍畫了一條線，那他們是形成了一個(gè)方形、一個(gè)圓形、一個(gè)垂直或水平的矩形，一個(gè)三角形或者更多有組織的圖形？最主要的幾何形狀——圓形、方形和三角形——能為圖標(biāo)設(shè)計(jì)打下一個(gè)穩(wěn)固的視覺基礎(chǔ)。在Kem Bardly設(shè)計(jì)的柯基圖標(biāo)示例中，狗的頭部是由兩個(gè)三角形和兩個(gè)橢圓形組成的。一個(gè)人開始會(huì)畫一個(gè)最大最簡(jiǎn)單的形狀，然后才定義越來(lái)越多的細(xì)節(jié)。另一個(gè)人從最簡(jiǎn)單的形狀開始設(shè)計(jì)圖標(biāo)，然后添加更多的細(xì)節(jié)——但是只有盡可能多的需要溝通概念的細(xì)節(jié)被表達(dá)出來(lái)，它就會(huì)成為一個(gè)物體，一個(gè)想法或行動(dòng)。


這張圖片的關(guān)鍵線條展示了設(shè)計(jì)構(gòu)型的基本形狀

審美的一致性

單個(gè)圖標(biāo)的構(gòu)成元素能運(yùn)用到整套圖標(biāo)中，就是我們說(shuō)的視覺的一致性。這些元素比如是圓形或方形的角，角度的大小（2像素，4像素…），被限制和保持一致的線條粗細(xì)（2像素，4像素…），圖標(biāo)風(fēng)格（扁平的，線條的，被填充的線條或符號(hào)），配色等等。審美一致性是設(shè)計(jì)元素的集合，或是設(shè)計(jì)中你為其成為一個(gè)整體所貫穿使用的手法。在下面的例子中，會(huì)發(fā)現(xiàn)Kem圖標(biāo)中的這3只狗都有一些共同元素，比如2像素的圓角，2像素寬的眼睛和心形嘴巴。


這3只狗圖標(biāo)有共同的設(shè)計(jì)元素，形成了視覺的一致性

識(shí)別性

識(shí)別性是產(chǎn)品圖標(biāo)的基本，它造就了圖標(biāo)的唯一性。一個(gè)圖標(biāo)是否從根本上起了作用，依賴于觀眾能多么容易地去理解這個(gè)圖形、它的含義及它描述的動(dòng)作。一致性包括展示觀眾普遍會(huì)和你的想法聯(lián)系在一起的特性，但是它也包括哪些獨(dú)特的，出乎意料的元素，像把狗狗的鼻子設(shè)計(jì)為心形。記住識(shí)別性不僅僅是指對(duì)形狀、想法或它表達(dá)的動(dòng)作的理解，也指識(shí)別出你的圖標(biāo)。從這方面來(lái)說(shuō)，美學(xué)的一致性和識(shí)別性能經(jīng)常重合在一起的。下面的圖標(biāo)，我們能識(shí)別出一只是柯基犬，一只是西伯利亞的愛斯基摩犬。因?yàn)樗麄儶?dú)特的顏色、頭部形狀和耳朵，但是仍然會(huì)認(rèn)為他們是同一組圖標(biāo)，因?yàn)樗麄冇泄餐脑O(shè)計(jì)元素。