如何避免色域误差？UI设计师必要学的色域概念和色彩配置技巧

Sponsor

作为设计师，我们每天都在与色彩打交道，但是你是否真正了解色域的概念以及它对设计方案显示效果的影响？在我们的日常工作中，可能会遇到这样的问题：在设计软件中不知道选择哪种颜色配置，或者忽视相关配置；不明白为什么效果图在不同设备上显示的颜色不同；设计稿和实际开发上线的界面存在色差。这些问题的根源在于我们对色域的理解不够深入。因此，本文的目的是帮助设计师朋友们更好地理解色域的概念，明确效果图在不同场景中显示色彩存在差异的原因，从而使效果图的展示和上线之后的效果更符合我们的预期。

在工作中可能遇到以下问题：

• 不确定在设计软件中选择哪一种颜色配置，或干脆忽略掉相关配置；
• 不知道为什么效果图在不同设备上显示颜色不同；
• 设计稿和实际开发上线的界面存在色差。

写这篇文章的目的，就是为了让设计师朋友们了解色域的概念，明确产出的效果图在不同场景中显示色彩存在差异的原因，从而使效果图的展示和上线之后效果符合自己的预期。

1. 色域是什么？

首先，让我们来了解一下色域的概念：

色域是一种对颜色进行编码的方法，也指一个技术系统能够产生的颜色的总和。

由于技术限制，目前显示设备无法完全覆盖人眼所能观察到的可见光范围，为了表明不同设备所能呈现的色彩范围，就有了各种色域标准， 比如：AdobeRGB、sRGB、Display P3等的都是不同的色域标准。

其中，设计师萌在做UI设计时最常接触的是sRGB和P3色域：

sRGB是由微软在1997年主导的标准，由于Windows具有强大的用户基础，所以从PC、Mac再到相机、扫描仪、打印机、投影仪等都支持sRGB, 它大约能覆盖35％的CIE。

P3色域广义上包含了DCI-P3和Display P3, 前者是影视行业的标准；Display P3是Apple在DCI-P3基础上参考了sRGB 而修订出的自己的标准，相比于sRGB，除蓝色以外都有较大提升。

色域的标准被应用于

显示设备、软件的颜色配置和图片的颜色描述

三个方面，影响着图片呈现到人眼的颜色效果。

2. 显示设备色域

显示设备色域可以理解为一个设备所能支持的色彩显示范围，购买手机、显示器等设备时，在产品参数的描述中都可以看到关于设备色域的信息。

以下是目前移动设备和桌面设备的色域标准：

3. 设计软件的颜色配置

前面提到的设备色域决定了颜色显示范围的上限，而设计软件中的颜色配置，则决定了在设计过程中，效果图以及导出图片的颜色将以何种色域标准显示。

比如在Sketch中，颜色配置存在

非托管、sRGB和Display P3

三个选项。后面将会说到不同的颜色配置分别会有什么样的效果显示以及导出的图片会存在何种差异。

4. 图片的颜色描述文件

一般来说，我们在生产每一张图片的时候，都会给它指定一个色彩描述文件。色彩描述文件的作用是告诉系统，它是以什么色域标准进行显示的。

💡小知识：我们都知道，从设计软件中导出图片时选择“存储为Web所用格式”文件大小会缩减，缩减的原因就是存储为Web所用格式会丢弃颜色描述文件和EXIF元数据。

接下来，我们看一下色域对显示效果的具体影响。

5. 设备色域对显示效果的影响

Mac显示屏

Mac显示屏的色域为P3，具有较为宽阔的颜色覆盖范围，可以向下兼容sRGB，所以无论图片颜色描述是srgb还是display P3，都可以按照其颜色描述正确显示。

sRGB色域显示设备

在相对低端的sRGB色域显示设备上，颜色描述为sRGB的图片可以正常显示，而颜色描述为Display P3的图片，由于设备色域的颜色覆盖范围小于图片颜色描述文件，部分颜色无法正确显示。

具备广色域的Android手机、显示器

在目前流行的广色域Android手机和显示器上，无论图片的颜色描述是什么，在显示时颜色都会存在偏差，看起来会更加艳丽。

为什么会出现这种情况呢？这里引用一篇网上的文章，来解释原因：

“使用广色域的新款Android、显示器上的颜色看起来艳丽，实际上是快速发展的硬件装配和落后的色彩管理系统之间的矛盾。色域映射没有做好，色准出现问题，无法正确解读色彩。”

△图片来源于：
https://www.163.com/news/article/FSM4081K00019HUL.html

6. 软件颜色配置对颜色的影响

当我们在设计软件中直接生产图片时，图片会按照当前软件的颜色配置显示，但是有时我们需要将外部图片导入到设计软件中，这可能导致图片发生一些颜色上的变化。

这里依然以Sketch为例，分别来说一下Sketch中不同颜色配置下导入图片的颜色显示情况和再次导出图片的颜色描述变化。

颜色配置为sRGB

当Sketch的颜色配置为sRGB时，无论导入图片的颜色描述文件是sRGB还是P3，都会按照sRGB去显示，也就是说带有P3颜色描述文件的图片在软件中颜色会发生改变，并且，再次导出时，带有的颜色描述文件也会变为sRGB。

颜色配置为Display P3

当Sketch的颜色配置为Display P3时，导入图片可按照其自带的颜色描述文件显示，但是导出图片的颜色描述文件会统一为Display P3。

颜色配置为非托管

非托管是Sketch默认的颜色配置，在非托管配置下，编辑文件的速度会有所提升。此时在Sketch中文件按照显示设备的色域显示，如：在IMac上按照P3色域显示，但需要注意的是，

在非托管配置下，导出图片的色彩描述文件为sRGB，这就导致了软件中和导出后图片看起来颜色的不同。

在Sketch官方给出的说明中，建议Web和移动端设计师使用sRGB配置来进行设计，但同时也建议在做针对支持P3色域设备的设计时使用Display P3颜色配置。

在实际工作中通过与研发同学的沟通了解到：在设计方案开发落地时是以sRGB的标准进行开发的，所以个人建议，

在设计中可以将颜色设置为sRGB，避免设计效果与实际还原出现偏差。

此外，在sketch中，有时我们会见到这样的提示：

原因是我们打开的文件的颜色配置与当前Sketch的颜色配置设置不一致。

在Sketch 文件>更改颜色配置中可以对当前文件进行颜色配置的编辑，使之与当前的软件颜色配置相一致。在做UI设计时，推荐选择“分配”选项，来保证颜色色值的准确。

小结：

1. 色域是对一种颜色进行编码的方法，也指一个技术系统能够产生的颜色的总和；

2. 图片的显示颜色由显示设备色域、生产图片的设计软件色彩配置和图片的色彩描述文件决定，其中显示设备决定了图片显示效果的“上限”；

3. Android和非Mac桌面显示设备的由于色准问题，出现色差是不可避免的，且通常颜色相较于iPhone会过于艳丽；

4. 做UI设计的时候，颜色配置可以设置为sRGB，以便设计效果与实际还原一致。

本篇结束，又学到了，优秀！😁

参考文献：

百度百科-色域
https://baike.baidu.com/item/%E8%89%B2%E5%9F%9F/5857970?fr=ge_ala

为什么安卓手机的屏幕颜色，总是很艳？
https://www.163.com/news/article/FSM4081K00019HUL.html

Choosing between sRGB and Display P3
https://www.sketch.com/docs/designing/color-profiles/

作者：六边形Evan
来源：站酷(zcool.com.cn/u/19027776)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。