网站设计中颜色的选择,,CIO之家

网站设计中颜色的选择

佚名　　chinaz.com　　　　编辑:dezai　　图片来源:网络

前言：本文为本人翻译，主要处于学习的目的，本人不为原文及翻译过程中的错误负责，但是如果你发现错误，欢迎指正。所有内容的权利归原作者。

前言：本文为本人翻译，主要处于学习的目的，本人不为原文及翻译过程中的错误负责，但是如果你发现错误，欢迎指正。所有内容的权利归原作者。原文链接.中文链接

在我们的人生中，我们知道，有人天生就是一些方面的天才而其他一些人即使非常努力也只能过勉强通过。例如，有些人几天就可以学会一种乐器，而其他一些人可能一辈子都不一定学会。有些人只会说英语，而有些人可以流利的说几个国家的语言。有些人跳Electric Slide总是会伤及旁人，而有些人却可以跳的像集体舞。问题是，尽管很多东西无法掌握，有很多东西还是可以学会的。我们一直把对颜色的感知归功于天生的好眼色，是无法通过后天的学习掌握的。实际上，只要有合适的工具，可能还要一些刺激，即使是色盲的人也可以找到让人赏心悦目的挑选颜色的方法。所以，所有色盲的读者，包括那些认为没有简单的模式可以套用而心灰意冷退出Art 101的人，我们将为你展示如何像高手一样挑选颜色。

这是蓝色

首先让我们来学习基本的颜色术语以保证我们不会在学习的过程中落下任何人（我们不希望待会还要回来接落下的人）。我们都知道原色（primary color）有三种，分别为红、黄、蓝。把两种原色混合可以得到合成色（secondary colors）。黄色和红色混合得到橙色，红色与蓝色得到紫色，蓝色和黄色得到绿色。那么三级色（tertiary colors）呢？只要把原色和其相关合成色混合就可以了。这意味着有六种三级色（每种原色可对应两种三级色）。图A所示为几种颜色的关系。

图A: 为了理解如何选择最佳的颜色方案，理解三种颜色是首要的任务

为了完全理解这些颜色的关系，最好将这些色调组织成一个圆圈。这种组织方法，如图B所示，在设计圈内所说的色轮（color wheel）。看起来很漂亮，不是么？但是它的真正的美妙之处在于它如何帮你在网页设计中挑选颜色。

图B: 将原色，合成色和三级色组合可以得到色轮

选择颜色最简单的方法只要想象色轮上有一个内接的等边三角形。三角形顶点的颜色就是可以用的颜色。（对于数学和艺术上一样失败的人们：三角形的顶点就是三角形任意两条边的交点。）这种颜色选取方法叫做三角形法(triad schemes)。从图c中的例子，你可以看到我们有四个单独的三角形。通过这种方法，可以将这些颜色形成一个协调的颜色组合。

图C: 色轮上有四种三角形可能

除此之外，你还可以选择补充颜色。也就是色轮上面正对面的颜色，比如红和绿。他们称作互补色因为如果一起使用，都可以使相对应的颜色更亮和更生动，如图D所示。

图D: 色轮上相对的颜色叫做互补颜色

方案的变化
现在，我们准备把颜色混合起来，就是将三角形顶点颜色和互补色以及其他颜色混合起来。例如，你可以将两组互补色组合起来，叫做双互补。比如黄色和紫色，蓝色和橙色。另外一种绚丽的颜色组合是交替互补，把三个一组的颜色和其中之一的互补颜色组合。比如绿色，紫红色，红色与橙色的组合。
你也可以将某种颜色分解成为三种颜色，一种色调及其补充颜色的临近色调。

最后，在组合的目录中，你也可以得到四分色(tetrad)，你可以将四种色轮上相对应得颜色组合在一起。比如你可以使用一种原色，一种合成色，两种三级色。图 E所示为各种方法的例子。

图E: 对比的颜色可以让网站生动起来

颜色大家庭

既然我们已经包含了所有的可能变化的颜色，我们需要注意两种使用相关颜色的方法——单一颜色集和类似颜色组合。单一颜色集合，正如其所说的，就是使用单一的色调，但是颜色的深浅不一样，也可以采用阴影。如果正确使用，这种方法可以给一个网站清新的外观。相反的，类似颜色组合，使用了色轮上的四种颜色。任意四种——你只要转动轮子。你可以从图F所示的例子看到，类似颜色法和单一颜色法很相似。

图F: 类似的颜色看起来像一样的

颜色组合

既然我们已经完全告诉你颜色的选取方法，我们需要给你一些最后的忠告。首先，我们给出的颜色并不是最好的，你可能还需要对颜色的饱和度和深度进行调整。我们给出的颜色选取方法只是起点而不是终点。最终的选择因素应该是网页的可读性和网页整体的外观和感觉。为了直观的表示出哪种颜色方案更好，设计专家建议你设计出这些颜色方案进行比较，观察哪种方法更适合你的网站。例如，你可以见图G，一些颜色组合起来很好而另外的就需要进行一定的修改。

图G: 你可以想象所有可用的颜色组合

结论

由于颜色的选择是设计世界中最主观的事，但是理解为什么要选择其中一组颜色而不是其他颜色的原理仍然很重要。这一原理不一定能让你立刻选对颜色，但肯定会让你朝着正确的方向走。现在，你所要做的就是赶紧学习如何跳Electric Slide.

本文作者:佚名来源:chinaz.com
CIO之家 www.ciozj.com 微信公众号:imciow

免责声明:本站转载此文章旨在分享信息，不代表对其内容的完全认同。文章来源已尽可能注明，若涉及版权问题，请及时与我们联系，我们将积极配合处理。同时，我们无法对文章内容的真实性、准确性及完整性进行完全保证，对于因文章内容而产生的任何后果，本账号不承担法律责任。转载仅出于传播目的，读者应自行对内容进行核实与判断。请谨慎参考文章信息，一切责任由读者自行承担。