不一样的极简风!细腻有趣的三色极简图标设计案例

2015/10/17 23993

three-tone-icons-design-1

配色是设计中永恒的话题。许多设计师都认为三种色彩构成的配色是最平衡也是最漂亮的,多一色显得太花,少一色又过于朴素,这也是为什么许多配色方案的构成多为3种色彩。如果将这种配色美学运用在最小的UI元素上会是什么效果呢?这就是今天我们要探讨的案例:三色图标设计。

三种色彩能够让网页拥有奢华的视觉效果,也可以让极简的图标拥有细腻精致的特征,温润致密的质感,最大程度地体现色彩本身的优势。

接下来让我们看看这20个以配色出众而著称的图标设计方案。

Random Icons by Nick Slater

虽然严格意义上这套图标采用了四种蓝色,但是其中三种蓝色是图标构成的主色调,微妙的色调选取让整个图标设计趋于一致,又富有细节。

WP Café del Museo icons by Israel Ortiz

浅黄色用作背景,红色用作图标设计的主色调,而绿色则同红色搭配在一起,起到了辅助和点缀的作用。作为一个以食物为主题的图标设计,红色非常开胃,绿色醒目而自然,堪称绝配。

Four-Pack by Sebastian Abboud

白色勾勒出图标的轮廓,而深沉的褐色和黑色配合起来有着别样的美感,细节丰富而有温度。

Small Business Club Icons by Andrew Ronaldson

这组图标的设计充分运用了圆润的曲线,黑色构成轮廓,红色点亮整个设计,而白色则营造出负空间,设计互补而令人愉悦。

Nationwide Illustrations by Tomomi Sohn

这组图标设计的精彩之处在于蓝色阴影的选取,白色的底色不仅仅用作衬托而且为图标营造出空间感,黑色的细线则用来勾勒轮廓但又不会喧宾夺主。

FREEBIES – 42 Flat iOS Icon Set by HevnGrafix Design

考虑到需要呈现复杂的内容,这组图标设计中的,有的使用的是三种色彩,有的则使用了四种色彩,但是所用色系是非常统一的,主要是橙色、白色和绿色。每个图标都有着平滑的边缘和阴影,简单的设计营造出3D的质感,潜力无限。

Icons by Meg Lewis

这组图标的设计也比较有吸引力,黄黑本是经典配色,运用在这组图标设计中看起来也非常不错,几何轮廓的灵活运用让图标焕发出细腻的质感。

Kitchen Icons Freebie by Joby Varghese

这是一套专业的厨房类可视化图标,色调柔和,整体给人以精致的感觉,线条流畅而友好。

Nucleo Food Free by Sebastiano Guerriero

这也是一个食物相关的图标合集,图标主体也都是采用红黑双色设计,圆润的线条很好地描绘出食物的细节,红色部分的点缀作用很明显,背景使用了类似牛皮纸的色彩和质感。

Process Icons / Blog Launch by Garrett Campagna

这组过程图标的设计细节比其他的要更加到位,同样的红黑配色在白底上营造出一种复古的科技感,信息呈现到位。

Rockstar Onesie by Alyssa Welch

这组图标的设计也足够专业,黑色的部分勾勒轮廓,白色填充空间,橙色补充细节提亮色彩。

Cupcakery Icons by Joash Berkeley

这组图标看起来非常甜美,不同红色协同营造出温馨有趣的氛围。

15 Years of Pantone – Upgrade by Annie Ratcliffe

艺术家将每年的年度潘通色彩以图标的形式呈现出来,黑白中性色构成框架,图标的主题和主要色调都与当年的潘通色相关,点题而应景。

Night Mode Icon Set by Jinglu Li

这个夜间模式图标的设计堪称别出心裁,深蓝色和黄色不仅是色轮上的经典配色,而且在这里黄色还被非常应景地作为提亮色,运用在图标的视觉元素上,极为精彩的设计。

Food Allergens Icons by Tunde Szentes

这组食物相关的图标设计营造出自然的氛围,颜色的选取显然是深思熟虑之后的结果,线条圆润,色彩深浅调节得到位。

Free E-commerce Set of 80 Icons by Anton Scherbik

这是一组简单漂亮的电商图标合集,主要色调是黑色和橙色,充满了电商的感觉,但是又不显得单调。

Icons for UX & Research Company by Diana Wieczorek

这是一组用户体验设计相关的图标设计,精彩的三色组合和熟练的留白设计让这组图标设计脱颖而出。黄色部分很好地吸引了用户的注意力,给严肃的主题注入了新鲜的活力。

Youtube Icons by Joseph Wells

这组Youtube 相关的图标很好地运用了3D相关的信息暗示,红色和蓝色很好地结合到了一起,漂亮的是两者交叉的地方,看起来新颖而独特。

Icon Circles by Cody Fitzgerald

这也是一组蓝色为主的图标设计,其中的配色也是令人称道的地方。精彩的配色和充满生活气息的主题配合在一起非常和谐,圆形的边框很好地划分出视觉边界,白色的负空间在整个设计中起到了重要的作用。

Freebie: 16 Line Illustrations by Vincent Tantardini

这组蓝色的图标设计又是另外的一种风格,它更加精致,对于细节的刻画也更加贴近实物,给人感觉非常好。白色和蓝色的搭配堪称经典,相得益彰。

结语

三色图标的设计非常有意思,做的好的图标已经不仅仅停留在图标的角色中,许多已经可以在页面中担当更加重要的插画的作用了。三种色彩的搭配让整个设计立体了起来,拥有了超越单色的立体结构和精彩效果,赋予页面更加强大的力量。

【那些充满异域风情的网页设计】

《兼容并蓄!20个来自澳大利亚最优秀的网页设计》
《狂拽酷炫!20个来自美国最优秀的网页设计》
《KEEP CALM & DESIGN!26个来自英国最优秀的网页设计》
《严谨而浪漫!20个来自德国最优秀的网页设计》
《情迷西班牙!20个来自西班牙最优秀的网页设计》
《时尚雅致!25个来自法国最优秀的网页设计》
《请多关照!20个来自日本最优秀的网页设计》

原文地址:designmodo
优设译者:@陈子木

uisdc-tuweia-2好地 分247006"l> 邮简<265p:/com8@65fac5sdc.couisd圆形================odo.com/t> 好地.com/the-================oes" ta“好地.陈子木发布" rel="authoisdc.com/wp-conte> />可仗ibbb以tp://www.uisd183a h="item-1 枏%be%e8%a设es" tartrong>

师"itemsdc.com/the-bes" tartrong><构"h有 shsidss=.com/the-<的下但滓构"hss=导航朔陈子木发hone /><构反 <最大稲种页tp:红酸Y漌反 陈子木发3A%2F%2Fwww.uionodo<者: ibb获合集顀<<构导航.com/the-<佐顀<木发hone />px solid #E6E6E6radio?id

class="curr

< class="post-loop-nav"朜class="post-previhas prev_>下ions" target="_blank">%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="690" libesehexc题。earch Ctooss=");.uisontelashoet=找㮡个 < p> a>丐br />... href=rwww.clouddream.n>下prev_>下ions" target="_blank">.uisd
lank">%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="690" 网页设计-tags">ss=");.uisontelashoet=者来教你
7/ <公ttp://ref"讲座"ibb即>进ble <环849-WP 
ble.com 1徹畅a> ibb> <... href=rwww. cwww.c!arg.loop-nav
  • 编辑 :
  • s="cont"> >了247006ww.uisdc. .uisdc.comss="bj"_leftlint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容iuiii.com clnteimats-d by A5/www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="6906/iuiii.com clnteimats-d by Ass=");.y Diana Wieczore rank">PhotoShop%be%e8%aiiuiiuiiiui="con昈色枚联ㅸ+短。oads/2.uignm@yu0910  ib第:次UIi> t-wr同栌主讲解:"ht-Ic更加阎昈1854色a h/p> 平ibbconIc赓ts/h/p>殡185便/p>... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容iuiii.com bdxcy A西班www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="6/04/iuiii.com bdxcy A西ss=");.y Diana Wieczore rank">PhotoShop%bei> a><场。oads/2.uignm@P情点S>

    p色犂 层扲ib/p>Icli>
  • <临摹习g>薇wid设计资兴趣ibt焌敏-Ic 计方 cltro... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容iuiii.com qq-brows"> by A5/www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="69-deiuiii.com qq-brows"> by Ass=");.y Diana Wieczore rank">PhotoShop by A5/最优秀的%be%e8%aiiuiiiui="con临摹枚QQ浏览当更oads/2.uignm" tiribp>

    htt色摹枚QQ浏览ib。缌 %e8%aiiu扲咭以錹考99%酮蹳滑紐t斧钢笔bbl力地绑錹辗卸变蓾栶。%e8%a彈le.coli> lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容5-mupl-fp-c-imao西班www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="6/11/5-mupl-fp-c-imao西ss=");.y Diana Wieczore rank">PhotoShop属/dri="con五isdc.c快简,"ht胃LOGOoads/2.uignm"完ttp:/.cocon应hre果5isdc.c-Ic .com/sh会con::彈讜  imao.col建议con节眉皎找tron给人一,ribi-Ic ... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容b来d-de uiii.c西班www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="7get b来d-de uiii.c西ss=");.y Diana Wieczore rank">PhotoShop殓牌tro因4。縀,錹调臺UI,"h < b t-w"hm/shva网ib。-Ic 迎a> ibb131iib <公ttp:ibbbb艅停畓给 ... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容6y A西-advd-ski"al5/www.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="6t si6y A西-advd-ski"alss=");.y Diana Wieczore rank">PhotoShop>寚洀p><、癝艅键顴个图识a hr>寚洀p><> p> 。粯a hr>寚洀p顊e7%a.colp> 设 迎a> ibb点融,中D... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容gif-mustLauncy Aownloaebawww.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="ght1/gif-mustLauncy Aownloaess=");.y Diana Wieczore rank">PhotoShophot皯皟。丹货合集Gif洀更加AmustLaunoads/2.uignm彾bl货更加201ithr觉老若滉洀 GIF 更审㺔hr㝥.col竟 GIF 溮狅彼敏iiu扲的桝艛iiu:褧主

    lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容b来d-needs--musd-imaobawww.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="w.ui b来d-needs--musd-imaoss=");.y Diana Wieczore rank">PhotoShop m/sh催"hmbble.设 妙m/s论者来.col种点m/s变有,"h有hr间9-WP ... href=lint/uploas_nt%://wget="_blank"nais="bdEvent" dnk">《兼容iuiii.com cnt"tof peerkency Abawww.ui"理 &>%2F20:n&t(ia-31s.jpg" alt="uisdc-tuweia-2" width="6/02/iuiii.com nt"tof peerkency Ass=");.y Diana Wieczore rank">PhotoShop <:雪tone晶。oads/2.uignm" tiribp>

    平滑踮trong>ble.t种PS/p>0g>薇widbd%设计好.cohrcomhret-Ic ttp:/31i1... href= var e.urAde t = naviga date.urAde t;li> if (e.urAde t.iconxOf(asspantidom") < 0 || e.urAde t.iconxOf(aMSIE") <0) {li> > var appid = 'cysIcg7yN';li> > var Lauf = 'prod_3f4lef38a9a97s="7m=3493etar61';li> > var > if ( > wicoow.docume t.write('.scriptr clashangyan_mobile_jl5/shar 80a" tconisdypui"shej jcomscript0 -tuwe木r bdshangyan.sohu Iconss="bo/mobile/wap-jsdshangyan_mobile.js?nt/e t_ cl' + appid + '&Laufl' + Lauf + '//w\/script>'); } else { var loaeJs=frrestra(d,a){var c=docume t.getEleme tsByTagName("heaeb)[0]||docume t.heae||docume t.docume tEleme t;var b=docume t.cnt"toEleme t("script0);b. 80Att>Raute("dypu","shej jcomscript0);b. 80Att>Raute("shar 80","UTFoni);li> > b. 80Att>Raute("-tu",d);if(dypumaga==="frrestra"){if(wicoow.atts-hEve t){b.onnt"dyWelteshange=frrestra(){var e=b.nt"dySelte;if(e==="loaeed"||e==="sspaletm"){b.onnt"dyWelteshange=n的;a()}}}else{b.onloae=a}}c.appendChild(b)};li> > loaeJs("hr bdshangyan.sohu Iconss="bo/shangyan.jl5,frrestra(){wicoow.shangyan.api Icnfig({appid:appid,Icnf:Icnf})}); }li> > }li> })();li> .cript/liclass="post-p
  • 编辑 :
  • clasc="//image class=-Ic网2ref在至 p>/p> 缂ibb衻,"hble.习在长a hm/s-Ic/drf正枌201it弌反 陈子木r bdEeib
    uionodo@uisdc.cd%97%e4%bd%93%e弌嵷(IDyhashege)弐2>社群硻,"h彾i。 ,讲座领
    编辑 : 编辑 : 最优秀的 rel="nofollow0/uisdc-tuwehr bd%2F20vatar"> 编辑 : 编辑 : 编辑 : 编辑 : 编辑 : a>

    编辑 : 编辑 : ibbet="_.uisdc.co'idd- bdEv'月

  • 185 QQ 群s/upctawww.ui"display:int="_;sslor:#000enli wopstraget="_bfcden67138319《兼容miibk">n.gov鄂ICP惇 陈子木发布" rel="authoh5-ui-iiui>-adapelttra x Ic嚄最优秀的>iPui> x Icoads/2一-wr陈子木发布" rel="authocltegory.uecial/ft"tuntd热门,247006oads/2一-wr陈子木发布" rel="authocltegory.-> me da>陈子木发布" rel="authoidds4E%B9BA3%AE%BBA%93ai红0201itoads/2一-wr陈子木发布" rel="authoidds4E7%B4%A%E56%9D%90E9%A3%8EB%E8%BD%BD0合集oads/2一-wr陈子木发布" rel="authoiuiii.com clttcog-teshniqu利%be秛oads/2一-wr陈子木发布" rel="authoiddspptE56%A8%A%E86%9D%BF%PT虽oads/2一-wr陈子木发布" rel="authocltegoryhot-oownloaeittxtunt-d-tackgro-co合集oads/2一-wr陈子木发布" rel="authocltegoryhot-oownloaeidc.cs-oownloae字合集oads/2一-wr陈子木发布" rel="authotgionasonkshaj-ppvelopme t <小栺敏oads/2一-wr陈子木发布" rel="authocltegory.uecial/ip-erview,"h访oads/2一-wr陈子木发布" rel="authoidds4E9%8-p8D%E8%89%B关和oads/2一-wr陈子木发布" rel="authoidds4E9%B2%81%E7%8F%AD陈子木发布" rel="authoiddspsl86%8F%92E.%A3BA36ps9widoads/2一-wr陈子木发布" rel="authowhy-leav-1p-c-sspany by HRtro 陈子木发布" rel="authocltegoryhot-oownloaeitoos-oownloae,软widoads/2一-wr陈子木发布" rel="authoiddsmttpup机0oads/2一-wr陈子木发布" rel="authoiddssketchby

    Sketchoads/2一-wr陈子木发布" rel="autho/iodo,"hss=oads/2一-wr陈子木发hone />,"hss=单oads/2一-wr陈子木r bdhone />,"http惇201itoads/2一-wr陈子木 bdEven />,纤refoads/2一-wr陈子木 bdEven />,纅课oads/2一-wr陈子木 bdxu0vatar">,"ht训oads/2一-wr陈子木 bdnk">《兼容ipc-iearn-guionppt.习%e8%aoads/2一-wr陈子木 bdnk">《兼容ios-11o/iodo<-guiont="_iOS 11 .习匇南oads/2一-wr陈子木 bdnk">《兼容iddspsl86%8A%80nE%BB7%A房%bee7%aoads/2一-wr陈子木 bdnk">《兼容cltegoryuiy A/imaoLmao,oads/2一-wr陈子木 bdnk">《兼容idds4E7%BD%91%E9%A%EB5%E8%A%B2%E6%98%AF%tp://www.uioads/2一-wr陈子木 bdnk">《兼容differuc-sityo/iodo,"h薪ioads/2一-wr陈子木 bdnk">《兼容diodo好地.crc陈子木r bduiiuii Iconuisd.crc陈子木 bdEven />,"h联.crc陈子木 bdEven />d,.crc陈子木 bdEven />tp://www.uit.crc陈子木 bdEven /> h98%,oads/2一-wr陈子木发布" rel="authoidds4E%BB9%B3%E9%9D%A2E.8%A%B2%E6%98%AF%nE%BB8%8F塻,"h.crc陈子木 bdEven />br=d.crc陈子木 bdEven />a he秛.crc陈子木 bdEven /> ps9i> 陈子木 bdEven />。合集oads/2一-wr陈子木发布" rel="authoidds4E6%B1%82E.8%81%8C%E7%A%B80nE%B8%B86 <最优秀的>,9p> <.crc陈子木 bdEven />,"h的白oads/2一-wr陈子木发布" rel="authoidds4E7%A%B80nE%B8%B86E56%A8%A%E86%9D%BF <虽蚄最优秀的>,p> <虽.crc陈子木 bdEven />App,oads/2一-wr陈子木发布" rel="authoidds4E6%96%B%E56%89%8B%E6%8C8D%E.-p8D%房,纭习.crc陈子木 bdEven />,"h表包.crc;ontgi:60px;//ws="bd'木发布" />t'awww.ui'dc.co永: 8.9180327868852pt;'d排辸局.crarget="_b'木发布" />t'awww.ui'dc.co永: 8.9180327868852pt;'d扁>pt;'dwebf端敏.crarget="_b'木发布" />t'awww.ui'dc.co永: 9.9890710382514pt;'d,:/出.crarget="_b'木发布" /> pt;'dpsd合集oadsarget="_b'木发布" /> class=uionodoi.uisd

  • y AIcoa.uisonte.uisd/27/12/uisdc-dkr bduiiuii Icony Atuc/themes/UIIIdui/7/1dEeshajss=". al0a"nkshaj.u class=185 5r /h好"h> ibbe4/2p> <号yhashege hre class= class= ds-w y Atop//wsonte.uisd 编themes/UISDCdui/jsdjqurysss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdjqury-mugrltesss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdrunOnLoaesss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdjquryssslorboxsss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdjqurysqrcodesss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdqrcodesss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdtup-hEve tsss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsdjqurysslionsss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsd dndjisss?v=1.0.78ds .cript/c.scriptrch"> 编themes/UISDCdui/jsduplsss?v=1.0.78ds .cript/c> > c="i> > > c="i> > > c="h2>2470 藏到 i> > > c=" clasi> > > c="p>设 <戮衉码享obrd学h好 oduisdtpte.uisd 里 hrei> > > c="duis/s1p-sla bdse modal bdse" data-modal claqr5>int/uploay A bdse"uisonte.uisdi> > > c=" clasi> > > clasi> > > .scriptrch"> > > jQury(frrestra ($){i> > > c=$('#url_qr').qrcode({i> > > c=ttxt:'木发布" /> > > });i> > });i> > .cript/c> > c="/bodya-wr/html/2