惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Tenable Blog
Last Week in AI
Last Week in AI
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
H
Help Net Security
F
Fortinet All Blogs
MyScale Blog
MyScale Blog
宝玉的分享
宝玉的分享
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园 - 司徒正美
量子位
N
Netflix TechBlog - Medium
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
Recorded Future
Recorded Future
博客园 - 三生石上(FineUI控件)
Vercel News
Vercel News
aimingoo的专栏
aimingoo的专栏
I
InfoQ
Microsoft Security Blog
Microsoft Security Blog
Scott Helme
Scott Helme
The Last Watchdog
The Last Watchdog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
IT之家
IT之家
AI
AI
WordPress大学
WordPress大学
Security Archives - TechRepublic
Security Archives - TechRepublic
Google Online Security Blog
Google Online Security Blog
U
Unit 42
V2EX - 技术
V2EX - 技术
MongoDB | Blog
MongoDB | Blog
Schneier on Security
Schneier on Security
博客园 - Franky
H
Heimdal Security Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Jina AI
Jina AI
W
WeLiveSecurity
P
Privacy & Cybersecurity Law Blog
Cloudbric
Cloudbric
B
Blog RSS Feed
N
News | PayPal Newsroom
S
Securelist
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
I
Intezer
Hacker News - Newest:
Hacker News - Newest: "LLM"
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
博客园_首页
罗磊的独立博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
雷峰网
雷峰网

博客园 - Arcangel

又搬家了。。不过没有搬出博客园。。搬到JAVA板块去了。。 周记 转一篇文章~网站设计流程规范 - Arcangel - 博客园 进军xoops 感想~ 说一下那个下拉菜单的id_2的含义 php联动下拉菜单 无刷新 数据库 本人自己修改的,经测试可用 - Arcangel 编码改为utf8后出现的问题 关于mysql的乱码问题。非???错误 sql数据库上传 (弱智问题,我也弱智) 今天开发网站的时的一点小经验 关于php显示中文mysql数据的问题 关于css的层位置和层内元素的位置定义 太丑了~ 谈智慧.天才.和能力(二) 我很快乐~ 关于 首席网页设计师 晚茶~ 你赢一天~我赢一天~
发一个色彩学的转帖.相当有感触
Arcangel · 2007-05-15 · via 博客园 - Arcangel

不论你做什么样的设计,色彩都是一个不容忽视的问题。色彩以一种“隐蔽”的方式传达的各种信息,这些信息会影响观看者的心理和感受,左右他们的判断和选择,色彩对于设计而言实在太重要。这篇文章就要比较系统地介绍一些在网页设计中如何使用色彩的入门知识。

  色彩是设计者的得力助手,前提是应用得当。对于网站设计而言,色彩的重要性尤其突出,不过经常被粗心的站长忽视。我们经常说“第一映像最重要”,于是设计网站时,设计者经常会花很多精力制作一个“富于冲击力”的LOGO或者BANNER,当然,它们很重要。但是,访问者访问网站时的第一映像实际上并不来自这些LOGO或者BANNER,而是——色彩!

  好了,在了解了色彩对于网站设计的重要性之后,我们开始探寻色彩的奥秘。

  色彩入门

  首先让我们熟悉一下色彩的一些基本概念。

  三原色

  一切颜色都来自三原色:红、黄、蓝。
[img] [/img]
 在这个圆环中,相邻的两个原色相混合可以得到另外三个比较重要的颜色(下文将其称为二级原色):红+黄=橙,红+蓝=紫,蓝+黄=绿

让我们再深入一步,三原色和三种二级原色可以进一步混合得到更多的颜色,分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。

按照同样的方式不断进行下去,这个圆环中颜色之间的分隔线就会消失,得到下图所示的“色彩圆环”,在一些绘图程序的调色板中我们可以看到这样的色彩圆环。

但是这个圆环仍然没有涵盖所有的颜色,对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。也就是说,将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色,下面将详细介绍。
常用的色彩术语

  饱和度

  某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。例如RGB值为(0,0,255)的蓝色是纯蓝色,他的饱和度是100%。随着饱和度的降低,颜色会越来越接近灰色。

灰度

  基本色彩和黑色进行不同程度的混合可以得到不同的灰度,例如

亮度

  基本颜色和白色进行不同程度的混合可以得到不同的亮度,例如::

色调

  基本颜色和灰色进行不同程度的混合可以得到不同的色调,例如:

色彩方案的种类

  不同网站应当使用不同的色彩方案,与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”,更重要的是在访问者心目中建立对这个网站的感性认识。所以,色彩方案的选择决不能草率,而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率,甚至根本不对网站进行色彩方案的整体规划,你将不可能制作出一个真正优秀的网站。

  例如,一个销售婴儿用品的网站应当使用比较活泼的色彩方案,而一个艺术网站则应当使用比较执重的方案。

  按照色彩方案中色彩使用方式的不同,我们可以将色彩方案划分成多种类型,单色方案、相似色方案、补色方案和三合一色方案。

单色方案

  单色方案是指在网站设计中终止使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色,由于整个颜色方案中事实上只有一种基色,因此这种方案称为单色方案。例如:


在Photoshop的色彩选择窗口中,我们可以这样进行建立单色方案。首先调整H(也就是Hue的缩写)后面的值来调整色调。注意,H的单位是度,也就是基本颜色在颜色环上所处位置的角度。

  设置好H的值之后,再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意,其中B和S的单位是百分比,也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。

  下面来看两个使用单色方案的成功实例。


单色方案实例之一:

  这是一个女性网站,因此其基本颜色为粉红色,并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。


单色方案实例之二:

  这个色彩方案使用的基色颜色较深,并通过修改其亮度获得其他两种颜色,并用最浅的颜色作为主体部分的背景,使其突出出来。

  总的来说,单色方案是一种比较稳重的方案,或者说比较保守的方案。单色方案给人整洁、经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺术网站。

  特别值得一提的是,商业网站也比较适合使用此种颜色方案,因为这种方案可以给人一种稳定感,使访问者容易建立对网站的信任感。当然,这种方案也有其灵活的一面,当使用较浅的基色时,这种颜色方案也可以用于时尚类网站,传达简约清雅的观念相似色方案

  在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色,如果再加上亮度和饱和度的变化,可以构成的颜色就非常多。

下面是相似色方案的实例。


相似色方案实例一:

  这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商,面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现。


相似色方案实例之二:

  这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物,因此文字使用了绿色,整个页面看上去自然清新,和网站的内容相得益彰。

  通常,相似色配色方案可以给人非常协调的感觉,因此在网站设计中非常常用。典型的运用方法就是,用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。