幫你從零開(kāi)始學(xué)習(xí)制作精美圖標(biāo)

2019-03-11 1591 0

這篇文章涵蓋了圖標(biāo)設(shè)計(jì)的所有基礎(chǔ)知識(shí),幫你從零開(kāi)始學(xué)習(xí)制作精美圖標(biāo)。

在你開(kāi)始使用圖標(biāo)之前,你首先需要了解圖標(biāo)這個(gè)東西到底是什么,它來(lái)自哪里,它是誰(shuí),它要到哪里去。接下來(lái)通過(guò)一些簡(jiǎn)短的圖標(biāo)歷史介紹,帶你了解圖標(biāo)對(duì)于現(xiàn)代世界的重要性,以及未來(lái)的發(fā)展趨勢(shì)。

1. 什么是圖標(biāo)

那到底什么是圖標(biāo)呢?用一句最簡(jiǎn)單的話來(lái)說(shuō),圖標(biāo)就是一個(gè)符號(hào),一個(gè)代表某個(gè)對(duì)象的符號(hào),一個(gè)象征性的符號(hào)。圖標(biāo)可以追溯到1565年,它源于拉丁語(yǔ)「eik?n」,意思是「相像,形象」。

1.jpg

△ 象形文字

圖標(biāo)是世界上最通用的語(yǔ)言,不論國(guó)籍,種族,年齡或性別,它是每個(gè)人都可以理解的一種語(yǔ)言。看似不起眼的一個(gè)小圖標(biāo)可以包含如此多的信息,人們從古至今一直在使用圖標(biāo)來(lái)表達(dá)自己以及傳達(dá)信息,洞穴繪畫(huà)、埃及象形文字都可以看作圖標(biāo)。

2. 圖標(biāo)設(shè)計(jì)的歷史

如果要追溯圖標(biāo)設(shè)計(jì)的起源,估計(jì)要回到史前時(shí)代了,所以我們通過(guò)近代GUI的發(fā)展來(lái)了解圖標(biāo)設(shè)計(jì)的歷史發(fā)展。historyoficons 網(wǎng)站涵蓋了圖標(biāo)設(shè)計(jì)歷史中的所有里程碑。

2.jpg

△ historyoficons網(wǎng)站向你揭示GUI圖標(biāo)的歷史

3. 為什么圖標(biāo)很重要

隨著人們工作越來(lái)越忙,圖標(biāo)已經(jīng)成為了我們生活中的一部分。它們幫助我們快速定位,幫助我們快速的做出決定和行為,以及幫助我們找到需要的東西。

3.jpg

△ 機(jī)場(chǎng)指示圖標(biāo)

讓我們近距離感受一下為什么說(shuō)圖標(biāo)設(shè)計(jì)是如此的重要,以及它在未來(lái)的巨大作用。

  • 圖標(biāo)連接著整個(gè)世界。不管你使用什么樣的語(yǔ)言,作為視覺(jué)語(yǔ)言的圖標(biāo)都發(fā)揮著巨大的作用。例如機(jī)場(chǎng)中的導(dǎo)航標(biāo)識(shí)、商場(chǎng)中的指示標(biāo)識(shí)等等。

  • 圖標(biāo)能夠快速的傳達(dá)信息。隨著信息技術(shù)的提升以及信息過(guò)剩,人們的注意力更加短暫和稀缺,圖標(biāo)成為了這個(gè)充滿噪音和過(guò)多無(wú)價(jià)值信息世界的救生員。通過(guò)簡(jiǎn)單快速的查看就可以知道圖標(biāo)中攜帶的復(fù)雜信息。

    4.jpg


     

△ 優(yōu)秀的圖標(biāo)成為我們生活中的救生員

無(wú)論你需要找到正確的應(yīng)用程序或產(chǎn)品頁(yè)面上的特定功能,又或者當(dāng)你在外國(guó)城市搜索地鐵時(shí),圖標(biāo)都可以節(jié)省你很多時(shí)間。

 隨著世界越來(lái)越忙,越來(lái)越嘈雜和全球化,它將在未來(lái)更加重要。

圖標(biāo)設(shè)計(jì)的基本知識(shí)

如果您沒(méi)有掌握?qǐng)D標(biāo)設(shè)計(jì)的基礎(chǔ),則不能更好的進(jìn)步和提升。本章帶你了解圖標(biāo)設(shè)計(jì)中的技術(shù)細(xì)節(jié),然后才能創(chuàng)建自己的圖標(biāo)。 了解圖標(biāo)的類型、樣式的種類、尺寸的差異,以及了解網(wǎng)格的使用和圖標(biāo)集的統(tǒng)一。

1. 圖標(biāo)的兩種類型

  • 象形圖標(biāo)。最流行的圖標(biāo)類型,象形圖標(biāo)是通過(guò)其相似性或?qū)ξ锢韺?duì)象的引用來(lái)傳達(dá)含義的符號(hào)。例如,飛機(jī)圖形意味著機(jī)場(chǎng)。

  • 表意圖標(biāo)。這種類型的圖標(biāo)稍微有點(diǎn)復(fù)雜,通常,表意文字是基本的形狀,但他們的含義需要一些學(xué)習(xí)成本。例如一個(gè)圓里包含著一條橫線,意味著「否」,另一個(gè)好的例子是「加」、「減」、「等號(hào)」這些表意符號(hào)。

5.jpg

△ 象形圖標(biāo)和表意圖標(biāo)的組合使用

通常情況下,象形圖標(biāo)會(huì)和表意圖標(biāo)組合使用來(lái)傳達(dá)正確的信息,比如「添加文檔」圖標(biāo)會(huì)通過(guò)象形圖標(biāo)「文檔」和表意圖標(biāo)「加號(hào)」來(lái)展現(xiàn)。

2. 圖標(biāo)的風(fēng)格

圖標(biāo)可以分為許多不同的風(fēng)格。其中最常見(jiàn)的是:

6.jpg

△ 6種常見(jiàn)的圖標(biāo)風(fēng)格

3. 圖標(biāo)的尺寸和屬性

創(chuàng)建圖標(biāo)時(shí)所要遵循的重要規(guī)則是保證整套圖標(biāo)的統(tǒng)一,那么圖標(biāo)設(shè)計(jì)的尺寸是多大呢?

7.jpg

△ 圖標(biāo)的不同尺寸

如果你為iOS和Android設(shè)計(jì)制作圖標(biāo),首先應(yīng)該確保圖標(biāo)尺寸符合設(shè)計(jì)規(guī)范。然后在確定圖標(biāo)大小。

如果你想為某個(gè)網(wǎng)站制作圖標(biāo)或者只是練習(xí),那么請(qǐng)使用預(yù)設(shè)大?。?/span>

16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128, 256×256, 512×512;

溫馨提示:如果你是一位圖標(biāo)初學(xué)者,請(qǐng)盡量避免使用過(guò)小的圖標(biāo)尺寸,因?yàn)榭赡茉O(shè)計(jì)起來(lái)比較困難,64 – 96px 是一個(gè)不錯(cuò)的選擇。

4. 網(wǎng)格的運(yùn)用

很多的精致的圖標(biāo)都在使用網(wǎng)格進(jìn)行規(guī)范化設(shè)計(jì),比如 iOS 和 Android 的圖標(biāo)設(shè)計(jì)規(guī)范。

8.jpg

△ iOS的圖標(biāo)網(wǎng)格規(guī)范

但是對(duì)于新人設(shè)計(jì)師來(lái)講,第一個(gè)或者前期的圖標(biāo)制作沒(méi)有必要用到網(wǎng)格。并不是說(shuō)網(wǎng)格不重要,而是應(yīng)該通過(guò)大量的圖標(biāo)制作來(lái)感受網(wǎng)格真正的作用。

那么什么是圖標(biāo)的網(wǎng)格系統(tǒng)呢?

將圖標(biāo)網(wǎng)格視為一組用于在整個(gè)圖標(biāo)集中保持一致性的規(guī)則。

什么時(shí)候使用網(wǎng)格呢?

如果你要?jiǎng)?chuàng)建一個(gè)圖標(biāo)集,比如一套50個(gè)的圖標(biāo)。則需要使用網(wǎng)格確保所有圖標(biāo)的統(tǒng)一。創(chuàng)建大量圖標(biāo)的時(shí)候,首先需要決定網(wǎng)格和間距以及對(duì)齊規(guī)則。

還有一個(gè)場(chǎng)景需要用到網(wǎng)格,那就是當(dāng)你制作一些平臺(tái)性的圖標(biāo)時(shí),比如 iOS 和 Android 的圖標(biāo)制作,你需要運(yùn)用網(wǎng)格保證統(tǒng)一的體驗(yàn)。

如何使用網(wǎng)格?

大多數(shù)情況下,使用一些簡(jiǎn)單方便的網(wǎng)格會(huì)更加有助于你的圖標(biāo)設(shè)計(jì),比如下面這套網(wǎng)格,把你的圖標(biāo)放置在內(nèi)部方形中,只有當(dāng)你的圖標(biāo)需要視覺(jué)上更大的填補(bǔ)空間時(shí),可以所放至外部正方形的大小。比如,正方形看起來(lái)比同一大小的圓更大,因?yàn)樗加酶嘁曈X(jué)空間。所以這個(gè)時(shí)候需要適當(dāng)?shù)姆糯髨A形來(lái)達(dá)到視覺(jué)平衡。

9.jpg

△ 簡(jiǎn)單方便的網(wǎng)格系統(tǒng)

5. 統(tǒng)一性的圖標(biāo)設(shè)計(jì)

完成整套統(tǒng)一的圖標(biāo)是一個(gè)巨大的挑戰(zhàn),所以這篇文章能夠有效的幫你克服這一點(diǎn)。圖標(biāo)為什么需要統(tǒng)一性?

10.jpg

△ 統(tǒng)一性的圖標(biāo)設(shè)計(jì)

圖標(biāo)設(shè)計(jì)不僅僅是代表真實(shí)對(duì)象的圖形符號(hào)。它更是一種獨(dú)特的語(yǔ)言,其中每個(gè)圖標(biāo)都具有專屬的意義。但是,當(dāng)他們結(jié)合在一起,才會(huì)傳達(dá)一整套的信息,與受眾展開(kāi)真正的對(duì)話。你使用圖標(biāo)與數(shù)字世界當(dāng)中的人們交流,就像你在現(xiàn)實(shí)世界中與你的伴侶說(shuō)話一樣。

但是在整套圖標(biāo)中使用不同的樣式就像一句話中混合了多種語(yǔ)言,因此很難被理解,并且會(huì)對(duì)人們?cè)斐衫_。

11.jpg

△ 整套圖標(biāo)的風(fēng)格設(shè)計(jì)

  • 堅(jiān)持一種風(fēng)格,聽(tīng)起來(lái)顯而易見(jiàn),然而這是整套圖標(biāo)設(shè)計(jì)中最關(guān)鍵的一點(diǎn),如果你想制作出色、精致并且統(tǒng)一的圖標(biāo),請(qǐng)先確定統(tǒng)一的風(fēng)格樣式,然后再開(kāi)始制作圖標(biāo)。你可以參考不同的樣式,然后選擇最合適的一款。當(dāng)你決定使用一種風(fēng)格時(shí),請(qǐng)遵循這種風(fēng)格制作所有的圖標(biāo)。

  • 保持相同的風(fēng)格,與上面所說(shuō)的風(fēng)格略微不同,這里的相同風(fēng)格是指在圖標(biāo)結(jié)構(gòu)上保持相同,比如相同的圓角,邊框粗細(xì)等等。

  • 注意尺寸,保證整套圖標(biāo)的尺寸一致,不僅能夠至于相同的方形框架內(nèi),同時(shí)視覺(jué)上應(yīng)該看起來(lái)平衡,這里要注意圓形、方形、三角形的視覺(jué)平衡。

  • 嘗試使用網(wǎng)格,制作整套圖標(biāo)時(shí),網(wǎng)格的使用可以很好的保持圖標(biāo)的尺寸統(tǒng)一。

  • 使用一些相同的元素,如果您在一個(gè)圖標(biāo)中使用了一個(gè)16px的圓形,而另一個(gè)圖標(biāo)需要類似的圓形,只需復(fù)制該圓形。毫無(wú)疑問(wèn),整個(gè)集合中運(yùn)用相等大小的對(duì)象使它看起來(lái)更加統(tǒng)一。

  • 使用相同的配色方案,選擇一套配色方案,將它們添加到色板中,然后盡可能地使用相同的配色方案,不要為了某個(gè)圖標(biāo)的好看而使用過(guò)多的色彩,圖標(biāo)的清晰度和識(shí)別度要比好看更重要。


0
評(píng)論區(qū)(0)
正在加載評(píng)論...