神刀安全网

用好色,拯救设计!(下)

【文章摘要】颜色不只让界面变漂亮,还有个更重要的作用,让界面好用。这就是为什么设计师在为产品选择颜色的时候易读性是第一位的,美观才是第二位的。

用好色,拯救设计!(下)

三.一个用色彩提升产品易读性的指南

颜色不只让界面变漂亮,还有个更重要的作用,让界面好用。这就是为什么设计师在为产品选择颜色的时候易读性是第一位的,美观才是第二位的。我们还会推荐工具,所以往下看吧。

想一想可以用的颜色,我们能选出一系列搭配好看又容易读的。如果你坚持用经典的背景色,比如白色(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企业选择蓝色作为视觉识别,为了对抗科技的不稳定性。当然识别色的选择主要取决于企业的理念、描述、愿景,不过稳定是最具传播力的。

组合

明亮电子感的蓝色和暗色或者灰棕色搭配有种神奇的效果。如果蓝色是主色,这样的搭配会给人冷酷的感觉,但同时也能产生能量。这样的蓝色和其他金属感的深色搭配也不错。

蓝色与蓝绿色或者薄荷绿搭配会有一种自然、清新的感受。当然两种颜色中需要加入一种平衡。否则强度相同的话,两种颜色会犯冲。

在黄色和橙色的配色中加入蓝色,能给整个设计降温。传统上橙色和蓝色是互补色,不过黄色和蓝色搭配效果相近。

色板

用好色,拯救设计!(下)

用好色,拯救设计!(下)

2.让大家都来嫉妒绿色吧

绿色是黄色和蓝色的结合。有趣的是它传承了很多蓝色的特质,同时拥有自己的个性和象征。在很多语言中绿色与很多描述成长、新鲜、年轻、草的词语词根相同。

个性

绿色是平和而安宁的,具有舒缓的特性。最能抓住它本质的词就是“平衡”。既不是太冷,也不会太热,既能安静,也能有生气。感知度也恰好。虽然出现在矿石之中(例如绿宝石),但主要还是存在有机物中。研究表明绿色能帮助人提升专注度和阅读理解。在丹麦,考试期间桌子会铺上绿色的桌布,试图缓解考生的压力。

象征

绿色指所有的有机物,尤其是植物。现在,绿色是代表环境或者环境保护的第一颜色。现在也扩展到了环境友好的产品和服务(比如绿色能源)。再深入讲,这是生命和丰饶的象征。一方面是因为绿色植物,另一方面是因为水的绿色波光。绿色同时也是新开始的象征。就像泥土发新芽就是春天的开始,称呼某些人是“绿的”,指这个人是个新人或者没什么经验。

用好色,拯救设计!(下) photo by Martin Lõugas

组合

绿色的互补色是红色。理论上合适的比例是50:50。但是这对组合不应该作为主色,而是用来提升活力,否则会像圣诞节。另一种方式使用橙色代替红色。对朴实的质感,棕色是显而易见的选择。深绿色和深棕色,饱和度降低,会创造一种忧郁的气质;深棕色搭配亮绿色,能够突出重点,而且不会太刺眼。蓝色和偏蓝的绿色组合很有温润。但如果再和红色搭配,就需要注意层次感。只用这两种颜色,会让眼睛不舒服,但是他们和深灰色组合起来会很棒。

用好色,拯救设计!(下)

用好色,拯救设计!(下)

3.用红色让你的网站着火吧

红色是三原色之一。与蓝色不同,红色的包容度不高。只有很少一部分的奢侈品会使用红色。在生理层面上红色具有排他性。三种感光细胞只有一种对红色是敏感的。如果你仔细想想,哪怕只有少量红色,这个物件可能就需要一个不同的名字。

个性

作为一个温暖的颜色,红色更具有倾略性,视觉上能让一个房间看起来更小。不过如果使用得当,或者用深色的形式,它也能感觉很舒适。红色比较不容易被感知,也许是因为红色具有最长的波长。波长继续增加的话,红色就靠近红外线的边缘,而红外线是裸眼无法感知的。色彩疗法表明,暴露在红色下能提高血压,从而具有鼓励的作用。东方哲学里,红色与肾上腺有关,而情绪由肾上腺素影响。

象征

红色的象征因为文化差异而有所区别。不过还是有一些公认的,比如热、火、能量、激情、爱、勇气和能量。

用好色,拯救设计!(下) photo by Martin Lougas

这是一个很人类的颜色,这也是为什么情绪和它关系很多。无论是身体还是情感的活动,强烈的情绪提升都意味着血流的加速,这就是联系,红色与血液。

人类学研究发现,温暖和能量是可以激发的。奇怪的是,红色火焰的概念早已根深蒂固,即使橙色的火焰更符合实际。也许是因为红色和火焰一样能触发更强烈的情感,人们倾向记住更极端的事物。同时,以生命体内部的视角来看,温暖和热量也暗示生命。

红色是危险强有力的象征。也许是因为它能被直接感知,还和肾上腺素相关。日常中的例子有停止的指示牌和红灯。大量的红色会非常霸道,所以红色要谨慎地使用。

组合

整体感上,要么淡化红色的主色,要么使用面减少。这种情况指明亮的色调,如果是深色调的,依旧能让人印象深刻,并且有融合度。有趋势让红色和强冷色冲突,红色也能让很被动的颜色温暖起来(比如棕色)。

红色的互补色是绿色,理论上他们的比例应该是50:50。但是为了避免圣诞节的效果,他们的组合应该被控制在最低值,或者引入第三种颜色作为主要的颜色。另一种解决方案是降低明度。

作为吸睛利器,红色和深灰色、深棕色和黑色搭配效果很好。这种对比和复古红色搭配也有一样的效果。相反的,红色和白色背景的搭配在小设计中很合适,不过还是要谨慎使用。

色板

用好色,拯救设计!(下)

用好色,拯救设计!(下)

本文由@酷九设计 翻译投稿

转载请联系本文作者

产品100非常欢迎产品界的各路大神、人神、女神、男神、土豪、屌丝来稿!

共同分享爱,明天会更好,小编等你来稿:ann@chanpin100.com

少年关注我们的官方微博@产品100和微信订阅号:chanpin100ghsd,有惊喜哦!

用好色,拯救设计!(下)

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 用好色,拯救设计!(下)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址