平時在 PS/Sketch 上設計頁面時覺得色彩明亮艷麗，但是導出或上傳至標志平臺時畫面變得灰暗，其實是軟件顏色配置的影響。

視覺走查是設計師在頁面被開發出來時進行的細節檢查與匯總，針對沒有還原設計稿的頁面細節反饋給工程師，并不斷循環這一步過程直到問題被修復，從而確保被開發出來的頁面與最初的設計稿一致。

工程師與設計師在面對不同的兩個顏色時，工程師看的是兩個顏色的數據，設計師看的是兩個顏色的視覺色彩，因為 PS 與 Sketch 軟件上不同的顏色配置會出現同色值卻不同的視覺體驗，因此處理好 PS/Sketch 、iPhone 實時預覽插件、標注平臺三者顏色配置，是設計協助開發的細節之一。

場景一

我們平常在使用藍湖或 pxcook 進行頁面標注時，平臺與軟件默認無色彩管理，因此識別的色值與 PS 顏色配置「不做色彩管理」、Sketch 里的色彩描述「RGB-sRGB IEC61966-2.1」是一致的。

場景二

平常在手機預覽一些優秀的文章與作品時，會對優秀的頁面進行采集，但 iPhone 截屏圖片色彩格式卻是 Display P3，等到 PS/Sketch 打開 iPhone 截屏圖片時出現「嵌入的配置文件不匹配」，丟棄不匹配的配置文件之后畫面顯得灰暗。

△ 手機視圖（左）PS視圖（右)

這是因為 iOS 系統下截屏得到的圖片，其色彩配置文件是 Display P3，與 PS/Sketch 里的 sRGB 不同，因此丟棄不匹配的配置文件之后畫面顯得灰暗。

于是使用了 PS 進行了以下 5 種方案測試，Sketch 同理。

測試一

PS里：編輯→顏色設置→RGB-sRGB IEC61966-2.1 環境下打開圖片。

當顏色設置里的工作空間 RGB 設置為「顯示器RGB-sRGB IEC61966-2.1」時，色彩管理方案 RGB 會自動「關」閉，這個時候，電腦屏幕上 PS 顯示顏色與 iPhone 實時預覽顏色一致。但此時 PS 打開 iPhone 截屏圖片會出現「嵌入的配置文件不匹配」，丟棄不匹配的配置文件之后畫面顯得灰暗。

△ PS視圖（左）手機視圖（中）PS打開截屏圖（右）

測試二

PS里：編輯→顏色設置Adobe RGB（1998）并「保留嵌入的配置文件」環境下打開圖片。

當顏色設置里的工作空間 RGB 設置為「Adobe RGB（1998）」，色彩管理方案 RGB 選擇「保留嵌入的配置文件」，PS 打開 iPhone 系統下截屏的圖片不會再出現彈窗，截屏圖片在 PS 上顯示顏色正常，但 iPhone 實時預覽變得灰暗。

△ PS視圖（左）手機視圖（中）PS打開截屏圖（右）

測試三

PS里：編輯→顏色設置 Adobe RGB（1998）環境下打開圖片，再調回顏色設置 RGB-sRGB IEC61966-2.1 環境下處理圖片。

圖片正常被打開，iPhone 實時預覽顯示正常，但由于新建畫布顏色設置與截屏圖片顏色設置不同，因此將截屏圖層復制至新建畫布或者進行色彩提取時會被自動轉化成「顯示器RGB-sRGB IEC61966-2.1」下的顏色設置，色值雖然一樣，但是畫面明顯灰暗。

△ 保留色彩配置（左）不做色彩管理（右）

△ 不同顏色配置下的同色值顏色

測試四

PS里：編輯→顏色設置 Adobe RGB（1998）環境下打開圖片，再調回顏色設置 RGB-sRGB IEC61966-2.1環境里在截屏文件下處理圖片。

圖片正常被打開，iPhone 實時預覽顯示正常，在截屏文件上進行設計，可正常吸取顏色。

上傳至藍湖或 pxcook 進行頁面標注，平臺標注會自動丟棄不匹配的顏色配置文件，轉化成「顯示器RGB-sRGB IEC61966-2.1」下的顏色設置，標注平臺上的頁面數值顯示灰暗。

△ PS視圖（左）手機視圖（中）標注平臺視圖（右）

方案五 —— 完成同步

PS里：編輯→顏色設置 Adobe RGB（1998）環境下打開圖片，再調回顏色設置 RGB-sRGB IEC61966-2.1，使用電腦截屏對手機截屏文件進行截屏，粘貼至不做色彩管理的新建畫布，色值雖然進行了改變，但經過電腦截屏的頁面色彩與手機截屏色彩一致，可正常吸取顏色。上傳至藍湖或 pxcook 進行頁面標注，標注平臺上的色彩數值與頁面效果一致。

△ PS視圖（左）標注平臺視圖（右）

補充

由于 Sketch 處理方式同理，就不一一截圖解釋。

Sketch 色彩設置修改路徑如下：

• Sketch →偏好設置→sRGB IEC61966-2.1
• 文件→修改顏色描述文件→sRGB IEC61966-2.1

tip：Sketch 可以執行操作「查找/替換顏色」對所有同數值顏色進行處理。

歡迎關注作者的微信公眾號：「大tip」