如果一幅图所表达的内容就可以胜过数千文字的叙述,那么一张界面又有多少内容可以让我们探讨呢?事实证明,这里有许多不同的主题值得我们去讨论,其中一个主题就是色彩理论,它包含挑选一个匹配颜色色系的基本技巧。 当你在设计网站时,采用的颜色会传达出截然不同的思想和情感,所以为你的品牌选择合适的颜色非常的重要。例如,如果你给美国的顶级沙滩设计网站,和你创造一个像Groppon一样的在线商城,你肯定希望用不同的配色设计它们,因为它们传达的是不同的信息——一个网站传达的是让人心情放松,而另一网站传达的是由于做了一次非常棒的交易而让心跳加速兴奋。 本指南探讨的主题是关于网站和平面设计的色彩。学习先进的色彩理论最好的方法,是通过实践,而不是理论。但是为了提高,你必须有一个起点。除了有用的配色技巧和观点,你还可以发现许多宝贵的资源散落在整片文章中。 颜色的目的 从艺术的角度来探索色彩,它可以使主题更加鲜明。这就是一张绘图和一幅绘画主要的区别,尽管它们能传达相似的信息。这个道理适用于任何设计包括网页设计。 ![]() 因此,当在考虑颜色时,记住,颜色很少用来做页面的结构的区分和搭建。你应该用灰色来构建一个布局,就可以让人了解到界面的整体结构关系。访问者在浏览网站界面时,色彩可以带给访问者更加丰富的信息内容。 HSV色彩模型 大多数色彩理论文章讨论的观点是,每种色彩背后的思想和它们表现出的情感。我觉得感情的话题太主观,虽然它是准确的。选择一个配色方案,不仅仅是凭情感,相反,我要研究颜色是如何工作的,以及如何开始自己练习。 一个良好的开端是色相(Hue)、饱和度(Saturation)、明度(Value)(或HSV)。你可能理解这些测量颜色的术语,但是我想告诉你这些值确实非常重要。明度是你在黑白照片上获得的信息——就是不同色度的灰色。把一个网站截图,将它转换为灰度图,你就会看到它的原始值。 ![]() 饱和度(或纯度)与一个颜色的纯度和鲜艳度相关。可以把饱和度看成是色调的强与弱、浊与清。大多数人识别饱和度就是通过对比香蕉黄和粉笔黄的区别。粉笔色更为“发白”,似乎缺少鲜艳度,因为它的饱和度更低。从下图的Munsell color system(孟塞尔颜色系统)图表中,可以获得更好的理解: ![]() Harmonic模式 当选择一个配色方案时,你有很多不同的模式可以遵循。诚然不是每个人都懂得如何挑选颜色,幸好网络上有很多方便的资源,来帮助我们完成这个任务。我认为这些色彩调和的网页做的很出色,但是让我们讨论一些更有趣的选择吧。 互补色是色轮上相对的两个颜色,它们之间的色彩对比非常强烈。例如,紫色按钮在黄色背景上非常的突出,因为它们是高对比度的配色。当然,这还取决于每一种颜色的饱和度,通过实践来理解是最好的。请记住:对立对比! ![]() ![]() ![]() ![]() ![]() 对比是网页设计的永恒话题。对比度是页面上的两个对象之间的清晰程度。最值得注意的包括段落、链接和标题文本。如果文本和背景颜色之间没有足够的对比,那么文字就很难阅读(太亮或太暗)。 最安全的选择是始终退回到一个明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明显,反之亦然。然而,一些颜色经常产生一种不和谐的效果,如红色和绿色。这种对比在某些情况下是精美的艺术,但不是任何情况下。在布局当中,如果遇到颜色丰富的地方,在给链接和按钮用色时要非常小心。 ![]() 思考一下,图标或具有行为召唤能力的按钮,在设计中所需要的对比度级别。和谐的高对比度元素,自然能引起人们地关注。当某个按钮或者注册区域需要更多的关注,高对比度往往是一个很好的解决方案。颜色如果使用得当,能产生均衡的对比。 避免纯黑 从美学界获得一些建议,就是避免纯黑色。当你看到现实生活中的物体,你几乎看不到纯黑色。事情看起来很暗,但它的HEX色值(十六进制)不太可能是#000。你甚至可以尝试拍摄照片,并在Photoshop中测试它的HEX色值。 最近我发现了Ian Storm Taylor写的一篇文章, ,题目叫做《不要使用黑色》。它指出,通过避免在界面上使用纯黑色,能更真实地反映现实世界。这可能是一个有偏见的说法,不过近些年来,我发现这是一个极好的建议。 为了实践这一观点,尽量避免在较亮的背景上使用#000。取而代之,选择一个暗灰色,可能是混合色(深蓝色,深绿色,深橙色等)。我总是觉得,在白色背景上的深灰色文字,比纯黑色文字的可读性高出10倍。 纯黑色与其它颜色相比,反差非常大。这一点让我很苦恼,但即使是一点积极的差异,还是有区别的,所以我的建议是避免使用#000。 提炼配色方案 门色彩理论,最简单的方法可能是从一个单一的颜色开始入手,并使用在线指导工具。没有人与生俱来就理解色彩的选择。但随着不断的重复,它就变成了你的第二天性。 选择配色方案的时间,会在启动一个Web项目并收集想法(线框图,草图,页面元素)之后。这可能发生在设计一个简单的模型之前或者之后,但方法仍然是相同的。只需选择一种颜色,可以与基于内容、形式、风格或情感的布局很好地工作。 ![]() Paletton是我个人最喜欢的,因为它提供了一系列基于调整饱和度的相对色。它还提供了基于你所选择的颜色,相同的颜色范围的预设方案。最重要的是,它是完全免费的! ![]() 当谈到提炼自己的配色方案,我强烈建议选择这两个中的一个。它们都是基于Web的免费工具,并提供足够的功能,让你开始构造可爱和丰富多彩的项目。 在线工具和Webapps 除了令人称奇的配色生产器,也有一些其它工具,值得保存以供将来参考。我觉得这些工具和资源,对数码设计,例如如图形或网站设计最有帮助。但你应该从中精选那些最有益于您的工作流的资源。 ![]() ![]() 但是,当涉及到数字设计,有许多其它网站,你可以前去学习。一个在线工具Check My Colours,可以将任何网站拉进来,检查文本和背景颜色之间的对比度。这是一个优质的资源,用来测试其它网站以及您自己的设计。 ![]() 浏览器扩展 我们大多数人都知道Adobe产品中有拾色器,如Photoshop或者Illustrator。这是一个迫切需要的工具,因为它提供整个色谱,以及一个RGB和HEX值。但现在大多数Web浏览器插件,可以复制一个类似的颜色选择器。 ![]() ![]() 有了合适的扩展,所有这些浏览器都可以转换为颜色的资源,而不需要开启另一个程序。 颜色好看的网站 我喜欢用具体实例来阐明颜色的选择,而不是列一堆网站。这些例子可能不是颜色匹配的绝对典范,但它们确实为网页设计师提供了一个可靠的学习经验。 ![]() 虽然这种风格可能并非适用于每个站点,但他它却是混色的一个很好的例子。页面很容易阅读,但并不觉得对比度太强。找到一个甜美平衡的颜色是一个设计师的终极任务。 ![]() 这个例子是一个有趣的比较关系,同样还要注意不同部分滚动时,色彩关系的变化。在色彩理论的世界里,最好的效果是相对的。 Digimurai是一个更简单但典型的网站。显而易见,网站的设计布局主要集中在暗蓝色的色调中。这给人的印象是,蓝色占主导地位,并控制了大部分的设计。 但你会发现整个布局,还有其它的高亮色调。橙色和浅蓝色的出现非常突出,与暗色背景形成对比。要记住在选择一个配色方案时,使用2个或3个不同的色调,因为这样很可能会设计出一个非常棒的网站。 结尾辞 最后,我希望这个指南能提供可靠的起点给各位数字艺术家和网页设计师。色彩理论非常像音乐理论,其中主要的原理是通过实践得知,而不是传统的理论分析。但是在起步阶段,可能会感觉有些困难,等你积累了相当一部分资源和理论基础之后会感觉越来越顺畅。 如果你真的想了解配色方案的选择,那么就要坚持练习。刚开始的期望值不要太高,因为很有可能你在初始阶段的实践结果不会很成功,但是随着时间的推移,你会做得越来越好。 |