下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >Photoshop >写给网页设计师的基础配色理论

写给网页设计师的基础配色理论

起个名字你猜我叫啥发布于 2015-05-23 22:33查看:1382回复:3

在这篇文章里,我们将聊聊为何色彩在网页设计中如此重要,以及在设计网页时如何选择令人满意的配色方案。这篇文章的主要目的在于为那些设计经验尚不丰富的设计师简要地介绍一下基础的色彩理论,并为如何将这些理论用于设计实践提供一些实用的建议。闲话不用太多,让我们这就开始吧!

这篇文章主要是写给谁的?

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

从我自己的经验中,我觉得在做设计项目时,配色部分往往相当棘手---作为一个设计师,这或许是最难搞定的一部分。但是,通过学习一些基本的色彩理论知识,再加上一些性能卓越的色彩软件,我自己的设计能力得到了很大提高,并逐渐克服了“配色弱”的缺点。

这篇文章可能对这几类读者最有帮助:

为了营造更迷人的视觉效果,迫切需要一些实用建议的网页设计师。
刚入行,想对色彩理论有个大概了解的设计师。

不明白“网站开发”与“网站设计”有何不同的读者。

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

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

在设计中,以互补效果,对比效果及色调等不同方式所表现出的色彩间的彼此关联和影响

这个定义可以说相当直白(而且浅显),但它却包含了三个色彩理论的核心词汇:

一致效果

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

对比效果

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

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

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

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

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

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

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

 

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

共有3条评论

  • K哥馆
  • 课课家团队03
  • 刘建忠老师
  • lao
  • 沫沫♂
  • 大萌
  • 知兰
  • 慧星的那一夜
  • Mr ken
  • YUI
  • cappuccino
  • mr jack
  • IT宅男
  • Mright
  • 人生如梦183
  • 选择版块:

  • 标题:

  • 内容

  • 验证码:

  • 标题:

  • 内容

  • 选择版块:

移动帖子x

移动到: