圖標(biāo)在網(wǎng)頁(yè)設(shè)計(jì)中的作用
圖標(biāo)在網(wǎng)頁(yè)設(shè)計(jì)中用途廣泛，幾乎每個(gè)網(wǎng)站中都存在著圖標(biāo)。通過(guò)這些小小的圖標(biāo)，可以方便的實(shí)現(xiàn)視覺(jué)引導(dǎo)和功能劃分。如果選用恰當(dāng)，圖標(biāo)能和頁(yè)面中的 圖片有機(jī)融合，保持視覺(jué)上的一致性，同時(shí)也能夠和整個(gè)網(wǎng)站的風(fēng)格相契合。圖標(biāo)并不是華而不實(shí)的小玩意兒，小圖標(biāo)有大用處。在網(wǎng)頁(yè)設(shè)計(jì)中，如果設(shè)計(jì)師并不擅 長(zhǎng)圖標(biāo)設(shè)計(jì)，那么就需要在圖標(biāo)選擇上下功夫了。
一般來(lái)說(shuō)，根據(jù)使用手法、使用場(chǎng)合的不同，一張圖像可以有多種解讀，圖標(biāo)亦如此。圖標(biāo)不但能夠吸引用戶的注意力，還能分割頁(yè)面中的區(qū)域，最為重要的事，圖標(biāo)能夠提供一種視覺(jué)隱喻，能賦予物體某種含義，這樣用戶掃一眼便能知曉功能，因此，圖標(biāo)是一種提高用戶體驗(yàn)的工具。
圖標(biāo)在網(wǎng)頁(yè)設(shè)計(jì)中的作用
圖標(biāo)可以說(shuō)是一種不穩(wěn)定的視覺(jué)元素，因?yàn)閳D標(biāo)包含了太多的意象，可以扮演不同的角色。一個(gè)鉛筆的圖標(biāo)，就能代表很多意義，可以代表設(shè)計(jì)，也可以代表出售鉛筆，也可以代表素描。圖標(biāo)最主要應(yīng)用于：
視覺(jué)上分割內(nèi)容:讓內(nèi)容更具有吸引力和可讀性。經(jīng)常被應(yīng)用到網(wǎng)站的主體、列表、或者其他文本較多的元素中。
作為概念的視覺(jué)參照物，快速引導(dǎo)用戶:這在導(dǎo)航元素中最為常見(jiàn)(上圖)——比如放大鏡代表搜索——非常簡(jiǎn)單，有時(shí)候連文本注釋都不需要。
效果突出，因此圖標(biāo)被廣泛使用。因此可以在網(wǎng)頁(yè)設(shè)計(jì)幾乎每個(gè)元素中都找到圖標(biāo)的身影：標(biāo)題、腳注、導(dǎo)航條、列表;圖標(biāo)可以大幅提升頁(yè)面中元素的瀏覽效果。
優(yōu)秀的圖標(biāo)具備哪些優(yōu)點(diǎn)？
我們不難發(fā)現(xiàn)，圖標(biāo)是優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的部分，但如果使用不當(dāng)或者圖標(biāo)設(shè)計(jì)的不到位，那么辨識(shí)度就很差，用戶也難以理解。因此我們需要 外觀精致、意味深刻的圖標(biāo)，比如上面這套就不錯(cuò)。
盡管圖標(biāo)設(shè)計(jì)說(shuō)來(lái)話長(zhǎng)，而且也比較復(fù)雜，但是圖標(biāo)對(duì)各種設(shè)計(jì)來(lái)說(shuō)，都大有裨益。無(wú)論是何種設(shè)計(jì)，如果想要使用圖標(biāo)，那么必須記住下面這兩點(diǎn)：概念傳達(dá)完善、具備視覺(jué)有效性。
如何保持圖標(biāo)的視覺(jué)有效性？
如何保持圖標(biāo)的視覺(jué)有效性？
圖標(biāo)能夠很好的組織相關(guān)內(nèi)容，吸引注意力，將用戶引導(dǎo)至重要信息處，前提是，圖標(biāo)要與內(nèi)容、其他圖標(biāo)、整個(gè)網(wǎng)站的視覺(jué)風(fēng)格一致。
圖標(biāo)系列應(yīng)該保持視覺(jué)統(tǒng)一
對(duì)于一組風(fēng)格不統(tǒng)一的圖標(biāo)，即使某款圖標(biāo)設(shè)計(jì)的再棒，也要放棄。視覺(jué)統(tǒng)一，關(guān)乎到整體設(shè)計(jì)。
如何實(shí)現(xiàn)視覺(jué)上的統(tǒng)一？這里有一些小技巧，包括：
使用相同的顏色或者配色，如上圖
將所有的圖標(biāo)設(shè)置為形狀相同，如上圖。
邊界屬性要一致，如上圖。
效果要一致，比如說(shuō)漸變、透明、陰影等效果，如上圖。
最后，還要考慮圖標(biāo)的視覺(jué)風(fēng)格是否與內(nèi)容、網(wǎng)站的風(fēng)格一致。
一定限度的自由組合
有時(shí)一款網(wǎng)頁(yè)設(shè)計(jì)僅僅采用一套圖標(biāo)，但如果不夠用，可以嘗試采用多套圖標(biāo)，上圖的This website,就采用了多套圖標(biāo)，只不過(guò)這幾套圖標(biāo)的維度相同。而且這幾套圖標(biāo)也不在一塊兒工作，他們應(yīng)用于不同的頁(yè)面，彼此之間并無(wú)不和諧。只要熟練掌握這種變通的方法，那么圖標(biāo)的選擇更加自由。
圖標(biāo)應(yīng)該和網(wǎng)站整體設(shè)計(jì)相配
圖標(biāo)應(yīng)該和網(wǎng)站整體設(shè)計(jì)相配
當(dāng)然，圖標(biāo)與其他設(shè)計(jì)元素搭配的方法說(shuō)不清、道不盡。但是從基本觸發(fā)，有兩種方法：
圖標(biāo)與網(wǎng)站整體形成鮮明的對(duì)比: 當(dāng)圖標(biāo)作為導(dǎo)航時(shí)，這種方法非常奏效，比如上圖的社交媒體鏈接，更能夠吸引注意力。
圖標(biāo)的視覺(jué)風(fēng)格要與整體設(shè)計(jì)風(fēng)格相似: 像上圖中的圖標(biāo)，與整個(gè)頁(yè)面風(fēng)格完美契合，提供了一種視覺(jué)上的和諧感。
如何用圖標(biāo)完善的傳達(dá)概念
通過(guò)邏輯性和一致性來(lái)傳達(dá)概念。
圖標(biāo)要簡(jiǎn)單易懂
每個(gè)人都有每個(gè)人的見(jiàn)解，圖像的解釋也不是絕對(duì)的，可能一部分人能夠理解這款圖標(biāo)，另一部分人就不能。但圖像的傳達(dá)能力比文字強(qiáng)，比如說(shuō)上圖中的圖標(biāo)，就能清晰的傳達(dá)含義。
但有時(shí)候，設(shè)計(jì)師試圖在圖標(biāo)信息圖中添加復(fù)雜的概念，結(jié)果圖標(biāo)的混淆作用大約傳達(dá)作用，比如上圖。這種情況下，就需要做進(jìn)一步的信息提煉，回歸內(nèi)容。如果還是無(wú)法解決問(wèn)題，那么說(shuō)明圖標(biāo)在此次設(shè)計(jì)中并不適用。建議多多了解一下信息圖設(shè)計(jì)，這種設(shè)計(jì)就非常注重圖標(biāo)的概念傳達(dá)。
網(wǎng)頁(yè)設(shè)計(jì)發(fā)展迅猛，圖標(biāo)設(shè)計(jì)同樣進(jìn)步飛快。曾經(jīng)無(wú)法用圖標(biāo)傳達(dá)的概念，現(xiàn)今已經(jīng)可以通過(guò)技巧來(lái)實(shí)現(xiàn)傳達(dá)，圖標(biāo)成為了網(wǎng)頁(yè)設(shè)計(jì)師的重要工具。立足基本，多進(jìn)行實(shí)踐與創(chuàng)新，相信你的設(shè)計(jì)會(huì)越來(lái)越充滿藝術(shù)感，越來(lái)越易于理解。
來(lái)源：天極網(wǎng)
好干貨腫么能獨(dú)吞
趕緊點(diǎn)擊右上角“…”分享朋友圈
圖標(biāo)素材下載請(qǐng)戳↓↓原文鏈接！
聯(lián)系客服
