首页 > 网页教程 > 设计分享 > 网页配色教程:六条网页设计安全配色指南

网页配色教程:六条网页设计安全配色指南

时间:2015-05-06    来源:站酷网

我仍然清楚地记得我最早的一次美术课,那时我还是一个小小的、对凡事都充满渴望的孩子,我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋,并且我想,既然两种颜色能创造出一种全新的美丽色彩,那所有颜色在一起肯定会更棒!最终,我非常失望的发现,不论我怎样混合它,只要我按照我自己的想法使用所有的颜色最终只能得到一种糟糕的颜色,只能用“惨不忍睹”来形容!

多年以后,当我还是一个羽翼未丰的网页设计师的时候,我又经历了相同的过程。在学习的过程中,我不可避免地掉进了这样的陷阱——使用太多种颜色,或者是将多种颜色以一种错误的方式进行组合,最终都使结果有一点“惨不忍睹”。

我开始努力学习如何创建网页的配色方案,同时我发现了许多极好的关于色彩理论的知识。我读了色相(Hue)、色彩(Tint)、色度(Shade)、色调(Tone)、饱和度(Saturation)和明度(Brightness),还有类比色、单色、三元色、互补色以及混合色配色方案。

网页设计 网页配色 配色方案 网站配色方案

然而,没有一个实际操作的框架去应用这些信息,我发现起初的时候,这些色彩理论并没有帮助我更好的进行网站配色设计。事实上,直到我通过反复试验来开始创建可靠的配色方案时,我所看过的所有色彩理论才开始变得有意义。

在这个过程中,我捡起一些我最开始就希望知道的网站配色“安全指南”。最开始的时候,全部的色彩理论不一定是你需要的。通常在学习实践的过程中你需要像“滚雪球”一样,一点一点添加理论知识。

在本教程中,我将与你分享六条心得。你可以遵循“不会错”指南基本掌握色彩在网页设计中的运用。这些不是规则,你可以在你的职业生涯中创建更多的配色方案,使它往完全不同的方向发展。相反,这只是一个起点,一条教你怎样避免在网页设计中的第一次“试水”不要变得 “惨不忍睹”的安全指南。

1. 配色方案是画布,不是画

网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星——内容的衬托。网页设计中不应该让配色比内容展示更加“热闹”。你的设计应该是在后台的,帮助将网站的内容推向前台。

网页设计 网页配色 配色方案 网站配色方案

网页设计 网页配色 配色方案 网站配色方案

用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候,不适当的配色往往会分散访客的注意力。事实上,网页设计过程与内容是紧密联系在一起的,但有许多高质量的网站设计却几乎空无内容。

这是一个好主意——将你希望出现在这个位置的内容样例在设计软件里或直接在代码里先摆放出来,然后围绕它做设计。尤其是在与特定风格的照片或图像有关的时候,这样你可以确保你的设计与它们搭配和谐。想象一下,你的网站内容是一个独特的个体,你必须为它设计一个完美的配件。

2. 从简单的灰度模式开始

你可以为你的主背景和文本从无数的色彩组合中进行挑选。然而,我的建议是先掌握最简单的,白色或浅灰色背景搭配深灰色的文本。

如果你观察流行的网站所选择的模板或主题,你会发现它们中的大多数都是使用深灰色的文字搭配白色或浅灰背景,这是有充分的理由的。这种组合你基本保证了为访客提供可读性,并允许基于内容的文本和图像进入前景。

利用一些示例内容制定一个基本的灰度布局,例如:

网页设计 网页配色 配色方案 网站配色方案

一般来说,你应该避免使用纯黑的文本,深灰色相对来说更易阅读。一个相对舒适的范围是#333333至#666666。

基于上述,在任何文本主体下,最保险的背景色是全白#FFFFFF。对于其他的背景元素,背景色的范围可以从#FFFFFF至#CCCCCC.

再次声明,这些并不是你必须使用的颜色准则,仅仅只是你可以开始安全设计的一些指南。

3. 只选择一种强调色

配色方案出错的最常见的地方就是颜色使用过多。你使用的颜色越多,你想要将它们都保持在控制中就越困难。所以一开始,在灰度基础之上只添加一种额外的颜色来强调诸如链接、某些标题、菜单、按钮等等元素是很有用的。你的强调色可以是蓝色、绿色、红色或其它任何你喜欢的颜色。

开始在你的基础图上拉一个强调色的矩形框,这样你可以衡量颜色是否与页面上所有的元素匹配。然后打开颜色选择器,选择在颜色面板右上角四分之一中心位置的颜色。

网页设计 网页配色 配色方案 网站配色方案

上下移动滑块,选择一个你认为适合你设计的颜色。

网页设计 网页配色 配色方案 网站配色方案

至此,你已经使用了三种基本颜色:你的背景色,文本色,以及一种强调色。将来你可以,也应该使用多个强调色,但是现在最好只是想一想。如今你已经使用三种颜色了,请熟悉这三种颜色,当你更自信的时候,你可以添加更多的颜色。

你已经学会了:

你学会了怎样选择“色相”。简而言之,色相就是一种基本色。当你上下移动滑块的时候你就会看到你的颜色选择器中的“H”值在不断变化。

网页设计 网页配色 配色方案 网站配色方案

“H”代表色相,一旦你选择强调色,文本框中数值就是色相的值。

4. 如果有疑问,使用蓝色

如果你对选择什么强调色有任何疑问,请使用蓝色。蓝色通常是最灵活的颜色,适合多数的网站类型。紫色和黄色之类的颜色可以是很活泼的,但是如果使用不当的话,立马会变得很花哨。

另一方面,你可以在以蓝色为强调色的基础上随意发挥,但你也不能走的太远。如果你不知道从哪里开始学习或者在项目中使用什么颜色的时候,就用蓝色就对了。如果你要选择特别的蓝色,你可以选择深蓝色(H值235)至浅绿色(H值190)的范围以保证自己在安全的领地。

网页设计 网页配色 配色方案 网站配色方案

在我的布局示例中,我选择值为205的色相。当你已经选定了强调色,将它添加到任何你认为必需的位置。假如你在按钮或任何其他有文字的区域使用了强调色,也要相应地改变文本的颜色。在这个例子中,我将强调色区域之上的文字改成了白色。

网页设计 网页配色 配色方案 网站配色方案

5. 为强调色添加变化

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

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

网页设计 网页配色 配色方案 网站配色方案

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

悬停效果

网页设计 网页配色 配色方案 网站配色方案

边框

 网页设计 网页配色 配色方案 网站配色方案

强调色上的文本

 网页设计 网页配色 配色方案 网站配色方案

渐变

 网页设计 网页配色 配色方案 网站配色方案

光和阴影的效果

网页设计 网页配色 配色方案 网站配色方案

相关推荐
移动应用图标配色诀窍 APP界面配色设计教程
网页色彩搭配教程:三个实用方法搞定网页配色设计
2015年网页设计配色趋势预测
QQ空间配色变迁解密:“杀集取卵”!
色彩搭配教程:颜色对用户究竟有哪些影响?
配色教程:手把手教你从大师的作品中借鉴配色灵感
网页配色设计:红色空间如何设计才好看?
网页配色设计:如何运用黄色来表达网页的光感?
网页配色设计:如何用蓝色调搭配出天空和大海的感觉?
年度总结:最新视觉设计六大趋势分享
3个使用鲜艳配色来制作WEB/APP界面的技巧分享
5个色彩进阶技巧!帮你创造更优质的网页用户体验
双色调配色、分屏式设计、空间共享式排版的网页设计趋势
色彩设计:色盲用户的友好体验,你应该注意五点
配色设计:写给零基础新手的配色指南
100%提升转化率?据说懂这些色彩心理学知识就行
网页配色经验分享:叠柔配色技巧及图解分析
深入探讨图片格式与网页设计的那点事儿
色调心理效应 颜色在网页设计中的重要性分析
网页设计新趋势:撞色风(Color Blocking)风格的网站欣赏
创造视觉冲击力的网页设计配色技巧
色彩情感对用户体验设计的影响
网页配色教程:Thinkful网站配色完全学习指南
10个实用方法帮你搞定网页柔和色调设计
三分钟帮你快速入门极简色彩学
酷站欣赏之欧美棕色调网站设计案例赏析
网页设计的文字色彩与可读性分析
30个出色的网页设计色彩搭配案例欣赏

精彩推荐

热门教程