Display P3 和 sRGB 弄不明白?
相信很多同学在用sketch或者figma做设计的时候会对颜色配置的含义以及如何设置颜色配置有疑问。
今天像素妹儿为大家分享一下这里的知识。
色彩空间
这里我们要先明确一个概念,就是我们在软件中看到的“颜色配置”也叫做“色彩空间”。
色彩空间是用数字化的方法对特定的颜色进行分类。这个解释显然不怎么好理解,我们可以大致理解为色彩空间是指显示设备能表现的各种色彩数量的集合。色彩空间越广阔能显示的色彩种类就越多。
另外我们还有一个重要的知识点大家要理解。色彩空间是通过显示设备来体现的,不同的显示器就会根据厂家对其不同的调教显示出不同的效果。常见的场景就是设计稿中同一色值的颜色在Mac的屏幕上和在其他显示屏幕上看起来不一样。
我们所说的sRGB 和 Display P3就是两种比较常见的色彩空间。
sRGB 和 Display P3
接着我们对sRGB 和 Display P3进行一个简单的了解。
sRGB:是惠普与微软于1996年一起开发的用于显示器、打印机以及因特网的一种标准RGB色彩空间。
DCI- P3:美国电影行业推出的一种广色域标准,是目前数位电影回放设备的色彩标准之一。
从二者在维基百科上的介绍上我们可以看出,sRGB拥有比较“悠久”的历史,而且是支持各种设备的一种色彩空间。而 P3是因为技术革新才出现的。
那么两者还有其他啥区别呢
下图是在色度图上用三角形划出色彩空间所包含的色彩。我们明显就能看出二者在包含色彩范围上的差别。

Display P3比sRGB范围更大,也就是说Display P3相比sRGB能显示更广泛的颜色。
不同选择带来的差异
上面我们了解到 sRGB 和 Display P3的不同之处,在实际工作中不同的选择会带来哪些影响呢。
我们对比一下同一个红色(#BB2715)分别在选择了sRGB 和 Display P3作为色彩空间的文件中的显示效果。
如下图所示(妹儿采用的设备是Macbook Pro,软件是sketch):

可以看出虽然色值一样,但是选择了 Display P3 的文件中的红色显示效果会比选择了sRGB的文件的中的红色看起来要亮一些。
如此明显的显示差异就给我们这些精(qiang)益(po)求(zheng)精的设计师带来了困扰。那我们应该如何在二者后者能够做出选择呢。
如何选择
首先给出建议:使用sRGB来制作你的设计稿。
原因有以下几点:
1、为了产品更高的还原度
从之前我们从两个色彩空间的介绍中可以看出,sRGB拥有更久的历史,也是很多显示设备的默认的色彩空间。我们设计师制作的产品最终是要在设备上显示,但并不是所有设备都支持Display P3。如果选用了Display P3,那在不支持Display P3的屏幕上你的产品显示效果就会和设计稿上的效果相差比较大。所以采用sRGB是更好的选择。
2、团队协作兼容性高
如果团队中不是所有设计师都使用的支持Display P3的屏幕,那么同一设计稿在不同设计师的设备上显示的效果是不一样的,这会给你的团队带来很多不必要的麻烦。
3、较低的性能消耗
sRGB比Display P3的颜色范围要小,所以在制作设计稿时会消耗更少的性能。
当然啦,如果团队所有成员使用的都是支持Display P3的屏幕,那么采用Display P3也是没有问题的。
如何转换
Figma
切换路径为 Figma — colour space 。切换之后,客户端会重启,重启之后颜色配置就已经做了修改。
Sketch
我们可以使用sketch中的快捷键 cmd(⌘)+ shift + k 来调出编辑颜色配置。如下图:

在更改时我们可以看到sketch为我们提供了两种更改的模式。
1、分配

分配之后,文件的色彩空间变了,但是文件中颜色的色值不会发生变化。文件整体的视觉效果也会有比较明显的变化。
2、转化

转化之后,文件的色彩会改边,并且文件中颜色的色值也会发生改变。文件整体的视觉效果会尽量保持不变。
这里还需要提醒大家一下,在sketch首选项中的“颜色配置”选项并不会影响正在编辑的文件的颜色配置。这里的颜色配置的设置只会对新建文件产生作用。

关于Display P3 和 sRGB今天就讲到这里,同学们也可以在b站看到本期内容的视频,https://www.bilibili.com/video/BV1wz4y1r7xN
我们下期再见啦~












































































