配色讲道理！THINKFUL网站配色完全学习指南（下）

　　常听人感慨，看了那么多的案例，依然搞不定配色，这真是一个悲伤的故事啊!的确，找到漂亮的网站容易，弄明白为什么漂亮，却需要从根子上来思考，所以，读完上篇的基础分析之后，接下来你需要掌控那些关于配色的概念和思路，这才是真正意义上的授人以渔。上半部分右戳：《配色讲道理!THINKFUL网站配色完全学习指南(上)》

　　优设之前也曾发布过从零开始构建配色方案的文章，先来一发预热一下：《设计师必备取色技巧!教你在PS里通过照片创建色板》

　　

　　色彩术语

　　色彩术语的存在让我们能够区分和描述色彩，熟悉并了解这些术语之后，我们能够灵活地

　　• 色相(Hue)—即各类色彩的相貌称谓。

　　• 色彩饱和度(Saturation)/色度(Chroma)—颜色的整体强度或者亮度

　　• 明度(Value)—色彩的明暗程度

　　• 色调(Tone)—是纯色和灰色组合产生的颜色，也可以说是一幅画中画面色彩的总体倾向

　　• 色度(Shade)—是纯色和不同比例的黑色混合产生的颜色，色彩的纯度

　　• 色彩(Tint)—是纯色和白色混合产生的颜色，一种色相(Hue)通过加入不同比例的白色能够产生不同的颜色

　　色彩属性

　　色彩的很多属性能直接影响到一个物体的视觉效果。比如饱和度较高的物体比饱和度较低的物体更能吸引人的眼球，而明度较高的物体也有类似的效果。而实际上，色相本身也能传达出特定的视觉感知。在所有色彩中，下列色彩尤其突出：

　　1、红色(最突出)

　　2、蓝色

　　3、绿色

　　4、橙色

　　5、黄色(最不突出)

　　当你在页面中使用红色的时候，整体视觉会更加突出，所以当你需要吸引用户注意力或者涉及重要操作的时候，可以这么用色。而黄色相对而言更容易融入背景色，并不会像红色那么抓人眼球。所以，当你在制作配色方案的时候，这些色彩关系和配对方案就显得尤为重要了。合理地色彩搭配能够让你制作出震撼的视觉效果，设计出吸引人的焦点。为了更好的明确色彩之间的关系，设计师和艺术家们常常会借助色轮来进行配色。

　　色轮

　　色轮可以说是最实用的色彩管理工具之一，它可以反映不同色彩之间的关系，帮你挑选首选色、搭配色。 在制作配色方案的过程中，色轮是最重要也是最实用的工具之一。色轮最初还是源于牛顿1672年所发布的一个实验，牛顿使用棱镜来查看不同波长的光，将折射后的光线投射到一个圆环上。随后他证明，饱和度最高的色彩位于色轮的外侧，而中性色位于中间。牛顿认为，艺术家可以借助他的研究成果来提高艺术作品中的色彩对比。实际上他的色轮模型也确实为设计师们提供来行之有效的配色途径，创造出更为漂亮的艺术作品。

　　几百年后的今天，色轮依然是设计师手中最为得力的配色工具之一，不论是网页设计还是品牌设计，色轮能赋予你的设计一套富有凝聚力的配色方案。由于色轮本身所承载的色彩数目限制，它所提供的配色方案更多是一个大概，而非最终的方案。

　　

　　传统意义上的色轮通常是印刷出来的2～3个纸质环形构成的，中间被固定住，可以旋转。Adobe的网站Kuler就为你提供了一个不错的在线版本，并且还能帮你配色。另外一个在线色轮网站是Colorhexa.com，也是不错的选择。

　　配色方案

　　当你选好基本的颜色之后，你就可以借助色轮来确定配色方案了。

　　•近似色——你可以使用色轮上位置相邻的色彩。确定首选色之后，你需要选择用来搭配的第二和第三种颜色。近似色与你的首选色接近而不同，能与之和谐存在，你可以使用近似色来构建配色方案。

　　

　　•单色——基于单色的配色方案也不难实现，首选色的色相确定之后，调整它的色度、色调和色彩(让其与不同比例的黑色、白色和灰色混合)，也可以形成一套配色方案。

　　

　　•三色——三色配色方案借助色轮很容易实现，也就是使用色轮上相互等距离的3种颜色即可。

　　

　　•互补色——色轮中心对称的两边的颜色就是互补色，两种色彩相互抵消，色盲的用户可能分辨不出来部分对比色。所以，如果你想每个人都看清楚网页的内容，那么请不要使用两种正好处于相反位置的色彩。(稍微偏一点就好了)

　　

　　•复合色——确定首选色之后，挑选一个互补色，然后加上一个与首选色同色系的色彩，这样的三色搭配方案很容易实现，提供了明显的色彩反差，也不容易被滥用。

　　

　　•中性色——很多高大上的网站就是这么配色的，就靠中性色黑白灰撑起来的。

　　

　　•自定义——抛开上面的配色规则，不再遵循传统，用更加冒险和激进的方案来装饰网站。

　　

　　最后，请记住最后一点，网站配色的目的是要提高网站的体验和可读性，不要让用户分心。当你设计配色方案的时候，需要保证即使是色盲用户都能准确而轻松地获取网站内容，这也就意味着你的配色要保证足够的视觉反差，而非全部使用对比色。最简单的验证方法，就是将饱和度降到最低，如果你依然能看到网站最重要的内容，能看清图形和图像，就好了。

　　?

　　这样一来，想必你也对于网页配色有了更清晰的想法了吧。至少选择两种色彩，一主一次，并且两种色彩足以支撑起网站的视觉。在必要的时候，可以基于这两种色彩拓展出更多的同色系色彩，令网站色彩更丰富。

　　?

　　色调、色度和色彩

　　配色方案最重要的因素

　　当你要使用你的配色方案来设计网页布局的时候，你需要仔细审视整个网站来考虑如何使用这些色彩来引导你的用户。审视网页布局，你得先找出哪些地方更重要，哪些地方需要你的用户点击，哪个页面是你希望用户优先访问的，确定了这些用户行为方向之后，你就知道哪些地方的视觉是需要强化的。合理调整配色中颜色的色彩、色度和色调可以让页面不同的部分有轻重之分，正确引导用户。

　　很多时候，你希望用户能直接点击某个按钮，通常网页设计中会让它成为一个“行为召唤按钮”，让它随着鼠标行为而改变颜色。为了吸引用户，按钮一般状态下会使用首选色，那么要如何选择它的悬停和禁用时候的颜色呢?一般来说，最好是有微小的过度，所以很多设计师会选择使用同色系的色调或者色度来表示不同的状态。

　　比如，假设首选色使用的是#00AEEF：

　　

　　按钮一般有四种状态：normal(一般)，hover(悬停)，pressed(按下)，disabled(禁用)。接下来，你需要做的是基于色板中的色彩，来调整出一套与之适配的用色，而不用引入更多不必要的色彩。

　　

　　这个时候你可以从首选色#00AEEF开始，加入一定的黑色(Shade)，配出Hover的时候的用色#0077A1。按下状态下，色彩应该会更深，那么，你可以加入更多的黑色来模拟出那种物理按钮被按下的状态。通常当按钮被禁用的时候，设计师会让色彩看起来更浅一点，所以，你需要做的就是让首选色色彩或者色调更浅一点(加入白色或者灰色)，就成了。

　　案例在此：Code

　　用户界面中有许多元素，涉及到各种不同的操作，为了区分它们又得忠于配色方案，灵活调整色彩、色度和色调是非常必要的。

　　中性色

　　让网页有对比更平衡

　　在很多网页中，你会发现网页的主体通常使用了白色的背景和灰色或者黑色的文字。这种设计上的尝试早已有之，这种对比度确保了可读性。

　　使用中性色的美妙之处在于，它可以和任何配色方案搭配。你可以在配色方案中添加中性色，提高排版效果和可读性。你也可以在网页元素中适当地增加灰度，提高信息的层次，并不是网页中每个元素都非得色彩鲜亮。有了层次，视觉就有了焦点，用户就不会分心。

　　正如下面的案例，云托管服务商Digital Ocean的网站，灰色背景让网站主色调突出，提高了可读性。

　　

　　选择多少色彩才合适

　　通常能具备主次两种色调就够用了，但是也可以通过调整色调、色彩和色度可以灵活创造更多的可能性。

　　值得一提的是，网站的色彩比例控制为6:3:1最为适宜。色彩比例均匀的话，会让色彩之间相互冲突，主次不分。6:3:1规则指的是，主色调应该覆盖6成的网页和UI元素，辅助色占据3成，而剩下的1成则应该是装饰色或者强调色，让网站或者UI更舒适。

　　Best Buy就是个典型的案例，蓝色为主色调，黄色为辅助色，红色用以强调。

　　

　　而在这个例子中，色彩使用太过于散乱，各种色彩的比例不明显，对比混乱。

　　

　　最后这个网站的配色堪称是灾难性的。典型的反例。

　　

　　结语

　　其实，理论学习并不难，读完收藏也就几分钟的事情，但是要融会贯通需要大量的练习，反复的思考，合理的总结。接下来，打开电脑动手吧~