网页界面设计中的配色艺术.pdfVIP

第 1期 2007年 2月 濮阳职业技术学院学报 Journal of Puyang Vocational and Technical Colege V01．20 No．1 Feb．2oo7 网页界面设计中的配色艺术 李向来 (河南工业技师学院，河南 郑州 450007) 【摘 要】本文从色彩学基本原理和色彩的心理效应两个方面论述了网页界面设计中色彩构成的原则、方法。提 出网页中的色彩设计必须合理运用美术中色彩构成原理，同时注重色彩的心理效应，把理性与感性结合起来。 【关键词】网页界面设计；色彩学；心理效应 【中图分类号]TP393．02 【文献标IR~]A 【文章编号】1672—9161(2007)01—0024—02 任何一件网页界面设计作品都离不开色彩，色彩是自 然美、生活美、艺术美的重要组成部分。色彩设计是指遵循 科学与艺术的内在逻辑，对色彩进行富有鲜明创见性及理 想化的过程，是理性与感性相结合的创造过程。当代设计者 不仅要掌握基本的网页制作技术，还需要掌握网页的配色 艺术。在网页设计中色彩的选择与构成要遵循以下原则 ： 1遵循色彩学基本原理 这是网页设计中的理性设计依据。色彩学基本原理包 括独立色、色调学原理、色彩三要素、三基色原理等。对色彩 学基本原理的掌握与使用是一个优秀的设计师必须具备 的，他必须能够创造性地把色彩美学的知识运用于网页界 面设计中。对色彩学基本原理使用的最终目的是为了让色 彩配置从生理角度上达到高度的调和。基本原则如下： 1．1色彩对比原则 色彩对比指两种或两种以上的色彩排 列在一起时产生出的明确的差别。用色彩对比手法，可以通 过色彩间产生的比较作用，使设计主题更加鲜明、作品更加 活泼，同时使视觉效果更加丰富。 1．1．1色相对比：色相对比是色彩中常用的手法，视觉感受 鲜明、生动、丰富，为人们喜闻乐见，如中国传统年画和西方 教堂的彩色玻璃艺术。色相是色彩的相貌，具体体现为各种 色彩，从物理学上讲，色相差异是由光波波长决定的。常用 “伊顿色环”来表示色相系列。 色相对比借助的就是色相这一色彩工具，色相对比的 强弱取决于色彩在色相上相互的距离角度 ，色相角度在 15。 (如红与橙红)以内的对比称为同类色相的对比，色差异很 小，是最弱的色相对比，会产生和谐、统一的视觉效果。色相 距离角度在 15。一45。(如黄和绿)之间的对比，称为邻近色 相对比，比同类色相对比效果要更加明显、丰富，同时又能 保持统一、和谐、单纯、雅致等特点。色相距离在 130。(如蓝 与橙)左右的对 比称为对比色相对比，属强对比，具有色彩 鲜明、强烈、饱满的特点，容易使人激动，同时也易引起视觉 和精神的疲劳，在设计作品使用对比色相对比时，要防止因 色相过多造成的杂乱和过分刺激。色相距离在 180。(如红与 绿)称为互补色对比，是最强烈的一种色相对比，在视觉感 受上表现出不安定、不协调、过分刺激的特点，难以表达单 纯、雅致、含蓄的作品主题。在需要强烈视觉冲击力的作品 中往往会用到互补色对比。 1．1．2明度对比：因明度差别而形成的色彩对 比称为明度 对比。色彩构成的空间、层次、体积感等主要靠明度对比来 表现。在网页界面设计中，突出形态特征时主要通过明度对 比。例如，界面中的文字如欲达到便于阅读的视觉效果，文 字色彩与底色之间必须具有较大的明度差。网上经常看到 黑底绿字、灰底黄字的页面设计，这些页面因没有注意到明 度对比的关系，造成文字不易识。 1．1．3纯度对比：纯度对比是色相之间出现纯与浊的差别 时所形成的对比。在有彩色中各种颜色的纯度等级并不相 同，红色纯度最高，蓝绿色纯度最低，红橙紫纯度居中。纯度 强的对比的色彩效果明确肯定，弱对比的色彩柔和单一。在 实际设计中用色往往并非饱和色，而是带有一定灰度的非 饱和色。 1．1．4面积对比：在设计中，某些色彩因纯度、明度高而显 得力量很强，而另一些色彩显得力量较弱。为达到色彩和谐 的目的，除改变色彩的三要素外，合理安排各种色彩所占的 面积比例是有效的手段。当两种色彩面积相同时，色彩的冲 突达到最高峰，对比效果最突出；当其中的一方面积减小， 对比效果也会减弱 ；当一方色彩面积达到绝对优势时，另一 方就成为点缀或陪衬。色彩学家哥德认为，色彩力量取决于 色彩的明度和面积，明度越高，色彩力量越强，并给出了各 补色力量平衡的面积比例关系。 黄 ：紫 =1：3 橙：蓝 =1：2 红：绿 =1：1 【收稿日期】2006—09一ll 【作者简介】李向来(1978一)，男，河南开封人，河南工业技师学院计算机教研组教师，主要从事计算机教学与研究工作。 一 24— 李向来：网页界面设计中的配色艺术 1．2色彩调和原则 明确了色彩的对比后，如何使对比调 和出令人满意的效果，就需要进一