設(shè)計(jì)圖標(biāo)可以給你的網(wǎng)站設(shè)計(jì)項(xiàng)目帶來很多的樂趣。不過，一旦你有一套好的圖標(biāo)設(shè)計(jì)，你會(huì)用它們來做什么呢？

圖標(biāo)在Facebook或Instagram的設(shè)計(jì)應(yīng)用上并不僅僅只是作為一種微型鏈接，它們還是一條完全的互動(dòng)線索，幫助引導(dǎo)用戶瀏覽整個(gè)網(wǎng)頁設(shè)計(jì)，并提供額外的視覺體驗(yàn)。圖標(biāo)可以是小或大，黑白或彩色，簡單或復(fù)雜。無論什么樣的風(fēng)格比較吸引你，有效使用圖標(biāo)可以提高在幾乎任何設(shè)計(jì)項(xiàng)目中提高網(wǎng)頁設(shè)計(jì)的可用性和審美價(jià)值。

1.添加可以吸引視覺注意的元素

并不是每一張圖像都擁有可以直接吸引用戶注意的視覺元素。有時(shí)候，更多的圖像反而缺少設(shè)計(jì)師們預(yù)期希望它承載的元素。

所以，當(dāng)在網(wǎng)站建設(shè)工作的設(shè)計(jì)環(huán)節(jié)出現(xiàn)上面的情況時(shí)，通過適當(dāng)?shù)脑趫D像上添加一些有趣的圖標(biāo)可以幫助這些有點(diǎn)無趣的照片添加更多的興趣點(diǎn)。使用圖標(biāo)來增強(qiáng)照片的內(nèi)容，除了能提供額外的信息外，還能加強(qiáng)交互的提示作用。

以上面牙科診所的網(wǎng)頁設(shè)計(jì)為例（誠然，它并不是最有趣的視覺概念）。它的設(shè)計(jì)算比較“新鮮”的，明亮的用色以及直觀的信息展示。人物臉部旁邊的簡單圖標(biāo)對(duì)“靈光一閃”做了新的“定義”——注意其中微小的牙齒元素。左側(cè)屏幕的亮部和明亮的白色圖標(biāo)之間的平衡也有助于在設(shè)計(jì)中吸引眼球。網(wǎng)站的其余部分也使用其他小圖標(biāo)進(jìn)行導(dǎo)航。

2.創(chuàng)建交互

圖標(biāo)不必適應(yīng)特定的位置，來鼓勵(lì)用戶進(jìn)行下一步的交互。太多的模板網(wǎng)站設(shè)計(jì)在滾動(dòng)中使用三列的圖標(biāo)/文本這種組合。

圖標(biāo)實(shí)際上是可以作為驅(qū)動(dòng)網(wǎng)頁整體交互的元素。通過實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的分層視差滾動(dòng)，使圖標(biāo)的元素能夠跨屏幕移動(dòng)。這樣做的好處在于能夠創(chuàng)建一個(gè)意想不到交互體驗(yàn)。

Boone Selections的網(wǎng)站設(shè)計(jì)使用圖標(biāo)配合他們的葡萄酒，創(chuàng)建了一個(gè)旅行的場景，這種有趣的交互使會(huì)使用戶感到有趣，并想通過滾動(dòng)鼠標(biāo)來反復(fù)體驗(yàn)它。飛機(jī)圖標(biāo)沿著屏幕上的箭頭移動(dòng)（對(duì)滾動(dòng)做出反應(yīng)）。當(dāng)用戶滾動(dòng)到屏幕的這一部分時(shí)，每個(gè)線條圖標(biāo)組合形成圖形。運(yùn)動(dòng)簡單，經(jīng)典以及高效。

3.使用動(dòng)畫

沒有人說過圖標(biāo)就必須是靜態(tài)的元素。讓他們動(dòng)起來！

但不要?jiǎng)拥倪^于瘋狂。最好的圖標(biāo)動(dòng)畫與圖標(biāo)本身的內(nèi)容相關(guān)。運(yùn)動(dòng)不應(yīng)該太快，太快可能會(huì)使瀏覽的用戶感到有點(diǎn)不安。但是運(yùn)動(dòng)也不用太過緩慢，因?yàn)橛脩艨赡軙?huì)錯(cuò)過它們。在中間一個(gè)剛好的點(diǎn)，圖標(biāo)運(yùn)動(dòng)一定會(huì)給你的網(wǎng)站設(shè)計(jì)提供一點(diǎn)快樂。

Sweet Punk機(jī)智的做到了這一點(diǎn)，他們使用的圖標(biāo)依然是幾乎無處不再的“老燈泡”，但是他們?yōu)樗砑恿艘恍﹤€(gè)性化的標(biāo)志——注意燈泡的內(nèi)部，是一個(gè)火焰。然后這還有一個(gè)有趣的懸停動(dòng)作，當(dāng)燈泡與中間的火焰碰撞時(shí)的反彈效果。此外，燈泡周圍的圓形圖案輕輕地移動(dòng)并且似乎對(duì)鼠標(biāo)懸停模式做出響應(yīng)。

4.創(chuàng)建圖標(biāo)集群

有趣的形狀，草圖或其他手工繪制的圖標(biāo)集群在網(wǎng)站設(shè)計(jì)中可以是一個(gè)有趣的視覺呈現(xiàn)方式。

當(dāng)你覺得在你的設(shè)計(jì)項(xiàng)目缺乏一個(gè)好的視覺體驗(yàn)時(shí)，你首先可以考慮什么樣的圖標(biāo)集群在你的網(wǎng)頁設(shè)計(jì)中能發(fā)揮更好的效果。圖標(biāo)可以作為鏈接或添加在圖片上作為一個(gè)獨(dú)立的視覺元素。集群可以只包括兩個(gè)或三個(gè)的圖標(biāo)，如果太少，可以考慮上面數(shù)量的三倍。讓你的網(wǎng)站設(shè)計(jì)內(nèi)容推動(dòng)決策過程。

使用圖標(biāo)集合的好處在于，你可以真正思考外框，做一些創(chuàng)造性的事情。 另一個(gè)能夠令你高興的是，如果你喜歡自定義圖標(biāo)，你甚至可以開始自己設(shè)計(jì)一個(gè)圖標(biāo)包。任意一個(gè)選項(xiàng)都可以增加很多的樂趣，給你一種新的方式來嘗試完全不同的東西。

5.結(jié)合時(shí)尚元素

圖標(biāo)應(yīng)該只是網(wǎng)頁設(shè)計(jì)項(xiàng)目策略的一部分?？紤]你的整體內(nèi)容，并與另一個(gè)時(shí)尚元素配對(duì)使用，創(chuàng)造一個(gè)符合現(xiàn)代審美的設(shè)計(jì)作品。

使用圖標(biāo)的另一個(gè)好處是風(fēng)格的靈活性。圖標(biāo)看起來包含了每一種形狀和形式，從線條藝術(shù)、基于草圖的風(fēng)格到平面切割設(shè)計(jì)，他們是精心制作的微型藝術(shù)品。一旦你已經(jīng)確定了項(xiàng)目的設(shè)計(jì)風(fēng)格，創(chuàng)建一組符合該視覺風(fēng)格的圖標(biāo)。

History of Icons這個(gè)網(wǎng)站上面羅列了圖標(biāo)的發(fā)展簡史。該網(wǎng)站展示了多年來圖標(biāo)風(fēng)格的演變（如果你正在尋找更多的靈感），這是一個(gè)很酷的研究案例。

6.給它一個(gè)異想天開的改變

對(duì)于某些圖標(biāo)，你可能只能使用標(biāo)準(zhǔn)的設(shè)計(jì)，以便用戶確切了解這些元素的作用。這大部分包括社交媒體鏈接，搜索，購物車和導(dǎo)航箭頭的圖標(biāo)。在這些上面，你永遠(yuǎn)不應(yīng)該為了新穎性而犧牲圖標(biāo)的的直觀可讀性。

但你可以在網(wǎng)頁設(shè)計(jì)中把自己異想天開的改變想法添加到這些標(biāo)準(zhǔn)的圖標(biāo)樣式中。通過更改顏色，調(diào)整形狀，甚至重新繪制樣式中的圖標(biāo)。訣竅就是做一些感覺獨(dú)特的東西，同時(shí)保持視覺識(shí)別，使用戶不會(huì)質(zhì)疑圖標(biāo)的含義。

簡單的改變有可能造成的影響是深遠(yuǎn)的。這種調(diào)整可以幫助常見的元素成為您的設(shè)計(jì)和視覺故事的一部分。

Little Puds & Co.通過調(diào)整圖標(biāo)的樣式，使得網(wǎng)站設(shè)計(jì)的整體很迷人。頂部角落中的常見圖標(biāo)是可識(shí)別的，但顯示的是網(wǎng)站的品牌顏色。這些圖標(biāo)看起來比在Facebook和Instagram的調(diào)色板中的更柔和，似乎匹配更多的異想天開，天真的風(fēng)格在整個(gè)設(shè)計(jì)中得到體現(xiàn)。

7.創(chuàng)建自定義草圖

圖標(biāo)可以是微型藝術(shù)手繪本身。雖然圖像的趨勢更傾向于扁平，但是線條藝術(shù)效果圖，詳細(xì)的草圖可以提供一個(gè)自由的自定義選擇，而且，這完全是你自己的。

每中手繪圖標(biāo)集都是不同的，沒有什么明確的方法來分類他們，除了找到你想要的。手繪圖標(biāo)通常是使用它們品牌自身的一部分。

Infinity Foods在他們整個(gè)的網(wǎng)站設(shè)計(jì)中就使用了這種風(fēng)格。手繪的圖標(biāo)樣式從標(biāo)志演變開始，同樣詳細(xì)的使用鉛筆樣式在設(shè)計(jì)中的每個(gè)圖標(biāo)元素中。

總結(jié)

雖然圖標(biāo)有可能是網(wǎng)站設(shè)計(jì)項(xiàng)目中最少會(huì)被認(rèn)真考慮的元素之一，但它們可能是最有趣的元素之一。好的圖標(biāo)可以使網(wǎng)頁設(shè)計(jì)項(xiàng)目的整體更加具有關(guān)聯(lián)性。通過一種簡單的方式，給整體設(shè)計(jì)一點(diǎn)視覺體驗(yàn)上的起伏和精細(xì)感。