写点什么

当 UI 走查说页面色值错误时,先别急着检查代码

  • 2022 年 10 月 07 日
    广东
  • 本文字数:1305 字

    阅读完需:约 4 分钟

当UI走查说页面色值错误时,先别急着检查代码

颜色一直是 UI 设计师们非常敏感的问题,我至今仍忘不了那天,一位萌新设计师在走查 UI 时,给我提了好几个 Bug,大多是颜色有差异问题,我当时的第一反应是去检查代码,排查了半天确认自己没有写错色值后,我就在想会不会是取色的问题?于是我做了个试验,在网页上设置一个背景色,然后用 Chrome 自带的取色器吸了一下这个背景色,结果差点令我怀疑人生:



仔细看这个吸出来的color数值和上面设置的并不相同,为什么屏幕取色会有误差?我第一反应是找台别的电脑试试,于是我把这个网页保存后发给几个同事一通测试,最终在一台 Windows 电脑上发现取色正常,而 Mac 电脑全军覆没。


尽管事实似乎已经指向了一个罪魁祸首,可疑虑没有在我心中消除。难道是苹果电脑的屏幕色彩有问题?屏幕也能影响到程序的事件?


要搞懂这些问题,首先得清楚,为什么会有色差?

色彩差异的原因

导致在不同设备上产生色彩差异的原因大致有以下几个因素:


  1. 系统色彩管理导致颜色差异

  2. 软件色彩管理模式不同导致的颜色差异

  3. 显示设备品质差异导致的颜色差异


毫无疑问,第三点是最容易理解的,但它的影响只是人眼看到的感受不同,对于屏幕取色不会有影响,那是不是其它两个因素导致的色差问题呢?

系统色彩管理导致色差

颜色一般会在显示屏上表现为 RGB 色(也就是三原色红,绿和蓝)或者是 LSB/L(色相,饱和度和亮度)。


如果你把颜色从一种色彩空间转成另一个色彩空间,实际上,这个色彩空间会尽可能适配你要的颜色,让他们尽可能的在同一个位置(由于色彩空间的改变,其实转化后的颜色并不能完全一致)。也就是说这个 RGB 的数值会根据这个色彩空间的定义而做出改变,它并非是稳定的。



现在我们就明白了,应该是 Mac 的系统色彩管理模式有问题,打开 Mac 的屏幕设置,我们看到描述文件这里默认的并不是标准的 RGB 模式:



如果我们要想屏幕取色值和我们预期的一致,应该把描述文件改为 sRGB IEC61966-2.1


软件色彩模式导致的色差

Chrome 色彩配置

前面我们改变了系统的色彩配置,重启了谷歌浏览器取色就正常了:



这其实是因为谷歌浏览器默认的色彩配置是取用系统的配置,而软件也可以有自己的颜色配置,例如在谷歌浏览器中我们可以打开这个地址来修改颜色配置,这样就可以不用改动系统配置了:


chrome://flags/#force-color-profile


Sketch 色彩配置

Sketch 默认的色彩配置为“非托管”。非托管不会附加任何色彩配置属性,所以和谷歌浏览器一样呈现的颜色因系统配置产生差异,如果不主动设置的话。


Sketch 中的颜色配置设定:


Photoshop 色彩配置

Photoshop 中的颜色配置设定:


结束

后来我才知道那天 UI 设计是请假了,他们找了个会 PS 的(不知道是平面还是运营)来走查 UI,这才把我给坑了。不过这个事情也让我搞懂了屏幕色彩的问题,希望你永远不会遇到这种不专业的设计师,如果看完有所收获,不要忘记点个赞再走哟。


说了这么多,当 UI 妹子提出页面颜色有差异问题时,怎么办?自信一点(偷偷查下代码有没有写错),直接反问她是不是在 RGB 模式下取的色值,对方一脸懵逼怎么办?看完这篇文章,你还不知道应该怎么做吗?



以上就是文章的全部内容,希望对你有所帮助!如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~

发布于: 刚刚阅读数: 3
用户头像

公众号:品味前端 2022.09.22 加入

一介前端,卖码为生。很惭愧,只希望在学习和分享的道路上能做一点微小的贡献。

评论

发布
暂无评论
当UI走查说页面色值错误时,先别急着检查代码_前端_茶无味的一天_InfoQ写作社区