左邊的是原來的icon. 右邊的是按照本文原則重新設(shè)計(jì)過的icon 有效icon設(shè)計(jì)的三個(gè)屬性 系統(tǒng)和深思熟慮的設(shè)計(jì)icon主要依靠三個(gè)屬性：形式、審美統(tǒng)一、可辨識(shí)性。無(wú)論是設(shè)計(jì)一套還是設(shè)計(jì)單個(gè)的icon，都需要考慮這三點(diǎn)。 1、形式 形式是關(guān)于一個(gè)圖標(biāo)如何制作而成的最底層的結(jié)構(gòu)。如果你忽略一個(gè)圖標(biāo)的細(xì)節(jié)，畫一條線去表達(dá)它，看看它是不是變成了一個(gè)正方形、三角形、圓形、水平或者垂直的矩形？主要的幾何圖形——圓、三角和正方形——是創(chuàng)造一個(gè)icon視覺設(shè)計(jì)的的基礎(chǔ)。在我們的例子中， Kem Bardly設(shè)計(jì)的小狗的頭部是由兩個(gè)三角和兩個(gè)橢圓組成的。正如我們畫素描之前要用盡可能大的簡(jiǎn)單的形狀打草稿然后再去添加更多的細(xì)節(jié)一樣，我們也是從簡(jiǎn)單的形狀開始設(shè)計(jì)一個(gè)圖標(biāo)，然后再去添加更多的細(xì)節(jié)。
這張圖片的關(guān)鍵線顯示了由基本形狀定義的設(shè)計(jì)形式 2、審美統(tǒng)一 我們說的審美統(tǒng)一是指在一個(gè)或者多個(gè)icon中共享同樣的設(shè)計(jì)要素。比如說都是圓形或者方形的角，角的具體尺寸（2像素、4像素、等等），一致的線的粗細(xì)（2像素、4像素、等等）、風(fēng)格（面、線、填充的線、字形）、顏色等等。審美統(tǒng)一讓你的設(shè)計(jì)看起來是一個(gè)整體。在下面的例子中，三只狗狗都有共同的設(shè)計(jì)要素，比如2像素的圓角，2像素眼睛和鼻子的圓。
這三只狗狗用共同的設(shè)計(jì)和風(fēng)格元素，創(chuàng)造了審美上的統(tǒng)一 3、可識(shí)別性 可識(shí)別是一個(gè)icon作為一個(gè)產(chǎn)品的本質(zhì)或一個(gè)icon獨(dú)特的原因。一個(gè)圖標(biāo)最終是否起作用取決于觀看者能不能容易的識(shí)別icon所描繪的對(duì)象、想法、或者行為。可識(shí)別包括大家對(duì)于一個(gè)事物普遍的看法，但它也可以包括一些獨(dú)特而意外的元素比如心形的小狗的鼻子。需要記住的是可識(shí)別性并不只是對(duì)事物單純的描述，它還包含你對(duì)此獨(dú)特的理解。在這方面審美統(tǒng)一和可識(shí)別能夠并且經(jīng)常的相互重疊在一起。
每只狗狗的獨(dú)特性他們可以被識(shí)別，然而一致的元素和風(fēng)格又讓它們看起來是一組的。 目前為止，我們了解了有效的icon設(shè)計(jì)的三個(gè)主要屬性。接下來，我們將深入了解如何用留個(gè)步驟來妥善處理這三個(gè)方面的問題。 六個(gè)步驟 1、從一個(gè)網(wǎng)格開始 我們這里使用一個(gè)32×32-pixel網(wǎng)格。我們的網(wǎng)格也包含一些基本的指導(dǎo)來幫助我們?cè)诿總€(gè)圖標(biāo)的設(shè)計(jì)中創(chuàng)建基本樣式。
在這里，我們看到了一個(gè) 32 × 32-pixel 的網(wǎng)格, 用一個(gè) 2-pixel邊界 (或 “禁區(qū)”) 來留出喘息的空間。 網(wǎng)格外面的2像素是我們所說的“禁區(qū)”。除非絕對(duì)必要，避免圖標(biāo)出現(xiàn)在這個(gè)區(qū)域。“禁區(qū)”的目的主要是為了在圖標(biāo)周圍創(chuàng)建一些喘息的空間。 對(duì)于icon可以用基礎(chǔ)形狀概括的，你可以畫一條外邊緣線來做邊界框，這些邊界框通常是一個(gè)正方形、圓形、三角形矩形等~ 圓形的iocn以網(wǎng)格為中心，通常會(huì)接觸到內(nèi)容區(qū)的最外層的邊緣，但不會(huì)進(jìn)入禁區(qū)。注意，最常見打破禁區(qū)的情況是可以讓一些微量的需要強(qiáng)調(diào)的元素向圓外延伸以保證設(shè)計(jì)的完整性 ，如下圖所示。 △ 用網(wǎng)格和輪廓線對(duì)齊的圓形圖標(biāo) 方形的圖標(biāo)也是以網(wǎng)格為中心但并不會(huì)這么做，在大多數(shù)情況下，它會(huì)擴(kuò)展到主要內(nèi)容區(qū)的最外層的邊緣。當(dāng)需要和圓形或者三角形的圖標(biāo)保持一致的視覺重量時(shí)，大多數(shù)的長(zhǎng)方形圖標(biāo)或正方形圖標(biāo)要對(duì)齊到中間的輪廓線（下圖的橙色區(qū)域）。讓圖標(biāo)本身的視覺重量去決定怎么去對(duì)齊這些輪廓線，這需要在練習(xí)中去感覺?？纯聪旅娣叫蔚脑O(shè)計(jì)圖，有三個(gè)同心方塊被強(qiáng)調(diào)，淺藍(lán)色、橙色、淺綠色。 △ 調(diào)整成一樣視覺重量后的方形和圓形的圖標(biāo) 在32-pixel的正方形里，你會(huì)注意到20 × 28-pixel大小的水平或垂直的矩形。我們松散的遵循這些矩形圖標(biāo)是橫向或是豎向的，并試圖使這些圖標(biāo)匹配20 × 28-pixel的尺寸。 △ 調(diào)整后的垂直和水平方向的矩形與網(wǎng)格的關(guān)系 對(duì)角圖標(biāo)的大小是以圓形的邊緣線來調(diào)整的。注意，最外層的點(diǎn)與圓形的參考線基本一致就行，不需要特別的精確，接近就可以了。 △ 調(diào)整后的對(duì)角圖標(biāo)大小與網(wǎng)格的關(guān)系 記住，你不用每次都嚴(yán)格遵循網(wǎng)格和參考線. 網(wǎng)格在這里的作用是為了幫助你讓圖標(biāo)保持一致性, 但是如果你需要在制作一個(gè)偉大的圖標(biāo)和遵循這個(gè)規(guī)則之間二選一的話，那就打破它。有著“荷蘭圖標(biāo)”美稱的Hemmo de Jonge說過： 一個(gè)獨(dú)特icon的精華比設(shè)置一致感要重要的多。
