色彩空间（三）：色彩管理
通过上一篇文章《色彩空间（二）：CIE 色度图与色彩空间》，相信大家已经明白了什么是色彩空间。本文将继续为大家讲解什么是色彩管理，以及基本的配置策略。
色彩管理
色彩管理即对色彩空间的管理和配置，针对不同的项目和呈现载体，采取不同的色彩空间。色彩管理已经是一款专业设计工具的必备功能，只有如此，我们才能在设计的过程中配置合适的色彩空间，从而更加准确地进行色彩的选择与表达，保证用户看到的和我们看到的色彩保持一致，同时减少饱和度过高、对比度过低等问题。
如何选择合适的色彩空间
默认配置
首先，建议设计软件使用 sRGB 作为色彩空间的默认配置，而不要采用未管理（ Sketch 中默认是未管理 Unmanaged color profil），团队协作的小伙伴，请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目，可以单独设置该项目文档的色彩空间为 Display P3 或者 Adobe RGB。
Web 端项目
如果你当前设计的项目是针对 Web 端的网站类项目（包括 H5 和 WebView），这说明你的项目是基于 HTML 与 CSS 的，而 CSS 是以 sRGB 作为色彩空间标准的。因此针对网页项目，使用 sRGB 作为文档的色彩空间更合适。举个例子：如果你使用 Display P3 的系统配置，通过对比能够明显看出，网页中 CSS 色值为 #FF0000 的纯红色元素，实际色彩是 #EA3323（参考 上一篇 文章内容）。
通过 CSS 色值定义的元素采用 sRGB 色彩空间，而网页中插入的图片依旧保持图本身的色彩空间，如果图片没有指明色彩空间，将采用 sRGB 色彩空间。
在 CSS Color Module Level 4 中将可能会支持更多的色彩空间，但目前似乎仍在草案状态。
IOS 端项目
大概从 iPhone 7 开始，苹果的旗舰手机以及 ipad 系列都采用了 Display P3 色域的显示屏，并且集成了完备的色彩管理能力。也就是说，如果你采用 P3 色彩空间来做 UI 设计，声明 App 为 P3 色域，iPhone 设备可以很好地展示你的色彩，如果你使用 sRGB 色彩空间来做设计，在 iPhone 中也能很好展示，因为 P3 色彩空间完全覆盖了 sRGB 色彩空间。因此，针对 IOS 端的项目，目前（2019年5月）使用 P3 色彩空间进行设计，一定程度上是 OK 的，它能更完美体现屏幕的特性，P3 相比于 sRGB 有更多的色彩选择，也能使得设计师的设计更加自由，作为 iPhone 生态开发者的一员，也能从侧面带动 P3 的推广。
但正如我们在交互和体验上需要考虑受众和用户群体，在色彩空间的选择上，也需要适当考虑，如果 App 的受众年龄层次偏高，或者各个年龄层的人都比较广泛，不确定性比较强的话，使用 sRGB 目前来说或许是更好的选择，因为对于手机更新频率较低的中老年人，他们可能还在使用 iPhone 7 之前的机型或者低配版 iphone 机型。
有能力和资源的小伙伴可以通过调研数据进行决策，或者使用 P3 的时候也通过 xcode 生成一套对应的 sRGB 素材，但这样会增加 App 包的大小，不过在即将到来的 5G 时代，这个应该已经完全不是问题了。
Android 端项目
安卓平台的情况比较复杂。安卓平台百家争鸣，前两年竞争中最明显的就是比配置，处理器、内存和屏幕是各家的必争之地，几乎各大厂商都“当仁不让”地给自己的旗舰机搭载了广色域屏幕，有的以 Adobe RGB 为标准，而有的以 PCI P3 为标准。但关键问题在于，很多厂商为手机搭载更好的屏幕的时候却并没有做好色彩管理，也就是说手机系统并不能自动识别和匹配 APP 和图片的色域从而显示正确的色彩，最典型的问题就是：色彩饱和度过高，尤其是红绿黄的色彩部分。另外，安卓用户市场除了旗舰机之外，价格更加亲民的低端机以及比较老的机型也大量流动于市场，屏幕的色域情况就比较复杂。
因此，我个人建议小伙伴们在做设计的时候，针对安卓机型，可以使用 sRGB 作为色彩空间配置，它毕竟是目前的 “标准” 色彩空间，大部分手机仍然以 sRGB 作为色彩空间标准。
Mac 端项目
MacBook Pro 以及 iMac 都已经采用 P3 色域作为色彩标准，但 MacBook 和 MacBook Air 系列仍然以 sRGB 作为色彩标准，比较老的 iMac 机型（2014 以前）也采用的是 sRGB，而且 Mac 用户的电脑换代频率并不像手机那样频繁，也就是说目前 P3 还并不是 Mac 平台的标准，使用 P3 色域进行设计的话，在很多 Mac 用户的显示器上并不能完美呈现。
因此建议使用 sRGB 作为 Mac APP 设计的色彩空间配置。有需要的朋友也可以使用 P3 来做，Mac OSX 系统有比较完备的色彩管理能力，因此即使使用 P3 作为色彩空间，也能良好展示，但可能会和你设计的色彩有所差异，比如色彩偏淡，因此也建议同时 xcode 生成 sRGB 的素材。
所以 MacBook 和 MacBook Air 不是很适合用来做设计，建议想买这两款设备的设计师小伙伴再攒攒钱努努力改成 pro 版本。
Windows 端项目
Windows 端的复杂度比安卓简单很多，基本上电脑显示器的 P3 色域覆盖率还很低，除了一些专业的摄影师、设计师等会专门挑选 P3 色域的显示器，大部分用户使用的显示器都还是以 sRGB 为标准的，甚至不少显示器的色域覆盖度都还达不到 sRGB 的 90%。因此 Windows 应用建议以 sRGB 色彩空间作为色彩配置。
小程序
小程序的情况我目前还不确定，先占个位。不过小程序采用的其实也是 WebView 或者 Mobile Chrome 内核进行渲染，所以小程序很可能也是 sRGB 色彩空间，或者没有色彩空间管理，依赖于手机平台和系统。如果是这样的话，使用 sRGB 是最为保险的方案。
跨平台项目
如果你是一套 UI 应用于多个平台，那么建议采用 sRGB 作为色彩空间配置，这样可以尽可能保持多个平台的色彩统一性。
系统色彩空间配置
显示器默认色彩配置
以 Mac 平台为例，我们可以在 系统设置(System Preference) → 显示(Displays) → 色彩(Color) 中进行色彩空间配置的切换。但我建议大家保持默认的即可，比如 MacBook 的 “Color LCD” 或者 iMac 的 “iMac”，如果有外接显示器，也建议使用外接的默认选项，默认选项一般可以发挥出该显示器的最大色彩性能。
切换系统的色彩配置实际上并不会真正改变显示器的色域情况，它只是系统模拟色彩空间的一种方式，比如：如果你的 iMac 在 iMac 或者 Display P3 模式下，原本可以看到 本图 中的三个表情图标，切换到 sRGB 后将只能看到 2 个。设计软件的工作区默认会模拟我们配置的色彩空间的显示效果，而不影响显示器在全局的显示效果，因此，一般情况我们不需要切换。
我在 ColorSync Utility 中对比查看了一下 iMac 色彩配置文件和 Display P3 色彩配置文件的区别，发现两者的色彩空间非常接近，但 iMac 整体会稍微大一点，而在部分红色区域，稍微比 Display P3 小一点点，但基本上可以看出，默认的 iMac 色彩配置文件是以 Display P3 为基准的，而 iMac 更能发挥显示器的全部色彩特性。
关闭护眼模式
iMac 的 Night Shift 护眼模式虽然能有效减少屏幕光线对眼镜的刺激，但是会导致屏幕色彩偏黄，所以建议在做设计的时候暂时关闭 Night Shift 从而可以更精准把控色彩，也建议看电影的时候关闭该功能，这样能感受电影原汁原味的色彩，通常比较优秀的电影团队都会有专门的校色师来针对不同的显示设备进行校色。
Sketch 的色彩空间配置
默认色彩配置
Sketch 允许在偏好设置中为 Sketch 指定默认的色彩空间配置，如此一来每次新建设计文档将会默认采用我们的设置作为默认的色彩空间，不用每次新建文档都单独设置一次，默认是 未管理（Unmanaged），建议设置为 sRGB。
设置方法：Sketch → 偏好设置(Preferences) → 通用(General) → 颜色描述文件(Color Profile)，修改下拉框选择器的内容为 sRGB IEC61996-2.1。
更改已有文档色彩配置
Sketch 还可以轻松更改已有文档的色彩配置，设置方法：文件(File) → 更改颜色描述文件(Change Color Profile) 就可以在弹出的对话窗里对文件进行色彩空间的更改了。
Sketch 提供了两种更改方式：分配(Assign) 和 转换(Convert)，不同的方式适合不同的场景。
分配还是转换？
分配(Assign) 会保持原有的色值，但是却会导致色彩发生改变，比如从 sRGB 转为 P3，#FF0000 转换完成后依旧是 #FF0000，而视觉感受上却比之前更红更加鲜艳。这种方式一般比较适合开发类 UI 项目以及团队协作项目，我们需要保持色值在团队中的一致性。
如果你的显示器本身并不支持 P3 色域，那么转换之后，可能也看不出明显变化。
转换(Convert) 会尽可能保持原有的色彩（转换时颜色的变化幅度很小），但色值会发生改变。比如从 sRGB 转为 P3，#FF0000 转换完成后是 #EA3323，因为在 P3 中，#EA3323 更接近于 sRGB 中的 #FF0000。这种方式一般用于图片类的项目，色值不那么重要的情况，比如一个 Sketch 绘制的插画。
注意：从 P3 转化为 sRGB 是不可逆的，即使从 sRGB 转回 P3，新得到的 P3 文件的色值也不再是初始文件的色值，我想聪明的读者小伙伴通过前面的文章应该知道为什么会这样。所以，在转换之前， 建议备份。
保存为 Web？
值得一提的是，Sketch 在导出图片为位图的时候还有一个 Save for Web 的选项。软件中对此的描述是In order to decrease file size, color profile and EXIF metadata will be discarded，但实际上这个描述是不准确或者说有误的，经过测试，不论是否勾选，导出的图片都不会保留 EXIF 信息，而且对导出图片的内存占用大小改变并不大（和 PS 的“保存为Web所用格式”不同）。我分别对比了 sRGB、RGB Save for Web、P3、P3 Save for Web 四个文件，我们可以简单理解为，当勾选 Save for Web 的时候，将不会携带色彩空间配置信息（实际情况要复杂一点）。浏览器以及一些其他常见平台，会默认以 sRGB 对待不含色彩空间信息的图片。对于一个 P3 图片来说，携带空间色彩信息是很重要的，它可以在支持 P3 色彩管理的平台获得更好的色彩表现。
因此，建议不论是基于 sRGB 还是基于 P3 色彩空间的图片，在导出的时候都不建议勾选 Save for Web 选项。
Photoshop 的色彩空间配置
默认色彩配置
Photoshop 提供的色彩空间方案要远比 Sketch 的丰富，但对于从事 UI 设计的同学，我同样建议将默认的色彩空间配置设置为 sRGB。设置方法：编辑 → 颜色设置 打开颜色设置的对话窗，在对话窗中，将 “工作空间” 的 RGB 色彩描述设置为“sRGB IEC61966-2.1”，然后将 “色彩管理方案” 的 RGB 选项设置为 “保留嵌入的配置文件”，同时也建议禁用 “用灰度系数混合文本颜色”（原因）。
更改已有文档色彩配置
在 Photoshop 中更改现有文件的色彩空间配置也很简单便捷，具体是采用分配的方式还是转化的方式，其原则和 Sketch 的类似，这里就不再赘述了。
分配(Assign)：编辑 → 指定配置文件 ，在弹出的对话窗中选择新的色彩配置，可以选择当前工作中的色彩配置，也可以重新指定配置文件；
转换(Convert)：编辑 → 转换为配置文件，在弹出的对话窗中选择目标空间即可，其他选项可以保留默认（具体其他选项有什么用我也没有深入研究）。
图片导出
在导出图片的时候，建议使用 文件 → 导出 目录下的 导出为… 或者 存储为 Web 所用格式（旧版）… 的方式进行图片导出，而不要直接另存为 PNG 或者 JPG，导出功能相比另存为功能，可以去除很多无用的配置信息，对图片起到压缩效果。
“存储为 Web 所用格式” 之所以在后来的 PS 版本后面增加了一个 “（旧版）”，是因为 PS 团队新出了 “导出为…” 功能，并且采用了新的压缩算法，用于代替 “存储为 Web 所用格式” ，但目前 “导出为…” 的高级功能并不完善，所以 PS 团队并没有直接删除 “存储为 Web 所用格式” 这个功能，只是在后面添加了一个“（旧版）”标记，引导用户更多去使用 “导出为…” 功能。
当使用 存储为 Web 所用格式（旧版）… 或者 导出为… 功能导出图片的时候，建议勾选 “嵌入颜色配置文件”，并取消勾选 “转换为 sRGB”，除非你理解这背后的结果并有意为之。
其他色彩配置
另外还有其他的设计软件，由于我不常用，也不太熟悉，这里就不展开细说了，原理都和 Sketch 与 PS 类似。
这里重点说一下取色器软件，专业的取色器软件也需要色彩管理，比如注明的取色工具 “SIP” 就包含色彩管理能力，这里注意和当前工作文档中的色彩空间保持一致就可以了，不然会导致屏幕取色的色值和实际使用色值之间有轻微偏差，导致设计稿中引入不必要的新的色值，这对采用 Design System 的团队协作很不友好。
到这里，关于色彩管理的三篇内容就全部讲完了，希望小伙伴们能够有所收获。
如果你觉得我写的内容云里雾里的不知所云，就直接用 sRGB 作为默认色彩空间配置吧，简单点。
本篇参考资料：
《iPhone 7 的照片是以 Display P3 为色彩空间描述的，这意味着什么？》
后记：
三篇文章全部写下来着实耗费了不少时间，抱歉内容确实有点多，但其实这已经是我精简的结果。写这类文章的乐趣在于，书写过程中，通过不断查阅资料，可以像树根分叉一样不断深挖，了解了很多深度知识，过去模糊的概念也变得更加清晰，一些不明白的原理也会豁然开朗。果然学透知识点的最好方式就是去试图把它讲出来。
如果文中有不严谨或者错误的知识点，欢迎小伙伴们指出帮我改进，一起成长。
感兴趣的小伙伴还可以加我微信，咱们可以在群里进行一些日常学术交流（闲聊扯淡）😜。