如何在网页设计中进行配色选择

配色是一个非常重要的设计考量，我们日常访问的所有网站，App，小程序等都基于自身品牌属性，而进行配色的思考和运用。就像你现在通过网页或者应用来阅读这篇文章时看到的各个元素不同的色彩搭配。事实上就是我们每年都可以看到许许多多关于设计趋势的预测，而颜色会占据一个非常重要的位置。

随着时间的推移，我们可以发现设计师使用色彩更大胆和更有策略性。有时候它是用来强化特定的元素让其获得更多的关注，有时候为了呈现更好的故事氛围，也有时候是为了增强品牌调性。

很多网站的配色选择是非常有趣并且值得我们去思考的。尽管可能越来越多网站的布局和结构或多或少会有点相似，但是配色设计就显得更加重要和突出了。

当然这篇文章里面其实并没有太多新鲜的东西，但是如果你没注意过，希望能给你一点思考。

如果大部分网站都采用同样的配色方案，那么色彩还有什么可说的地方呢，可能整个网络环境里面每一个网站都使用了大众喜欢和认同的“安全区配色方案”，那么同时也意味着千篇一律。就像你给文章中所有段落文字都加粗。

所以呢，对于配色的选择上更大胆一点，肆意一点，往往可以产出很多精彩的作品。

 

    我i们可以用一些网站作为范例来说明一些比较有趣的配色方式。

        突出你想要强调的元素

基本上每一个网站都会有一个自身的配色方案。包含网站的各个元素，包括图片，元素，文字等。 色彩搭配上不一定要很丰富，但是重点必须是能够突出你设计时想要强调的元素。

Vibrant ，当进入到主页时，主页的背景和图片是黑白的，logo、按钮和汉堡菜单使用了亮黄色来突出，这样的色彩搭配可以在灰度背景中脱颖而出，一瞬间就抓住你的注意力。

另一个例子是Takeit，他们的主页背景是使用全屏的蓝色北京。而其他的元素都是用了白色进行搭配。画面中心的大标题会让你的注意力集中在中间。同时，你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以从页面中研究一下是配色和元素的位置，是如何引导用户视线的注意力的。

       使用具有个性和独特性的配色

色彩是很神奇的，恰当的配色可以展示一个网站或者品牌的性格和调性。Beagle 网站提供了一些项目的介绍集合，他们的网站使用了较轻的茶色。当你向下滚动他们的主页时，你会看到棕色、炭色、绿色，甚至粉红色这样一些显得轻松和愉快的色调。大地色系（earthly tones）看起来专业和优雅，让人对于其所代表的品牌留下一个非常好的印象，可以说是最好最安全的搭配色系之一。

An Interesting Day 网站它特指“在奥斯陆峡湾（Oslofjord）的一个小岛上举办的一个不可思议的，为期一天的会议”("a weird, one-day conference on a tiny island in the Oslofjord")。当红色的背景和红色的字体在上面的时候，你一定会有一种怪异的不协调的感觉。因为这不是我们每天看到的东西。实际上看起来还不错，但更重要的是这种配色方案传达了一种很明显的“怪异的”（weird）个性，因此它确实很不常见，所以会让人印象深刻。

        用颜色来进行表达或者表态

可以用颜色来表达自己作品的含义或者态度。但前提必须保证这个颜色很突出并且能抓住用户的注意力。好像听起来也不男，但是对于作品的整体也必须是一个合适到位的配色选择。你不能只是随便选取了一种亮色，反之它的色彩观感和感觉必须对整个页面来说具有意义和目的性的。举个栗子，这是Gaga Symphony的登录页面。当你登录到他们的界面，你会被一个抢眼的红光背景所包围。你也许会觉得交响乐给人的感觉应该是比较高雅的，应该使用比较柔和，稳重或是较静谧的颜色。但是，Gaga比较特别，交响乐是充满活力，趣味和创造性的。因此，其所使用的桃红色(hot pink)其实是非常契合它的音乐风格的的。

       使用内聚(Cohesion)和流(Flow)

颜色也可以指导用户如何使用流式页面。在上面的Takeit的例子中，Takeit的色彩搭配用比较温和的方式去引导用户的注意力。事实上，色彩在引导用户的时候，它可以在细节上精雕细琢，不一定需要戏剧性（dramatic）或者太过头（over the top）的设计。尤其当各种色彩之间开始紧密结合时特别有效。这基本就是优秀的品牌配色上会做到的事情。

看Marvel或者Dropbox。他们APP的配色方案都使用了明显的蓝色，但是你看在它们图形中的其他配色，像绿色，橘黄色或者红色，尽管使用了多个颜色，但是合理的配色选择让不同的模块之间并没有割裂感，从头到尾都很一致并且流畅的体验他们自身的品牌特点。

另一个不同的例子是Innovation Project Canvas。他们使用绿色来指引用户进行滚动页面的操作。你不需要使用太丰富的颜色搭配来展示一个好的工作流页面；就算只使用一种颜色也可以做到很好的引导效果。Innovation Project Canvas 仅仅使用一个绿色就达到了极佳的引导用户的效果。

        图片的选择

一个关于色彩的有趣的小技巧是在图片里去体现色彩。UI设计的基础不仅是给网站添加一些颜色而已。

随着现在网页极简化设计、大屏高清图片和产品大图的使用越来越广泛，大家都看累了。可以跳出产品本身，思考怎么使用图片会更容易让你的产品脱颖而出。

CartoDB 是一个提供地理位置数据可视化的APP。(CartoDB是一个开源的允许你在web上存储和虚拟化地理数据的工具，这个数据库可以更灵活的让开发者快速创建地图和设计自己的应用。) 那么如何在主页上更好的展示它们的服务有多好，而不是被展示地图吸引了注意力？

CartoDB的首页Banner是动态的，当你把鼠标移动到Banner上，红色背景会滑动退出，背景的色块地图会缓缓地加载出来。这样的处理方式，又不会让背景图片抢了注意力，又能够突出他们平台的服务特点。

另外一个展示的例子，ETQ网站更加强调了他们的产品。这个网站风格非常简洁，整个网站以最低限度去延伸他们的配色方案。他们把页面设计的重心放在他们的产品上。当然可能不是每一双展示的鞋子都能刚好让用户喜欢这个页面，但是不可否认，ETO真正的让鞋子脱颖而出。

        不一定要按照常规的配色规则

有趣的是有些网站反其道而行，他们尝试使用尽量少的颜色进行设计。网站没有亮丽的色彩点缀也可以设计得很优秀。黑白灰的配色选择可以为品牌创建必要的外观和感觉以及展示核心的思想。

Visual Soldiers就是一个优秀的例子，其配色方案非常的简单，甚至是单调，就像Tomasz Wysocki’s portfolio。 这两个网站有同样的格调。因为色彩单一，所以他们反而抓住了你的注意力。也许你会想在他们页面中的一个CTA(Call to Acv)或是一个链接中找到一些轻微的蓝色或者绿色的提示，但是这里没有。就算仅有黑和白两种颜色，他们看起来也同样的高级和富有美感。

         结论

简而言之，色彩是非常强大的。它的重要性如果以前你对它还不够重视，那么现在有必要将配色的思考和学习放到一个更加重要的位置上。事实上一直以来极简风格的流行会让部分网站布局和特点有些同质化，包括各种组件和框架的流行，设计和制作一个网站或者应用变得方便和快捷，同时以这种方式制作出来的产品同质化会更加严重。最简单的方式，可能就是加深色彩的思考，一套优秀的配色方案就能让你脱颖而出。

 

最近看到还有人在看这篇15年翻译的文章，因此把文章内容重新理顺了一下，一些文字直接换成了自己的理解。但是一些范例的网站现在已经访问不了。

原文链接我访问了一下也并不是上面的原文章了，但也可以去看看。

这篇文章就到此为止了。

如果想看更多的翻译文章，或者了解更多相关的知识，可以留言表达一下想法。

我会用我自己的理解输出一些文章希望能帮到大家。

十分感谢。

原作者：Paula Borowska      创作于：November 23, 2015     原文链接：http://designmodo.com/web-design-colors/