对于设计师而言，无论是用来集中用户的注意力还是表达情感，亦或是传递信息，配色都是非常强有力的一种工具。为了让大家知道配色对于传递信息的重要性，引用《The Impact of Color on Marketing 》文章中的一句话，经研究发现，百分之九十的用户购买商品的时候，都是因为他的配色才去购买的。

想让配色的使用更加有效果，这在设计中是非常重要的，也就是构想出一个全新的配色方案。每一种颜色都有着他独特的意思，将他们组合起来也就能传递出无限的可能。

本文主要讲的是如何让你的配色与你的设计更加搭配的方法。

选择配色方案的调色板

配色方案、有时就像雨后春笋般跳跃在脑海中，但更多的情况下，需要我们去制定一些可行的计划方法。

01. 表现你的目标

在此之前，我们应明确目标和设计理念。一个有着含义的调色板是良好的设计要素之一。

我们可以问自己以下的几个问题。

  1. 你想通过设计传递怎样的信息？
  2. 设计的目的是什么？想传递什么情报？想引导用户什么？
  3. 这包含了怎样的意识和情感？

02. 明确你的目标用户

每一个颜色所针对的的用户群是不同的。由于用户的个性差异、文化背景和个人经历的不同，即使是同一个颜色，也会产生不同的效果。考虑到这一点，我们就需要去考虑当用户遇到这样的设计时所作出的反应。

对于一些颜色的含义，世界上的任何地方都是通用的，而有些则不是。一提到绿色，映入脑海的就是植物的颜色，看到他们就会自然而然的联想的到自然。红色则不一样，因为文化不同，所以含义也而不同。在西洋文化中红色代表的是：火（英: Fire）、暴力（Violence）、纷争（ Warfare），有时也会表示爱（Love）或者热情（Passion）。但是在中国则表示的是繁荣（Prosperity）和幸福（Happiness）。

颜色有着大不相同的含义，所以在创建调色板时，需要先试这去了解用户情感，这是很有必要的。

03. 了解配色方案的基本要素

在选择配色时，你必须了解一些关于配色的基本知识。配色的基本，就是配色组合的基本理论和构造，具有实践性和指向性。从最为基础的色轮，到每一个具体的意义都有很全面的总结和概括。

《给零基础新手的超快速色彩知识小科普》这篇文章，他对于颜色有着一个详细的划分，你们可以从中得到一些参考。

04. 尝试寻找灵感

有时候视，觉化的必要配色方案很难设计出来。那时候，你可以尝试着从别的设计师的作品中获得灵感。

在此，举两个对配色而言非常方便的网站；Dribbble 和 Behance。当然，偶尔想给你的材料设计找一些特殊的灵感时，在这里就推荐 Material UI 这个网站。

 上述列举的几个网站都很方便。接下来就让我们从不同的设计之中所产生的效果里一起来看一看吧。这样独具创意的方法，可以让你创建一些更有意思的调色版。比如，室内设计就是不错的案例之一。

当你想创建一些不同的配色方案，不妨试试转换一下自己的思路，利用其他文化的设计。例如：韩国的音乐MV、实用且绚烂多彩的调色板让人印象深刻。每一个场景，都可以给你带来不一样的灵感。

当然，我们也可以从日常生活中获得灵感以及启发。当你走出大门，室外的任何一个景色都可以作为你的参考。

当你看到了令人激动的配色时，可以把他们做成配色版。你可以利用Photoshop，或者一些在线工具，调整我们所找到的配色方案。

05. 制作属于你的风格指南

设计系统你所需要知道的风格指南是，将所有的设计要素放在统一的设计框架之中。在这之中包含了包括按钮或字体等全部的设计要素。我们在设计时应该思考什么样的按钮或导航菜单才是应该被选用的。

在实践中如何使用风格指南，在这里有一些网页的案例可以参考。设计师一起来学习，精心挑选的50个知名品牌的风格指南这篇文章，详细介绍了知名平牌是如何利用风格指南，可以用来参考。

因为它可以是一个简单的草图，所以在使用配色版之前，可以方便的帮助你做出你自己的风格指南。一目了然的知道利用什么样的设计要素，那么也就会明白该使用怎样的配色来进行制作了。

选择设计制作时用的调色板时，要有「KISS（略: Keep it Simple, stupid）（越简单越好）」这样的思路。首先，尽可能的减少颜色，我们需要考虑下面几点。

  1. 背景色（Background）
  2. 主色（Primary Color）
  3. 次要色（Secondary Color）
  4. 警告色（ Error Color）
  5. 成功色（ Success Color）

主色，作为一个重要的CTA（Call to Action）按钮或强调色被使用着，很多公司将他利用在LOGO设计上。

次要色、一般利用它来区别动作行为的颜色。举个例子来说，在警告和成功所使用的颜色，通常使用绿色和红色，如同下面的例子，你可以利用他们来设计从而将当前状态信息传递给用户。

06. 选择调色板

如果你已经想好了设计灵感，完成了风格指南并已然绘制了一些简单的草图，那么接下来你就可以选择调色板了。

一些基本的调色板，艺术家们通常将他们以相近的颜色排列在一起，这是一个非常不错的方法。

我们可以从这些配色方案中可以获得一些灵感作为参考。就让我们一起来看看如何从这许许多多的配色方案中取得最合适的方案吧。

正如前面所说，当你在挑选配色方案的时候，为了明确目的，传递出怎样的信息情感给用户，你可以尝试着问自己以下几个问题。

  1. 这个配色用起来很简单吗？
  2. 用什么颜色影响力最大，最能引人注目。
  3. 使用的这个颜色有必要让他更亮/更暗一点吗？用户在什么时候使用商品或者设计？
  4. 你想通过设计传递什么样的信息？

可以这么说，因为风格指南的不同，颜色在设计中所担任的工作角色也不同，各种颜色的重量也是不同的（Weight）。举例说明:强调色比背景色所使用的次数就要略多。

对于这一点你可以多做练习，而在实际页面中你可以将颜色依重要程度的不同来放进大小不同的形状中。下面是 Invision 的调色板。

考虑到强调色等颜色、配色以图形的模式在下面表现出来了。

07. 应用调色板

什么样的颜色适用于风格指南呢？让我们来看看这个比较容易理解的 Airbnb（一个旅馆预定网站） 的例子。Airbnb的强调色，是可以显示公司住所地址的红色（Rausch）。绿松石色（Kazan）是辅助色、背景色则使用了两种灰色（Foggy / HOF）。

Airbnb的很多页面，背景色使用的是比较明亮的灰色（Foggy）。比如下面的示例、预约房间是非常重要的动作，就使用了作为主色的红色（Rausch）。

绿松石色（Kazan），使用它能更好的吸引用户的注意。在下面的这个例子中，你可以看到作为辅助色的它很好的帮助了原色。

Airbnb 的错误信息提示，大概将红色（Rausch）进行了一些调整，利用了比较亮的红色。在图中所使用的感叹号和红色相组合，立即跳跃在用户的眼中，很好的将当前系统的状态传递给了用户。

试着使用最初的颜色来做设计。试着将他们放在布局和设计的焦点之中。在这些都完成之后，将调色板应用于设计。

考虑有关视觉的层次感（Visual Hierachy）。需要考虑什么样的要素，什么样的颜色与设计放置在一起才是最为匹配的。此外，鼠标在要素上悬停和点击时的动作响应，可以考虑使用不同的颜色。

最后

好看的配色，需要不断且反复的去尝试、重复。至于什么颜色最为适宜，这是没有固定且唯一的答案。决定了布局和设计的功能之后，尽量的多次尝试不一样的配色。

不断的学习如何使用颜色来进行设计，非常重要。在设计开始之前，不管什么样的颜色组合都能通过视觉化的效果表现出来，这样的话就可以选择更好的颜色进行设计。