恩我觉得的我的设计都太扁平化了Orz 立体感很差

翻了五天终于完成了【趴
版本1.0 @20100123 有任何建议和交流，都请留言^_^

是什么使得某个设计看起来协调、井然有序并且具有专业感？答案是：“色彩”。

并不是所有的项目都需要用保守的黑蓝色(corporate blue*)来让它看起来很专业，协调的色彩意味着建立起一个框架，这个框架会描述应该选择何种色彩以及如何使用它们。
（*注：corporate blue is very dark blue hex value #000033 which is a web safe color. ）

色彩是最无法掌握的设计元素。“良好的”色彩会与那些不可捉摸的东西的联系非常紧密，比如个人的喜好和直觉，同时也有技术上的考量，比如对比度和显示器校准的情况。

但是色彩对于内容来说是至关重要的。如果你认为一个网站足够重要到舍得花时间去精炼，读者也就很有可能会认为它足够重要到值得去品读。良好的色彩选择能是让这一情况实现。

在本文中我们将为大家的web设计来重新探讨一些实现美丽色彩模板的技术。

要让一个网站的看起来不协调，最佳的办法就是随机选择色彩。

即使当访问者只是第一次瞥过网站首页，色彩也会影响他们对于内容的态度。这个网站是令人兴奋的？安心的？大胆的？保守的？具有政治气息的？还是正式的？

色彩与排版一样影响着人们如何解释他们所看到的东西。

寻找正确的色彩并不容易，但是过程却可以是系统性的。

良好的设计策略,包括一个配色方案(即选择一系列的色彩来传达某种情绪或信息)和方案的布局情况。

假设你被要求设计一个专业的网站。（而且这很容易就会变成一个赌酒游戏：每次客户使用“专业”、“简洁”或者“时尚”这些词的时候试一下，或者在客户说“我喜欢其他网站上的这个，复制它。”的时候再试一下。）

配色方案依赖于网站的本质。比如，银行和花商都可以使用看起来很专业的网站。

但是人们不太可能从一个由黑蓝色和海洋灰组成的网站上购买鲜花。你也可以想象一下美国银行的网站满眼紫丁香和黄绿色的样子。

一种具有“专业感的”设计会告诉访问者，他们找到了一个认真对待自己要做的事的网站，即使那件事情其实很轻松。无论是什么色调和色值，“专业感的”就意味着协调、井然有序并且经过深思熟虑。

从灰度开始

使用色彩的最好方式就是从无色开始。

在担心何种色度的黄绿色用起来更好之前，从设计中去掉色彩可以暴露出那些必须解决的基本问题。如果设计没有在黑白色下感觉正常，那么就需要做改动了。

是否每个页面都有明确的目的？设计是否引导读者到页面内容？这些内容是引人入胜的，令人振奋的还是让人大开眼界的？标题是否清晰？连接是否与其他文本形成对比？色彩提供了这些功能，但是排版、字体和内容组织问题的解决，无法由色彩单独完成。

要做重新设计，首先应该抽出色彩。冲掉过分饱和的初级目标，这一简单的动作就能显示一个网站的立场。（事实上，你实在应该从重新评估你的目标和内容开始重新设计，不过这是另外一个话题。）

有时候去掉色彩本身就是一种解决方法。

有一回我跟一家网站设计公司合作重新设计他们自己的网站。网站老板们都将这个项目视为个人的事情，并且非常热心让它走上正轨。不过如果你认为设计对于你自己来说太难的话，可以通过委员会设计方式(**design by committee)来完成。最后，我们中的三个人在下班喝了点酒之后，盯住了第九张草稿的截屏。
(**注：wikipedia – design by committee)

我粗暴地对PS图层进行了合并图像，然后点击“去色”，把醒目的棕红色和海蓝色设计变成了不同的灰度。出乎所有的人意料，居然奏效了。

到那一周结束的时候，我们用红色色调得到了一个“暖”灰色的设计。老客户对新外观称道有佳，而来自潜在客户的访问量则升高了，我们赢得了胜利。

用Photoshop的“眯眼看”测试(***the squint test)来分析你的配色方案：
(***注：The Squint Test)

1. 截屏你的网站上最新的三页，在PS里打开它们。
2. 所有截屏都复制背景图层（图层→复制图层，或者Mac中使用command+J，Windows中使用Ctrl+J）
3. 对新图层进行半径10像素的高斯模糊
4. 进入图像→调整→色调分离，使用8到12色阶，或者进入滤镜→像素化→马赛克，使用15到30像素。

这就显示出哪一种颜色是真正具有优势的。越具有优势的配色越有优势，给访问者留下的印象就越深。

不使用色彩完成网站的布局和组织后，是时候来选择一套色彩了。那么选择哪个？又用多少种呢？

对齐你的色相

色彩具有三个参数：色相、饱和度和明度（有时也称为亮度）(*HSV&HSL)。
(*注: wikipedia – HSV&HSL)

饱和度是指色相的纯度：霓虹灯的色彩饱和度高，而粉笔的色彩饱和低。

亮度值表示一个色彩有多亮（即更靠近黑色还是白色）

色相指的是色彩位于彩虹的哪个部分，比如红色或是绿色；人们总是对这一特性束手无策。

没有哪样会像色相冲突一样对配色方案产生致命影响。即使一个设计使用了同一色相的上百种色度，从低饱和色到高饱和色，还是会看起来整齐划一，但是色相搭配错误的话，配色方案就会变得零散。

有一种防止色相搭配冲突的办法就是将他们用第三种颜色分割，用黑色、灰色或是白色缓冲是最安全的，因为灰度的色调是中性的：你可以将彩虹中的任何色彩与黑白灰协调起来。

第二种解决办法是对不同色相使用不同的比例。如果一个配色方案有，比如说，紫罗兰色和棕色，那么这个设计可以使用大量不同色度的棕色和一些亮紫罗兰色的高亮。

另一个选择是变换明度。纯蓝色和亮青色结合是感觉一般般；但是深蓝色（海军蓝）和浅青色（天红蓝）拥有足够的对比度使得它们相互吸引。红色和紫罗兰色的差色不足以相互冲突，但是也不太容易区分；浅红色（粉色）和深紫罗兰色就有区别了。

不幸的是，阻止一种错误的色彩加入和选择一种好的色彩并不是同一件事情。一个配色方案是否成功，不在于你是否感到满意，而在于你的观众是否感到舒适。

发现优秀的配色方案

优秀的配色方案来自哪里？在上百种色彩和上千种组合中，你该如何选择？

来自小型静态站点的设计者们会从内容中选取颜色。通常是指照片。

在刚完成的一个八页网站设计中，我搭配了一个精心制作的金属支架来协调靛青色的天空。设置PS的取色工具的取样大小设置在5×5平均，我取出了天空里最暗和最亮的部分，然后将这几个差不多的色度分给了边栏、连接、标题以及页脚。

当客户向我们询问我们如何能将网站设计的又好又快时，我们的回应是：“这是我们的本职（This is what we do——或者你不会喜欢的：这是我们应该做的）。”但其实，色彩已经在那里了，我需要做的只是把它寻找出来。

相对存储的相片能用于解决快速设计的站点来说，大型动态网站的设计者们则需要从寻找他们的浏览者那里寻找灵感。

浏览者的日常服装将是吸引他们的一个非常棒的指示。了解访问者平时穿什么，然后你就会知道怎样的色彩让他们感到舒服。如果你的网站是关于，比如说联赛，就该了解人们穿什么去看比赛而不是他们在工作中穿什么。

如果你很幸运地弄到了目标人群的照片，那就将他们看成一体；你需要一个人群的平均。但是如果没有照片，那么去商店购物吧。

能够持续经营的服装设计师们通常拥有对每一种情绪和生活方式都很棒的色彩感。不过你不需要跑到第五大道高级时装公司去，只要用google搜索下“野营用品商店”、“婴儿服装”、“滑雪和泳装”以及“休闲生活”就能够得到很多非常不错的色彩搭配

人们根据他们的品位穿着衣服。如果你使用了他们喜欢的色彩，那么他们浏览时会感到更舒适。

使用纹理

色相、饱和度和明度的轻微的抖动形成了纹理。

单色纹理（就是只有一种色相的纹理）和图案给大多数网站提供了一个微妙的维度而不产生冲突。

特别是，简单的纹理背景非常容易制作：

• 对内墙，或者是其他什么光秃而粗糙的东西拍照
• 在PS里打开它
• 复制背景图层，然后将它命名为“纹理1”
• 给背景图层填充你的配色方案中的色彩
• 将“纹理1”图层的混合方式设为“柔光”透明度设为30%
• 在你的网站上试用下，如果看起来不太正常，调整下图层的透明度。

图层的名字不是随便选的，你可能需要尝试不只一张照片，最好别给你的图层类似“墙壁纹路”或者“纸张纹路”，你需要专注于它在网站上的效果，而不是它来自哪里。

创建一个良好的配色方案

一套良好的配色方案有既定的特点。要将它看成是让设计保持一贯统一的一个框架或者是一套准则。一套配色方案应当：

• 列出2~5种能共存的色相
• 描述设计可以从这些色相中变幻出多少
• 确定每种色相的色度
• 与黑色和白色能够共处

这里有个例子：

设计者从选择感觉不错的暖色调开始。这是没什么逻辑可言的，只是含糊地想要“秋天”以及她自己的直觉。

在PS里两个图层提供了黑色和白色的色度变化，每一层的混合模式都设为“柔光”纯黑对于最右边的色彩来说太暗了，所以调整了黑色图层的透明度。

为了让色彩调和，创建一个纯红色的新图层，它的混合模式设置为“颜色”并且把透明度设定到40%。（注意：图层的顺序很重要，如果多色图层被放到黑白图层之下颜色会变化。）

这个图里给了设计者15种色彩来选择。她选择了四种有一定差距的色调和色相。好了，这些颜色被用来跟白色对比。

变化很重要，所以设计者实验了一下。当这些色彩跟黑色对比时又看起来如何呢？如果细微地改变色度会发生什么呢？

要是将他们整体改变呢？对多色图层使用使用图像→调整→色相/饱和度来创建一个明显的非秋季感，但是色彩依然很协调。这个色板也许能在复活节用上。

最终的结果配色方案是：一个提供了相互协调的不同（但是不是太多）色相和一系列色调的参考系。下载例子的Psd

使用即有框架

以后的图形、照片和图标是否能跟现在的配色方案协调？这个网站六天、六周或者六个月后会需要一张怎么样的图片？这很难确定，但是内容确实是你的网站配色方案中的一部分。

你可以通过制作根据配色方案制作图片或者是让你的配色系统跟着图片走来解决这个问题。

要让你的配色方案生效，同时也对照片生效，一个非常好的办法是让所有页面看起来一致。

最简单的解决方式是找到符合配色方案的照片。要记住配色方案具有一定的回旋余地：只要一张图片的主要色相与配色方案吻合，就可以使用。很多存储照片的网站允许你通过色彩搜索图片（我的意思是色相：通常主要是像红色、绿色和蓝色之类）。

如果一张图片不符合你的配色方案，那就对它染色：

1. 在PS里打开图像
2. 创建一个新的图层，设置混合模式为“颜色”
3. 从你的调色板选择颜色填充该层，最好是跟图片色彩最接近的那一个
4. 将颜色图层的透明度设为50%
5. 调整透明度，直到你在图片的主色调和你网站的色板上找到一个不错的平衡。
6. 这项技术可以用在照片、插图和图标上——任何基于像素的东西。（如果你并不具有图像的所有权，那最好在改变它之前取得许可。你可能会在你的网站上改变了它的外观，但是你依然在使用其他人的作品的许可。）

具有专业感

没有任何一组色彩是“专业感的”或者是它本身。确切的说你得根据某个工序让它们有一种协调的井然有序的感觉。
不管网站是关于什么的，浏览者都会知道它对待自己要做的事是认真的。

Tips

• 当你认为你有一个良好的配色方案的时候，尝试使用它最少一周。评估色彩需要建立在时间上的直觉。给你自己一些时间来吸收配色的风格。
• 当你认为你有一个良好的配色方案的时候，请不要让它过时。你的访问者的品位，跟你的一样，总是在变化。记住四个月后要重新复习这些颜色。看看他们是否依然合适，如果不合适，是什么变了？什么要素影响了你的调整？
• 使用明亮的颜色要节制。一点闪光的东西会让访问者注意到它，但是要是到处都是他们会失去目标。
• 有些人认为配色方案有一个比较小的范围。留出一些余地来给你的设计增加深度。
• 避免使用红色、绿色、蓝色和黄色这些纯色主色。冲淡他们以用在真实的意味上：偏紫色的红色，带点绿色的蓝色，用橙色染过的“暖”黄色。
• 确信你使用的色彩被去色时依然能工作。如果你选择红色，注意粉红色看起来女性化而暗红色会看起来像铁锈或者血迹。黄色从褪色的阳光道暗棕色。黑蓝色显得神秘而淡蓝色代表宁静——或者是电，如果你加重饱和度的话。
• Mac用户，设置你的屏幕，到“System Preferences”点击“Universal Access”，设置你的显示为“Use grayscale”。你想看黑白电影的时候这也很方便。
• 不管你想要你的网站看起来多有活力，使用中性的背景。黑色白色和灰色能跟所有色相一起使用。
• 如果你使用小文本字体（比如说，14px或者更小）来适应一大块区域的色彩，要让文字比平时更暗一些。这会抵消光线在字符之间的反光。
• 使用少数色相的更多色度。
• 什么“看起来很好”是靠直觉的。但是直觉是一场你自身同你的浏览者的眼光以及给项目出资的人之间战争。
• 用暗哑的背景让内容突出