您的位置:网站首页 > 新闻原创 > 安乡网页设计

网页设计中的色彩搭配原理

日期:2016-12-6 10:02:26 人气: 标签:
分享到:
网页设计中的色彩搭配是个令人头痛的问题,怎么样才能搭配出赏心悦目的色彩组合?下面M姐就来介绍一些基本的色彩原理和几个相关工具。

什么是色彩原理?
色彩原理包含诸多内容,但最基础的是色彩的互补、对比和活力。

互补

色彩的互补是指我们看到的一种颜色与其他颜色之间的关系。当所选的颜色处于色谱两极时,会中和出一种视觉上的愉悦感,这就是互补。色彩互补的方式主要有两种:三色系和复合配色,下文中会详细讲到。掌握复杂的色彩互补技巧能够帮助我们在设计上提升一个层次。

对比

色彩对比能减轻视觉疲劳,通过不同颜色元素的区分保持用户的注意力。最常见的一种色彩对比运用就是文章背景色与字体颜色之间的对比。

假如看了上面几张图还对色彩对比在文字上的运用有疑惑,可以试下最简单的:用浅色背景搭配深色文字,保证不会出问题。这是个色彩对比的例子。但在大多数项目中,文字部分并非发挥设计亮点的地方,因此设计风格保持简洁清晰即可。
文字中的高亮效果原理同样可以运用到网页设计中。若网页背景色为深色,则文字颜色使用淡色。反之亦然。


活力

色彩的活力的确能展现出设计中感性的一面。亮色系让用户感觉充满活力,当推销产品或寻求情感上的共鸣的时候,亮色系的使用就显得尤为有效。深色使人放松,让用户的注意力集中到某个事情上。

怎样选择色彩搭配?
色彩搭配有三个被普遍接受的标准:三色系、复合配色和相似色。

三色系

色谱上的三个极端颜色的组合。有一种非常简单的方法来确定一个三色系组合:
拿出色环,确定一种基础色
以该基础色为起点,在色环上画一个等边三角形
等边三角形所在的三个定点所在位置就是你所要使用的色彩组合

复合配色(即分散的互补色)

复合配色基于一系列互补的颜色:如上图在色环上选择一组相对的颜色。使用这种方法,设计师有更多自由发挥的空间,同时又从互补色中得到良好的视觉效果。
相似色

相似色搭配是从色环上选择相邻的三种颜色进行搭配。通常所选的三种颜色通过色彩活力以及相互之间的色彩对比进行区分。

工具的使用
多亏有诸多工具的存在,让色彩设计工作变得及其简单。同时这些工具能帮助我们更好的理解色彩原理。在指导下进行试验,学习如何将色彩法则运用自如。

Kuler
Kuler是一款Adobe公司发布的色彩搭配工具,旨在提供一种直觉的方式创造出调色板。点击就可以进行操作,调色板上的每种颜色都可以被修改,也可以被选作基础色。可以将调色板进行保存或者发布。Kuler网站同时提供了许多很棒的社区入口。每种颜色都有导出功能。但是界面交互比较复杂,调整一种颜色的活力可能会改变整个调色板。总之,像那些对概念有很好的把握并有足够耐心进行操作的人使用。


Color Scheme Designer
对初学又缺乏耐心(或者赶deadline)的人来说,Color Scheme Designer是一款很适合的软件。它提供了一个简单而可控的选择器,操作方便,并提供多种根据色彩原理显示的色彩搭配,但不告诉用户这些色彩搭配的原理和原因(从这点来说Kuler的动态色环更加有帮助)。

它的“高级选项”也非常实用:例如调整整个调色板的色彩饱和度和对比度,网页预览功能等,比Kuler要好用很多。但是对于需要学习色彩原理的人来说,不建议使用该工具,因为这个软件已经帮助用户完成了很多色彩选择的工作,不利于用户根据基础原理来进行实验而学习更多。
0
0
0
0
0
0
0
0
网友评论 Comments
下一篇:没有资料