視覺走查——顏色配置
平時在PS/sketch上設計頁面時覺得色彩明亮豔麗,但是匯出或上傳至標誌平臺時畫面變得灰暗,這是軟體顏色配置的影響。
視覺走查是設計師在頁面被開發出來時進行細節檢查與彙總,針對沒有還原設計稿一致的頁面的細節反饋回工程師,並不斷迴圈這一步過程直到問題被修復,從而確保被開發出來的頁面與最初的設計稿一致。
工程師與設計師在面對不同的兩個顏色時,工程師看的是兩個顏色的資料,設計師看的是兩個顏色視覺感官的不同,因為PS與sketch軟體上不同的顏色配置會出現同色值卻不同的視覺感官,因此處理好PS/sketch、iphone實時預覽外掛、標註平臺3者顏色配置,是設計協助開發的細節之一。
場景一:
我們平常在使用“藍湖”或“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”下的顏色設定,色值雖然一樣,但是畫面明顯灰暗。
保留色彩配置(左)不做色彩管理(右)
不同顏色配置下的同色值顏色
方案四 (×)
編輯——顏色設定Adobe RGB(1998)環境下開啟圖片,再調回顏色設定RGB-sRGB IEC61966-2.1環境裡在截圖檔案下處理圖片
圖片正常被開啟,iphone實時預覽顯示正常,在截圖檔案上進行設計,可正常吸取顏色。
上傳至“藍湖”或“pxcook”進行頁面標註,平臺標註會自動丟棄不匹配的顏色配置檔案,轉化成“顯示器RGB-sRGB IEC61966-2.1”下的顏色設定,標註平臺上的頁面數值顯示灰暗。
PS檢視(左)手機檢視(中)標註平臺檢視(右)
方案五 (√)
編輯——顏色設定Adobe RGB(1998)環境下開啟圖片,再調回顏色設定RGB-sRGB IEC61966-2.1,使用電腦截圖對手機截圖檔案進行截圖,貼上至不做色彩管理的新建畫布,色值雖然進行了改變,但經過電腦截圖的頁面色彩與手機截圖色彩一致,可正常吸取顏色。上傳至“藍湖”或“pxcook”進行頁面標註,標註平臺上的色彩數值與頁面效果一致。
PS檢視(左)標註平臺檢視(右)
補充
由於sketch處理方式同理,於是不一一截圖解釋。
sketch色彩設定修改路徑如下:
sketch——偏好設定——sRGB IEC61966-2.1
tip:sketch可以執行操作“查詢/替換顏色”對所有同數值顏色進行處理。