网页色彩设计的基本原理

发布：2018-07-09 17:55:59 浏览：3836

页面中色彩设计的基本原理主要涉及色彩的统一性、色彩的对比、色彩的调整以及色彩的视觉性原理，下面将详细加以介绍。

一、网页色彩设计的统一性原理

网页的色彩设计是指在一个页面中至少有两个色相的色相组合，这样就在色彩的选择上，注意色彩间是否统一。所选择的色彩就有相同色、同类色、类似色以及邻近色等，怎样在这些色彩之间达成和谐和统就显得十分必要，这关系着整个页面的整体布局是否统一和谐。

(一)网页设计中相同色色彩的设计原理

在一个页面中选择相同的色彩组合是最具统一色彩效果的色彩设计，这种设计模式可以突出轮廓、形体以及材质，给用户一种整体、现代和朦胧的感觉。在具体设计的过程应该将明度差适当地扩大。也可以利用同色异质原理，即色彩设计相同，但质感却相异的策略。相同色设计是一种相对较为简单的设计模式，在二级页面中、在所需要表达的主题较为简单的时候，相对采用这种的时候较多一些，不过这种设计模式尽管简单但对一些主题的表达也是非常有效的，也是一些新的色彩设计师所喜欢的色彩搭配模式。

(二)网页设计中同类色色彩的设计原理

如果说相同色设计略显单调，那么同类色设计相对就显得协调统又不失一些通过一些细节的变化，所体现出的柔和、含蓄以及优雅的印象。但在具体色彩设计的时候应注意明度差的调节，否则可能会出现混池、含糊不清的色感。同类色的设计模式的优点在于是在实际应用中最为简便的一种，但是其缺点却在于色相的差异太小，以至于色彩感不强。

(三)网页设计中类似色色彩的设计原理

网页设计中类似色彩的设计模式既有对比又有统一，既能够显现出整体色彩的和谐统一，又能体现出色彩间的对比，更能显现出一种神秘感。例如，红色与橙色的搭配，黄色与绿色的搭配，都给带给用户生动、明快而丰富的色感。在具体设计时，应注意明度与纯度差的调节。

(四)网页设计中邻近色色彩的设计原理

临近色的页面设计模式是最具色彩感和活力的一种设计模式，因为这种设计模式选择的是邻近色的区间，色相的选择虽然跨度较大，但仍保持着一定的联系，所所以，邻近色的色彩设计是在色相、明度以及纯度等方面都相对协调的设计方案，具有非常好的色彩感。

二、网页色彩设计的对比性原理

网页色彩设计的对比性原理具体指的是在色彩设计的过程中将相对的要素配列在一起，通过色彩相互间的比较以达到抗拒的状态，即为色彩的对比性原则。色彩的对比就是色彩本身受到其他色彩的影响，从而产生与原来单独看时不一样色感。网页的色彩设计中，往往对比色彩的设计丰富而繁杂，一般我们很少看到单色的设计，而是往往会利用色彩的对比，使之产生冷暖、强强弱、浓淡等不同的色彩感。色彩对比的类型很多，下面我们简单对明度对比、色相对比、纯度对比、冷暖对比、面积对比、补色对比以及推移对比加以介绍。

(一)明度对比

明度对比是利用色彩的明度差别而形成的色彩对比感，这种设计能显现出色彩的空间感、层次感以及立体感，在视觉上带给用户以清晰柔和、明朗和纯洁的感觉。一个明度阶段的知觉度相当于三个纯度阶段的知觉度，因此明度对比是影响画面效果感、形体感以及光感的关键所在。如果将明度从黑到白等差分为9个段位，以形成明度序列，明度最暗的命名为1，最亮的命名为9，那么“1~3”为低明度，称其为低调色4~6”为中明度，称其为中调色，“7~9”则为高明度，并称其为高调对比称为短调对比；3到5度差的对比称为中调对比，而将5度以上差色。色彩间明度差别的大小，决定了明度对比的强弱。将三度差以内的对比则称为长调对比。在明度对比中，如果其中面积最大、作用也彩或也组属于す简包，和长调为比，组对比就林为长调。高长调可以由黑、白、灰组成，足以体现强势的、男性的情感；中短调则具有梦幻般的薄暮感，含蓄、模糊而平静；低长调则较强烈，富有爆发性，颇具苦闷的凄感。

一般而言，高调带给用户活泼、愉快、柔软、轻盈的感觉；低调则显得朴素、丰富、迟钝、宏大、笨重，让人颇具落寞感。明度对比较强，则光感较强，相应地形象的清晰度就较高，也就不容易出现误差。但如果明度对比弱、光感不明朗的话，则可能会使得形象不清渐，效果差；另外，如果对比太强则可能带给用户生硬、空旷以及炫目和简单化的感觉。因此，对于色彩设计师来说，如何准确地把握住色彩间的对比是至关重要的。

(二)色相对比

色相对比是因色相之间的差异而形成的色彩对比效果。色相的对比主要可以依据可见光波的长短差别来区分，但完全依靠光波的长短是不可靠的，例如，尽管红光和紫光的波长差距最大，但因都处于可见光的两端，因而都接近于不可见光波，所以肉眼看来，二者的色相其实是接近的。综上，在度量色相差时，不能只依靠测光器和可见光谱，还应该借助于色相环。色彩的色相在具体设计的过程中有同类色相对比、类似色相对比、邻近色相对比以及互补色色相对比等。

(三)纯度对比

纯度对比是借助于色彩纯度高低的不同而产生的色彩对比现象。纯度差的出现取决于在各色相中加入不同量的黑、白、灰或者是对比色而获得的。纯度对比的视觉效果要弱于明度对比的视觉效果。

般而言，高纯度的色彩的色相较为醒目、明晰，但往往容易使人疲劳，不能长时间注视。因此在页面色彩的选择时设计师要慎重选择高纯度的色彩。同样，低纯度的色相虽然看起来较为含蓄，但却不容易分清楚，虽能分清楚，但却较为平淡乏味，就很容易让用户感到厌倦。所以，选择恰当的纯度对比的色彩对于增强用色的鲜艳感和明确感具有重。因为，在头也彩计的过程中，如果配色的纯度对比不足往往会出现脏、灰、闷、单调、混沌的感觉；而如果纯度对比过强时则往往会出现生硬、杂乱、刺激以及炫目的感觉。

(四)冷暖对比

冷暖对比借助于冷色和暖色间的相互搭配而产生的冷暖差别。例如，红色和橙色相对比时，红色感觉要比橙色冷，而绿色和青色在一起对比，则感觉青色比较冷。冷暖对比可分为强对比、中对比和弱对比。强对比是冷极与极、冷色与暖色所形成的对比，这种对比往往让用户感受到醒目、刺激、警觉等，例如一些警示标志往往会采用强对比；中对比是暖极与中性微冷色、冷极与中性微暖色所形成的对比，这种对比则给人种和谐、丰富之感，既能感受到一种统一感，又能感受到统一中的变化；弱对比是暖极与暖色、冷极与冷色所形成的对比，这种对比往往给人以和谐而又统一的色感。在网页色彩的设计中，如果设计师能够巧妙利用色彩的冷暖对比，往往会达到意想不到的色彩效果。

(五)面积对比

面积对比是通过色彩间面积大小的差别所形成的对比。不过色彩间面积大小的对比往往没法离开色彩的纯度，因为在色彩设计中，面积往往是和色相一起共同决定了色彩对比间的强弱，这种对比关系可以分两种情况来说明:第一种情况，色相不同、面积不同所形成的对比。例如，大面积的绿和小面积的红，在这种对比条件下，往往让人觉得大面积的绿让小面积的红反而更鲜、更艳、更纯，即小面积的红变得更加醒目了能起到有效的凸显和强调作用；反过来，用用大面积的红对比小面积的绿，基于绿色本身具有收缩和后退性，再加上绿色本来的面积就小，所以看起来绿色几乎被红色所吞噬掉，反而更进一步地树托出了红色的红，绿色几乎被忽略掉了。研究发现，在不同的色相中，小面积的明度和纯度如高于大面积的明度和纯度达到3~5倍时，会产生这样的视觉效果:大衬小，小的会变得更鲜明，也更醒目。第二种情况，色相不同、面积相同所形成的对比。当色彩间的面积基本相同时，这样就只有色与色之间的差异了，即色感间的差异就只取决于色彩本身带给我们的感觉了。

(六)补色对比

补色对比的出现是当色相与色相混合在一起后出现中性的灰黑色时，而此时在这两种色相间所产生的对比就是补色对比。补色对比是一种非常有趣的对比现象:当两种补色的色相互相靠近时，就能相互促进，显现出最活跃、最新鲜的视觉效果；但如果二者混合在一起，则二则相克，变成了灰色或者暗黑色。补色对比在网页色彩的设计中应用非常广产生一种视觉上的平衡感，带给人美好、舒适的视觉效果。泛，例如，在纯度很高的色彩中加入补色，则可以起到完善画面的作用。

(七)推移对比

设计师利用色彩对比的因素与原理架构一定空间形态的表现形式从而形成多层面、多空间的色彩设计形态效果，这种设计模式就是推私对比。具体在设计的过程中有明度推移、色相推移、纯度推移以及补推移等。明度推移是利用单个或多个色彩的明度变化来架构其某一空间形态，这种空间形态层次清晰，色彩极具纵深感和空间感。色相推移是利用多个色彩的相互渐次推移变化架构起来的某一空间形态，这种网站建设空间形态不但色彩间对比感很强而且空间感亦很强。纯度推移是利用单个或多个色彩纯度的渐变架构的某一空间形态，这种空间形态极富空间感和层次感。补色推移则是利用补色间对比架构其的空间形态，例如红与绿、橙与黄等，这种空间形态对比感很强。