Web开发

首页 » 常识 » 问答 » 设计课堂平面设计写给网页设计师
TUhjnbcbe - 2022/1/2 15:42:00

这篇文章主要是写给那些对正统的设计原理感兴趣的读者。我不打算把这篇文章写成一篇“如何在设计中运用色彩”的完整论文(或许我会在将来详细谈谈这个话题),正相反,这篇文章面向的是那些需要实用经验,以便能在网站设计这一特定领域利用色彩理论的设计师。

简而言之,什么是色彩理论?

色彩理论涉及到很多方面,但它最基本的定义是“在设计中,以一致效果,对比效果及色调等不同方式所表现出的色彩间的彼此关联和影响”。

在设计中,以互补效果,对比效果及色调等不同方式所表现出的色彩间的彼此关联和影响这个定义可以说相当直白(而且浅显),但它却包含了三个色彩理论的核心词汇:

一致效果

色彩的一致效果侧重于描述一种色彩与其他色彩的关联性。当我们注视两种分别位于“色轮”两端的色彩时,会有一种和谐悦目的感觉。因为此时我们的目光不是被迫分散于不同的区域,而是达到了平衡。基于“色彩一致”的原理,有两种配色法最为常见:三角对立法与复色搭配法,我们将稍后再细谈这两种方法。当你能真正理解和掌握“色彩一致性”这一原理之后,毫无疑问你的设计水准也会跃升一个层次。

对比效果

将网页划分为色彩明显不同的内容有助于减轻用户的视觉疲劳和引导用户的注意力,这应当归功于色彩的对比效果。这一原理最为普遍的体现就是网页中经过精心设置的背景颜色和文字颜色,例如,在下面这张图中:

当你为网页中的配色而犹豫不决时,最佳的策略通常是选择一种较淡的色彩做背景色,选择一种较深的色彩做文字的颜色。网页设计是一个色彩可以决定生死的领域。在许多设计项目中,当文字占据了很大区域时,留给设计师自由发挥才华的空间其实并不多,因此遇到这种情况,我们应当以清晰简洁的风格为主。

对比效果除了能呈现给用户阅读体验更好的文本之外,还能将用户的视线引向网页中的特定内容。(想想你读书时是怎样在教科书上标注重点内容的:遇到一页书中你特别想留意的内容时,你会想办法让这段内容看起来与其它任何一段都不同。)同样的策略也适用于网页设计:在网页中运用一系列不同的色彩,可以将用户的目光锁定于特定的网页内容之上。

如果你的网站是黑色背景,吸引用户的方式莫过于将主要内容设置为稍亮一些的颜色。

即使在近似配色法(稍后会谈到)中也可以运用这个原理。

色调

在设计中,善用色调确实可以让你的作品传达出更为细腻微妙的感情。例如,暖色调的作品会让客户觉得你的作品更有活力,如果是在广告设计中,这种“感情唤起”的效果会更为显著。暗色调会给观看者舒适放松的感觉,他们可以借此调整思绪,想想别的事情。CNN和ArsTchnica网站中的色彩对比就是很好的例子:

CNN网站的上部使用了一条鲜亮的红色条幅,配合以网站的整体设计(该网站采用了红,白,黑三色为主的配色模式),令网站用户的精神为之一振。

ArsTchnica网站的背景则使用了较暗的色调,以舒缓用户的注意力,并将他们的注意力引向网站的内容。暗色背景也凸显出前景中的技术性文章。更重要的是,亮色通常会激发观看者的脑能量,而该网站有意使用暗色背景,避免了用户的将脑力浪费于背景之上,使他们能更加集中精神去阅读以较亮的色彩显示的文字内容。

如何取得最佳配色效果?

以下是三种被广泛使用的配色方法:三角对立法,复色配色法和近似配色法。

三角对立法

是指由色轮上不同位置的三种色彩组成的三角形。三角配色法是一种非常快捷的配色方式:

首先,在一个色轮上选取一种你想要的颜色,作为基准色。

以基准色为起点,在色轮上画一个等边三角形。

这个等边三角形的三个顶点所属的三种颜色即形成一个三角对立配色方案。

这个“等边三角形”的配色十分均衡,三种色彩和谐一致,相得益彰。

复色配色法(又称分离互补配色法)

这种配色方案的基本原则是选择最具有互补性的颜色,即色轮上彼此相对的一组色彩。这种配色方案既能充分利用互补色所营造的独特视觉效果,也能给予设计师非常大的自由度。

近似色配色法

这种配色方案的基础是色轮上相互邻近但又彼此独立的一组色彩。一般来说区分这组色彩的主要依据是它们的不同色调及对比度。

有了它们,设计更有趣

我们应该感谢科技的进步,让我们能拥有这些把色彩选取变得如同游戏般轻松的工具,当然,前提是你得懂得如何使用它们。最重要的是,它们将进一步加深我们对色彩理论知识的理解。

有了这些软件的指引,我们可以更高效地学习如何将学到的色彩理论运用到我们的设计中,即使结果并不完美,我们也不会深感沮丧了,因为可以随时重来。你不妨把这些工具看作是设计中的“配色防护网”,你可以充分利用它们发挥你的创意而又不必担心因太过标新立异而失去客户。

Kulr

Kulr是一款由Adob公司开发的软件,旨在为用户提供直观而快速的配色方案。用户可以编辑调色板上的任何一种色彩,也可以随意选择某种色彩作为基准色,只需轻点几下鼠标。用户可以保存和导出调色板,在该款软件的

1
查看完整版本: 设计课堂平面设计写给网页设计师