网页美工设计

网页设计中的安全配色指南

编辑：时间：2017-01-13 21:16:39

　　5. 为强调色添加变化

　　一旦你选定了强调色，将色相(H)滑条位置保持不变。你现在需要为你的设计添加额外的颜色，不过为了让事情变得更简单，这些颜色都是你已经选择的强调色的变色。

　　在颜色选择器上强调色周围拖动选色点来创建变色。

　　在以下这些元素上使用变色：

　　悬停效果

　　边框

　　强调色上的文本

　　渐变

　　光和阴影的效果

　　6. 避开调色面板右上角的位置

　　颜色选择器上右上角的位置是高纯度的颜色。右上角的颜色像一级方程式赛车，它们的执行力惊人，并且非常吸引人，但是我们一般需要足够的经验才能很好地驾驭它们。如果没有经验的话，它们可能会造成事故，所以最好去尝试使用更缓和的颜色。

　　这就是为什么我在本教程的第三节让你选择右上角四分之一中心位置的颜色，以确保以一种相对柔和的颜色开始。

　　为了说明这一点，看一下假如我只改变设计的色相，不再动颜色选择器，会是什么效果。

　　它仍然看起来非常漂亮，对吧?但是如果我把选色点拖拽到颜色选择器的右上角，它突然就变得不太好了。

　　唉妈呀我的眼睛!如果你确定不想烧焦访问者的眼睛，遵循一般的指南避开颜色面板上右上角的位置来进行调色。

　　你刚刚学会了：

　　在上两个部分你已经学会了运用色彩理论的几个不同的方面。您学会了如何使用：

　　饱和度和明度

　　当你在颜色选择器上拖动选色点的时候，你会看到“S”和“B”的值在改变，这分别代表“饱和度”和“亮度”。同时你会也看到色相的值保持不变。所以你是通过改变基础色的饱和度和亮度来创建变色的。

　　饱和度和色彩

　　饱和度生动地表达了你的颜色。举个例子来说，想象一下“我的白衬衫被溢出的红酒渗透了”。在颜色选择器上，饱和度取决于有多少的白色与你的基本色进行混合。白色越少，饱和度越高。

　　当你向右拖动选色点的时候，你减少了白色的量，提高了饱和度，因此“S”值上升了。当你向左拖动选色点的时候，你增加了白色的量，降低了饱和度，因此“S”值下降了。

　　这种将基本色与白色混合的方式也叫做创建一种“色彩”。这个词来自于颜料混合，就是将白色的颜料与彩色的颜料进行混合。

　　亮度与色度

　　亮度是往你的颜色中混合多少黑色。黑色越少，亮度越大。

　　当你向上拖动选择点的时候，你减少了黑色的量，提高了亮度，因此，拾色器上的“B”值就上升了。当向下拖动选择点的时候，你增加了黑色，“B”值就下降了。

　　这种将基本色与黑色混合的方式也叫做创建“色度”。这同样来自于颜料混合，就是将黑色的颜料与彩色的颜料进行混合。

　　色调

　　当你用灰色混合基本色时就创建了“色调”。当你从色板的右上角挪出的时候，你同时降低了饱和度和亮度，也就是同时增加了白色和黑色(灰色)，也就创建了色调。因此基本上任何时候只要你的饱和度和亮度都不到100%，这就是一种色调。

　　同样，这个术语来自于颜料混合，将灰色颜料与一种彩色颜料混合。这也就是词语“调淡”的由来。很酷吧?

　　单色配色方案

　　“单色”配色方案是你使用基本色以及基于基本色调整颜色的浓淡、阴影及色调来进行扩展。你刚刚已经学习过了所有这些术语在实践设置中的含义。因此通过挑选一种强调色以及它的变色，你实际上已经创建了单色的配色方案。

　　接下来呢?

　　在灰度基础上继续练习你的单色配色方案直到你已经非常自信。试着用不同的色相作为你的强调色来进行创作，尝试在使用中改变饱和度和亮度。

　　当你觉得得心应手的时候，继续添加一个额外的强调色。我建议你在第一次尝试的时候使用橙色和蓝色，因为它们是相处最和谐的“二人组”。然后尝试绿色和蓝色，在我的经验中，这是第二简单的。这些组合是最容易打动客户的。

　　为了帮助你更好地理解网页设计的配色方案，你能做的最好的事绝对是利用浏览器扩展插件颜色取样器来抓取颜色样例，比如说Colorzilla，通过它来开始研究经验丰富的设计师是怎么做的。当你浏览网页时，看到一个非常棒的配色方案，用颜色取样器将配色方案分离出来。分析样例中每个色相，看看什么饱和度和亮度水平效果最好。也要注意这些颜色都是怎么相互搭配的。

　　如果有疑问，你可以求助于你的“安全第一”指南，这样你就能远离“惨不忍睹”了。

2/2 首页上一页 1 2

<< 上一篇：网页设计为什么要坚持好的设计？

>> 下一篇：网页设计中3种响应式设计灾祸

推荐资讯