如何玩转柔和色调？10个实用方法帮你搞定！

编者按：柔和色调是设计师常用的一门技巧，它既可以打造亲切可人的氛围，拉近与用户的关系，也可以分出深浅变化，突出设计核心，玩法多种多样，实用性强，今天@十萬個為什麽 同学总结了10个方法及优秀案例，来学习咯。

网页中的柔和色调的使用，不止是近来的趋势，这是一项设计师使用多年的技巧，用来创造有冲击力的视觉效果。

当你听到“柔和”一词，想到的可能是淡粉色、淡蓝色、淡黄色，不过这种配色远不止这些颜色。柔和并不一定要感觉像新生儿一样。通过某些适当的方式，配合其他元素，这些色调也可以相当鲜明。

下面我们从优秀的案例网站出发，了解10种在网页设计中运用柔和色调的方法。

柔和的照片

www.solasie.com

照片上的柔和遮罩层，或是在恰当的光照环境中拍摄的照片，可以成为精妙绝伦的网站背景。照片的色调越淡雅，设计师就有越多的区域可以放置其他元素。

使用柔和的照片同样有助于与其他元素产生反差，比如Logo或按钮。请注意Solasie的logo与柔和色调的照片搭配得多么完美。这种思想也能突出幽灵按钮。

想学习幽灵按钮？精品好文送上：

1. 《网页设计新趋势！你听说过“幽灵按钮”吗？》
   
2. 《知根知底的趋势！2014年最值得掌握的趋势”幽灵按钮”》

柔和的背景色

www.dearmum.org

柔和的背景色是个好主意，使用多种颜色却不会咄咄逼人。由于柔和色调更加淡雅，画布上可以使用更大面积的颜色，却不会感觉太强烈。

处理柔和背景色的一个常见的趋势，就是像Dear Mum这样，使用单色调的配色方案，对一种颜色进行深浅变化。单色调能够与白色的文字元素产生美妙的视觉对比。搭配合适的字体，这种技巧也能打造时髦的现代感。

鲜明的柔和色

www.mariecatribs.com

尽管你通常不会把“鲜明”和“柔和”相提并论，这类配色可以帮你创造出大胆的设计。因为柔和色容易退居幕后，所以如果你要在它附近有所动作，这是非常棒的选择。

Marie Catrib’s在这方面做得很好。这里的柔和色相当鲜明，但似乎没有喧宾夺主，你能看到这个从色块层探出头偷瞄的女人。鲜明的柔和色帮助你发现并聚焦在图片上，完全柔和的背景冲击力就会稍显逊色。

柔和色调营造氛围

www.sweez.com

你希望网站的访客产生怎样的感觉？柔和色很擅长营造平静、放松、缓和的感觉。如果这些情绪可以描述你的网站或公司，它或许就是正确的选择。

Sweez做得很棒，通过颜色创造了这样的情感链接。图中的一切都带着淡雅柔和的色调。它让你想到坐在安静平和的地方，享受一杯温暖美妙的卡布奇诺。看见没，这种简单的色彩多么有效。

柔和的颜色，就看这组范例咯！《如沐春风的色彩！30个温润平和的蓝色系网站设计》

柔和色的插画

http://makeyourmoneymatter.org

柔和色也是插画的绝佳选择。运用这种色彩理念创造出令用户驻足观赏的作品。

柔和色调的插画，将带有某种平静的绘画作品与色彩结合起来。它让绘画的运用出人意料。

与柔和色产生对比

www.kinderfotografie-evihermans.be

柔和色并不一定要凭空创造。它是一种很好地与其他设计元素产生对比的手段。

Kinder Fotografie在这方面做得非常好，运用了柔和色和明亮的照片、文字。设计中的柔和色部分包含了大量小细节，但你首先看到的儿童照片和文字“smiles”。然后用户才开始注意这些精致的细节。

柔和色的导航

www.wonderfullywild.co.uk

柔和色调也是创造优秀导航的手段。通常情况，设计师会给网站设计黑白色的导航条，但彩色在这里也有用武之地。

柔和色可以作为导航的手段，是因为它们避让了其他部分的设计。比如，Wonderfully Wild中，用户最先看见照片并做出反应。导航元素与主要内容融合地很好，但由于颜色的选用，它并没有妨碍主要视觉内容。

想有创意惊人的导航？来这儿看优秀范例！《导航还能这么玩！15个别出心裁的全屏导航网站设计欣赏》

扁平化设计中的柔和色调

http://everylastdrop.co.uk

我们今天看到的柔和色调大多都没有采用扁平化设计。设计师们喜欢的各种亮色，都变成了扁平设计兴起之初那些超级亮色的淡雅版。

在扁平化设计项目中使用柔和色调，好处是颜色仍然保有相同的感觉和整体外观，这种方式却不会为了吸引注意而过于压迫用户。在网站中运用柔和色与扁平风格色彩，更容易通过颜色引导用户到屏幕的特定区域，或是强调重要的文字元素。

想强调？利用对比原则！《设计基础功！帮你彻底掌握设计四大原则中的对比原则》

柔和色文字

www.putzengel.at

设计师们不止是在图片和背景上使用柔和色调。这种配色风格也可以运用在文字上。（虽然这会很微妙）

柔和色最好以粗大字体的方式使用，与更加朴实的背景相衬来创造鲜明对比。使用带有粗描边的大字体，可以确保屏幕上有更多柔和色。这个概念通常用于少量的字母或文字组合，不适用于正文。

柔和色调的界面元素

www.duy-tran.de

将柔和色用作界面元素的一部分，是个有趣的概念。这是扁平设计理念孕育出的又一个“花样”，按钮和其他元素可以使用柔和色。

Duy Tran的网站中，每块柔和色区域实际上是个超大的按钮。这些柔和色告诉用户哪块是哪块，让每个都易于点击（或触摸）。这些色调很突出，因为与极简的主图区域形成鲜明对比。（轮播图中的每一张与这些柔和色调的按钮区别开）

结论

使用柔和色的关键，在于让它看起来清新，而不是褪色。将柔和色调与你期望的深色、更鲜明的图片或白色元素对比搭配，有助于创造带有冲击力的柔和配色。

柔和色调天生就带有令人放松和冷静的理念。网页设计时使用这种配色方案对你有利。要牢记颜色与整体设计的其余部分如何相互影响。

【配色达人速成三部曲】

Step 1：打好色彩基础是关键呦！
《设计师配色宝典！教你从零开始学配色（一）》

Step 2：进阶技巧！向高手模仿是捷径！
《配色弱有救了！教你利用图片创建独有的色彩方案》

Step 3：直接开挂！不保证顶尖但一定正确！
《秒变配色高手！怎么都不会错的6条网页设计配色原则》

原文地址：designmodo
译文地址：colachan
译者：@十萬個為什麽

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

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量87万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：