专业的编程技术博客社区

网站首页 > 博客文章 正文

设计师必备知识分享!色彩应用知识

baijin 2024-08-31 15:57:57 博客文章 3 ℃ 0 评论

SV色彩模型大多数色彩理论文章讨论的观点是,每种色彩背后的思想和它们表现出的情感。我觉得感情的话题太主观,虽然它是准确的。

选择一个配色方案,不仅仅是凭情感,相反,我要研究颜色是如何工作的,以及如何开始自己练习。

一个良好的开端是色相(Hue)、饱和度(Saturation)、明度(Value)(或HSV)。你可能理解这些测量颜色的术语,但是我想告诉你这些值确实非常重要。

明度是你在黑白照片上获得的信息——就是不同色度的灰色。把一个网站截图,将它转换为灰度图,你就会看到它的原始值。

这就是说,明度是明暗程度,表示颜色的明与暗,也被称作亮度。

色相是最基本的颜色术语,通常用来衡量实际的颜色,如蓝色、红色或黄色。色相是相当简单的,你可以通过记传统的色轮来记住它的规律。

饱和度(或纯度)与一个颜色的纯度和鲜艳度相关。可以把饱和度看成是色调的强与弱、浊与清,大多数人识别饱和度就是通过对比香蕉黄和粉笔黄的区别。粉笔色更为"发白",似乎缺少鲜艳度,因为它的饱和度更低。

从下图的Munsell color system(孟塞尔颜色系统)图表中,可以获得更好的理解:

这个图是值得我们去理解的,因为颜色都是相对的。

所以,一个"冷"色,像蓝色用在浅色中就不那么冷了,同样的"暖"色,在暗色中也就不那么暖了。

颜色系统是一个奇怪的话题,因为它常常与其它颜色相互作用。这样听起来好像是没有意义的,但你可以把它作为学习的例子,在实际的项目中不断练习。

避免纯黑从美学界获得一些建议,就是避免纯黑色。当你看到现实生活中的物体,你几乎看不到纯黑色。

事情看起来很暗,但它的HEX色值(十六进制)不太可能是#000。你甚至可以尝试拍摄照片,并在Photoshop中测试它的HEX色值。

最近我发现了Ian Storm Taylor写的一篇文章,题目叫做《不要使用黑色》。

它指出,通过避免在界面上使用纯黑色,能更真实地反映现实世界。这可能是一个有偏见的说法,不过近些年来,我发现这是一个极好的建议。为了实践这一观点,尽量避免在较亮的背景上使用#000。取而代之,选择一个暗灰色,可能是混合色(深蓝色,深绿色,深橙色等)。

我总是觉得,在白色背景上的深灰色文字,比纯黑色文字的可读性高出10倍。纯黑色与其它颜色相比,反差非常大。这一点让我很苦恼,但即使是一点积极的差异,还是有区别的,所以我的建议是避免使用#000。

提炼配色方案入门色彩理论,最简单的方法可能是从一个单一的颜色开始入手,并使用在线指导工具。没有人与生俱来就理解色彩的选择,但随着不断的重复,它就变成了你的第二天性。

选择配色方案的时间,会在启动一个Web项目并收集想法(线框图,草图,页面元素)之后。这可能发生在设计一个简单的模型之前或者之后,但方法仍然是相同的。只需选择一种颜色,可以与基于内容、形式、风格或情感的布局很好地工作。

在线web应用,如Paletton是早期的方案设计中必不可少的。

你输入一个单色,然后选择你喜欢的(相近色、三色式、四色式等)匹配方案。每种配色方案允许额外补充一个,与你选择的颜色相反的颜色。

Paletton是我个人最喜欢的,因为它提供了一系列基于调整饱和度的相对色。它还提供了基于你所选择的颜色,相同的颜色范围的预设方案,最重要的是,它是完全免费的!

另一个流行的选择是Adobe Color,它有非常相似的设置,但界面有些复杂。

你依然需要基于输入一个单色,来选择配色方案。不过Adobe Color使用色轮展示匹配的颜,每一种颜色是灵活的,易于移动的,在维持颜色模式一致性之内。

当谈到提炼自己的配色方案,我强烈建议选择这两个中的一个。它们都是基于Web的免费工具,并提供足够的功能,让你开始构造可爱和丰富多彩的项目。

浏览器扩展我们大多数人都知道Adobe产品中有拾色器,如Photoshop或者Illustrator。这是一个迫切需要的工具,因为它提供整个色谱,以及一个RGB和HEX值。

但现在大多数Web浏览器插件,可以复制一个类似的颜色选择器。

Chroma是谷歌Chrome浏览器为设计师和色彩爱好者,提供的一个免费扩展应用。它有一个正方形和圆形的颜色选择器,以及很广泛的不同明度的配色工具。

Mozilla Firefox浏览器有一个类似的扩展应用,叫做ColorZilla,它有吸管功能,可以从网页挑选颜色,并显示它的RGB及HEX色值。

如果你是一个Opera的用户,可以找到一个名叫Color Picker的扩展应用。你会发现它与Photoshop里的界面风格相同。有了合适的扩展,所有这些浏览器都可以转换为颜色的资源,而不需要开启另一个程序。

颜色好看的网站我喜欢用具体实例来阐明颜色的选择,而不是列一堆网站。这些例子可能不是颜色匹配的绝对典范,但它们确实为网页设计师提供了一个可靠的学习经验。

网站Barcamp Omaha 2014在连续滚动的页面区域,采用了大量不同的颜色。最突出的一点是,文本设计很好地融入到每一个背景部分。

页面上对比度最大的,往往是图形或按钮,你可以在整个网站中都看到这种效果。虽然这种风格可能并非适用于每个站点,但他它却是混色的一个很好的例子。

页面很容易阅读,但并不觉得对比度太强,找到一个甜美平衡的颜色是一个设计师的终极任务。

iForex Water是一个视差网站,展示有关水资源消耗的信息。不像我最后一个例子,此网站在每一屏都使用相同的颜色,然而背景在不断变化。

但是因为颜色都是深色,它们仍然能够作为背景正常工作。

这个例子是一个有趣的比较关系,同样还要注意不同部分滚动时,色彩关系的变化。在色彩理论的世界里,最好的效果是相对的。

Digimurai是一个更简单但典型的网站,显而易见,网站的设计布局主要集中在暗蓝色的色调中。这给人的印象是,蓝色占主导地位,并控制了大部分的设计。

但你会发现整个布局,还有其它的高亮色调。

橙色和浅蓝色的出现非常突出,与暗色背景形成对比。要记住在选择一个配色方案时,使用2个或3个不同的色调,因为这样很可能会设计出一个非常棒的网站。

结语:色彩理论非常像音乐理论,其中主要的原理是通过实践得知,而不是传统的理论分析。但是在起步阶段,可能会感觉有些困难,等你积累了相当一部分资源和理论基础之后会感觉越来越顺畅。如果你真的想了解配色方案的选择,那么就要坚持练习。刚开始的期望值不要太高,因为很有可能你在初始阶段的实践结果不会很成功,但是随着时间的推移,你会做得越来越好。

注:本文来源网络

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表