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