请选择 进入手机版 | 继续访问电脑版
 找回密码
 免费注册
查看: 9884|回复: 33
收起左侧

[分享] 网站风格制作典型配色方案

[复制链接]

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

发表于 2010-7-15 20:14:18 | 显示全部楼层 |阅读模式
一个好的作品,我们可以看到他不仅有很完善的功能体系,还有界面的设计上也能够吸引人的注意。
对于客户看到一个作品往往先看到的是界面,能否吸引到客户的注意,就要看界面的设计是否能引起客户的兴趣。
对于界面而言,颜色的搭配的是最头痛的事情。

下面是几种典型的配色方案
1.gif
2.gif
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:14:58 | 显示全部楼层
橙色系
橙色
橙色系分析:
主色调橙色HSB数值的H表示色相,显示的是30度,而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值,因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色,使页面生动的同时又运用于导航位置,从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低,与明度纯度较高的背景正橙色形成鲜明的对比。
通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时,又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
→ 橙色网页例图:
3.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:15:40 | 显示全部楼层
深橙红色系分析:
从色相度中可以知道0度为正红色,30度为正橙色,而主色调的HSB数值H显示22度可知,该深橙红色是橙色基础上加入少许邻近色红色,整体上降低了明度而得,因为红色本身较橙色明度低,因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色,前面两种饱和度都较高,最后一种灰蓝色由于明度较高因此饱和度降低,是主色调与前面两种辅助色的协调色。
这个页面背景色运用了纹样,是以目前选取的主色调颜色和明度较暗的深红色结合而得,使得明度稍暗。
数值上看,主色调也就是背景色的饱和度较高,但是由于降低了明度,颜色变得较沉稳。辅助色RGB数值显示,添加了适量的其他颜色,G和B数值区别不大,因此饱和度降低,颜色趋于柔和稳定。点睛色的加入和提亮,使页面视觉效果得到强化
4.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:16:12 | 显示全部楼层
浅橙色同类色分析:
从主色调和辅色调在HSB数值H显示的数值是36可以看出,该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色,明度越高饱和度越低,页面上减弱了饱和度较高的橙色特性,整个网页呈现出柔和自然稍有些发灰的调子。
该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化,属于单色调,配色非常的单纯。色阶平稳,同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离,增强辅色调橙色的特性,使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩,只在明度上呈最高数值而无彩度,不能给页面带来彩度所具有的鲜活靓丽的感觉,另一方面却也呈现出质朴的感受。
5.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:16:46 | 显示全部楼层
橙色系邻近色(黄色+橙色+橙红色)分析:
虽然第一眼看上去似乎色调上变化很多,但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的,通过不同的明度和纯度的变化而得到更为丰富的色阶,它们是浅黄色、黄色、橙色、橙红通过不同的形状面积,位置变化而得。从HSB数值中的H可以看出属于暖色范畴,三个色相的倾向不是很明显,以至于色彩呈现较规律、缓和。由于不同数值的明度表达,纯度也做出了不同的数值变化。
浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感,增强整个页面彩度的作用。
6.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:17:14 | 显示全部楼层
橙色系对比色(橙色+蓝色)分析
HSB数值中的H色相显示主色调橙红色为26,我们知道正红色的H为0,正橙H为30,主色调橙红色是往0偏移而得。正蓝色是240,而该点睛色蓝色为192,往绿度偏移,在RGB中的数值G160也能看出来,因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值,因此尽管蓝色不是正蓝,但它的特性得到了很大程度的发挥。
此种橙蓝对比色中的蓝色调配,比较少见,让人很容易记住它。而橙红色的饱和度明度都非常高,刺激度强,属于让人不可久视的颜色。
介于橙红色和蓝色之间,与蓝色面积相当的白色,起到调和对比色橙红与蓝色之间关系的作用。
7.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:17:45 | 显示全部楼层
橙色系低对比度(橙色+绿色)分析:
如果不看数值参数,刚一开始看会以为这是一组纯度较低的颜色。HSB数值H显示主色调为正橙色,而黄绿色的明度较低且色相倾向不够明确,加之背景有少许的暗橙色纹样,整个页面没有高亮度白色点缀衬托,使得纯度的彩度不够确切,就很容易造成了该页面纯度较低的错觉。
整个页面最亮的颜色除了“书本”最亮色浅黄色外,就是点睛色黄色了。我们知道黄色是所有彩度色中明度最高的颜色,不同明度纯度的黄色系让整个页面明亮了不少,它是整个页面明度色阶的最高调。
黄绿色的出现,让本只有邻近色的橙色系列多了些内容,页面配色丰富不少、视觉节奏多了些变化。
8.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:18:15 | 显示全部楼层
  橙色系高纯度高对比度(橙红色+绿色)分析:

  与上组的橙色绿色相比,这组颜色强烈而刺激,色彩倾向无疑明确了很多。主色调橙红色往红色倾向,而红色的对比色是绿色,因此整组颜色有强烈的对比效果。从HSB数值H上看,除了蓝色外,其余几种颜色纯度都非常高,加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。

  黄色是中间色,起到过渡对比色作用,在这组色里属于调和色。蓝色出现在产品图案上,引导主次关系,增强视觉的注目点。

  专题来源:天极设计

   9.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:18:50 | 显示全部楼层
  绿色系分析:

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

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

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

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

   10.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031

5126

主题

8043

帖子

1万

积分

管理员

出售国内外虚拟空间

Rank: 10Rank: 10Rank: 10

积分
14210
帖子
8043
精华
67
体力
14210 点
蓝豆
2646 点
注册时间
2007-6-8

终身成就奖LY官方团队会员身份ID卡

 楼主| 发表于 2010-7-15 20:19:20 | 显示全部楼层
  绿色系分析:(高纯度配色:绿色+对比色组合)

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

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

   11.jpg
出售国内或美国高性能虚拟空间,高速VPS以及服务器! 同时承接各种类型的网站制作,网站维护,支付宝交易安全放心!    联系QQ:6102031
懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

GMT+8, 2022-6-28 13:31 , Processed in 0.109375 second(s), 27 queries , Gzip On.

© 2006-2022 Powered by Discuz! X3.2

快速回复 返回顶部 返回列表