» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> 公司建站完全手册――网页色彩设计点滴
 XML   RSS 2.0   WAP 

--> 本页主题: 公司建站完全手册――网页色彩设计点滴 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

公司建站完全手册――网页色彩设计点滴

大自然是彩色的。信息时代的快速到来,网络也开始变的多姿多彩。人们不再局限于简单的文字与图片,他们要求网页看上去漂亮,舒适。所以当代设计者不仅要掌握基本的网站制作技术,还需要掌握网站的风格,配色等设计艺术。其中色彩在网站设计中占据相当重要的地位。 Nw-U*y  
rls{~ZRl  
一、 色彩的一些基本概念 .3cD.']%  
NLxR6O4}8  
首先了解一下色彩的一些基本概念。自然界中有好多好多种色彩,比如玫瑰是红色的,大海是蓝色的,桔子是橙色的……但是最基本的有三种(红,黄,蓝),其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。 O'3/21)|y  
6E^9>  
现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征:色相,明度和纯度。其中非彩色只有明度属性。 U)Tl<l<  
{k[dg0UV  
色相,指的是色彩的名称。这是色彩最基本的特征,是一种色彩区别于另一种色彩的最主要的因素。比如说紫色,绿色,黄色等等都代表了不同的色相。同一色相的色彩,调整一下亮度,或者纯度很容易搭配,比如,深绿,暗绿,草绿,亮绿。 9- 24c  
LX=v _}l J  
明度,也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。比如一些购物,儿童类网站。用的是一些鲜亮的颜色,让人感觉绚丽多姿,生气勃勃。明度越低,颜色越暗。主要用于一些游戏类网站,充满神秘感;一些个人站长为了体现自身的个性,也可以运用一些暗色调来表达个人的一些孤僻,或者忧郁等性格。有明度差的色彩更容易调和。如紫色(#993399)跟黄色(#ffff00),暗红(#cc3300)跟草绿(#99cc00),暗蓝(#0066cc)跟橙色(#ff9933)等。图1中的(1)就是明度由高到低变化的例子。 &fU48n1Uh  
8LXK3D}?3  
?U1Nm~'UZ  
imhE=6{  
图1 (1)明度变化(2)纯度变化 bT|-G2g7Z  
h|lH`m^  
纯度,指色彩的鲜艳程度,纯度高的色彩纯,鲜亮。纯度底的色彩暗淡,含灰色。如图1中的(2)是纯度从低到高的变化。 \|M[W~8  
y-gXGvZ  
相近色:色环中相邻的三种颜色。如图2中的黄绿色,黄色和桔黄色。相近色的搭配给人的视觉效果很舒适,很自然。所以相近色在网站设计中极为常用。 I }8b]  
Neii$  
KDA2 H>  
A* Pz-z>z  
图2 相近色 nHp$5|r<  
r>CBp$  
dNov= w  
U^qS[H M  
图3 互补色 1Y~'U =9  
U:[CcN/~3  
互补色,色环中相对的两种色彩。如图3中的亮绿色跟紫色,另外如红色跟绿色,蓝色和橙色等。对互补色,调整一下补色的亮度,有时候是一种很好的搭配。就拿蓝色跟橙色来打个比方吧,看图6,调整了蓝色的亮度以后其搭配效果是不是更好呢?补色在网站设计中用得也极为普遍。 #MiO4zXgd  
y>d`cRy  
2=1qmQE  
s ;]"LD@  
图4 补色亮度调节 + [$Td%6  
If8 ^  
暖色,如图5中的黄色,橙色,红色,紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站,电子商务网站,儿童类网站等等,用以体现商品的琳琅满目,儿童类网站的活泼,温馨等等效果。 -@B6$XWL  
ilZ5a&X;  
冷色,如图6中的绿色,蓝色,蓝紫色等等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技,游戏类网站,主要表达严肃,稳重等效果。 #cb9g    
zN-Y=-c  
   bBGg4{  
~SsfkM"  
图5 暖色 T| R!Aw.  
aQzmobleep  
[TxvZq*4  
d(| 4 +^>  
图6 冷色 `FX?P`\@I  
[=u@6Y  
色彩均衡,网站让人看上去舒适,协调,除了文字,图片等内容的合理排版,色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色,所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡,包括色彩的位置,每种色彩所占的比例,面积等等。比如鲜艳明亮的色彩面积应小一点,让人感觉舒适,不刺眼。这就是一种均衡的色彩搭配。

[楼 主] | Posted: 2006-04-04 08:17 顶端
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子



二、 色彩的联想 {;E]#=|  
]Wdnr1d~8  
色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人联想到玫瑰,联想到喜庆,联想到兴奋。白色联想到纯洁,干净,简洁;紫色象征着女性化,高雅,浪漫;蓝色象征高科技,稳重,理智;橙色代表了欢快,甜美,收获;绿色代表了充满青春的活力,舒适,希望等等。当然不是说某种色彩一定代表了什么含义。在特定的场合下,同种色彩可以代表不同的含义。 & 24$*Oe  
J\c\Ar :  
三、 黑白灰的运用 .rs\%M|X  
HA0Rv#p  
黑白灰是万能色,可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候,不防试试用黑白灰。当你觉得两种色彩的搭配不协调,试试加入黑色,或者灰色,或许会有意想不到的效果哦。 SWPb=[WEz  
R"V^% z;8o  
对一些明度较高的网站,配以黑色,可以适当地降低其明度。 35 PIfq m  
@'fWS^ ;&  
白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间,作为网站的一个组成部分。这就是留白艺术。很多设计性网站较多运用留白艺术。留白,给人一个遐想的空间,让人感觉心情舒适,畅快。恰当的留白对于协调页面的均衡起到相当大的作用。 BNpc-O~  
L|N[.V9  
四、 确定网站的主题色 ^U[yk'!Y  
#xBh62yIuP  
一个网站不可能单一的运用一种颜色,让人感觉单调,乏味;但是也不可能将所有的颜色都运用到网站中,让人感觉轻浮,花俏。一个网站必须有一种或两种主题色,不至于让客户迷失方向,也不到于单调,乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。 u RPvo}!=1  
*e}1KcJ  
一个页面尽量不要超过4种色彩,用太多的色彩让人没有方向,没有侧重。当主题色确定好以后,考虑其它配色时,一定要考虑其它配色与主题色的关系,要体现什么样的效果。另外哪种因素占主要地位,是明度,纯度还是色相。 \YrvH  
odNHyJS0  
五、 页面各要素 [2 Ot=t6]  
b5.L== >  
上面学习了颜色的一些基本概念及颜色的一些搭配问题,具体运用到网页中,各要素的色彩又是如何搭配的呢? SJXP}JB_  
)W.Y{ \D0  
1. 背景与文字 S1G3xY$0  
0V5{:mzA  
如果一个网站用了背景颜色,必须要考虑到背景颜色的用色,与前景文字的搭配等问题。一般的网站侧重的是文字,所以背景可以选择纯度或者明度较低的色彩,文字用较为突出的亮色。让人一目了然。 i $W E1-  
BOf)27)  
当然,有些网站为了让浏览者对网站留有深刻的印象,他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块,是不是让你豁然开朗呢!此时他为了吸引浏览者的视线,突出的是背景,所以文字就要显得暗一些,这样文字才能跟背景分离开来,便于浏览者阅读文字。 T,SCK^  
ZKco  
2. LOGO和BANNER ; 6*Ag#Z  
TATH,Sz:x  
LOGO和BANNER是宣传网站最重要的部分之一,所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢?我们将LOGO和BANNER做的鲜亮一些,也就是色彩方面跟网页的主题色分离开来。有时候为了更突出,也可以使用与主题色相反的颜色。 3E]IEf  
5x1_rjP$|  
3. 导航,小标题 JTI 'W  
tj;<EaM  
导航,小标题是网站的指路灯。浏览者要在网页间跳转,要了解网站的结构,网站的内容,都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩,吸引浏览者的视线,让他们感觉网站清晰,明了,层次分明。想往哪里走都不会迷失方向。 8jz[;.jP",  
z}f;_NX  
4. 链接颜色设置 ``* !b >)  
@!:_r5R~N  
一个网站不可能只是单一的一页,所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接,因为链接区别于文字,所以链接的颜色不能跟文字的颜色一样。现代人的生活节奏相当快,不可能浪费太多的时间在寻找你网站的链接上。设置了独特的链接颜色,让人感觉他的独特性,自然而然好奇心必然趋使他移动鼠标,点击鼠标。 Qb~&a1&s#  
!|`vW{v  
为了你的页面更美观,更舒适,为了增强你的页面的可阅读性,必须合理,恰当地运用与搭配页面各要素间的色彩

[1 楼] | Posted: 2006-04-04 08:17 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.016026(s) query 5, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息