打開手機(jī)，桌面上都是圖標(biāo)。打開電腦，桌面上同樣有很多圖標(biāo)。但是，在很長時間里，網(wǎng)站其實(shí)沒有很多的圖標(biāo)，有的網(wǎng)站甚至只有一個LOGO。但是，逐漸網(wǎng)站上的圖標(biāo)越來越多了。
 

網(wǎng)站為什么需要圖標(biāo)？

一個企業(yè)官網(wǎng)上，為何需要圖標(biāo)呢？我們認(rèn)為有三個原因。
其一，響應(yīng)式網(wǎng)站的出現(xiàn)。需要在較小的手機(jī)屏幕上呈現(xiàn)網(wǎng)站，就需要減少網(wǎng)站的信息量。而圖形傳達(dá)的信息量要超過文字，當(dāng)占據(jù)的版面相同的時候。所以，響應(yīng)式網(wǎng)站的圖標(biāo)要多一些。
其二，受到手機(jī)系統(tǒng)的影響。無論是安卓還是蘋果系統(tǒng)，都是以“圖標(biāo)”作為入口的，圖標(biāo)是重要的識別方式。所以，自從智能手機(jī)出現(xiàn)之后，網(wǎng)站的圖標(biāo)開始增多。
其三，受到APP設(shè)計(jì)的影響。一些公司需要APP、網(wǎng)站、小程序等端口設(shè)計(jì)保持一致，所以，網(wǎng)站的圖標(biāo)數(shù)量也就增多了。

網(wǎng)站圖標(biāo)數(shù)量統(tǒng)計(jì)

我們發(fā)現(xiàn)，不同類型的網(wǎng)站，圖標(biāo)數(shù)量是存在巨大的差別的。我們對企業(yè)網(wǎng)站圖標(biāo)數(shù)量多少排列如下：
圖標(biāo)數(shù)量最多：商城類網(wǎng)站。通常來說，購物網(wǎng)站的圖標(biāo)數(shù)量比較多。我們分析認(rèn)為，這其中有兩個原因。其一是簡單的圖標(biāo)，可以引發(fā)購物的欲望；其二是模仿原因。一些一線電商平臺，都采用圖標(biāo)設(shè)計(jì)，而不是文字說明。
圖片數(shù)量次多：企業(yè)官網(wǎng)。企業(yè)官網(wǎng)的導(dǎo)航、產(chǎn)品詳情頁、交互等方面，也會使用圖標(biāo)。
圖片數(shù)量較少：資訊類網(wǎng)站。我們發(fā)現(xiàn)，新聞類網(wǎng)站、資訊網(wǎng)站，圖標(biāo)數(shù)量較少。

網(wǎng)站圖標(biāo)設(shè)計(jì)原則

網(wǎng)站圖標(biāo)設(shè)計(jì)其實(shí)屬于“UI設(shè)計(jì)范疇”。而UI設(shè)計(jì)分為三個層次，一是擬物，簡單來說就是“能看明白”，看到了圖標(biāo)，明白是什么意思；二是協(xié)調(diào)統(tǒng)一，不同圖標(biāo)其風(fēng)格、顏色、背景、明暗的統(tǒng)一；三是情感傳遞，通過交互，能夠產(chǎn)生較好的用戶體驗(yàn)。
基于如上分析，我們來看看網(wǎng)站圖標(biāo)應(yīng)該如何設(shè)計(jì)？
第一，能看懂。即，圖標(biāo)可以準(zhǔn)確傳達(dá)內(nèi)容。做到這一點(diǎn)并不容易。以目前流行的“擬物化”圖標(biāo)設(shè)計(jì)為例，如果我們?yōu)?ldquo;直播”設(shè)計(jì)圖標(biāo)，可以設(shè)計(jì)成一個攝像機(jī)或者電視的輪廓，這樣用戶基本能夠看得懂，但是如果設(shè)計(jì)成為“一個眼睛”的輪廓，則傳達(dá)的意思就比較模糊。
第二，要進(jìn)化。圖標(biāo)需要根據(jù)消費(fèi)趨勢和用戶群體進(jìn)行變化。以電視圖標(biāo)為例，很多網(wǎng)站的電視圖標(biāo)是老式電視，但是對于完全沒有見過老式電視的00后來說，可能會讓其產(chǎn)生困惑。此時，就需要對圖標(biāo)進(jìn)行更新和重新設(shè)計(jì)。
第三，要統(tǒng)一。如果是多個圖標(biāo)，圖標(biāo)的高光、背景、形態(tài)、風(fēng)格要進(jìn)行協(xié)調(diào)和統(tǒng)一，避免差異性太大導(dǎo)致的突兀。
第四，可說明。圖標(biāo)+文字說明，可以更清楚地闡釋想要表達(dá)的內(nèi)容，不能過于追求“極簡風(fēng)格”，而讓用戶看不明白。