网页设计的色彩理论与案例浅析

2012-01-27 17:51:45 来源：伯乐在线

无可争议的是，色彩是任何设计领域中最重要的一方面。

设计师在决定了一个网站风格的同时，也决定了网站的情感，而情感的表达很大程度上取决于颜色的选择。颜色是很有力的工具，所有设计师在设计网页时就应该明白这一点。

一、颜色术语

你们当中很多人可能已经在学校学过一些色彩基础知识，让我们快速回顾一些术语，来更好的把握色彩和运用色彩。

色轮的主要组成

所有的色彩能在一个色轮中呈现。在这个色轮中，我们能把颜色分成3大块：原色，辅助色和第三颜色。

三原色分别是红色，蓝色和黄色。这些色彩是基础色，他们组成了色轮上的所有其他颜色。

把原色混合在一起，你就能得到辅助色，它们是橙色、绿色和紫色。

A Look into Color Theory in Web Design

二、颜色的关系

描述颜色有大量的术语，了解这些术语将有助于我们讨论的色彩和色彩的情感含义。

互补色是互补互调的色彩，它们坐落在色轮上对立的位置。这些互补色有蓝色和橙色、紫色和黄色、以及红色和绿色。

邻色是色轮上相毗邻的色彩，所以当邻色一起用时，可以是很好的搭配，但不会有明显的对比。

第三颜色是由中间色组成的，例如黄绿色和蓝绿色，即由一个原色和一个辅助色混合组成。

color circle

三、基于情感的色彩群体

一些色彩群体是和情感联系在一起的，比如温暖、冷静和中立的情感。

暖色能让人感觉到温暖，例如红色、黄色和橙色。

冷色让人联想到凉爽和寒冷，例如蓝色，绿色和紫色。

中性色，顾名思义，并不创造怎样的情感。像灰色和棕色就是中性色。

了解色彩这些方面的知识可以用帮助一个设计师在设计网页时不用文字就能表达特定含义和特定情感，并彰显优势。

教程排行榜: 30个基于jQuery框架的幻灯滑块特效设计的网站实例; 30个基于jQuery滑动门技术的网站欣赏; 10个优美精致简约风格的导航菜单欣赏及点评; 38款网页设计应用的JS拉洋片幻灯效果欣赏; 最新收集的50多个专业设计公司网站欣赏; 40+设计独特超漂亮的水平导航网站欣赏; 全球65个设计出众的设计师个人博客欣赏; 35套精美绚丽的创意酷站设计欣赏; 国外颇具特色的电子商务网站设计欣赏(上); 国外颇具特色的电子商务网站设计欣赏(下); 21个精美漂亮的网页幻灯片应用案例欣赏; 20个设计精致漂亮的Photoshop网页设计教程; 网页UI之Banner广告条设计案例赏析; 2011年网站设计的新趋势; 手绘风格的15款超级漂亮网站欣赏; 24个很漂亮用CSS3实现的文本效果演示及教程推荐

下载排行榜: 带标题显示拉洋片式的jQuery滑动幻灯特效插件; 带标题和数字导航的JS焦点幻灯特效代码; 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 支持幻灯、相册、滚动、TAB选项卡等效果的...; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 31款简单实用的CSS+JS下拉菜单脚本; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 简洁效果多图切换flash幻灯焦点图代码; 基于jQuery实现的瀑布流布局列表特效代码; 3D立体效果金字塔环形旋转的flash+xml相册代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 兼容firefox和IE的QQ、淘宝旺旺在线客服代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能自动弹出对话信息框的QQ在线客服代码; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...; 很好看的带缓冲效果CSS下拉菜单导航代码