三.一个用色彩提升产品易读性的指南
颜色不只让界面变漂亮，还有个更重要的作用，让界面好用。这就是为什么设计师在为产品选择颜色的时候易读性是第一位的，美观才是第二位的。我们还会推荐工具，所以往下看吧。 想一想可以用的颜色，我们能选出一系列搭配好看又容易读的。如果你坚持用经典的背景色，比如白色(FFFFFF)，浅灰(F5F5F5, FAFAFA, FCFCFC,等），还有经典的前景色，黑色 (000000), 或者深灰色 (080808, 050505, 030303, 等)，或者是最显眼的主色（红色、绿色、蓝色，或者任何一个你选的颜色）。这样的配色你会奇怪，易读性怎么会是问题呢？但迟早你会厌倦这样的组合，希望有更具想象力的配色。 这就是问题的开始。
更具想象力的配色审美上让人愉悦，但在易读性上他们就不是最优解了。不过也不是说在惯用的配色之外就找不到有易读性的搭配了，用对工具，会简单一些。介绍工具之前，我们先来重温一下颜色和易读性的基础知识。 色彩明度是由下方的方程式决定的：((红色值 X 299) + (绿色值 X 587) + 蓝色值X 114)) / 1000注：这个算法是用来换算RGB值和YIQ值的。明度值让色彩的明暗可以度量。 色彩的差异是由下面的方程式决定的：(最大值 (红色值1, 红色值2) –最小值 (红色值1, 红色值2)) + (最大值 (绿色值1, 绿色值2) – 最小值 (绿色值1, 绿色值2)) + (最大值 (蓝色值1, 蓝色值2) – 最小值(蓝色值1, 蓝色值2))
色彩明度的差距范围是125，色彩的差距范围是500。这些公式看上去很复杂，但是当你用核算色彩值的工具时，就很容易明白你的配色是否通过了测试，比如色彩文本可读性工具（Colour Text Legibility tool）和色彩对比工具（ Colour Contrast tool），除非你想要探寻新的配色方案，不然就保守使用传统的配色，也是不错的选择。
1.黄金定律：深色文案配浅色背景。
人人适用，深色的文案搭配浅色的背景创造最佳的易读性。当然看你选什么颜色，不过易读性最高的搭配是黑和白：
就像上面的截图，可读性取决于字体的大小和字体本身。一个好的工具会告诉你，你配色是否适合标题，还是同时适合标题和正文。一般来说，字体越大，易读性越高。不过不要指望字体大小，因为一般正文字体都在10-14号之间（相对很小），这就是说标题易读的颜色未必适合正文。
黑白配不是唯一的优质组合。如果你想看更多的例子，可以翻翻这篇文章。
白色是很常见的背景色，不过有时候你希望加点颜色。比如用黑色或者很深的颜色做背景，用红色、绿色、蓝色等做很淡的遮罩就会很棒。
不同的背景色和前景色
白色渐变和任何一种颜色的遮罩组合都很棒。虽然你没办法用易读性公式衡量明度和对比度，但如果组合的这两种颜色各自都有很高的易读性，组合起来会更棒。
2.深色背景的复杂性
深背景让人很沮丧，不仅仅因为深色在传统文化里经常和不好的事物联系在一起，还因为给深背景选择一个易读的前景色很痛苦。问题就在于，就算你的对比度是好的，文本看起来也未必具有易读性。黑底白字可能比例是好的，但是眼睛很快就会累。就像Pabini Gabriel-Petit 说的：“在黑色的背景上，饱和的黄色(#FFFF00), 绿色 (#00FF00), 蓝绿色(#00FFFF), and 洋红 (#FF00FF) 的对比度是最好的。”
不管是否易读，这个配色都会让你觉得一夜回到解放前——屏幕是绿的，字是橙色的。我从没用过这么古老的屏幕，所以没办法用经验来告知大家。但是每当我浏览这样的网站（深色的背景和浅色的字），我都感觉这是一台时间机器，让我回到二三十年前，而我的眼睛是第一个抗议的。
也许深色背景很可爱，但如果我需要看2000多个字，这种配色会让我哭的。有些产品设计比较贴心，如果你不喜欢深色背景，你可以切换。虽然有很多种办法去覆盖默认的配色，但是我宁愿产品界面原来就选择易读的配色方案，而不是浪费我的时间去选择颜色。也许是我走极端了，但是我绝不推荐字很多的界面用深色背景和浅字。
3.那些怎么组合都合适的调皮颜色
讨论过两种最常见的情景后（浅底深字和深底浅字），那就讨论一下剩下的配色。大部分的主色，不管你怎么调整它们的对比度和明度，背景和文本色都用不起来。
当然不是说这些颜色就没有用，作为标题或者强调它们还是很适合的，尤其字号很大的时候。来看下面的例子：
色彩对易读性的影响很大。所以我们需要明智地选择，既保证美观，还要让用户容易阅读。文本是界面很重要的部分，我们没法用易读性低的颜色把用户留下。下面介绍一些大胆用色的设计，它们很好的吸引了用户的注意力。
很受启发的大胆用色
大且大胆。这是现在流行一种吸引注意力的方法——大胆用色。设计师们是怎么做得到的呢？记住下面几点：
1）一种饱和的配色，既能吸引用户的注意力，又不会刺眼。2）一个超棒的令人兴奋的图像。3）一个独特而显著的标语
这些要求不容易达到。想要得到一个大胆而美观的设计，你需要好好想想，当然还需要一大堆直觉。因为并没有一条简单而普适的规则能够帮助你选择。我只能借你点灵感，帮助你训练自己的创意肌，毕竟色彩对界面非常重要。开门见山，分享一些案例，它们的用色大胆。希望能给大家带来一些灵感。
Abby Putinski（http://abbyputinski.com/）
and Culture（http://andculture.com/）
Artem and Julia Wedding（http://artemjuliawedding.com/en）
BarCamp Omaha（http://barcampomaha.org/）
Caramel Budgie（http://www.caramelbudgie.com/）
Collision Labs（http://collisionlabs.com/）
Connect Mania（http://connectmania.com/）
Dangers of Fracking（http://www.dangersoffracking.com/）
Dear Mum（http://www.dearmum.org/）
do a backflip（http://doabackflip.com/）
Dropify（http://dropify.com/）
Verde（http://verde.io/）
Every Last Drop（http://everylastdrop.co.uk/）
Flow Media（http://flowmedia.cz/）
Gloo Sticker Albums（http://gloosticker.com/）
Gum（http://gum.uk.com/）
Hy（http://www.gethyapp.com/）
Kick My Habits（http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/）
Lets Yep!（http://letsyep.com/en/）
Netlife（http://netliferesearch.com/）
Nineswiss（http://www.nineswiss.com/）
Pixilate（http://www.pixilate.com/）
Rainbow Nursery（http://myrainbownursery.co.uk/）
Sailthru 2012 Annual Report（https://www.sailthru.com/2012）
Sánchez Romero Carvajal（http://www.sanchezromerocarvajal.es/）
Squarespace（https://www.squarespace.com/stories/#seth-godin）
Studio MPLS（http://studiompls.com/）
Tapped
The Basement（http://thebasement.tv/）
The Design Files Open House（http://www.thedesignfilesopenhouse.com/）
TriplAgent（http://www.triplagent.com/）
WDG（http://www.webdevelopmentgroup.com/）
Will Fernandes
Xylem Digital（http://lrxd.com/）
大且大胆，这些网站设计都是真正专注细节的案例，包括色彩、字体和位置。这些细微的部分将对设计产生巨大影响。这样的设计对设计师而言是有风险的，用户看到如此大胆的用色有可能会过于震惊，但是设计师们冒了险，看看最终他们得到了什么。用户看到了好多配色和大胆的界面。有收获吗？下一节，我们将讨论更多蓝色的组合。
四、色彩编年史
这一节我们将介绍一些能让你的产品火起来的配色。包括每种色彩的简单描述和绝佳的色板。
1.明智的蓝色蓝色是三原色之一。这个冷色在有色光谱中的覆盖面很广，从青调到紫色调。它意味着信赖，所以政府网站用的很多。（在欧美地区）
个性根据相关的理论，蓝色是能够延展任何形状。比如一个房间，刷成蓝色，比刷成黄色、红色要显得更大。蓝色的波长在440-490之间，很容易被人眼识别。三种感光细胞都在这个范围内，只是感应程度不同。蓝色也是最常见的最受欢迎颜色。
象征虽然蓝色存在于生物体中，但是通常它更容易与无机体和抽象的意象联系。一个例子就是天空。浅色调传达一种开阔和自由的感觉，一种平静的感受。界面设计中运用浅蓝色做背景能显得更友好，但是大片的背景会显得沉闷。为了避免这种情况，从大自然获取一些灵感：天空因为阳光折射后的渐变更吸引人。不要使用单一的蓝色。
“Trondheim omgivelser” by Helene Rojas Nagel
另一个例子是大海(或者水)。作为生命和活力的象征，大海代表了多样性。你几乎能在各个地方都见到它，以各种形态。虽然，量小的时候，水是无色的。但实际上，水是淡蓝色的，水量大的时候更明显。虽然平静的水被认为是平和的，但是水也可能成为动荡的根源。
因为蓝色的稳定和自信感，这是一个有力的企业色。所以很多IT企业选择蓝色作为视觉识别，为了对抗科技的不稳定性。当然识别色的选择主要取决于企业的理念、描述、愿景，不过稳定是最具传播力的。
组合明亮电子感的蓝色和暗色或者灰棕色搭配有种神奇的效果。如果蓝色是主色，这样的搭配会给人冷酷的感觉，但同时也能产生能量。这样的蓝色和其他金属感的深色搭配也不错。
蓝色与蓝绿色或者薄荷绿搭配会有一种自然、清新的感受。当然两种颜色中需要加入一种平衡。否则强度相同的话，两种颜色会犯冲。
在黄色和橙色的配色中加入蓝色，能给整个设计降温。传统上橙色和蓝色是互补色，不过黄色和蓝色搭配效果相近。
色板Complementary blue by tudor.girba
Swimming Sports by julievonderropp
Sunny Shores by twinklebunnytoes
Sea Foam by louisan
Lilac Bathroom by nightzdragonz
Leviathan by matthepworth
Bleu Blanc Rouge by kuler
blueberry pie by elsabartley
Nautical Cruise by thecolorcat
Giant Attack Robot by stevereed.m
2.让大家都来嫉妒绿色吧绿色是黄色和蓝色的结合。有趣的是它传承了很多蓝色的特质，同时拥有自己的个性和象征。在很多语言中绿色与很多描述成长、新鲜、年轻、草的词语词根相同。
个性绿色是平和而安宁的，具有舒缓的特性。最能抓住它本质的词就是“平衡”。既不是太冷，也不会太热，既能安静，也能有生气。感知度也恰好。虽然出现在矿石之中（例如绿宝石），但主要还是存在有机物中。研究表明绿色能帮助人提升专注度和阅读理解。在丹麦，考试期间桌子会铺上绿色的桌布，试图缓解考生的压力。 象征绿色指所有的有机物，尤其是植物。现在，绿色是代表环境或者环境保护的第一颜色。现在也扩展到了环境友好的产品和服务（比如绿色能源）。
再深入讲，这是生命和丰饶的象征。一方面是因为绿色植物，另一方面是因为水的绿色波光。绿色同时也是新开始的象征。就像泥土发新芽就是春天的开始，称呼某些人是“绿的”，指这个人是个新人或者没什么经验。
photo by Martin L ugas
组合绿色的互补色是红色。理论上合适的比例是50:50。但是这对组合不应该作为主色，而是用来提升活力，否则会像圣诞节。另一种方式使用橙色代替红色。对朴实的质感，棕色是显而易见的选择。深绿色和深棕色，饱和度降低，会创造一种忧郁的气质；深棕色搭配亮绿色，能够突出重点，而且不会太刺眼。蓝色和偏蓝的绿色组合很有温润。但如果再和红色搭配，就需要注意层次感。只用这两种颜色，会让眼睛不舒服，但是他们和深灰色组合起来会很棒。
色板 Botany Greens by julievonderropp
Freshaliciousness by whoneycutt
After Vacation by whoneycutt
Peachy Green by books4me22000
Lime Light and Shady by whoneycutt
Elderberry by julievanderropp
Vintage Light by nlarroyo1
Green Accent by reinderdevries
Lettuce carrots and cucumbers by mohdakram12
Turtle by rbb2008
3.用红色让你的网站着火吧
红色是三原色之一。与蓝色不同，红色的包容度不高。只有很少一部分的奢侈品会使用红色。在生理层面上红色具有排他性。三种感光细胞只有一种对红色是敏感的。如果你仔细想想，哪怕只有少量红色，这个物件可能就需要一个不同的名字。 个性作为一个温暖的颜色，红色更具有倾略性，视觉上能让一个房间看起来更小。不过如果使用得当，或者用深色的形式，它也能感觉很舒适。红色比较不容易被感知，也许是因为红色具有最长的波长。波长继续增加的话，红色就靠近红外线的边缘，而红外线是裸眼无法感知的。色彩疗法表明，暴露在红色下能提高血压，从而具有鼓励的作用。东方哲学里，红色与肾上腺有关，而情绪由肾上腺素影响。 象征红色的象征因为文化差异而有所区别。不过还是有一些公认的，比如热、火、能量、激情、爱、勇气和能量。
photo by Martin Lougas
这是一个很人类的颜色，这也是为什么情绪和它关系很多。无论是身体还是情感的活动，强烈的情绪提升都意味着血流的加速，这就是联系，红色与血液。
人类学研究发现，温暖和能量是可以激发的。奇怪的是，红色火焰的概念早已根深蒂固，即使橙色的火焰更符合实际。也许是因为红色和火焰一样能触发更强烈的情感，人们倾向记住更极端的事物。同时，以生命体内部的视角来看，温暖和热量也暗示生命。
红色是危险强有力的象征。也许是因为它能被直接感知，还和肾上腺素相关。日常中的例子有停止的指示牌和红灯。大量的红色会非常霸道，所以红色要谨慎地使用。
组合
整体感上，要么淡化红色的主色，要么使用面减少。这种情况指明亮的色调，如果是深色调的,依旧能让人印象深刻，并且有融合度。有趋势让红色和强冷色冲突，红色也能让很被动的颜色温暖起来（比如棕色）。
红色的互补色是绿色，理论上他们的比例应该是50:50。但是为了避免圣诞节的效果，他们的组合应该被控制在最低值，或者引入第三种颜色作为主要的颜色。另一种解决方案是降低明度。
作为吸睛利器，红色和深灰色、深棕色和黑色搭配效果很好。这种对比和复古红色搭配也有一样的效果。相反的，红色和白色背景的搭配在小设计中很合适，不过还是要谨慎使用。
色板TOOL Remix by whoneycutt
Sea Serpent in Horrible Peril by sethbenson
Shark Attack by kristi
Fire Dragon and Charthouse by mark
Oil Flame by rickomoreira
Vintage Poster by robertkubas
Court of the Crimson King by carle
Water Cherries by spongebobgirl949
War on Water by cgriffith
Herzin by maya-kido
英文原文地址：http://1stwebdesigner.com/best-colors-for-websites/
（本文由酷九设计翻译，转载请注明本文地址。）