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

2015/1/19 13:33:34來源：三聯(lián)

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

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

　　在網(wǎng)頁設(shè)計剛剛興起的時代，小圖標(biāo)就已經(jīng)被早期的網(wǎng)頁設(shè)計師和開發(fā)者投入使用了。這些圖案和標(biāo)識通常是常見的、易于接受的、功能型的圖形(文件夾、打印機、鼠標(biāo)、箭頭等)，在隨后的20多年間，這些圖標(biāo)逐漸發(fā)展成約定俗成的一套圖形語言。在接下來的設(shè)計指南中，圖趣網(wǎng)這里分享一些網(wǎng)頁設(shè)計中圖標(biāo)使用的技巧，以及一些實用的免費圖標(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)也正在逐步跟進。從風(fēng)格上來說，圖標(biāo)并無對錯之分，只能說是各自選擇和偏向不一樣罷了。

網(wǎng)頁設(shè)計中的圖標(biāo)的使用技巧與資源合集三聯(lián)

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

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

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

　　當(dāng)然，你也可以為品牌設(shè)計一系列不同的圖標(biāo)，每個圖標(biāo)包含不同的效果，傳達(dá)不同的理念。圖標(biāo)設(shè)計的可能性是如此之多，你甚至可以設(shè)計出以個圖標(biāo)大合集，讓所有不同的圖標(biāo)擁有相同的風(fēng)格。由于每個圖標(biāo)都是獨特的存在，但是風(fēng)格又如此一致，當(dāng)它們運用到網(wǎng)頁中的時候，可以讓整個網(wǎng)頁擁有獨特的氣質(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)卻是某個免費圖標(biāo)集的一部分。你可以在幾十個不同的網(wǎng)站上看到這些相同的圖標(biāo)，也就是說，這些圖標(biāo)作為潛在品牌設(shè)計的獨特性，已經(jīng)被忽略掉了，他們其實可以做的更好。

　　也正是因此，我常常建議有報復(fù)的圖標(biāo)設(shè)計師去學(xué)習(xí)為界面單獨定制成套的圖標(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)你向下滾動的時候，每個板塊都有單獨對應(yīng)的圖標(biāo)，為你說明這以塊是干啥的。

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