如何用色彩制造出具有专业感的网站

如何用色彩制造出具有专业感的网站

来源：yeeyan 作者：译：Srandy 发布时间： 2010-03-19 15:34:50

是什么使得某个设计看起来协调、井然有序并且具有专业感？答案是：“色彩”。并不是所有的项目都需要用保守的黑蓝色(corporate blue*)来让它看起来很专业，协调的色彩意味着建立起一个框架，这个框架会描述应该选择何种色彩以及如何使用它们。

是什么使得某个设计看起来协调、井然有序并且具有专业感？答案是：“色彩”。并不是所有的项目都需要用保守的黑蓝色(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的取色工具的取样大小设置在5x5平均，我取出了天空里最暗和最亮的部分，然后将这几个差不多的色度分给了边栏、连接、标题以及页脚。当客户向我们询问我们如何能将网站设计的又好又快时，我们的回应是：“这是我们的本职（This is what we do——或者你不会喜欢的：这是我们应该做的）。”但其实，色彩已经在那里了，我需要做的只是把它寻找出来。相对存储的相片能用于解决快速设计的站点来说，大型动态网站的设计者们则需要从寻找他们的浏览者那里寻找灵感。浏览者的日常服装将是吸引他们的一个非常棒的指示。了解访问者平时穿什么，然后你就会知道怎样的色彩让他们感到舒服。如果你的网站是关于，比如说联赛，就该了解人们穿什么去看比赛而不是他们在工作中穿什么。如果你很幸运地弄到了目标人群的照片，那就将他们看成一体；你需要一个人群的平均。但是如果没有照片，那么去商店购物吧。能够持续经营的服装设计师们通常拥有对每一种情绪和生活方式都很棒的色彩感。不过你不需要跑到第五大道高级时装公司去，只要用google搜索下“野营用品商店”、“婴儿服装”、 “滑雪和泳装”以及“休闲生活”就能够得到很多非常不错的色彩搭配人们根据他们的品位穿着衣服。如果你使用了他们喜欢的色彩，那么他们浏览时会感到更舒适。

使用纹理

色相、饱和度和明度的轻微的抖动形成了纹理。单色纹理（就是只有一种色相的纹理）和图案给大多数网站提供了一个微妙的维度而不产生冲突。特别是，简单的纹理背景非常容易制作：

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

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