登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Daisy

与其去诅咒黑夜,还不如去点亮一只蜡烛

 
 
 

日志

 
 

网页设计配色应用实例剖析——绿色系  

2009-07-07 11:57:52|  分类: UI设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

丁丁注:不错的配色教程

  绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。

  绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息,有缓解眼部疲劳的作用。

  它本身具有一定的与自然、健康相关的感觉,所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。

  绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。

  下面我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不同的举例分析。

  → 绿色网页例图:http://www.bacardimojito.com

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

  绿色系分析:

  从上图的主色调、辅色调HSB模式的数值可看出,这两中颜色只是在明度上有区别,其显示的色相与饱和度是一样的。正绿色是120度,这两种颜色从RGB数值上看,都不同程度的混合了其他少许颜色,因此离正绿色稍有些偏差。由于绿色本身的特性,所以整个网页看起来很安稳舒适。

  辅助色只在明度上降低,让页面多了些层次感、空间感。

  白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。

  点睛色恰到好处的体现出了"点睛"这一妙笔,极尽诱惑力,整个页面顿时生动提神起来,增强了页面主题的表达力。

  结论:

  主、辅色调是属于同类色绿色系,通过不同明度的变化,能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断,可能会有些朋友凭经验判断,容易误认为这两种颜色除了明度外有可能纯度会有所不同,这时候适当的使用数值模式会很容易得到正确的结论的。

  整个页面配色很少:最大色块的翠绿,第二面积的白色,第三面积的深绿色,但得到的效果却是强烈的、显眼的,达到充分展现产品主题的目的。

  深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受

→ 绿色高纯度网页例图:http://www.marocfruitboard.com

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

  绿色系分析: (高纯度配色:绿色+对比色组合)

  HSB数值H显示60度为正黄色,该主、辅色调只向绿色倾斜了一丁点--H为75度。大面积明度稍低的黄绿色为主要色调,饱和度却非常高,达到了100%,辅助色使用了提高明度的嫩绿色和白色,这两种辅色除了增加页面的层次感的同时,还能让整个页面配色有透亮的感觉,增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。

  该页面有两组小小的对比色,一组是黄绿与橙红色,一组是橙黄色与天蓝色,这两组配色严格的来说不算对比色,因为色彩多少有些偏差。虽然它们的饱和度降低,但在这个页面中足以构成了最响亮的色调,把整个页面烘托得非常活跃、鲜明。

  结论:

  主、辅色调黄绿色大面积使用并不刺目,反而使得页面看起来很有朝气、活力。

  适当运用不同纯度的不是相当严格意义上的对比色系组合时,通常能起到的主要作用是主次关系明确。不"标准"的对比色系对比特性虽然减弱,页面色彩看起来容易协调、柔和,但一样能突出主题。

→ 同类色浅绿色网页例图 :http://shehouse.we.tv

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

  绿色系分析:(同类色浅绿色)

  主色调绿色属性是明度很高的浅绿色,前面提到过,通常情况下明度高饱和度就降低,饱和度低页面色彩度就降低,除非颜色本身有自己的特性,加上大面积的辅助色白色,整个页面看起来很清淡、柔和、宁静,甚至有温馨的感觉。

  页面中使用了渐变的浅绿色,使得整个页面视觉上更加柔和舒适。

  尽管点睛色只在主要标志上出现,按钮也只有少许一点,但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色,饱和度达到最高值。另一个点睛色中黄色,在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上,黄色正是在绿色和红色之间的过渡色。

  结论:

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

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

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

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

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

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

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

  结论:

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

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

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

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

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

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

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

  结论:

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

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

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

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

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

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

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

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

  结论:

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

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

网页设计配色应用实例剖析——绿色系 - sgj918 - 欢迎小菊来访

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

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

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

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

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

  结论:

  整个页面的配色取色于标志色,量身定做的感觉。

  适当的运用对比色有强调的感觉,但页面配色处理上并不强烈、耀眼,因为使用了白色及其相应的提高明度的粉色做视觉的缓和处理。

  本部分小节:

  ● 绿色是缓和健康的颜色, HSB数值H色相为120度时是正绿色。大家通过以上的网页实例可以看到,偏向于黄色方位的绿色运用得最多,也就更受到大众的欢迎。纯正的正绿色在视觉感受上可能稍微显得有些色度较低的生硬,配色难度稍大。不同的黄绿色饱和度、明度的不同变化可以表达不同主题的页面效果。

  ● 点睛色可以是几种,也可以是不同对比色的组合,有的起到丰富并活跃页面配色的视觉节奏,有的起到调和整体页面配色的作用。

  辅助色通常是同类色系或者邻近色系,起到辅助并烘托主色调的作用。辅色调和主色调分别在不同的页面做为唯一高纯度色的时候,能够起到挽救于整个页面发灰的作用。

  ● 当整个页面配色明度太高色度降低时候,页面容易呈现发灰的感觉,可以适当的使用少许纯度较高或者明度较低的色系来加以改善。

  评论这张
 
阅读(47)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018