在做視覺(jué)設(shè)計(jì)時(shí)，如何高效地使用圖標(biāo)是一門學(xué)問(wèn)：該使用什么樣的圖標(biāo)？圖標(biāo)該放在哪里？大小如何？圖標(biāo)的使用是否幫助用戶更好更快的理解內(nèi)容，亦或是增加了他們的理解負(fù)擔(dān)甚至產(chǎn)生誤導(dǎo)？今天恰好看到了一篇很好的文章，可以幫助我們了解該如何使用圖標(biāo)來(lái)支持內(nèi)容，故翻譯如下：

為什么使用圖標(biāo)？設(shè)計(jì)就是傳達(dá)信息：如果你的網(wǎng)站不能吸引用戶，這個(gè)問(wèn)題不在于你分享的信息有多重要、有多刺激。在訪問(wèn)一個(gè)網(wǎng)站的最初，大多數(shù)用戶首先掃描頁(yè)面來(lái)尋找視覺(jué)上看著有趣的內(nèi)容，只有某些事物引起了他們的注意力，他們才真正開(kāi)始閱讀。圖標(biāo)是一個(gè)簡(jiǎn)單、有效的方式吸引用戶閱讀你網(wǎng)站上的內(nèi)容。

圖標(biāo)起著與分段一樣的心理效果：在視覺(jué)上，圖標(biāo)打破了內(nèi)容，使之不那么讓人生卻。通過(guò)圖標(biāo)將內(nèi)容劃分成幾個(gè)容易理解的段落和重點(diǎn)，這樣的頁(yè)面很容易閱讀，在視覺(jué)上也足夠有趣以維持用戶的注意。因此，不要再浪費(fèi)時(shí)間寫那么多無(wú)人閱讀的內(nèi)容了，開(kāi)始使用圖標(biāo)吧！

在本文中，我們將展示很好的例子和網(wǎng)頁(yè)設(shè)計(jì)中使用圖標(biāo)來(lái)支持內(nèi)容的最佳做法。

1.如何使用圖標(biāo)

使用圖標(biāo)的首要目標(biāo)應(yīng)該是幫助用戶更有效地吸收和處理信息。一般的做法是使用大量的空白和那些能增強(qiáng)內(nèi)容的圖標(biāo)。圖標(biāo)通過(guò)給予內(nèi)容更多的實(shí)質(zhì)和有效的傳達(dá)，能很好地豐富內(nèi)容。圖標(biāo)應(yīng)該用來(lái)吸引用戶注意信息內(nèi)容，而不是削弱或取代它。

*讓功能清單更有趣

 列出服務(wù)清單是有效的市場(chǎng)推中實(shí)用、必要的一部分，但本質(zhì)上來(lái)說(shuō)，清單是乏味和無(wú)聊的。在您的功能清單中使用圖標(biāo)將使其更具有吸引力。

280 Slides

* 吸引用戶關(guān)注Web應(yīng)用程序的新功能

 圖標(biāo)是一個(gè)視覺(jué)邀請(qǐng)，吸引用戶去試用Web應(yīng)用程序的最新、最強(qiáng)大的功能。圖標(biāo)應(yīng)該捕捉用戶的注意力，并引導(dǎo)他們到新的功能上。一旦抓住了他們的注意力，告訴他們是什么使得新功能如此偉大。

Coda

*羅列不同的應(yīng)用和產(chǎn)品

在這種情況下，把圖標(biāo)想成是logo，記住logo的目標(biāo)是在產(chǎn)品和特定的圖像建立精神聯(lián)系。圖標(biāo)應(yīng)該獨(dú)特而簡(jiǎn)單的：大部分的圖標(biāo)只有128*128像素的，因此要用最低限度的方法，用少表達(dá)更多的信息。

intridea

*列出您的服務(wù)并增加可讀性

圖標(biāo)應(yīng)與內(nèi)容相關(guān)且設(shè)計(jì)很簡(jiǎn)單。考慮您試圖表達(dá)的內(nèi)容是什么并在此基礎(chǔ)上創(chuàng)建圖標(biāo)。網(wǎng)站或文章的主題是什么？使用什么顏色？是什么風(fēng)格？現(xiàn)代？經(jīng)典？在視覺(jué)上，圖標(biāo)應(yīng)與網(wǎng)站整體的內(nèi)容和個(gè)性所傳達(dá)的思想相統(tǒng)一。

j.Alexander Woodworking

2.目的和放置的位置

圖標(biāo)的使用讓你的網(wǎng)站顯得友好、吸引人和專業(yè)，這些表明了你注重細(xì)節(jié)，哪怕這個(gè)細(xì)節(jié)很小很小。讓你的圖標(biāo)發(fā)揮創(chuàng)意：標(biāo)題、工具條、功能清單都是放置圖標(biāo)的好地方。

一個(gè)很簡(jiǎn)單的圖標(biāo)能增加網(wǎng)站的魅力和個(gè)性。

Coffeenatic

*讓用戶參與到擁有超長(zhǎng)內(nèi)容的網(wǎng)頁(yè)中

使用能概括段落大意的圖標(biāo)，這將更便于讀者理解文章。

Rackspace

在文章的不同章節(jié)間使用圖標(biāo)，可以提供視覺(jué)注意點(diǎn)來(lái)劃分這些章節(jié)。

Defined Clarity

*大小并不重要，即使是小圖標(biāo)也是有效果的

小圖標(biāo)提供的視覺(jué)趣味與大圖標(biāo)的相差無(wú)異，卻不會(huì)讓用戶分心。確保圖標(biāo)容易辨識(shí)并和內(nèi)容緊密相關(guān)。

Morgan Hayes

*把圖標(biāo)放置在段落的右側(cè)

圖標(biāo)的放置不要局限于常規(guī)用法，把圖標(biāo)放在右側(cè)比較少見(jiàn)，因此會(huì)更有視覺(jué)效果。但是請(qǐng)注意，把圖標(biāo)放置在右側(cè)有時(shí)候看起來(lái)會(huì)顯得凌亂。

South Creative

*改變圖標(biāo)的大小和位置

發(fā)揮創(chuàng)意！改變圖標(biāo)的大小和位置可以讓內(nèi)容更具活力和趣味。

Media Temple

3.選擇你的風(fēng)格

說(shuō)到風(fēng)格，它的目的是讓人有深刻印象。如果你期望設(shè)計(jì)是獨(dú)特的，那么可以使用新穎的圖標(biāo)，但圖標(biāo)的有效性至關(guān)重要。請(qǐng)記住，使用圖標(biāo)是為了增強(qiáng)內(nèi)容和設(shè)計(jì)。不要簡(jiǎn)單地在iStockPhoto上購(gòu)買看起來(lái)很酷的圖標(biāo)，而是要考慮你的網(wǎng)站風(fēng)格。

同時(shí)，圖標(biāo)的匹配性同樣重要。把不相匹配的圖標(biāo)放在一起，無(wú)論他們單個(gè)看起來(lái)有多酷，都是個(gè)明顯的設(shè)計(jì)錯(cuò)誤，非常不專業(yè)。以下是一些圖標(biāo)有效地結(jié)合于各自網(wǎng)站風(fēng)格的例子。

使用淺色和很酷的3D設(shè)計(jì)的圖標(biāo)，提升了網(wǎng)站的外觀和感覺(jué)。

GoodBarry

正如下面例子所示的，簡(jiǎn)潔是有吸引力和實(shí)用的。

CrowdSPRING

在2D圖標(biāo)上實(shí)用粗糙低劣的風(fēng)格可以增加很多深度：

Take the walk

選擇一個(gè)獨(dú)特和一致的風(fēng)格，可以使頁(yè)面有活力且專業(yè)：

Squarespace

單色的圖標(biāo)可以幫助突出內(nèi)容而不會(huì)分散注意力：

Studio 7Designs

Gist

不要僅僅因?yàn)閳D標(biāo)看起來(lái)很酷而使用它們，選擇哪些與你的風(fēng)格和品牌相符合的圖標(biāo)：

Treemo

除此之外，還有很多很好的例子，限于篇幅，這里就不一一列舉了。如果大家有興趣，可以查看原文How to use icons to support content in Web design 的第四部分-Additional Examples ^_^