留意新趋势！个性鲜明风格迥异的双色网页设计

编者按：我们过去印象中的双色配色的设计，多是复古而有情怀的，非常的“80年代”。但是今天的双色配色的范畴已经远超越了复古，它可以柔媚也可以冷硬，可以前卫也可以个性，双色配色有多强大，也许取决于你脑洞。

双色配色方案并不是简单的两种色彩搭配到一起，这两种色彩通常是两种对比明显的色彩。而我们所常见的双色配色的图片则主要突出中间色调和高光，蓝色、棕色、红色和黄色是这种配色中最常见的色调。然而，对于网页设计师而言，双色配色则很少受到这样的限制，色调的选取更加自由，搭配方式也更加多样而个性，你会发现原来双色配色也同样可以打开新世界的大门。

如果你需要可以立刻上手的工具，那么下面的这些应该能帮到你：

·jQuery Duotone;
·Duotone Colorschemes;
·Colofilter.

接下来，我们一起看看那些将双色配色玩儿得出神入化的优秀网页设计，看看这个令人着迷的设计趋势，到底有着怎样的魅力。

Adidas Football

作为一个运动品牌，设计师通过一系列时尚而现代的高素质图片来体现它的特质，而统一的深蓝/明黄配色则让整个网站的气质和氛围保持了高度的一致，个性也得以凸显。

Mirage Festival

Mirage Festival 的红蓝搭配看起来略显怪异，但是两种略显疏离的色彩反而营造出独特的美感，尤其是同主流的白底黑字进行对比的时候。

Fjord Trend

Fjord Trend 的首页中，不同图片的背景图被设计成了双色配色。设计师所选取的色彩秉承了传统意义上双色调图片的配色风格，色彩沉稳现代，柔和而不具侵略性，但是作为主要的色调，两者又有着明显的对比。

Triple 9

经典的红黑色被Triple 9的首页用作双色配色的主色调，两种情绪浓烈的色彩让这里的视频和图片都带有微妙的情绪。与此同时，色调的选取还让网站隐隐散发出暴力和野蛮的感觉，个性十足。

La Marine Nationale on Board Careers

网站的首页被设计成为四个全屏的轮播图，每个都有着漂亮的双色调背景，我们所看到的蓝色背景的图片是海军招募主题的页面。背景的色彩选取同时也让前景的内容和元素凸显出来，让用户更容易获取。

Heroes and History

Heroes and History 同样也是一个双色配色网站，主要的色调是红色，作为网页主要视觉要素的插画也同样是如此。和其他的页面不同，双色搭配中的另外一种是白色，除了网站的文本之外，插画的外轮廓和少数几个元素使用的是白色，让插画的风格和特色更加明显。

Holm Marcher & Co

虽然同样是使用的双色配色，但是Holm Marcher & Co 的页面从配色到结构都给人一种严肃务实的感觉，沉稳的色调给网站奠定了专业和强力的基调。

MailChimp

MailChimp 的回顾页面的配色也可以称得上绚烂，火热的红和冰冷的蓝合二为一。为了保证统一性和体验的一致性，设计师将背景图片也转化为和两种主色调一致的色彩。

Year in Review by Atomic.io

Atomic.io 的设计师则将网站的视频和图片都转化为典型的双色配色，强力的视觉冲击力和典型的模块化布局让它简单而一致。

Finesse Design Atelier

大量专业领域和机构的华丽照片填满了网站，有些照片还保留着原样，但是有的则进行了有趣的调整。在典型的双色配色之下，这些图片呈现出不同凡响的美感和独特设计感。

jonkopingssodra

黄色和绿色的双色配色并不常见，这种独特的配色也让这个页面显得风格独树一帜，不同于传统的双色调图片的那种沉稳，这个网页的色调看起来更加活泼。

Year in Review by Tumblr

Tumblr 的年度总结在色调上更加复古怀旧，抽象的动画和海报式的界面元素更是强化了这种感觉。略显脏乱的用色让整个页面充满了80年代的风情，但是卡片式设计的加入，又没有让这种配色毁了整个设计，反而成功地让它显得更加条理化了。

Campaign by Lois Jeans

Lois Jeans 的这个页面设计，能量和情绪几乎都要浓烈得溢出来一样。虽然只是简单的文字+图片的排版，但是粉色+蓝色的搭配让页面呈现出一种层次感，协调而惊艳。

New Deal Design

虽然这样的配色很少见，但是你并不会觉得New Deal Design的页面难看，你更多会感觉它很有个性。粉红色和黄色的搭配让整个网站显得明亮非凡，充满戏剧性。这种明亮而友好的配色会给人传达出一种正向的情绪。

Year in Music by Spotify

Spotify 的这个页面是一定要推荐的。作为年度音乐总结页面，Spotify选取去年最有影响力、蜚声国际的真正音乐潮人作为主题。设计师使用着两年流行的双色调设计来调整精选的艺人照片，营造出独特的氛围。动态设计和层次丰富的美感让页面的风格更加先锋，也更有特色。

Majorette Events

首页的设计透露出一种兴奋的情绪，几乎所有的元素被紫红色染透了，屏幕上每个元素浸透在一种俏皮有趣的氛围当中。

The Art of Travel

网页设计师对于现代风格的驾驭力很强，页面干净而平衡，和前面其他的案例不同，整个网站呈现出一种严肃的气息，但是同时又不失魅力和艺术感染力。蓝黑色调之间的过渡自然，白色的文本和按钮有与之构成对比，恰到好处。

Lois Jeans Campaign

这是Lois Jeans 的另外一个设计作品，网页主题是春夏装，整个页面的设计相对更加谨慎，蓝黑的色调更加冷峻，整个页面呈现出一种冷的情绪，白色的点缀可以说是点睛之笔。页面的过度效果精心设计过，令人侧目。

Wheels and Bearings

网页中的双色调图片很好的创造出一种年代感，优雅而漂亮。淡雅的色调于深沉的褐色结合起来共同创造出怀旧的氛围，图片主题也同样会唤醒大家对于80年代的回忆。

Standby

Standby 的页面设计走的是极简的路线，整体结构也相对更加优雅。深浅两种蓝色相互搭配，有趣的字体和巧妙的插画恰如其分地丰富了整个设计的细节。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：designshack
原文作者：Nataly Birch
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量112万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com