中国设计秀欢迎投稿
中国品牌形像设计网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
深圳网站建设 广州网站设计 域名注册 上海网站建设 虚拟主机 广州网站建设 广州网页设计 签名设计 虚拟主机 域名注册 品牌形象设计 设计联盟
求创科技
上海网麒科技
中国福网
中国设计秀
九八七网络
中国设计秀
中国设计秀
当前位置:网站综合首页 >> 建站资源 >> 站长手册 >> Web 页面设计的色彩理论及应用

Web 页面设计的色彩理论及应用 (2)

来源:中国设计秀    作者:    点击:1057     加入收藏    发表评论
0
顶一下
中资源

主基调:■ # FFCE00 H:48 S:100 B:100
■ #FFA000 H:38 S:100 B:100

两个补色对比调和
主基调:■ # FFCE00 H:48 S:100 B:100
■ # 4273A5 H:210 S:60 B:60

多个色相对比调和
主基调:■ # 945A18 H:32 S:84 B:58
■ # 5A2F00 H:31 S:100 B:35
■ # 633100 H:30 S:100 B:39
■ # 401F00 H:29 S:100 B:25

  色相对比调和只是帮助你最快的找到相匹配的颜色区域,最后效果还是要靠自己的颜色直觉。

  在Web界面设计的时候,一般来说都是用纯度比较高的颜色,不成文的规定纯度为80~100,所以实际应用中我们只需要调节明度的变化。自然能创造出比较好的色彩效果。

  使用两个同一色跟使用明度对比调和的注意事项是一样的,两个同一色构成的画面没有力度,但是比较容易烘托表现主题,一般都是以背景的形式存在。

  两个类似色对比调和要注意与无彩色相结合,即黑和白,这样的页面会比较干净、大众化,门户网站用色方式的较好选择。

  两个补色对比调非常的容易树立风格,能给人留下强烈的映像,信息发布类商业站点的首选,既不失个性又比较容易让人接受,大多作为主色调,结合明度对比调和类似色对比调和存在。

  多个色相对比调和多用于Flash动画和页面的制作,在纯度高的情况下,它比较容易塑造出个性鲜明的形象。

色相对比调和的练习

纯度对比调和。

  纯度对比调和的理论也有很多,但是大部分只能应用在绘画,工业造型等等行业,在Web界面设计中正真实用的只有1条:

  黑、白、灰属于无彩系,它们能与任何彩色搭配。纯色与无彩系搭配的时候会使纯色的鲜艳感增强,灰色与纯色搭配会使灰色带有颜色,当灰色覆盖面积较大时纯色将比较容易形成调和。高明度的灰色(白)有轻快高雅的感觉,低明度的灰色(黑)可以产生稳重。

  Web界面设计中如果采用降低颜色的纯度来产生调和是需要点勇气的,按照现在的审美观点,普遍地不能被接受,或许有待进一步的探索和研究。

灰色与高纯度黄色调和


黑色与中纯度绿色调和


高明度的灰色调和

就目前关于共性调和所被接受的应用大概就这些了。还有待大家共同研究开发。

  面积调和的原则是:色彩面积的大小可以改变对比效果,对比色双方面积越大,调和效果越弱;反之,双方面积越小,调和效果越强。对比双方面积均等,调和效果越弱;对比双方面积相差越大;调和效果越强。只有恰当的面积比才能取得最好的视觉平衡,形成最好的视觉效果。

  在前人的探索中,总结出了相当多的面积比的公式,对电脑设计来说有非常积极的作用。利用这些公式,我们可以大概的把握出颜色和面积的比例,作为一个重要的参考。

  最早的计算公式是由诗人歌德以基本色相的光亮度为基准,建立了一个简单的比率:

黄 :橙色 :红 :紫 :绿 =3 :4 :6 :9 :8 :6

  但是这个公式并没有考虑明度和纯度的变化所带来的影响,再今天并不是很实用,孟赛尔在这个基础上改良了这个公式:

A色相的明度×纯度       B面积

-------------------------- = --------------------

B色相的明度×纯度       A面积

  这个公式可以帮我们解决因为明度和纯度的变化而产生的面积变化比,可以这样概括“小面积用强色,大面积用弱色”。

  根据本人的经验上面的公式在Web界面设计中实用性并不是很强,应为Web界面设计时使用的颜色纯度都很高,基本上面积比就等于明度比,按照这个比例相当多的情况是产生负作用。应该视情况来具体应用。

  孟赛尔还有一套面积和色彩比率的算法,相比之下更科学、实用性更强,可以作为重要的参考依据:

  在色立体中以明度轴上值为5的灰色为中心,两个色或多个色的关系可以这样表示――色彩的面积与该色彩到色立体的中心距离相等或程简单的倍数时可以得到平衡的调和。可以得到下面的公式

S 1 R 1= S 2R 2

其中S表示面积,R表示该色到中心点的距离,R的值可以在相关的表中查到。

  就目前的情况还没有哪一个面积计算公式能确切的结合到Web界面设计实际应用,更何况Web界面设计还要从商业来考虑,主要还是靠经验,上面的公式只能一个参考性质的,给大家研究提供一个基础。

  以上的理论都是前人研究成果,其中有很多可以利用,最重要的是要结合实际的经验,创造一套自己的色彩理论,提高自身对色彩的把握能力,应用到设计作品中去。

[1] [2]
2007-06-03 15:52:00    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口