设为首页 | 收藏本站
首页>IT学院>网页设计>正文
网页设计配色应用实例剖析——绿色系
WWW.DBIT.CN 2007-1-15 22:18:59 热度:
 

结论:

浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。

渐变的效果更能加深这种印象。但页面配色上浅色过多时,整个页面容易呈现发"灰"的感受,这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块,适当的鲜艳的点睛都能很好的解决这一问题。

→ 绿色弱对比网页例图 :http:// www. visualade.com

绿色系分析:(黄绿色+弱对比)

从HSB模式的数值上看,主色调是接近于黄色的基础上加入了少许绿色在里面,饱和度和明度降低,色彩看起来较柔和。辅色调墨绿色的绿色的倾向稍高,饱和度也较高,只是明度降低,该色看起来踏实沉稳。

点睛色红色H数值为零度,呈正红色,但是该颜色饱和度和明度降低,而红色本身的色度比黄绿色要暗不少,因此颜色稳重。另一点睛色蓝绿色,明度饱和度都很低,在页面配色里似乎没有点睛感觉,更多的是呈辅助状态。

结论:

主色调是相对比较鲜亮的颜色,而辅助色和点睛色是属于比较沉稳的颜色,页面通过大小色块的对比提高视觉的反差力度,增强页面的感染力。

由于整个页面的饱和度整体稍微降低,因此该页面配色较协调、缓和。

→ 同类绿色+多种点睛色例图 :http://www. girlshop.com

绿色系分析:(绿色配色:同类绿色+多种点睛色)

主要色调HSB模式H数值显示75度,依旧是色轮表里倾向于黄色区域方位边缘的绿色,呈现出的黄绿色调。辅色调在明度上有些提亮,与主色调形成较强的对比。

点睛色里所使用的对比色组合有两组,红色与绿色,蓝色与橙黄色,其中黄色是介于暖色(橙黄、红色)和冷色(绿色、蓝色)的过渡色也是调和色。

结论:

通过上面的分析大家可以看到,该网页的配色不少,而且还有两组对比色在内,但是页面配色也很协调。原因之一,从下面抽取的色块可以看出来,是一个过渡柔和的色轮表:以黄色为中界一边是较浅的黄绿到绿色再到蓝色,另一边是橙黄再到红色。原因之二,点睛色毕竟是扮演着点睛色的角色,有主色调和辅色调大面积的控制,即便再多些点睛色也不至于很快干扰到页面的整体配色。

整个页面保证了协调、不凌乱的步调,但是又能把商业网站的热闹氛围体现得很好的渲染。此种配色方法值得我们学习借鉴。

→ 绿色邻近色应用网页例图 :http://www. codcefngwlad.org.uk

绿色系分析:(邻近色配色:绿色+蓝色)

全页使用的主要色调基本上是属于明度较高饱和度较低的颜色,其中还使用了渐变色缓和的过渡,因此页面看起来舒服协调。

主色调是饱和度较高的翠绿色运用于背景色,几乎是调节于整个页面的关键色。如果没有这一背景色块,整个页面容易发灰。还有右边的粉绿大块面积稍多,有些灰的感觉,好在前景的文章使用了色度明度稍深的蓝色压住,稍显好些,关键还是有白色的箭头很好的把粉绿和蓝色文字的色阶拉开了距离。左边的照片清晰且纯度较高也对整个页面配色起到一定的调节作用。

点睛色主要是标志的颜色,如果可以忽略不计,页面配色更趋于平淡。

结论:

明度较高饱和度较低的颜色,如果没有明度较深饱和度较高的颜色进行勾勒或者点缀,这个页面配色看起来容易发灰。

→ 绿色对比色网页例图 :http://www. fitintercambio.com.br

绿色系分析:(对比色配色:绿色+红色)

主色调是有点黄色倾向的绿色,从HSB数值上可以看到H为98度,绿色特性较明显了。

辅助色则是三个浅色系,起到调和整个页面色彩的作用。粉红和粉绿色分别取的是页面绿色红色通过提高明度而得,因此整个页面色彩前后呼应、配色调和。

点睛色红色的HBS模式H数值351度,在色轮表上偏向于紫色方位,因此倾向于冷红色,色度上稍有些刺目和艳丽。

主色调绿色和点睛色红色所放置的位置,让页面导航区域和内容区域视觉引导较为分明:主色调绿色的设计亮点既用于导航又很流畅自然的融合到背景,浑然一体;这里尤其是点睛色红色放置于背景的处理很独到,烘托突出于前景内容,在众多网页设计中并不多见。

本新闻共3页,当前在第2页  1  2  3  

 
上一篇:用Dreamweaver8搞定web标准
下一篇:基础:什么是静态网页和动态网页
打印】【关闭
  相关文章:
·网页设计开发:如何处理网页字体·基础:什么是静态网页和动态网页
·网页布局的位置重心与位置间的对比·合理的网页设计具有哪些特征
·用好的设计替代不好的·如何写好“帮助中心”的内容
·解读absolute与relative·巧用网页显示硬盘内容
·网页设计配色应用实例剖析——红色·从菜鸟到准网页设计师的历程
·如何让你的网站人见人爱·确保客户端能访问到最新的网页
·经验分享:网页设计中实用的制作技·那些因素影响google对站点的信任
·解密.htm.html.shtm.shtml的区别与·网页设计自适应客户端分辨率的实现
☆联姻学院☆

保养电脑的26个窍门
文件夹删除不掉怎么办?
教你如何用手工迅速剿灭QQ广告
“熊猫烧香”病毒的病毒描述和
在Excel中只打印图表以外区域
Excel中只选中包含文本的单元
Windows XP操作系统的几个实用
用XP系统自带网络诊断程序解决
风雨雷电→自然现象动画实战技
Flash遮罩特效之百叶窗效果
十二个Dreamweaver鲜为人知的
如何用 Dreamweaver 批量做we
JavaScript的系统函数学习
Java之父:关于Java我也有遗憾
排除网上邻居使用4大常见麻烦
解除上网限制IP和MAC捆绑的破