重庆网页设计

平面设计和网页设计配色计划技法指南

当你在设计网站时，采用的颜色会传达出截然不同的思想和情感，所以为你的品牌选取适合的颜色极其的紧要。例如，如果你给美国的顶级沙滩设计网站，和你创作一个像Groppon一样的在线商城，你肯定希望用不同的配色设计它们，由于它们传达的是不同的信息——一个网站传达的是让人心情放松，而另一网站传达的是因为做了一次极其棒的交易而让心跳加速兴奋。
本指南讨论的主题是关于网站和平面设计的色彩。进修先进的色彩理论最佳的手法，是通过实践，而不是理论。但是为了提升，你必须有一个起点。除了有用的配色技法和观念，你还能够发现众多宝贵的资源散落在整篇文章中。
颜色的宗旨
从艺术的角度来探索色彩，它能够使主题更加鲜明。这就是一张绘图和一幅绘画紧要的差别，尽管它们能传达相似的信息。这个原理适用于任何设计包含网站设计。
平面设计和网页设计配色计划技法指南
将色彩添加到设计中使画面的表达更加丰富。图形、字体、按钮和超链接，一切都能够在某种程度上匹配总体的基调。例如，葡萄园网站的颜色和水族馆网站的颜色是不同的。为何呢？由于这是两种完全不同类别的网站，它们试图传达不同意义、宗旨或者感情给自己的目标受众。
因此，当在思考颜色时，记住，颜色很少用来做页面的构架的区分和创建。你应当用灰色来构建一个部署，就能够让人理解到界面的整体构架关联。访问者在浏览网站界面时，色彩能够带给访问者更加丰富的信息内容。
HSV色彩模型
大多数色彩理论文章探讨的观念是，每种色彩背后的思想和它们表现出的情感。我觉得感情的话题太主观，固然它是准确的。选取一个配色计划，不仅仅是凭情感，相反，我要研讨颜色是怎样工作的，以及怎样着手自己练习。
一个优秀的开端是色相(Hue)、饱和度(Saturation)、明度(Value)（或HSV）。你可能了解这些测量颜色的术语，但是我想告诉你这些值确实极其紧要。明度是你在黑白照片上获取的信息——就是不同色度的灰色。把一个网站截图,将它转化为灰度图，你就会看到它的原始值。
这就是说，明度是明暗程度，表示颜色的明与暗，也被称作亮度。色相是最基础的颜色术语，通惯用来衡量实际的颜色，如蓝色、红色或黄色。色相是相当简易的，你能够通过记传统的色轮来记住它的规律。
饱和度（或纯度）与一个颜色的纯度和鲜艳度关联。能够把饱和度看成是色调的强与弱、浊与清。大多数人辨别饱和度就是通过对照香蕉黄和粉笔黄的差别。粉笔色更为“发白”，似乎缺少鲜艳度，由于它的饱和度更低。从下图的Munsell color system（孟塞尔颜色系统）图表中，能够获取更好的了解：
孟塞尔颜色系统图
这个图是值得我们去了解的，由于颜色都是相对的。所以，一个“冷”色，像蓝色用在浅色中就不那么冷了，同样的“暖”色，在暗色中也就不那么暖了。颜色系统是一个奇怪的话题，由于它常常与其它颜色相互用途。这样听起来好像是没有意义的，但你能够把它作为进修的例子，在实际的项目中不断练习。
Harmonic形式
当选取一个配色计划时，你有许多不同的形式能够遵循。诚然不是每个人都学会怎样筛选颜色，幸好网络上有许多方便的资源，来帮助我们完成这个任务。我认为这些色彩调和的网页做的很出色，但是让我们探讨有些更有意思的选取吧。
互补色是色轮上相对的两个颜色，它们之间的色彩对照极其强烈。例如，紫色按钮在黄色背景上极其的突出，由于它们是高对照度的配色。当然，这还取决于每一种颜色的饱和度，通过实践来了解是最佳的。请记住：对立对照！
互补色
相近色在色轮上紧邻彼此。很显然这样的配色计划不会形成高对照度。但在设计图形、banner、纹理或者背景，这些需要匹配整个网页色系的元素时，这是极其实用的。毕竟在总体部署上，并非一切都应当是需要高对照度。
三色式是在色轮上等距隔开三个单独的颜色，三种颜色在色轮上要呈正三角分布。当要摆弄这种配色计划时，务必要选出一种色彩作为主色，另外两种作为辅助色，平衡色彩，决定它们应当怎样融合整体部署。饱和度在其中扮演紧要的角色，但是整体的配色计划仍然不会因此发生大的变动。
三色式
分裂互补色极其像之前的互补色计划，但稍微一些变动。该配色计划是从色轮上的一个点着手，搭配与它相对的两个相邻色，操作相近色来代替互补色中的一个。分裂互补色的对照依然极其强烈，但它并不会像互补色搭配那样刺目，使人感觉不舒服，它给色彩的选取提供了一点回旋余地。
分裂互补色
四色式（矩形搭配）是最难以调和的，平衡的适当会使画面显得绚丽多彩。这种配色计划借助两对互补色，它们之间隔两个色格，这四种颜色在色环上的连线产生一个矩形。在设计进程中若让一个颜色成为主色，效益会更加，同时要留意冷暖色的平衡。我不建议在一着手就采用这种配色计划，由于如果没有经验，很难去控制它。但是它在较大的设计中操作会显得极其漂亮，所以它值得被牢记。
四色式
颜色对照
对照是网站设计的永恒话题。对照度是页面上的两个对象之间的清晰程度。最值得留意的包含段落、链接和标题文本。如果文本和背景颜色之间没有足够的对照，那么文字就很难阅读(太亮或太暗)。
最安全的选取是始终退回到一个明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明显，反之亦然。然而，有些颜色时常形成一种不和谐的效益，如红色和绿色。这种对照在某些情形下是精美的艺术， 但不是任何情形下。在部署当中，如果遭遇颜色丰富的地方，在给链接和按钮用色时要极其小心。
颜色对照
看Duplos的网页，你能够看到有些颜色不同的对话气泡，操作相同的白色文字。因为背景颜色够深，文字在种种颜色背景下都可读。这种不是单一的基于文本的界面，值得我们在设计中去进修追求。
考虑一下，图标或具备行径召唤能力的按钮，在设计中所需要的对照度级别。和谐的高对照度元素，自然能引起人们地关注。当某个按钮或者注册区域需要更多的关注，高对照度往往是一个很好的修复计划。颜色如果操作得当，能形成均衡的对照。
防止纯黑
从美学界获取有些建议，就是防止纯黑色。当你看到现实生活中的物体，你几乎看不到纯黑色。实际看起来很暗，但它的HEX色值（十六进制）不太可能是＃000。你甚至能够试试拍摄照片，并在Photoshop中检测它的HEX色值。
近期我发现了Ian Storm Taylor写的一篇文章， ，题目叫做《不要操作黑色》。它指出，通过防止在界面上操作纯黑色，能更真实地反映现实世界。这可能是一个有偏差的说法，不过近些年来，我发现这是一个极好的建议。
为了实践这一观念，尽量防止在较亮的背景上操作＃000。取而代之，选取一个暗灰色，可能是混合色（深蓝色，深绿色，深橙色等）。我一直觉得，在白色背景上的深灰色文字，比纯黑色文字的可读性高出10倍。
纯黑色与其它颜色相比，反差极其大。这一点让我很苦恼，但即使是一点积极的差别，还是有差别的，所以我的建议是防止操作＃000。
提炼配色计划
入门色彩理论，最简易的手法可能是从一个单纯的颜色着手着手，并操作在线指导工具。没有人与生俱来就了解色彩的选取。但随着不断的重复，它就变成了你的第二天性。
选取配色计划的时间，会在启动一个Web项目并收集想法（线框图，草图，页面元素）之后。这可能发生在设计一个简易的模型以前或者之后，但手法仍然是相同的。只需选取一种颜色，能够与基于内容、模式、风格或情感的部署很好地工作。
提炼配色计划
在线web应用，如Paletton是早期的计划设计中不可或缺的。你输入一个单色，然后选取你喜爱的（相近色，三色式，四色式等）匹配计划。每种配色计划允许额外补充一个，与你选取的颜色相反的颜色。
Paletton是我个人最喜爱的，由于它提供了一系列基于调整饱和度的相对色。它还提供了基于你所选取的颜色，相同的颜色范围的预设计划。最关键的是，它是完全免费的！
另一个潮流的选取是Adobe Color，它有极其相似的设立，但界面一些复杂。你依然需要基于输入一个单色，来选取配色计划。不过Adobe Color操作色轮展示匹配的颜，每一种颜色是灵活的，易于移动的，在维持颜色形式统一性之内。
当谈到提炼自己的配色计划，我强烈建议选取这两个中的一个。它们都是基于Web的免费工具，并提供足够的功能，让你着手构造可爱和丰富多彩的项目。
在线工具和Webapps
除了令人称奇的配色生产器，也有有些其它工具，值得保存以供将来参考。我觉得这些工具和资源，对数码设计，例如如图形或网页设计最有帮助。但你应当从中精选那些最有利于您的工作流的资源。
在线工具和Webapps
如果你正在寻找预建的配色计划，有许多可用的网站。一种选取是ColorSchemer，它有大量的附加功能，如移动应用程序和桌面软件。但该网站本身是免费的，并提供了客户生成的一个大型的配色计划展示库。
平面设计和网页设计配色计划技法指南
另一种选取是Colrd，它从图片照片和其它图形中提取颜色。这是一个奇怪的Web应用程序，由于它不务必总在网站设计范畴颇有助益。但你能够通过研讨图片，和它们关联的颜色进修到许多。普通来讲，自然一直精确的，所以如果你认真观察生活和照中，你会从中获取配色的新思维。
但是，当涉及到数字设计，有众多其它网站，你能够前去进修。一个在线工具Check My Colours，能够将任何网站拉进来，检查文本和背景颜色之间的对照度。这是一个优秀的资源，用来检测其它网站以及您自己的设计。
平面设计和网页设计配色计划技法指南
结果以表格模式列出来，介绍了每个页面元素，在对照度和亮度方面的差异。这当然也不是完美的，但它确实为新的设计师，提供一个优秀的开端。
浏览器扩展
我们大多数人都知晓Adobe产品中有拾色器，如Photoshop或者Illustrator。这是一个迫切需要的工具，由于它提供整个色谱，以及一个RGB和HEX值。但当前大多数Web浏览器插件，能够复制一个类似的颜色选取器。