Web开发者色彩搭配快速指南
Les16N
8年前
<p>我从来都不是色彩理论的粉丝，想来大概是由于自己总是不得要领。我也希望自己能手执色轮，挑选出令朋友、客户和家人都惊叹的互补色、分散互补色和三色组合。</p> <p>但理论总令我费解，老实说，我从来不觉得色彩理论在我的项目中有什么作用。多少有点讽刺的是，我经常发现在选择和使用了不错的色彩后，我才对其背后的理论有更好的认识。在这篇文章中，你不会看到一个色轮，取而代之的是一种你可以拿来就用的简单的色彩挑选流程。当然，阅读过程中，你的潜意识会学到一些色彩理论，我强烈建议你在几个月后重新阅读本文并体会其中的理论，我保证，你会有更深的理解。</p> <h2>选择基色</h2> <p>我们总是能碰到像是 <a href="/misc/goto?guid=4959671127723575854" rel="nofollow,noindex">一千万种色彩</a> 这类荒谬的事，想想吧，一千万。而我们只需要选择其中一种作为我们网站或品牌的基色。基色可以说是万物之源，因此非常重要，但不用担心，你不会选错的。</p> <h3>如何选择初始颜色</h3> <p>从无到有挑出一种颜色很简单，但那不是我们要做的。对于任何一个涉及到客户的项目，你都应该尽可能全面地验证你的选择。否则，事情将变成你喜欢的颜色挑战他们喜欢的颜色，他们就是给你钱的客户，所以他们总是赢。</p> <p>但不要过于担心，你只需要确保你的选择是基于某种理由的。</p> <h3>选择初始颜色的方法</h3> <p>利用手头的素材</p> <p>如果客户有自己的Logo，logo 的主色通常就是你寻找的初始色</p> <p>不要使用竞争对手的主色</p> <p>如果你的竞争对手有很强的品牌主导颜色，你要做的就是在自己的产品中排除这些颜色</p> <p>想想你的目标用户</p> <p>一家殡仪馆的网站与一家儿童俱乐部网站在色彩搭配上通常会有很大差异，想想谁是你的目标用户，你想让他们有什么样的感受（兴奋、严肃、被呵护等等）</p> <p>不要局限于思维定势</p> <p>即使你是在为年轻女孩设计网站，也不必非要选用粉红色，跳出思维定势去获取用户的认可。</p> <p>玩一个文字游戏</p> <p>如果你纠结于色彩选择，写下所有与你客户业务有关的词语，这些词语应该能为你提供一些线索。如果仍然纠结，找一个介绍颜色含义的网站，看看哪一个最匹配。</p> <p>现在，你的脑子里面应该有一个基色了，它应该一种简单的颜色，像是红色、绿色、蓝色、黄色或者粉红色。接下来我们将会选合适的明暗度。</p> <p>我们假设你的选择是蓝色。</p> <h2>选择漂亮的基色</h2> <p>与其在 Photoshop 提供的调色板中纠结，不如像艺术家一样去”盗取“他人的设计决策。</p> <p>首先，访问 <a href="/misc/goto?guid=4959671127809433323" rel="nofollow,noindex">Dribbble</a> 和 <a href="/misc/goto?guid=4959671127895171612" rel="nofollow,noindex">Designspiration</a> 并点击“色彩”链接，你将看到两个相似的界面：</p> <p><img src="https://simg.open-open.com/show/79ceaf25ff57707e5b7ac8548f8a0330.jpg"></p> <p>通过这种方法，你可以找到具有合适明暗度的蓝色。</p> <p>清新活力的品牌选择明亮一些的蓝色（下图顶部5个中的一个），对于一些较商业和严肃的品牌，底部五个中的一个</p> <p><img src="https://simg.open-open.com/show/8511b6e98c251a127bac095feed1c38b.jpg"></p> <p>在前面介绍的两个网站中选择一种明暗度，看真实的网站是如何使用该颜色的。你可以用 <a href="/misc/goto?guid=4959671127973452936" rel="nofollow,noindex">CSS-Tricks</a> 中提到的任意一种颜色拾取技术在浏览器中获取颜色的值。</p> <p><img src="https://simg.open-open.com/show/589e23e1d988b71b752b43ddd2d2ab8a.jpg"></p> <p>看到基色有这么多明暗不同的版本只是第一步，你还将知道如何选择适当的颜色来搭配你的基色。</p> <h2>创建一套内聚的色彩组合</h2> <p>现在你手上应该有一个 HEX 值了，我的是#30c9e8。现在要做的是从该颜色出发，创建一套色彩组合。</p> <p>当提到创建色彩组合的时候，你可能会联想到一些类似如下的图片</p> <p><img src="https://simg.open-open.com/show/9e534b1e51328adb209b5b3e844fd0d0.jpg"></p> <p>这类色彩组合的问题是它们通常不太实际，大多数的色彩组合包含了太多你根本用不上的颜色，尤其是考虑到我们始终会用到三种中性的颜色：</p> <ul> <li>白色</li> <li>深灰色</li> <li>浅灰色（可选）</li> </ul> <p>如果你执意要把中性颜色增加到8种或者9种，结果将会是一团糟。其实你只需要再增加两种颜色：</p> <ul> <li>基色 （本文中是#30c9e8）</li> <li>强调色</li> </ul> <p>如果你能将网站所用颜色控制在上面提到的5中颜色中，你将会得到一个远好于混杂了各类互补色的网站</p> <p><img src="https://simg.open-open.com/show/517c3bb4846553267c0c10c5ce8bd0d4.jpg"></p> <h2>寻找你的强调色</h2> <p>强调色在你的网站中只占很少一部分比例，通常是为了引导用户行动，因此需要醒目。</p> <p>你下一步要做的是打开 <a href="/misc/goto?guid=4958853421579398775" rel="nofollow,noindex">Paletton</a> 并输入基色的 HEX 值。</p> <p><img src="https://simg.open-open.com/show/cb020762d172bbfa668b7192f54fb716.jpg"></p> <p>然后，点击“添加互补色”按钮，然后你就得到你的强调色了——橙色</p> <p><img src="https://simg.open-open.com/show/36e7a2a03fbb8f5bccdf25ee775eb1f3.jpg"></p> <p>如果你对自动产生的强调色不满意，你还可以下图左上角的按钮进行微调</p> <p><img src="https://simg.open-open.com/show/67c4e59673abad5282ec910da468a1b0.jpg"></p> <p>我个人而言，我非常喜欢点击三角按钮产生的红色，所以红色将会是我的强调色。当然，Paletton自动挑选颜色的背后是有科学理论可依的，但我们暂按不表。</p> <p>好了，下面就是我们的色彩组合了，漂亮的蓝色，醒目的红色以及搭什么都漂亮的白色。</p> <p><img src="https://simg.open-open.com/show/598a6d5ecf1a9a4be326fde01c88ec88.jpg"></p> <p>现在唯一还缺的就是一些灰色。</p> <h2>添加灰色</h2> <p>在我的大多数项目中，我发现2种明暗度的灰色非常有用——深灰和浅灰，你会经常用到他们。</p> <p>深灰通常是用在文字上，浅灰则是在你需要与白色有细微差异的时候使用（白色通常都是背景色）。</p> <p>你可以通过下面两种方式中的任意一种选择你要的灰色：</p> <ul> <li>还是通过 Dribbble 和Designspiration，你可以在前面的搜索结果中寻找，或者采用另一种更简单的方法，输入“蓝色 网站”然后点击搜索。</li> <li>如果你有 Photoshop 或者类似的图像处理软件，可以采用 <a href="/misc/goto?guid=4959671128086112762" rel="nofollow,noindex">Erica Schoonmaker’s technique</a> 方法找到适合你基色的灰色。</li> </ul> <h2>创建和谐的灰色</h2> <p>这里我们采用 <a href="/misc/goto?guid=4959671128086112762" rel="nofollow,noindex">Erica Schoonmaker’s technique</a> 方法，首先随意选择两种灰色(一明一暗，这里我们选择使用#424242和#fafafa)，然后按下面的步骤操作：</p> <ol> <li>创建两个形状，分别用#424242和 #fafafa 填充</li> <li>插入一个颜色填充图层在两个形状之上</li> <li>用基色填充上一步提到的图层</li> <li>将混合模式（Blending model）设置为重叠（overlay），将不透明度调低至5%到40%之间（这里我们将其设置为40%）</li> <li>用颜色拾取软件获取两种新灰色的数值</li> </ol> <p>我要指出的是当基色为蓝色的时候，该方法效果最好。基色为其他颜色时最好将不透明度调低至5%到10%之间，或者直接选出两种灰色。</p> <p><img src="https://simg.open-open.com/show/65e5f6a461cdf9e245d4cd47025416e5.jpg"></p> <h2>搞定！</h2> <p>到此我们的色彩搭配宣告完成， 希望你为此感到骄傲！</p> <p><img src="https://simg.open-open.com/show/53182ac018ee936b30a29e3b012b8a65.jpg"></p> <h2>使用你的色彩组合</h2> <p>我们已经有了一套色彩组合，现在的工作是将其应用到你的网站上，这完全是另一个话题了，不过为了让你有个概念，简单举个例子。下面分别是一网页的灰度设计稿和着色后版本。</p> <p>小贴士：如果你纠结网站的色彩，可以先通过灰度设计稿确定布局，弄清楚元素间的层级关系，然后尝试不同的颜色搭配。</p> <p><img src="https://simg.open-open.com/show/8690a29283387f472f2045d438a21fe9.jpg"></p> <p><img src="https://simg.open-open.com/show/4fe889726f21a466394bdb1aec57e782.jpg"></p> <p>可以看出蓝色是主色，占了大量的篇幅，而且图标中也有采用。</p> <p>我们的强调色，漂亮且醒目的占据了很小的一块区域。对强调色的使用越少，其突出。</p> <p>深灰色用在了文字，标志和图标轮廓上（即使是细小如图标这样的元素，也值得去研究色彩的搭配，记住细节决定整体）。</p> <p>白色和浅灰色组成了背景色。实际上可以不用浅灰色，不过我发现这一细节的处理让整个网站更加的赏心悦目。</p> <p>需要强调的是，文字的颜色务必要与背景形成足够的反差，这样才不会对色盲和弱视人士造成困扰。有许多工具可以帮助你寻找符合 <a href="/misc/goto?guid=4959671128173598035" rel="nofollow,noindex">WCAG Guidelines.</a> 的颜色。两个流行的工具分别是 <a href="/misc/goto?guid=4959671128250921784" rel="nofollow,noindex">WebAim Color Contrast Checker</a> 以及 <a href="/misc/goto?guid=4958528713428177691" rel="nofollow,noindex">Lea Verou</a> 的 <a href="/misc/goto?guid=4958542066675984964" rel="nofollow,noindex">Contrast Ratio</a> 。</p> <h2>后记</h2> <p>如你所见，无需更多的色彩，今天我们创建的这款色彩组合就能打造出漂亮的网页。但这并不意味你的选择要局限在这几种颜色中。</p> <p><img src="https://simg.open-open.com/show/e01f697d3c940567cd774a53753eced0.jpg"></p> <p>在设计过程当中，你可能会说引入更多的颜色是合理的，这当然没问题，只要细心，你完全可以利用本文介绍的技巧为你的色彩组合找到更多颜色。</p> <p>重要的是，在色彩选择这件事上，你做的越多就会变得越擅长，你会渐渐知道哪些颜色可以在一起，哪些不能。有时候，本文介绍的方法可能会产生低于你期望的结果，请随意调整。</p> <p>来自： <a href="/misc/goto?guid=4959671128532189715" rel="nofollow">http://fetalk.net/2016/04/16/Web开发者色彩搭配快速指南/</a></p>