设计师必要看的色彩与应用指南【一】

发布网友 发布时间：2023-07-09 06:17

我来回答

共1个回答

热心网友 时间：2024-11-16 16:23

色彩是影响用户最简单和最重要的一个因素.研究表明,人们只需90秒就能对一种产品做出下意识的判断,而其中高达60%以上的判断仅基于颜色.因此,选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的.在没有文字的场景中,颜色的搭配非常重要.如何配色可以使设计感更强的3种同色系绿色,他们的色相（H152）都一致,仅在纯度和明度上有所变化.

当色相和纯度都为0时,色彩称为中性色,也称为灰度色,即黑白灰.其中,灰不是单指某一种颜色,而是一系列从黑到白的过度色.

灰度色多用于文字,通常一个应用中的文字不应超过3种灰度色.深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字.

此外,灰度色由于没有任何色相,始终沉着冷静,减少对内容的视觉干扰,因此常用于界面背景色,例如MOO音乐的界面设计.

Hsl

HSL色彩模式是工业界的另一种颜色标准,是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的.在原理和表现上,HSL和HSB中的H（色相）完全一致,但二者的S（饱和度）不一样,L和B（明度）也不一样.

取一个颜色试试看,先选一个颜色#0688F9,放入“HSLColorPicker”,显示HSL数值为：H(208),S(95),L(50),但是我们放在Sketch里面看一下,显示的HSB数值为,H(208),S(98),B(98).

HSL的L指的是色彩的亮度,作用是控制色彩的明暗变化.它同样使用了0%至100%的取值范围.数值越小,色彩越暗,越接近于黑色；数值越大,色彩越亮,越接近于白色.

HSL相比RGB的优势

我们来做一个基于HSL的调色实践.你可不可以快速说出“海棠红”所对应的RGB色值？如果再加一点橙色进去,把亮度提高一点,色值又是多少？想想那应该是一个介于洋红和红色之间的,*娇艳的颜色.我们可以假定它在色相环H上的角度是330°左右,饱和度较高,亮度适中,看看那是什么颜色？

em...我们想要的颜色应该再接近红色一点,让我们把色相（H）+20°到350°,现在好多了.

通过改变色相值H,我们实现了色相从洋红向海棠红的偏移.大感觉接近了,但还是略微有点灰暗,我们可以通过增加饱和度（S）+15%,让这个颜色变得更鲜活,看起来更亮丽.

感觉还是差点,海棠红是属于少女的颜色,应当再嫩一点、通透一点,不会这么强烈.那可以通过增加亮度L,+10%试试看,嗯,这才是我们想要的颜色.

同理,如果想加点橙色进去,再亮一点,我们通过心算就大致可以确定色相环的相位和亮度值.在这里,我们需要让H增加20°,L增加5%.

在使用HSL调色的过程中,不需要了解复杂的色光混合原理,这是一个自然的、感性的、易于理解的过程.相比之下,RGB调色方式显得非常笨拙复杂、难以理解,而HSL是多么的友好.