求创意找品牌创意企业 推荐: 网站建设 北京网站建设 
 
搜索 竞赛 产业 文案 论吧 论坛 酷站 矢量库 图片库 设计网址 作品集> 注册 - 登陆
首 页设计资讯大赛征集平面设计UI设计CG/动画工业设计建筑环境数码影像教程区设计访谈 精品欣赏会员作品集
>> 行业资讯设计竞赛网页设计软件界面ICON设计桌面设计设计资源精品欣赏设计教程
推荐:经典素材资源
滚动新闻:[6-10]融于意,形于展!---52design作品集、设计师网上联展!
当前位置: 首页 >> UI设计 >> 网页设计 >>正文
网页设计配色应用实例剖析——绿色系
资讯/教程/作品在线投稿  - 进入素材基地 - 论坛讨论 - 查看更多相关内容
时 间:2007-7-19 10:49:01   作者:黎芳   来 源:天极设计   浏览:
    绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。

  绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息,有缓解眼部疲劳的作用。
  它本身具有一定的与自然、健康相关的感觉,所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。
  绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。
  下面我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不同的举例分析。

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

按此在新窗口浏览图片


  绿色系分析:
  从上图的主色调、辅色调HSB模式的数值可看出,这两中颜色只是在明度上有区别,其显示的色相与饱和度是一样的。正绿色是120度,这两种颜色从RGB数值上看,都不同程度的混合了其他少许颜色,因此离正绿色稍有些偏差。由于绿色本身的特性,所以整个网页看起来很安稳舒适。
  辅助色只在明度上降低,让页面多了些层次感、空间感。
  白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。
  点睛色恰到好处的体现出了"点睛"这一妙笔,极尽诱惑力,整个页面顿时生动提神起来,增强了页面主题的表达力。

  结论:
  主、辅色调是属于同类色绿色系,通过不同明度的变化,能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断,可能会有些朋友凭经验判断,容易误认为这两种颜色除了明度外有可能纯度会有所不同,这时候适当的使用数值模式会很容易得到正确的结论的。
  整个页面配色很少:最大色块的翠绿,第二面积的白色,第三面积的深绿色,但得到的效果却是强烈的、显眼的,达到充分展现产品主题的目的。
  深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。

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

按此在新窗口浏览图片


  绿色系分析: (高纯度配色:绿色+对比色组合)
  HSB数值H显示60度为正黄色,该主、辅色调只向绿色倾斜了一丁点--H为75度。大面积明度稍低的黄绿色为主要色调,饱和度却非常高,达到了100%,辅助色使用了提高明度的嫩绿色和白色,这两种辅色除了增加页面的层次感的同时,还能让整个页面配色有透亮的感觉,增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。
  该页面有两组小小的对比色,一组是黄绿与橙红色,一组是橙黄色与天蓝色,这两组配色严格的来说不算对比色,因为色彩多少有些偏差。虽然它们的饱和度降低,但在这个页面中足以构成了最响亮的色调,把整个页面烘托得非常活跃、鲜明。

  结论:
  主、辅色调黄绿色大面积使用并不刺目,反而使得页面看起来很有朝气、活力。
  适当运用不同纯度的不是相当严格意义上的对比色系组合时,通常能起到的主要作用是主次关系明确。不"标准"的对比色系对比特性虽然减弱,页面色彩看起来容易协调、柔和,但一样能突出主题。

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

按此在新窗口浏览图片


  绿色系分析:(同类色浅绿色)
  主色调绿色属性是明度很高的浅绿色,前面提到过,通常情况下明度高饱和度就降低,饱和度低页面色彩度就降低,除非颜色本身有自己的特性,加上大面积的辅助色白色,整个页面看起来很清淡、柔和、宁静,甚至有温馨的感觉。
  页面中使用了渐变的浅绿色,使得整个页面视觉上更加柔和舒适。
  尽管点睛色只在主要标志上出现,按钮也只有少许一点,但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色,饱和度达到最高值。另一个点睛色中黄色,在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上,黄色正是在绿色和红色之间的过渡色。

  结论:
  浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。
  渐变的效果更能加深这种印象。但页面配色上浅色过多时,整个页面容易呈现发"灰"的感受,这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块,适当的鲜艳的点睛都能很好的解决这一问题。


本文链接:


52design素材资源库52design图片库52design酷站营

我爱设计网www.52design.com
(在线编辑:morion) 】【打印】【关闭】【设计论坛】【设计师作品集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站地址,且不准打上各自站点的水印。

经典设计欣赏 设计关键字:VI 新锐 包装 装帧 海报 地产广告 画册 名片 标志 软件界面 ICO 网页
SPORTSLIST 平面广告
SPORTSLI
Puma 平面广告
Puma 平面广
Wataniya 平面广告欣赏
Wataniya
Penalty 平面广告
Penalty
HSBC平面广告
HSBC平面广告
Michaels Arts 平面广告
Michaels
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
当日文章推荐 查看更多相关内容
Dreamweaver| 用 Dreamweaver 4 制作 [8-20]HTML/CSS| 给网页文字加上即时提示 [8-20]
印前技术| 从印制谈降低图书成本 [8-20]CoreaDreaw| Excel表格导入Coreldraw [8-20]
Maya| 改变Sprites型粒子的方向 [8-20]Flash| Flash制作动漫中常用的眨眼效果动 [8-20]
Flash| Flash轻松实现五彩变换多边形鼠标 [8-20]3D MAX| 3D MAX教程:Loft建鼠标模型 [8-20]
Photoshop| Photoshop教程:打造月亮之下 [8-20]Photoshop| Photoshop教程:滤镜特效制作 [8-20]
理论文献| 网络时代图片银行的作用与摄影师的新课 [8-20]理论文献| 从艺术摄影到摄影的艺术 [8-20]
会员作品集推荐 查看更多推荐会员作品
平面作品 | 插画作品 | 网页作品 | 包装作品 | 软件UI | 室内设计 | 数码摄影作品 | 建筑环境 | 工业设计 | 其他
LogoIDEAL玩具汇森玩具群英会萃手术
老鼠动力阳光屋顶卡卡走-迷卡卡走-迷卡卡走-迷

数据载入中...
视觉焦点
优秀作品在线投稿
·
Michaels Arts 平面广告
Michae
生活境界楼书
生活境界楼书
港澳花园广告欣赏
港澳花园广告
茶包装欣赏
茶包装欣赏

站点新入
MAYA简单金属材质的制作
MAYA简单
Flash制作动漫中常用的眨眼效果动画
Flash制
展区
·翰海博网诚聘资深网页设计师 (2-29止)
·招聘全职美工 (8-30止)
·儒林设计工作室_招聘 (6-30止)
·WEB/GUI界面设计师 (1-10止)
·高薪诚聘网页美工 (1-28止)
·招聘资深平面设计师 (1-31止)
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:lorentus
网站地址:http://www.lorentus.com/
加入时间:2008-7-14 18:33:38
网站名称:foodjoa
网站地址:http://www.foodjoa.co.kr/
加入时间:2008-7-14 18:33:04
网站名称:kleaguei
网站地址:http://www.kleaguei.com/
加入时间:2008-7-14 18:32:35
网站名称:pegadesign
网站地址:http://www.pegadesign.com/
加入时间:2008-7-14 18:31:39
网站名称:cordanarua
网站地址:http://www.cocacola.com.br/cordanarua/
加入时间:2008-7-14 18:30:55
网站名称:ashhad
网站地址:http://ashhad.com/
加入时间:2008-7-14 18:30:15
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿