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

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

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

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

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

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

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

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

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

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

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

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

導(dǎo)航鏈接

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

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

視覺內(nèi)容識別

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

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

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

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

矢量背景

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

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

設(shè)計教程

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

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

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