圖標(biāo)在網(wǎng)頁設(shè)計中用途廣泛，幾乎每個網(wǎng)站中都存在著圖標(biāo)。通過這些小小的圖標(biāo)，可以方便的實現(xiàn)視覺引導(dǎo)和功能劃分。如果選用恰當(dāng)，圖標(biāo)能和頁面中的圖片有機(jī)融合，保持視覺上的一致性，同時也能夠和整個網(wǎng)站的風(fēng)格相契合。圖標(biāo)并不是華而不實的小玩意兒，小圖標(biāo)有大用處。在網(wǎng)頁設(shè)計中，如果設(shè)計師并不擅長圖標(biāo)設(shè)計，那么就需要在圖標(biāo)選擇上下功夫了。

一般來說，根據(jù)使用手法、使用場合的不同，一張圖像可以有多種解讀，圖標(biāo)亦如此。圖標(biāo)不但能夠吸引用戶的注意力，還能分割頁面中的區(qū)域，最為重要的事，圖標(biāo)能夠提供一種視覺隱喻，能賦予物體某種含義，這樣用戶掃一眼便能知曉功能，因此，圖標(biāo)是一種提高用戶體驗的工具。

圖標(biāo)在網(wǎng)頁設(shè)計中的作用

圖標(biāo)可以說是一種不穩(wěn)定的視覺元素，因為圖標(biāo)包含了太多的意象，可以扮演不同的角色。一個鉛筆的圖標(biāo)，就能代表很多意義，可以代表設(shè)計，也可以代表出售鉛筆，也可以代表素描。圖標(biāo)最主要應(yīng)用于：

• 視覺上分割內(nèi)容:讓內(nèi)容更具有吸引力和可讀性。經(jīng)常被應(yīng)用到網(wǎng)站的主體、列表、或者其他文本較多的元素中。

• 作為概念的視覺參照物，快速引導(dǎo)用戶:這在導(dǎo)航元素中最為常見（上圖）——比如放大鏡代表搜索——非常簡單，有時候連文本注釋都不需要。

效果突出，因此圖標(biāo)被廣泛使用。因此可以在網(wǎng)頁設(shè)計幾乎每個元素中都找到圖標(biāo)的身影：標(biāo)題、腳注、導(dǎo)航條、列表；圖標(biāo)可以大幅提升頁面中元素的瀏覽效果。

優(yōu)秀的圖標(biāo)具備哪些優(yōu)點？

我們不難發(fā)現(xiàn)，圖標(biāo)是優(yōu)秀網(wǎng)頁設(shè)計中不可或缺的部分，但如果使用不當(dāng)或者圖標(biāo)設(shè)計的不到位，那么辨識度就很差，用戶也難以理解。因此我們需要 外觀精致、意味深刻的圖標(biāo)，比如上面這套就不錯。

盡管圖標(biāo)設(shè)計說來話長，而且也比較復(fù)雜，但是圖標(biāo)對各種設(shè)計來說，都大有裨益。無論是何種設(shè)計，如果想要使用圖標(biāo)，那么必須記住下面這兩點：概念傳達(dá)完善、具備視覺有效性。

如何保持圖標(biāo)的視覺有效性？

圖標(biāo)能夠很好的組織相關(guān)內(nèi)容，吸引注意力，將用戶引導(dǎo)至重要信息處，前提是，圖標(biāo)要與內(nèi)容、其他圖標(biāo)、整個網(wǎng)站的視覺風(fēng)格一致。

圖標(biāo)系列應(yīng)該保持視覺統(tǒng)一

對于一組風(fēng)格不統(tǒng)一的圖標(biāo)，即使某款圖標(biāo)設(shè)計的再棒，也要放棄。視覺統(tǒng)一，關(guān)乎到整體設(shè)計。
如何實現(xiàn)視覺上的統(tǒng)一？這里有一些小技巧，包括：

• 使用相同的顏色或者配色，如上圖
  

• 將所有的圖標(biāo)設(shè)置為形狀相同，如上圖。

• 邊界屬性要一致，如上圖。

• 效果要一致，比如說漸變、透明、陰影等效果，如上圖。

最后，還要考慮圖標(biāo)的視覺風(fēng)格是否與內(nèi)容、網(wǎng)站的風(fēng)格一致。

一定限度的自由組合

有時一款網(wǎng)頁設(shè)計僅僅采用一套圖標(biāo)，但如果不夠用，可以嘗試采用多套圖標(biāo)，上圖的This website,就采用了多套圖標(biāo)，只不過這幾套圖標(biāo)的維度相同。而且這幾套圖標(biāo)也不在一塊兒工作，他們應(yīng)用于不同的頁面，彼此之間并無不和諧。只要熟練掌握這種變通的方法，那么圖標(biāo)的選擇更加自由。

圖標(biāo)應(yīng)該和網(wǎng)站整體設(shè)計相配

當(dāng)然，圖標(biāo)與其他設(shè)計元素搭配的方法說不清、道不盡。但是從基本觸發(fā)，有兩種方法：

• 圖標(biāo)與網(wǎng)站整體形成鮮明的對比: 當(dāng)圖標(biāo)作為導(dǎo)航時，這種方法非常奏效，比如上圖的社交媒體鏈接，更能夠吸引注意力。

• 圖標(biāo)的視覺風(fēng)格要與整體設(shè)計風(fēng)格相似: 像上圖中的圖標(biāo)，與整個頁面風(fēng)格完美契合，提供了一種視覺上的和諧感。

如何用圖標(biāo)完善的傳達(dá)概念

通過邏輯性和一致性來傳達(dá)概念。

圖標(biāo)要簡單易懂

每個人都有每個人的見解，圖像的解釋也不是絕對的，可能一部分人能夠理解這款圖標(biāo)，另一部分人就不能。但圖像的傳達(dá)能力比文字強(qiáng)，比如說上圖中的圖標(biāo)，就能清晰的傳達(dá)含義。

但有時候，設(shè)計師試圖在圖標(biāo)信息圖中添加復(fù)雜的概念，結(jié)果圖標(biāo)的混淆作用大約傳達(dá)作用，比如上圖。這種情況下，就需要做進(jìn)一步的信息提煉，回歸內(nèi)容。如果還是無法解決問題，那么說明圖標(biāo)在此次設(shè)計中并不適用。建議多多了解一下信息圖設(shè)計，這種設(shè)計就非常注重圖標(biāo)的概念傳達(dá)。

網(wǎng)頁設(shè)計發(fā)展迅猛，圖標(biāo)設(shè)計同樣進(jìn)步飛快。曾經(jīng)無法用圖標(biāo)傳達(dá)的概念，現(xiàn)今已經(jīng)可以通過技巧來實現(xiàn)傳達(dá)，圖標(biāo)成為了網(wǎng)頁設(shè)計師的重要工具。立足基本，多進(jìn)行實踐與創(chuàng)新，相信你的設(shè)計會越來越充滿藝術(shù)感，越來越易于理解。
 

原文地址：designshack.net
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實戰(zhàn)經(jīng)驗。
設(shè)計微博：擁有粉絲量47萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：