網(wǎng)頁(yè)設(shè)計(jì)中的圖標(biāo)的使用技巧與資源合集

提到圖標(biāo)設(shè)計(jì)，似乎每個(gè)設(shè)計(jì)師都有話說(shuō)，但是要做好圖標(biāo)設(shè)計(jì)真的那么容易么?今天這篇文章針對(duì)網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的圖標(biāo)設(shè)計(jì)進(jìn)行了相對(duì)全面的梳理，從設(shè)計(jì)技巧到設(shè)計(jì)資源一應(yīng)俱全，但愿能幫上你!

　　圖標(biāo)是每一個(gè)現(xiàn)代UI中不可或缺的組成部分，它們不僅能協(xié)助UI布局組織內(nèi)容，而且輕量級(jí)的圖標(biāo)融入界面也不會(huì)喧賓奪主。不僅手機(jī)和平板的APP UI中會(huì)大量用到各種圖標(biāo)，而且iPod和智能手表的界面中也是如此，這正是因?yàn)閳D標(biāo)具備快速直觀傳達(dá)信息的能力。

　　在網(wǎng)頁(yè)設(shè)計(jì)剛剛興起的時(shí)代，小圖標(biāo)就已經(jīng)被早期的網(wǎng)頁(yè)設(shè)計(jì)師和開發(fā)者投入使用了。這些圖案和標(biāo)識(shí)通常是常見的、易于接受的、功能型的圖形(文件夾、打印機(jī)、鼠標(biāo)、箭頭等)，在隨后的20多年間，這些圖標(biāo)逐漸發(fā)展成約定俗成的一套圖形語(yǔ)言。在接下來(lái)的設(shè)計(jì)指南中，圖趣網(wǎng)這里分享一些網(wǎng)頁(yè)設(shè)計(jì)中圖標(biāo)使用的技巧，以及一些實(shí)用的免費(fèi)圖標(biāo)素材合集，希望你能喜歡!

　　圖標(biāo)設(shè)計(jì)樣式

　　我們通常所說(shuō)的“圖標(biāo)設(shè)計(jì)”其實(shí)覆蓋了相當(dāng)大的一個(gè)范圍。小到網(wǎng)頁(yè)中那些純色扁平小標(biāo)識(shí)，大到PS和AI精雕細(xì)琢的擬物風(fēng)APP圖標(biāo)，都在圖標(biāo)設(shè)計(jì)的范疇內(nèi)。每個(gè)圖標(biāo)設(shè)計(jì)項(xiàng)目都有著不同的設(shè)計(jì)需求和圖標(biāo)風(fēng)格，這些不同造就了圖標(biāo)設(shè)計(jì)的差異化。

　　目前所流行的極簡(jiǎn)風(fēng)和扁平化設(shè)計(jì)，已經(jīng)在全世界設(shè)計(jì)師中擁有了無(wú)數(shù)的擁簇。而之前一直不溫不火的線性圖標(biāo)也已經(jīng)成為了目前iOS系統(tǒng)的首選圖標(biāo)，其他的移動(dòng)操作系統(tǒng)也正在逐步跟進(jìn)。從風(fēng)格上來(lái)說(shuō)，圖標(biāo)并無(wú)對(duì)錯(cuò)之分，只能說(shuō)是各自選擇和偏向不一樣罷了。

　　在我看來(lái)，扁平化設(shè)計(jì)和擬物化設(shè)計(jì)之間的競(jìng)爭(zhēng)對(duì)比，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)而言是一件無(wú)比美妙的事情。這也對(duì)圖標(biāo)設(shè)計(jì)產(chǎn)生了影響，許多藝術(shù)領(lǐng)域的概念被引入到圖標(biāo)設(shè)計(jì)中來(lái)，比如光影變化，深度，等等。作為設(shè)計(jì)師的你如果更傾向于扁平化設(shè)計(jì)，那么你需要學(xué)習(xí)創(chuàng)建紋理，控制陰影，讓你的設(shè)計(jì)看起來(lái)富有真實(shí)感。為此你需要進(jìn)行大量的練習(xí)，但是這絕對(duì)是值得的。

　　企業(yè)品牌設(shè)計(jì)

　　雖然品牌設(shè)計(jì)看起來(lái)是顯而易見的事情，但是它依然值得一提，因?yàn)槟切﹥?yōu)秀的網(wǎng)站通常有著優(yōu)秀得令人難以置信的品牌設(shè)計(jì)。一個(gè)優(yōu)秀的圖標(biāo)能向用戶傳達(dá)出品牌的理念和情感。當(dāng)你為一個(gè)企業(yè)或者網(wǎng)站進(jìn)行品牌設(shè)計(jì)的時(shí)候，品牌的圖標(biāo)、吉祥物或者符號(hào)應(yīng)該讓品牌和它的用戶之間形成獨(dú)特的情感聯(lián)系。

　　當(dāng)然，你也可以為品牌設(shè)計(jì)一系列不同的圖標(biāo)，每個(gè)圖標(biāo)包含不同的效果，傳達(dá)不同的理念。圖標(biāo)設(shè)計(jì)的可能性是如此之多，你甚至可以設(shè)計(jì)出以個(gè)圖標(biāo)大合集，讓所有不同的圖標(biāo)擁有相同的風(fēng)格。由于每個(gè)圖標(biāo)都是獨(dú)特的存在，但是風(fēng)格又如此一致，當(dāng)它們運(yùn)用到網(wǎng)頁(yè)中的時(shí)候，可以讓整個(gè)網(wǎng)頁(yè)擁有獨(dú)特的氣質(zhì)，足以從諸多設(shè)計(jì)中脫穎而出。

　　MailBakery 就是這樣一個(gè)典型的案例，它使用了個(gè)大圖來(lái)宣傳它們的服務(wù)。當(dāng)光標(biāo)移動(dòng)到下方每一個(gè)圖標(biāo)上的時(shí)候，上方的大圖內(nèi)容會(huì)被替換成相應(yīng)的圖片內(nèi)容，這樣的圖標(biāo)+圖片的組合在設(shè)計(jì)上保持著高度的一致性。

　　這些圖標(biāo)所對(duì)應(yīng)的圖片可以說(shuō)是專門為網(wǎng)站定制的，但是這些圖標(biāo)卻是某個(gè)免費(fèi)圖標(biāo)集的一部分。你可以在幾十個(gè)不同的網(wǎng)站上看到這些相同的圖標(biāo)，也就是說(shuō)，這些圖標(biāo)作為潛在品牌設(shè)計(jì)的獨(dú)特性，已經(jīng)被忽略掉了，他們其實(shí)可以做的更好。

　　也正是因此，我常常建議有報(bào)復(fù)的圖標(biāo)設(shè)計(jì)師去學(xué)習(xí)為界面單獨(dú)定制成套的圖標(biāo)集。對(duì)培養(yǎng)品牌、客戶以及項(xiàng)目而言，這都是更為長(zhǎng)遠(yuǎn)更有價(jià)值的事情。

　　導(dǎo)航鏈接

　　在過(guò)去，網(wǎng)頁(yè)上的圖標(biāo)常常用作內(nèi)容導(dǎo)航，也就是說(shuō)，圖標(biāo)的內(nèi)容和含義，同圖標(biāo)所指向的頁(yè)面內(nèi)容/性質(zhì)高度相關(guān)或者一致。今天，F(xiàn)acebook上的導(dǎo)航也遵循著同樣的原則。

　　雖然你不會(huì)一直遵循這樣的設(shè)計(jì)方式，但是有必要且值得了解它。下拉菜單鏈接通常非常實(shí)用，因?yàn)橛脩魰?huì)主動(dòng)去了解每一個(gè)菜單的名稱。但是如果在橫向或者縱向上有十幾個(gè)導(dǎo)航鏈接的話，通過(guò)圖標(biāo)來(lái)識(shí)別是比較可靠的方案。

　　視覺(jué)內(nèi)容識(shí)別

　　在網(wǎng)頁(yè)設(shè)計(jì)中使用業(yè)內(nèi)圖標(biāo)最主要的原因是用來(lái)區(qū)分內(nèi)容。圖標(biāo)可以從視覺(jué)上更清晰地傳達(dá)信息，能夠平衡包含大量文本的布局，所以，如何通過(guò)一個(gè)簡(jiǎn)單的圖標(biāo)來(lái)準(zhǔn)確傳達(dá)信息是設(shè)計(jì)師的必修課。

　　我最喜歡的案例就是GitHub的教學(xué)頁(yè)面。頁(yè)頭使用Github的吉祥物和粉筆黑板營(yíng)造出教育的氛圍，當(dāng)你向下滾動(dòng)的時(shí)候，每個(gè)板塊都有單獨(dú)對(duì)應(yīng)的圖標(biāo)，為你說(shuō)明這以塊是干啥的。

　　值得注意的是，每個(gè)圖標(biāo)都使用的是手繪的效果，雖然色彩不同，但是整體風(fēng)格高度一致，明顯是統(tǒng)一設(shè)計(jì)的一整套圖標(biāo)。更重要的是，每一個(gè)圖標(biāo)都明確直觀地描述了它所在區(qū)塊的內(nèi)容。文字內(nèi)容足以描述清楚細(xì)節(jié)，但是圖標(biāo)能高度概括地闡明信息。

　　你可以在 Glazed & Infused 的首頁(yè)看到類似的設(shè)計(jì)效果。文字小區(qū)塊詳細(xì)地描述了他們的服務(wù)、咖啡和禮品卡的信息，而頂部的手繪圖標(biāo)則從視覺(jué)上闡明了內(nèi)容的性質(zhì)，更重要的是，這三個(gè)圖標(biāo)迅速地抓住了用戶的眼球。

　　矢量背景

　　從重復(fù)平鋪背景到矢量對(duì)象，你可以用矢量圖形做很多事情。對(duì)網(wǎng)站背景的處理方式，已經(jīng)遠(yuǎn)不止于平鋪紋理那么單一了。通過(guò)矢量圖形來(lái)創(chuàng)建覆蓋整個(gè)背景的場(chǎng)景已經(jīng)很容易了。

　　矢量圖形可以很輕松地縮放，但是很難創(chuàng)造出逼真的效果。想制作出復(fù)雜樣式的矢量圖形并不容易，你需要通過(guò)大量的練習(xí)來(lái)熟悉在圖形上構(gòu)建圖形的技巧，不過(guò)一旦學(xué)會(huì)還是蠻有趣的。在這里我們推薦一個(gè)好用的工具：Bota Iusti。

　　設(shè)計(jì)教程

　　跟蹤學(xué)習(xí)在線的設(shè)計(jì)教程是提高圖標(biāo)設(shè)計(jì)技能的重要方式。想要精通設(shè)計(jì)技能沒(méi)有捷徑，唯有不斷學(xué)習(xí)，堅(jiān)持練習(xí)。

　　雖然圖標(biāo)設(shè)計(jì)是一個(gè)廣泛的領(lǐng)域，但是許多教程是可以舉一反三的，接下來(lái)提供的一系列教程非常實(shí)用，希望你能通過(guò)學(xué)習(xí)融入日常的設(shè)計(jì)中去。

　　16×16 px Icons

　　Weather Line Icons

　　Flat Social Icon

　　Tab Bar Icons

　　Bat Icon

　　Gem Icons

　　Water Pistol

　　Mail Alert

　　Notebook

　　Almost Flat

　　免費(fèi)圖標(biāo)

　　40 Flat Icons

　　Mini Icons

　　Colorful Iconset

　　Simple Flat

　　Sport & Fitness

　　Chat & Email

　　Atitel Icons

　　Tab Bar Icons

　　Simple Lines

　　Flatified

　　Web Design Iconset

　　iOS Settings Icon

　　Colorful Switch

　　Synthesizer

　　Book App Icon