如何避免色域誤差？UI設計師必要學的色域概念和色彩配置技巧

Sponsor

作為設計師，我們每天都在與色彩打交道，但是你是否真正了解色域的概念以及它對設計方案顯示效果的影響？在我們的日常工作中，可能會遇到這樣的問題：在設計軟件中不知道選擇哪種顏色配置，或者忽視相關配置；不明白為什么效果圖在不同設備上顯示的顏色不同；設計稿和實際開發上線的界面存在色差。這些問題的根源在于我們對色域的理解不夠深入。因此，本文的目的是幫助設計師朋友們更好地理解色域的概念，明確效果圖在不同場景中顯示色彩存在差異的原因，從而使效果圖的展示和上線之后的效果更符合我們的預期。

在工作中可能遇到以下問題：

• 不確定在設計軟件中選擇哪一種顏色配置，或干脆忽略掉相關配置；
• 不知道為什么效果圖在不同設備上顯示顏色不同；
• 設計稿和實際開發上線的界面存在色差。

寫這篇文章的目的，就是為了讓設計師朋友們了解色域的概念，明確產出的效果圖在不同場景中顯示色彩存在差異的原因，從而使效果圖的展示和上線之后效果符合自己的預期。

1. 色域是什么？

首先，讓我們來了解一下色域的概念：

色域是一種對顏色進行編碼的方法，也指一個技術系統能夠產生的顏色的總和。

由于技術限制，目前顯示設備無法完全覆蓋人眼所能觀察到的可見光范圍，為了表明不同設備所能呈現的色彩范圍，就有了各種色域標準， 比如：AdobeRGB、sRGB、Display P3等的都是不同的色域標準。

其中，設計師萌在做UI設計時最常接觸的是sRGB和P3色域：

sRGB是由微軟在1997年主導的標準，由于Windows具有強大的用戶基礎，所以從PC、Mac再到相機、掃描儀、打印機、投影儀等都支持sRGB, 它大約能覆蓋35％的CIE。

P3色域廣義上包含了DCI-P3和Display P3, 前者是影視行業的標準；Display P3是Apple在DCI-P3基礎上參考了sRGB 而修訂出的自己的標準，相比于sRGB，除藍色以外都有較大提升。

色域的標準被應用于

顯示設備、軟件的顏色配置和圖片的顏色描述

三個方面，影響著圖片呈現到人眼的顏色效果。

2. 顯示設備色域

顯示設備色域可以理解為一個設備所能支持的色彩顯示范圍，購買手機、顯示器等設備時，在產品參數的描述中都可以看到關于設備色域的信息。

以下是目前移動設備和桌面設備的色域標準：

3. 設計軟件的顏色配置

前面提到的設備色域決定了顏色顯示范圍的上限，而設計軟件中的顏色配置，則決定了在設計過程中，效果圖以及導出圖片的顏色將以何種色域標準顯示。

比如在Sketch中，顏色配置存在

非托管、sRGB和Display P3

三個選項。后面將會說到不同的顏色配置分別會有什么樣的效果顯示以及導出的圖片會存在何種差異。

4. 圖片的顏色描述文件

一般來說，我們在生產每一張圖片的時候，都會給它指定一個色彩描述文件。色彩描述文件的作用是告訴系統，它是以什么色域標準進行顯示的。

??小知識：我們都知道，從設計軟件中導出圖片時選擇“存儲為Web所用格式”文件大小會縮減，縮減的原因就是存儲為Web所用格式會丟棄顏色描述文件和EXIF元數據。

接下來，我們看一下色域對顯示效果的具體影響。

5. 設備色域對顯示效果的影響

Mac顯示屏

Mac顯示屏的色域為P3，具有較為寬闊的顏色覆蓋范圍，可以向下兼容sRGB，所以無論圖片顏色描述是srgb還是display P3，都可以按照其顏色描述正確顯示。

sRGB色域顯示設備

在相對低端的sRGB色域顯示設備上，顏色描述為sRGB的圖片可以正常顯示，而顏色描述為Display P3的圖片，由于設備色域的顏色覆蓋范圍小于圖片顏色描述文件，部分顏色無法正確顯示。

具備廣色域的Android手機、顯示器

在目前流行的廣色域Android手機和顯示器上，無論圖片的顏色描述是什么，在顯示時顏色都會存在偏差，看起來會更加艷麗。

為什么會出現這種情況呢？這里引用一篇網上的文章，來解釋原因：

“使用廣色域的新款Android、顯示器上的顏色看起來艷麗，實際上是快速發展的硬件裝配和落后的色彩管理系統之間的矛盾。色域映射沒有做好，色準出現問題，無法正確解讀色彩?！?/p>

△圖片來源于：
https://www.163.com/news/article/FSM4081K00019HUL.html

6. 軟件顏色配置對顏色的影響

當我們在設計軟件中直接生產圖片時，圖片會按照當前軟件的顏色配置顯示，但是有時我們需要將外部圖片導入到設計軟件中，這可能導致圖片發生一些顏色上的變化。

這里依然以Sketch為例，分別來說一下Sketch中不同顏色配置下導入圖片的顏色顯示情況和再次導出圖片的顏色描述變化。

顏色配置為sRGB

當Sketch的顏色配置為sRGB時，無論導入圖片的顏色描述文件是sRGB還是P3，都會按照sRGB去顯示，也就是說帶有P3顏色描述文件的圖片在軟件中顏色會發生改變，并且，再次導出時，帶有的顏色描述文件也會變為sRGB。

顏色配置為Display P3

當Sketch的顏色配置為Display P3時，導入圖片可按照其自帶的顏色描述文件顯示，但是導出圖片的顏色描述文件會統一為Display P3。

顏色配置為非托管

非托管是Sketch默認的顏色配置，在非托管配置下，編輯文件的速度會有所提升。此時在Sketch中文件按照顯示設備的色域顯示，如：在IMac上按照P3色域顯示，但需要注意的是，

在非托管配置下，導出圖片的色彩描述文件為sRGB，這就導致了軟件中和導出后圖片看起來顏色的不同。

在Sketch官方給出的說明中，建議Web和移動端設計師使用sRGB配置來進行設計，但同時也建議在做針對支持P3色域設備的設計時使用Display P3顏色配置。

在實際工作中通過與研發同學的溝通了解到：在設計方案開發落地時是以sRGB的標準進行開發的，所以個人建議，

在設計中可以將顏色設置為sRGB，避免設計效果與實際還原出現偏差。

此外，在sketch中，有時我們會見到這樣的提示：

原因是我們打開的文件的顏色配置與當前Sketch的顏色配置設置不一致。

在Sketch 文件>更改顏色配置中可以對當前文件進行顏色配置的編輯，使之與當前的軟件顏色配置相一致。在做UI設計時，推薦選擇“分配”選項，來保證顏色色值的準確。

小結：

1. 色域是對一種顏色進行編碼的方法，也指一個技術系統能夠產生的顏色的總和；

2. 圖片的顯示顏色由顯示設備色域、生產圖片的設計軟件色彩配置和圖片的色彩描述文件決定，其中顯示設備決定了圖片顯示效果的“上限”；

3. Android和非Mac桌面顯示設備的由于色準問題，出現色差是不可避免的，且通常顏色相較于iPhone會過于艷麗；

4. 做UI設計的時候，顏色配置可以設置為sRGB，以便設計效果與實際還原一致。

本篇結束，又學到了，優秀！??

參考文獻：

百度百科-色域
https://baike.baidu.com/item/%E8%89%B2%E5%9F%9F/5857970?fr=ge_ala

為什么安卓手機的屏幕顏色，總是很艷？
https://www.163.com/news/article/FSM4081K00019HUL.html

Choosing between sRGB and Display P3
https://www.sketch.com/docs/designing/color-profiles/

作者：六邊形Evan
來源：站酷(zcool.com.cn/u/19027776)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。