緣起:
設(shè)計(jì)那邊出了個(gè)缺省頁(yè)的圖然后還標(biāo)注了按鈕的色值击纬,然后我這邊也照常寫(xiě)了更振,但多次溝通后設(shè)計(jì)還是說(shuō)那顏色看起來(lái)不對(duì)(我看都長(zhǎng)得一樣啊肯腕,設(shè)計(jì)自帶像素眼乎芳?)
排查:
于是乎我打開(kāi) XIB 文件看看奈惑,確實(shí)是設(shè)置的 0099E8 呀肴甸,因?yàn)槲覜](méi)有像素眼原在,只能借助外部工具來(lái)看看實(shí)際運(yùn)行起來(lái)色值是多少庶柿,然后我借助 FLEX 這個(gè)工具看了下色值浮庐,神奇的是實(shí)際出來(lái)的色值變成了 00AAEC(圖一)
解決:
經(jīng)過(guò)一頓操作(我是一頓操作)最終定位到問(wèn)題是電腦的顏色空間不一致導(dǎo)致的問(wèn)題(想起之前因?yàn)?iMac 投出的副屏不清晰然后給 iMac 裝了特定的顏色文件)梭域,然后再次打開(kāi) XIB 查看顏色空間確實(shí)不是常用的 sRGB 而是 Generic RGB(圖二)病涨,然后把顏色空間改成 sRGB 后跑起來(lái)色值正常了既穆,設(shè)計(jì)也露出了滿意且邪魅的笑容循衰。
反思:
但這樣真的解決了嗎?是解決了工三,但解決的只是這個(gè)按鈕的色值問(wèn)題俭正,項(xiàng)目中還有其它地方有這個(gè)問(wèn)題嗎掸读?好儿惫,寫(xiě)個(gè) Demo 來(lái)排查下伸但,于是又經(jīng)過(guò)一頓操作這個(gè) Mac 應(yīng)用出來(lái)了更胖,主要可以根據(jù)色值匹配列出項(xiàng)目中所有的元素,然后一鍵替換或部分替換括眠,還有個(gè)隱藏功能就是可以將項(xiàng)目中某個(gè)色值替換成指定色值(換膚)掷豺。最終發(fā)現(xiàn)項(xiàng)目中有 245 個(gè)用 GenericRGB 顏色空間導(dǎo)致有色差的地方(圖三)萌业,然后進(jìn)行一一替換生年。
總結(jié):
- 色值出現(xiàn)偏差是因?yàn)?sketch 默認(rèn)的顏色配置文件是 sRGB IEC61966-2.1(圖四)抱婉,而 Xcode8 之前是 generic RGB蒸绩,Xcode8 之后才統(tǒng)一為 sRGB IEC61966-2.1
- 代碼編寫(xiě)的 UIColor 顏色空間默認(rèn)是 sRGB 的
-
為了避免出現(xiàn)顏色偏差的問(wèn)題患亿,最優(yōu)方案應(yīng)該是跟設(shè)計(jì)那邊溝通統(tǒng)一顏色配置文件步藕,畢竟顏色配置文件也是不斷發(fā)展的咙冗,誰(shuí)知道若干年后 sRGB 是不是也過(guò)時(shí)了呢雾消!
圖四
ChangeInterfaceBuilderColor :
原理:
- 分別記錄修改前(matchColor)和修改后(modifyColor)的顏色模型立润, 以此匹配要改動(dòng)的 modifyType(只改色值范删、只改顏色空間或二者都改)到旦;
- 遍歷導(dǎo)入路徑下所有的 .xib 和 .storyboard 文件添忘;
- 對(duì)每一個(gè) .xib 和 .storyboard 文件進(jìn)行 DOM 解析操作,找到所有 color 元素標(biāo)簽NSXMLElement 并展示存儲(chǔ)斧吐;
- 點(diǎn)擊替換時(shí)修改 color 元素標(biāo)簽內(nèi)的 NSXMLNode 相對(duì)應(yīng)的 node.name煤率,源碼有詳細(xì)注釋
- 解析方式參考至來(lái)源