以下是译文:

Photo by George Becker from iconscout

我们身处在一个多彩的天下中,物体的不同颜色,会让我们产生不同的感情。
色彩会影响人们的身心,强烈的赤色会使血压升高,而蓝色则使人镇静。

html颜色常用冷色UI设计师必备的配色理论 React

设计UI界面时,色彩是影响用户最大略和最主要的一个成分。
很多人认为UI界面色彩的选择取决于设计师的品味和审美。
然而,颜色的选择过程比它看起来要繁芜的多,在设计中扮演着重要的角色。

可以用颜色来营造一种感情、吸引把稳力或作出强调,用色彩调动人的感情或使人镇静下来。
通过选择精确的配色方案,可以营造一种优雅、温暖和沉着的氛围。

色彩的选择是基于色彩生理学和色彩理论的,下面就详细先容一下这块的内容吧。

色彩生理学

男性和女性的色彩偏好是不同的,不同年事群体的色彩偏好也是不同的。

根据 JoeHallock的研究,不同性别的色彩选择有寰宇之别。
研究旨在创造不同色彩的偏好程度,从最喜好的色彩到不那么喜好的色彩分别所占的比例。

不同性别的色彩偏好

如上图,男女都格外喜好蓝色,而对棕色的喜好程度最低。

以一个APP案例来解释

这款APP的目标是管理本钱,用户包含男性和女性。
先假设一个不理解色彩的初学者,选择棕色作为APP的主色,由于棕色是他最喜好的颜色。
结果如下:

本钱管理APP

如图,虽然设计还行,但由于色彩的选择,APP可能无法正常利用。
那如何优化呢?本文稍后的部分中,将先容如何仅通过色彩的改变来优化全体APP。

配色的代价就来了,设计师须要理解色彩的含义和影响,以传达精确的语气、信息并勾引用户做出预期的行为。
每种色彩都会对我们的思维产生影响,理解可能的影响可以帮助设计师传达精确的信息、勾引用户行为。

作为一个设计师,你须要理解色彩的含义,这里只是简要先容,详细内容请参考 http://www.color-wheel-pro.com/color-meaning.html

色彩理论

设计界面时,有很多色彩可以利用。
首先,要提到的是色环。

著名的色环

另一个主要的话题是配色。
配色有很多方法,但暖色和冷色该当平衡。
下面是几种配色办法:

互补色、临近色、三色组、分裂互补色、矩形(双分裂互补色)、正方形

每个设计师都该当知道色彩的三个属性:色相、明度和饱和度。
Christian Vizcarra对色彩的属性描述非常详尽,本文借鉴了其干系内容。

色相

色相是自然状态下的色彩。
比如蓝色、黄色、绿色和赤色等等,没明暗的变革。
简言之,色环上没有改变明暗的色彩。

如下图:

明度

明度,指色彩的明暗度。
以自然界为例,一些物体在清晨和晚上的色彩不同。
如树木和山脉,清晨色调浅;傍晚由于光芒减少了,色调变得偏暗。

Photo by Nextvoyage from iconscout

距光源越近的物体,明度越高,反之,则明度越暗。
明度在UI设计中扮演主要的角色,明度利用得好,可以实现好的比拟效果。

明度达到100%时,色彩就会变成白色;明度是0%时,就会变成玄色。
如下图:

色彩的明度

饱和度

饱和度是色彩的纯度。
增加饱和度,色彩会变得更强烈、鲜艳生动;降落饱和度,色彩会变得暗淡乏味。

色彩饱和度

利用饱和度前,须要知道设计的载体,印刷还是电子媒介。
为印刷设计时,饱和度不能过高,由于印刷利用的CMYK模式,有一定的局限。

UI设计中的色彩

黄金比例——6:3:1原则。

60%+30%+10%的原则,是达到色彩平衡的最佳比例。
在60%的空间利用主色,30%的空间利用赞助色,末了剩下10%的空间为其余一种色彩。
这样可以利用户眼睛从一点移动到下一个点时,非常舒畅。

利用6:3:1原则的调色板

UI中的阴影

没有完备纯黑的阴影,阴影的颜色是会受到物体本身固有色的影响,如下图所示。

Photo by Brigitte Tohm from iconscout

樱桃的阴影是深赤色,看起来险些是玄色,但并不是纯玄色。
比如还有花儿、盘子和华夫饼的阴影,都不是纯玄色的。
光和环境决定了阴影的颜色。

UI设计的一个常见缺点是利用半透明的玄色作为阴影。

UI元素的阴影

字体色彩

如今大多数的界面都是白色的,目的在于尽可能地简化界面聚焦内容本身,以是字体排版就成了一个非常主要的元素。

左边的文本质彩是纯玄色 (# 000000),右侧的色彩看起来是玄色的,但实在是加入了蓝色的玄色,变成了蓝玄色 (# 181441)。
字体色彩在大多数白色的界面中,非常主要,如下图:

相同透明度下,两种色彩的比拟

相同透明度下,两组文本字体颜色不同,效果不同。
一组是灰色的,另一组是蓝灰色的,不同色调的文本对界面有显著的影响。
如下图:

利用玄色和灰色,很糟糕吗?不是。
人们常说“玄色使统统很酷”,以是这取决于个人的感想熏染。
在利用颜色时,考虑到色调,就可以实现更好的比拟和折衷。

本钱管理APP的优化

改为绿色后,APP看起来好多了。
由于我们须要在这款App中表现出对付金钱和增长的强烈情绪欲望,而绿色描述了金钱和金融天下,男女都同时喜好绿色。

(译者注:在国外绿色代表股市上涨,以是对付他们来说,关于金钱的运用才用绿色会更加得当。
颜色的利用更贴合利用人群,对体验来说才会更好,颜色也就变得更加有依据。

以下是修正后的比拟:

在这里我相信有很多想要学习UI设计的朋友,我是一名从事了五年UI设计私人定制课程,今年年初我花了一个月整理了一份最适宜2019年学习的学习干货及教程,从最根本到,各种框架都有整理,送给每一位UI设计取的可以关注我并在后台私信我:学习,即可免费获取