在B端产品设计的世界里色彩不仅仅是视觉元素它还承载着信息传递、用户体验和品牌识别的重要角色。兰亭妙微UI设计公司深入探讨了色彩空间理论在B端设计中的应用从基础的色彩空间概念到如何在实际工作中运用这些理论为设计师提供了一套科学的颜色搭配和管理方法。对于 B 端产品而言我们经常会和颜色进行斗争。比如在工作当中开发没有正确还原颜色、不知道如何进行色彩配置、以及对于 B 端产品而言究竟应该如何协调科学的进行颜色的搭配最近会讲颜色的部分整体会分为四篇文章B 端设计如何理解色彩空间、B 端产品怎样合理搭配颜色、B 端项目的视觉风格、B 端项目颜色的实战技巧。本篇文章是第一篇我们先来聊聊产品配色的基础 色彩空间与颜色管理。不知道各位同学是否遇到这种情况当你在调整颜色时就是在漫无目的的在拾色器上来回游走在被问到为什么要选择这个颜色时也茫然无措这时候的你作何感想所以颜色还原需要熟练的掌握色彩空间并配合屏幕进行颜色管理才能够让设计顺利落地。但颜色其实过于抽象因此我们将整体内容进行简化多和大家聊聊在理论背后究竟应该如何与工作内容进行结合。首先我们先说说色彩空间。一、什么是色彩空间色彩空间又叫色彩模型它是为了让系统能够准确地描述颜色、使用颜色进而定义出来的一种颜色组织方式。比如有一排随机颜色要按特定规则排列你会怎么做我相信我们首先想到的便是按照不同的色相进行归类。如果颜色变为10000个又该怎么排列呢因此为了让企业更好地使用颜色、设计师更便利地选择一致的颜色行业中便提出了色彩空间的概念。色彩空间其实很简单。因为我们需要使用颜色且不同人群对颜色的需求不同所以颜色的排列方式会存在差异。比如行业中较为出名的潘通色彩体系其实是基于印刷行业制定的一种特殊色彩空间CMYK是为印刷从业者提供的、便于他们更好地进行物料印刷的色彩空间Lab是一种更强调色彩亮度的色彩空间。因此行业会根据颜色的不同规律和自身使用需求总结整理出不同的色彩空间。我们目前在工作当中主要都是聚焦于屏幕当中因此影响颜色呈现的也就变为设计软件当中的色彩空间以 RGB、HSB、HCT 为主主要是计算机识别颜色颜色调整颜色的重要方式在电脑软件当中起到重要作用。屏幕显示当中的色彩空间以 Adobe RGB、Display P3、sRGB 为主主要是能准确展示屏幕当中的各种颜色。在我们细致讲解色彩空间的部分时我们先来了解三个重要的概念。亮度是光作用于人眼所引起的明亮程度的感觉它与被观察物体的发光强度有关主要表现光的强与弱。色相是当人眼看一种或多种波长的光时所产生的色彩感觉它反映颜色的种类是决定颜色的基本特征。饱和度是指颜色的纯度即该掺入白光的程度表示颜色深浅的程度。例如蓝色 白色 天蓝色也就是饱和度下降二、色彩空间的类型1. RGB 色彩空间RGB是显示器当中的颜色基础。比如在现实世界当中我们将手机屏幕进行放大你会发现屏幕都是由红绿蓝三个灯管所组成的。而 RGB 的色彩模式就是模拟现实世界当中的屏幕显示原理将灯光照射的逻辑在设计软件当中进行复现因此在 RGB 的调色盘中就会分别包含三个输入框这便是 红绿蓝。其中数字 0 代表不发光、255 则是最亮的灯光。那为什么最亮是 255不是 250或者是 280 呢原因在于RGB 所有的颜色最后都需要通过计算机进行运算显示对于它说并不认识 红色、蓝色在它的脑袋里不对CPU 里面就只有 0 与 1因此在计算机存储的时候一个字节也就是 8 个比特、也就是 2 的八次方、也就是 256这样 一个色彩信息等于一个字节数据存储就会更加高效。所以我们所聊的颜色更多指的是代码层面的颜色设定。接着我们打开 Figma看到另一种格式 Hex那我们称之为是 RGB 模式的精简版。因为它嫌弃每个输入框都会出现 255255,255,255 白色实在太长不利于我们在日常工作当中进行记录。因此将每个颜色三位数值缩减为两位数值十进制变为十六进制就是增加英文字符的数据就能较短的表达颜色使得颜色表达更为高效。因为 Hex 只是 RGB 的精简版本所以 Hex 里面每两个字符所对应的就是 红、绿、蓝。比如我们刚才提到的这个蓝色在 RGB 空间当中为(0,86,255) Hex 则是#0056FF也是一一对应关系。RGB 听上去似乎很美好但问题在于两点1.颜色的调整不够直观作为设计师我们很难模拟灯光的照射思维对颜色进行调整具体应该增加多少颜色其实是不够清楚的。我们更熟悉的其实是亮度、色相、饱和度因此在调色时会十分困难。比如我目前是红色那我要调整到紫色应该输入多少值呢其实我们很难进行一个准确的判断。2.颜色信息与亮度信息的数据混合导致我们很难对于有一个准确的判断比如在 RGB 相同的数值当中明显会感受到 黄绿色 与其他颜色的亮度存在较大差异这样在调色时颜色一致性偏差较大。为了解决这些问题就提出一种新的色彩模型HSB2. HSB 色彩空间HSB 也叫 HSV就是通过颜色的 色相、饱和度、亮度 来进行表示。在色相当中由于颜色的呈现是色环的方式因此在数值上是以 0-360 度来进行表示的在设计软件里面我们也只能输入所对应的数值。同时饱和度与亮度都是以百分比的形式进行呈现饱和度越低相对应就会给颜色增加白色使其更灰亮度越低就会增加对应的黑色让其更深。由于 HSB 的色彩空间的分类模式非常有利于我们进行颜色的调整因此我们在日常调色时其实会经常用到。比如日常工作当中假设我们需要设计一组图标根据 HSB 颜色的基本原理我们其实只需要调整不同的色相就能够得到不同的图标颜色。但… 颜色上依旧会存在问题。你会发现当我们调整了色相过后整体的颜色并没有形成统一。原因在于我们人眼对于 黄绿色的感知 会和红色、蓝色有所不同我们通常在看黄绿色时会更为刺眼因此在设计层面上需要单独调整。所以在 HSB 当中的颜色逻辑上也并没有解决颜色一致性的问题。于是在 2021 年 Google 提出一种全新的色彩模式HCT。3. HCT 色彩空间HCT 首先会将颜色当中的 感知度、亮度 进行结合对之前的 HSB 重新调整。在颜色层面上主要分为Hue色相、Chroma色度、Tone色调色相与色度和之前基本类似但色调上优化了黄绿色凸显问题让人眼的感知度也加入到了色彩空间当中使其颜色更为准确。同时色彩空间的呈现优化了颜色渐变的流畅性我们会发现整体的渐变感觉会更为自然。那为什么 Google 想要做 HCT其实因为 Material Design 当中会强调设计的一致性和灵活性在功能设计上需要增加一个根据屏幕当中的图标生成与其风格一致的壁纸。但在之前无论什么样的色彩空间都不能准确的还原颜色。现在就提供了一个可靠的色彩基础能够让我们在不同的设备、平台和应用场景下都能够生成具有一致性的色彩方案同时也能更好地适应各种主题和风格的变化如亮色模式和暗色模式的切换。比如还是以上面这个案例我们使用 HSB 与 HCT 对颜色进行的色相的调整那得到的结果明显会发现 HCT 会更加准确。那 HCT 就真那么完美无瑕其实也不然因为 HCT 色彩空间出现时间较晚所以在使用上也会有很多问题。设备兼容性差很多设计软件目前对 HCT 基础没有适配所以即使使用很多老旧设备也并不能支持。计算复杂度高HCT 的色彩空间涉及到更为复杂的计算算法因此它对于系统的资源要求更高。认知成本较大对于新的事物往往在行业中的普及会相对较慢因此还需要长时间的普及才行。三、色彩空间如何应用这么深奥的色彩空间到底要如何使用1. 以 HSB 的为主因为 HSB 是设计师最容易理解的色彩空间因此我们在调色时需要根据数值来进行颜色的调教。比如说你的颜色很脏不够干净。其实就是在强调 HSB 当中使用了更多的黑色我们便可以调整到这个色彩空间当中去增加 B 的值也就是第三个输入框比如说你的字体很灰不够明确。其实就是在说 你的亮度太高需要减少亮度也就是 H 的值也就是第一个输入框2. 色彩更具数据化因为每一个屏幕所显示的颜色其实都不太相同因此色彩调整时要多看数据观察数据之间的对比变化。比如以 B 端产品的中性色为例现在系统当中所使用的正文颜色为 #333333看到过后就明确知道颜色深度不够、颜色也不透气。我们就会按照先确定颜色色相为灰色偏蓝色因此在色相当中需要拖动色环找到合适的色相紧接着确定饱和度因为要偏蓝色但不宜过多因此整体的数值只会在 1-5 之前浮动最后确定深度之前颜色过于浅需要加深所以直接减少变为 22 左右的数值。3. HCT 辅助颜色判断其次在判断颜色时也会更具章法。在多辅助色的情况下我们可以使用 HCT 对颜色进行判断。对于日常工作来说我们可以使用 Figma 当中的 color Space 插件 进行日常的色彩管理。在今后遇到类似同类型图标时我们可以使用 HCT 的方式快速生成发散色板帮助我们进行色彩搭配。4. 引入 HCT 完善工作流最后在 B 端系统当中会存在较多颜色搭配的场景。像是图表设计、自定义系统主题原来只能通过系统预设固定颜色的方式进行解决而现在 Google 也将这套计算公式开源也就是说程序员可以直接引用 HCT 的色彩空间将颜色配置的权限给到用户通过颜色的调整呈现用户想要的颜色内容。四、屏幕显示的色彩空间对于屏幕显示的色彩空间而言有部分内容我们也是要重点关注。比如在 B 端设计当中色彩还原老是出问题那我们就可以通过屏幕的色彩空间进行判断。1. sRGB 色彩空间sRGBstandard Red Green Blue是由惠普公司和微软公司共同开发的一种标准色彩空间目的是提供一种通用的色彩标准使得在不同的设备如显示器、打印机等之间能够实现相对一致的色彩显示。对于 sRGB 来说它是我们作为设计师最为重要的屏幕显示色彩空间因为它通用性强所以大多数普通的电脑显示器、网页浏览器等都默认采用 sRGB 色彩空间这样在浏览网页、查看普通的数码照片时可以获得比较稳定的色彩效果。所以我们在做设计时通常都会将屏幕与软件都调整的 sRGB 的空间当中这样就能够最大限度保证色彩的一致。2. Display P3 色彩空间Display P3 是基于 DCI – P3 色彩空间衍生而来的主要用于消费级显示器设备。它在 DCI – P3 的基础上进行了一些调整以适应显示器的特性。整体而言 P3 色彩空间显示出来的颜色会更加 生动、艳丽但是这会和你的设备密切相关。目前行业中只在苹果设备以及部分高端显示器才会使用所以我们在设计时需要考虑自己产品的受众这一设备是否普遍使用。最后我们总结一下色彩空间就是我们使用颜色的一种方式在调色时我们会优先使用 HSB 的色彩空间HCT 是 Google 推出主要目的是 色彩视觉的统一在我们生成辅助色的时候有用屏幕当中我们的所有显示配置尽量调整为 sRGB这样更符合大多数用户的显示情况
