作为设计师，工作中一定都接触过色域。但兰亭妙微在团队交流中发现，很多人对色域的概念以及它对方案显示效果的影响不甚了解，导致工作中经常遇到这些问题：不确定设计软件中该选哪种颜色配置，干脆忽略；不知道为什么效果图在不同设备上显示颜色不同；设计稿和实际开发上线的界面存在色差。
本文的目的，就是帮设计师理解色域的概念，明确效果图在不同场景中显示色彩存在差异的原因，从而让效果图的展示和上线效果符合预期。
色域是一种对颜色进行编码的方法，也指一个技术系统能够产生的颜色的总和。
由于技术限制，目前显示设备无法完全覆盖人眼所能观察到的可见光范围。为了表明不同设备所能呈现的色彩范围，就有了各种色域标准，比如 AdobeRGB、sRGB、Display P3 等。UI 设计师最常接触的是 sRGB 和 P3 色域：
色域标准被应用于三个方面：显示设备、软件的颜色配置、图片的颜色描述，三者共同影响着图片呈现到人眼的颜色效果。
显示设备色域可以理解为一个设备所能支持的色彩显示范围。购买手机、显示器时，产品参数中都会标注设备色域信息。设备色域决定了颜色显示范围的 "上限"。
设备色域决定了显示范围的上限，而设计软件中的颜色配置，则决定了设计过程中效果图及导出图片将以何种色域标准显示。以 Sketch 为例，颜色配置存在三个选项：非托管、sRGB、Display P3。
一般来说，生产每张图片时都会给它指定一个色彩描述文件，作用是告诉系统它是以什么色域标准进行显示的。
一个小知识：从设计软件中导出图片时选择 "存储为 Web 所用格式"，文件大小会缩减 —— 原因就是这种导出方式会丢弃颜色描述文件和 EXIF 元数据。
Mac 显示屏：色域为 P3，具有较宽的颜色覆盖范围，可以向下兼容 sRGB。因此无论图片颜色描述是 sRGB 还是 Display P3，都能按照其颜色描述正确显示。
sRGB 色域显示设备：在相对低端的 sRGB 设备上，颜色描述为 sRGB 的图片可以正常显示；而颜色描述为 Display P3 的图片，由于设备色域覆盖范围小于图片描述文件，部分颜色无法正确显示。
具备广色域的 Android 手机、显示器：在目前流行的广色域 Android 手机和显示器上，无论图片颜色描述是什么，显示时颜色都会存在偏差，看起来更加艳丽。原因是快速发展的硬件装配与落后的色彩管理系统之间存在矛盾 —— 色域映射没有做好，色准出现问题，无法正确解读色彩。
当我们在设计软件中直接生产图片时，图片会按照当前软件的颜色配置显示。但如果需要将外部图片导入设计软件，可能导致颜色发生变化。仍以 Sketch 为例：
颜色配置为 sRGB 时：无论导入图片的颜色描述是 sRGB 还是 P3，都会按照 sRGB 显示。也就是说，带有 P3 颜色描述的图片在软件中颜色会发生改变，再次导出时颜色描述文件也会变为 sRGB。
颜色配置为 Display P3 时：导入图片可按照其自带的颜色描述文件显示，但导出图片的颜色描述文件会统一为 Display P3。
颜色配置为非托管时：这是 Sketch 默认的颜色配置，编辑文件速度会有所提升。此时文件按照显示设备的色域显示（如在 iMac 上按 P3 显示），但需要注意 —— 非托管配置下导出图片的色彩描述文件为 sRGB，这就导致了软件中和导出后图片看起来颜色不同。
Sketch 官方建议 Web 和移动端设计师使用 sRGB 配置进行设计，同时建议在做针对支持 P3 色域设备的设计时使用 Display P3 配置。在实际工作中，通过与研发同学沟通了解到：设计方案开发落地时是以 sRGB 的标准进行的。因此兰亭妙微的建议是：在设计中将颜色设置为 sRGB，避免设计效果与实际还原出现偏差。
此外，在 Sketch 中有时会见到颜色配置不一致的提示，这是因为打开的文件颜色配置与当前软件设置不一致。在 "文件 > 更改颜色配置" 中可以编辑当前文件的颜色配置，使之与软件一致。做 UI 设计时，推荐选择 "分配" 选项，来保证颜色色值的准确。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。