圖標(biāo)在現(xiàn)代網(wǎng)站設(shè)計(jì)中起著重要的作用。事實(shí)上，你會(huì)很難找到一個(gè)不使用圖標(biāo)在一個(gè)窗體或另一個(gè)網(wǎng)站，即使它只是通過使用社會(huì)媒體圖標(biāo)在尾。圖標(biāo)可以在您的網(wǎng)站上，包括：

替換文本內(nèi)容

在網(wǎng)頁設(shè)計(jì)中最廣泛使用的圖標(biāo)是替換文本內(nèi)容。這往往是按鈕或某種聯(lián)系了。

上述社會(huì)媒體圖標(biāo)是這種做法的一個(gè)例子。而不是文字，讀點(diǎn)像“訪問我們的臉譜”，一個(gè)圖標(biāo)與“臉譜”標(biāo)志的使用。這個(gè)文本替換也可以在導(dǎo)航菜單中進(jìn)行。用圖標(biāo)代替按鈕有更長的文本是一種常見的設(shè)計(jì)處理，特別是在應(yīng)用程序設(shè)計(jì)和網(wǎng)站響應(yīng)。

當(dāng)使用圖標(biāo)代替文本，你必須考慮清楚，小心不要過火。使用圖標(biāo)代替文本可以是非常有用的，因?yàn)槟阆Ｍ⒁粋€(gè)更清潔的整體設(shè)計(jì)和一個(gè)簡化的用戶體驗(yàn)，但如果你的圖標(biāo)背后的含義是不清楚的，如果你走到了極端，你如何使用這些圖標(biāo)，你希望實(shí)現(xiàn)的任何好處都會(huì)迅速被撤消。

節(jié)省空間

當(dāng)用圖標(biāo)替換文本內(nèi)容時(shí)，您將不可避免地在設(shè)計(jì)中節(jié)省空間。這是一個(gè)非常有吸引力的選擇響應(yīng)網(wǎng)站的小屏幕版本。當(dāng)空間是在這些小屏幕上的溢價(jià)，使用一個(gè)小圖標(biāo)的菜單項(xiàng)或說明其他行動(dòng)是一種方式，你可以最大限度地發(fā)揮空間，你所做的有。



在物質(zhì)世界中，我們看到了所有的圖標(biāo)。從道路標(biāo)志，用于洗手間的標(biāo)牌，圖標(biāo)可以打破語言障礙和溝通的意義盡管語言差異。這同樣的好處可以應(yīng)用于數(shù)字接口，但又一次，你必須確保你的圖標(biāo)是清晰的，背后的含義是明顯的。

不是所有的類比都為每一種語言，所以你應(yīng)該小心你使用的圖標(biāo)，特別是如果他們是在網(wǎng)站上的關(guān)鍵行動(dòng)。

強(qiáng)調(diào)文本

在某些情況下，圖標(biāo)不用來替換文本，但實(shí)際上是為了增加網(wǎng)站的文本意義。這可能是特別有用的，當(dāng)示出一個(gè)多步的過程，或作為一個(gè)突出的某些功能或功能。一個(gè)簡單的例子可以看出，在About.com。在這個(gè)網(wǎng)頁設(shè)計(jì)部分的主要頁面，你會(huì)看到一個(gè)大的圖片，用于特色文章。在圖片的底部，你會(huì)發(fā)現(xiàn)“分享”這個(gè)詞以及一個(gè)箭頭圖標(biāo)。這個(gè)按鈕可以讓你在社交媒體上分享這篇文章，并將其功能作為文本標(biāo)簽和一個(gè)附帶的圖標(biāo)呈現(xiàn)。在該頁的其他地方，你會(huì)看到它自己使用的圖標(biāo)，這是本文前面提到的“替換文本內(nèi)容”的一個(gè)例子。

增添一些樂趣

另一種圖標(biāo)可以使用的方式是增加一些有趣的網(wǎng)站的設(shè)計(jì)。說明元素可以添加一種新奇的界面，這取決于它們是如何使用的。當(dāng)然，并不是每一個(gè)設(shè)計(jì)都會(huì)允許“有趣”的添加，但是你會(huì)感到驚訝的樂趣和喜悅的感覺可以使用，并采取這種方法的好處是顯著。畢竟，一個(gè)令人愉快的經(jīng)歷往往是一個(gè)令人難忘的經(jīng)歷，創(chuàng)造難忘的經(jīng)歷是所有網(wǎng)站都渴望做的事情。

如何添加圖標(biāo)

有很多的方式，圖標(biāo)可以添加到您的網(wǎng)站。這些包括：

內(nèi)聯(lián)圖像–包括JPG，GIF和PNG圖像文件，可以直接添加到您的網(wǎng)站的HTML代碼。

CSS–也可以使用CSS背景圖像添加到HTML元素，如鏈接圖標(biāo)。你甚至可以使用CSS圖片替換技術(shù)來“消滅”到位的HTML文本，只留下圖標(biāo)。您還可以使用圖像精靈把所有的圖標(biāo)，你需要為你的設(shè)計(jì)成一個(gè)文件，從而減少HTTP請(qǐng)求數(shù)你的網(wǎng)站需要加載這些圖標(biāo)。