配色是設(shè)計(jì)中永恒的話(huà)題。許多設(shè)計(jì)師都認(rèn)為三種色彩構(gòu)成的配色是平衡也是漂亮的，多一色顯得太花，少一色又過(guò)于樸素，這也是為什么許多配色方案的構(gòu)成多為3種色彩。如果將這種配色美學(xué)運(yùn)用在小的UI元素上會(huì)是什么效果呢？這就是今天我們佛山網(wǎng)站建設(shè)-零度網(wǎng)絡(luò)要和大家一起要探討的案例：三色圖標(biāo)設(shè)計(jì)，看看三色設(shè)計(jì)是不是很有意思，從中在你的設(shè)計(jì)中又增添了一份與眾不同。

三種色彩能夠讓網(wǎng)頁(yè)擁有奢華的視覺(jué)效果，也可以讓極簡(jiǎn)的圖標(biāo)擁有細(xì)膩精致的特征，溫潤(rùn)致密的質(zhì)感，大程度地體現(xiàn)色彩本身的優(yōu)勢(shì)。

接下來(lái)讓我們看看這20個(gè)以配色出眾而著稱(chēng)的圖標(biāo)設(shè)計(jì)方案。

Random Icons by Nick Slater

雖然嚴(yán)格意義上這套圖標(biāo)采用了四種藍(lán)色，但是其中三種藍(lán)色是圖標(biāo)構(gòu)成的主色調(diào)，微妙的色調(diào)選取讓整個(gè)圖標(biāo)設(shè)計(jì)趨于一致，又富有細(xì)節(jié)。

WP Café del Museo icons by Israel Ortiz

淺黃色用作背景，紅色用作圖標(biāo)設(shè)計(jì)的主色調(diào)，而綠色則同紅色搭配在一起，起到了輔助和點(diǎn)綴的作用。作為一個(gè)以食物為主題的圖標(biāo)設(shè)計(jì)，紅色非常開(kāi)胃，綠色醒目而自然，堪稱(chēng)絕配。

Four-Pack by Sebastian Abboud

白色勾勒出圖標(biāo)的輪廓，而深沉的褐色和黑色配合起來(lái)有著別樣的美感，細(xì)節(jié)豐富而有溫度。

Small Business Club Icons by Andrew Ronaldson

這組圖標(biāo)的設(shè)計(jì)充分運(yùn)用了圓潤(rùn)的曲線(xiàn)，黑色構(gòu)成輪廓，紅色點(diǎn)亮整個(gè)設(shè)計(jì)，而白色則營(yíng)造出負(fù)空間，設(shè)計(jì)互補(bǔ)而令人愉悅。

Nationwide Illustrations by Tomomi Sohn

這組圖標(biāo)設(shè)計(jì)的精彩之處在于藍(lán)色陰影的選取，白色的底色不僅僅用作襯托而且為圖標(biāo)營(yíng)造出空間感，黑色的細(xì)線(xiàn)則用來(lái)勾勒輪廓但又不會(huì)喧賓奪主。

FREEBIES – 42 Flat iOS Icon Set by HevnGrafix Design

考慮到需要呈現(xiàn)復(fù)雜的內(nèi)容，這組圖標(biāo)設(shè)計(jì)中的，有的使用的是三種色彩，有的則使用了四種色彩，但是所用色系是非常統(tǒng)一的，主要是橙色、白色和綠色。每個(gè)圖標(biāo)都有著平滑的邊緣和陰影，簡(jiǎn)單的設(shè)計(jì)營(yíng)造出3D的質(zhì)感，潛力無(wú)限。

Icons by Meg Lewis

這組圖標(biāo)的設(shè)計(jì)也比較有吸引力，黃黑本是經(jīng)典配色，運(yùn)用在這組圖標(biāo)設(shè)計(jì)中看起來(lái)也非常不錯(cuò)，幾何輪廓的靈活運(yùn)用讓圖標(biāo)煥發(fā)出細(xì)膩的質(zhì)感。

Kitchen Icons Freebie by Joby Varghese

這是一套的廚房類(lèi)可視化圖標(biāo)，色調(diào)柔和，整體給人以精致的感覺(jué)，線(xiàn)條流暢而友好。

Nucleo Food Free by Sebastiano Guerriero

這也是一個(gè)食物相關(guān)的圖標(biāo)合集，圖標(biāo)主體也都是采用紅黑雙色設(shè)計(jì)，圓潤(rùn)的線(xiàn)條很好地描繪出食物的細(xì)節(jié)，紅色部分的點(diǎn)綴作用很明顯，背景使用了類(lèi)似牛皮紙的色彩和質(zhì)感。

Process Icons / Blog Launch by Garrett Campagna

這組過(guò)程圖標(biāo)的設(shè)計(jì)細(xì)節(jié)比其他的要更加到位，同樣的紅黑配色在白底上營(yíng)造出一種復(fù)古的科技感，信息呈現(xiàn)到位。

Rockstar Onesie by Alyssa Welch

這組圖標(biāo)的設(shè)計(jì)也足夠，黑色的部分勾勒輪廓，白色填充空間，橙色補(bǔ)充細(xì)節(jié)提亮色彩。

Cupcakery Icons by Joash Berkeley

這組圖標(biāo)看起來(lái)非常甜美，不同紅色協(xié)同營(yíng)造出溫馨有趣的氛圍。

15 Years of Pantone – Upgrade by Annie Ratcliffe

藝術(shù)家將每年的年度潘通色彩以圖標(biāo)的形式呈現(xiàn)出來(lái)，黑白中性色構(gòu)成框架，圖標(biāo)的主題和主要色調(diào)都與當(dāng)年的潘通色相關(guān)，點(diǎn)題而應(yīng)景。

Night Mode Icon Set by Jinglu Li

這個(gè)夜間模式圖標(biāo)的設(shè)計(jì)堪稱(chēng)別出心裁，深藍(lán)色和黃色不僅是色輪上的經(jīng)典配色，而且在這里黃色還被非常應(yīng)景地作為提亮色，運(yùn)用在圖標(biāo)的視覺(jué)元素上，極為精彩的設(shè)計(jì)。

Food Allergens Icons by Tunde Szentes

這組食物相關(guān)的圖標(biāo)設(shè)計(jì)營(yíng)造出自然的氛圍，顏色的選取顯然是深思熟慮之后的結(jié)果，線(xiàn)條圓潤(rùn)，色彩深淺調(diào)節(jié)得到位。

Free E-commerce Set of 80 Icons by Anton Scherbik

這是一組簡(jiǎn)單漂亮的電商圖標(biāo)合集，主要色調(diào)是黑色和橙色，充滿(mǎn)了電商的感覺(jué)，但是又不顯得單調(diào)。

Icons for UX & Research Company by Diana Wieczorek

這是一組用戶(hù)體驗(yàn)設(shè)計(jì)相關(guān)的圖標(biāo)設(shè)計(jì)，精彩的三色組合和熟練的留白設(shè)計(jì)讓這組圖標(biāo)設(shè)計(jì)脫穎而出。黃色部分很好地吸引了用戶(hù)的注意力，給嚴(yán)肅的主題注入了新鮮的活力。

Youtube Icons by Joseph Wells

這組Youtube 相關(guān)的圖標(biāo)很好地運(yùn)用了3D相關(guān)的信息暗示，紅色和藍(lán)色很好地結(jié)合到了一起，漂亮的是兩者交叉的地方，看起來(lái)新穎而獨(dú)特。

Icon Circles by Cody Fitzgerald

這也是一組藍(lán)色為主的圖標(biāo)設(shè)計(jì)，其中的配色也是令人稱(chēng)道的地方。精彩的配色和充滿(mǎn)生活氣息的主題配合在一起非常和諧，圓形的邊框很好地劃分出視覺(jué)邊界，白色的負(fù)空間在整個(gè)設(shè)計(jì)中起到了重要的作用。

Freebie: 16 Line Illustrations by Vincent Tantardini

這組藍(lán)色的圖標(biāo)設(shè)計(jì)又是另外的一種風(fēng)格，它更加精致，對(duì)于細(xì)節(jié)的刻畫(huà)也更加貼近實(shí)物，給人感覺(jué)非常好。白色和藍(lán)色的搭配堪稱(chēng)經(jīng)典，相得益彰。

結(jié)語(yǔ)

三色圖標(biāo)的設(shè)計(jì)非常有意思，做的好的圖標(biāo)已經(jīng)不僅僅停留在圖標(biāo)的角色中，許多已經(jīng)可以在頁(yè)面中擔(dān)當(dāng)更加重要的插畫(huà)的作用了。三種色彩的搭配讓整個(gè)設(shè)計(jì)立體了起來(lái)，擁有了超越單色的立體結(jié)構(gòu)和精彩效果，賦予頁(yè)面更加強(qiáng)大的力量。