當(dāng)前位置：首頁(yè)>ps入門(mén)教程>ps基礎(chǔ)教程>設(shè)計(jì)知識(shí)>教程內(nèi)容

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

來(lái)源：優(yōu)設(shè) 作者：陳子木學(xué)習(xí)：2417人次

圖標(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ì)師和開(kāi)發(fā)者投入使用了。這些圖案和標(biāo)識(shí)通常是常見(jiàn)的、易于接受的、功能型的圖形（文件夾、打印機(jī)、鼠標(biāo)、箭頭等），在隨后的20多年間，這些圖標(biāo)逐漸發(fā)展成約定俗成的一套圖形語(yǔ)言。在接下來(lái)的設(shè)計(jì)指南中，我想分享一些網(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ù)的擁簇。而之前一直不溫不火的線(xiàn)性圖標(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)是顯而易見(jiàn)的事情，但是它依然值得一提，因?yàn)槟切﹥?yōu)秀的網(wǎng)站通常有著優(yōu)秀得令人難以置信的品牌設(shè)計(jì)。一個(gè)優(yōu)秀的圖標(biāo)能向用戶(hù)傳達(dá)出品牌的理念和情感。當(dāng)你為一個(gè)企業(yè)或者網(wǎng)站進(jìn)行品牌設(shè)計(jì)的時(shí)候，品牌的圖標(biāo)、吉祥物或者符號(hào)應(yīng)該讓品牌和它的用戶(hù)之間形成獨(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ō)是專(zhuān)門(mén)為網(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)品牌、客戶(hù)以及項(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)橛脩?hù)會(huì)主動(dòng)去了解每一個(gè)菜單的名稱(chēng)。但是如果在橫向或者縱向上有十幾個(gè)導(dǎo)航鏈接的話(huà)，通過(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è)看到類(lèi)似的設(shè)計(jì)效果。文字小區(qū)塊詳細(xì)地描述了他們的服務(wù)、咖啡和禮品卡的信息，而頂部的手繪圖標(biāo)則從視覺(jué)上闡明了內(nèi)容的性質(zhì)，更重要的是，這三個(gè)圖標(biāo)迅速地抓住了用戶(hù)的眼球。

矢量背景

從重復(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。