靜電說：顔色一直是各位設計師小夥伴非常敏感的問題，而且顔色差别也很容易被大家察覺，特别是不同設備上顔色的差别，有時候會非常大。之前學員就跟我提過：“老師，為啥顯示器上做的UI界面，設計稿導出放到手機上，顔色就不太對了呢？”，其實色差這個問題，對于設計師來說，是不能忍受的。畢竟是做設計，怎麼能眼睜睜的看着自己想要呈現的顔色成為不想要的色彩呢？

不同設備上導緻的顔色差異

色差，其實這裡邊原因很多，且聽靜電給大家分析分析，導緻圖片在不同設備上産生色差差異的原因主要取決于以下幾個因素：

1. 大部分圖片文件内存儲有色彩配置文件
2. 操作系統色彩管理導緻顔色差異
3. 軟件色彩管理模式不同導緻的顔色差異
4. 每種色彩空間顯示的顔色數目會有差異，因此導緻圖片顔色不一緻。
5. 顯示設備品質差異導緻的顔色差異：作圖用的顯示器或者手機屏幕的品質不好，對色差的還原度低，導緻期望展示的顔色發生變化。

系統色彩管理模式導緻的顔色差異

顔色一般會在顯示屏幕上表現為RGB色（紅，綠和藍）或者是LSB/L（色相，飽和度和亮度）下圖就是一個典型的色彩空間圖。它代表了一個顯示設備（或者配置文件希望這個顯示設備）能顯示多少顔色數。

如果你把一種顔色從一種色彩空間轉成另一個色彩空間，實際上，這個色彩空間會盡可能的适配你要的顔色，讓他們盡可能的在同一個位置（由于色彩空間的改變，其實轉化後的顔色并不能完全一緻）。也就是說這個RGB的數值會根據這個色彩空間的定義而做出改變。如果你原先所使用的這個顔色剛好位于這個色彩空間的邊緣位置，改變後的色彩空間會讓你的顔色呈現更真實或者失真。

比如，靜電這裡将同一個顯示器分别設置不同的色彩空間，你會發現同一個圖片，所顯示的顔色觀感是不一樣的，上部使用BenQ PD2700U的描述文件會顯示更多的顔色，色彩更加豐富有層次，而下方使用另一個配置文件，所呈現出的顔色則偏少，層次感相對也較差。

不同的色彩空間所導緻的顔色差異

軟件色彩管理模式導緻的顔色差異

除了系統進行色彩管理，操作系統中的每個軟件也會進行色彩管理，這就導緻了多重色彩管理造成的顔色不一緻的情況，因此，咱們UI設計師要在數碼設備上保持設計稿顔色的一緻性，最基本的一點，就是保證色彩管理配置文件的一緻性。色彩配置文件不僅存在與操作系統和軟件中，也是圖片本身的身份證，圖片文件内部也會存儲配置文件信息，這就相當于是圖片的身份證，告訴軟件要用怎樣的方式去呈現這張圖片。

一張圖片會被以怎樣的方式去展示出來？看上圖

如下圖，我們可以看到，Sketch默認的色彩配置為“非托管”，而Photoshop則是sRGB。非托管不會附加任何色彩配置屬性，導出的圖片也不會帶“身份證”，所以會導緻不同設備上呈現的顔色因設備配置産生差異。

Sketch中的顔色配置設定

Photoshop中的顔色配置設定

那麼，有小夥伴就要問了，這裡如何可以保證顔色差異最小呢？靜電建議将色彩配置文件都設定為sRGB即可。因為數碼設備中，sRGB是最常用的配置文件，我們隻需這麼做即可。

顯示設備（顯示器）導緻的色差

毫無疑問，一台優質的顯示器會比一台廉價的，未經過色彩校準的顯示器顯示的顔色更加準确。同時，對于設計師來說，更應該關注顯示器的色域，如上文圖中的色彩空間，色域越廣，代表顯示器顯示的顔色數越多，當然對于顔色的呈現就越準确。例如99%sRGB一定比80%sRGB要好，但是130%sRGB就會導緻過飽和的情況發生。

同理，低端手機的屏幕的顯示效果也相對于使用較好顯示屏的手機顯示的顔色差。我們在測試的時候，需要保證在顯示顔色較準确的設備上進行設計和查看，确保你所見的，所設計的顔色就是你想要的，而且在這些設備上是準确的。

我們接下來進行一些測試，看看同一張圖片在不同顯示器，不同移動設備的顯示效果。在這裡我們分别使用靜電新購入的明基BenQ PD2700U和之前購買的兩個品牌的顯示器進行對比。我們分别使用同一份設計稿放置在不同的屏幕上進行展示(三款顯示器全部設置為出廠模式，不進行任何設置)，然後以iPhone 12 Pro進行攝屏。

真實測試開始啦 下面的攝屏圖

會讓你有真實感受

設計稿原圖

下圖為三台顯示器的攝屏，為了便于比較不同設備的顯示效果差異，在這裡靜電使用了一台新購入的iPad mini2021款同樣放置同一張圖片來進行對比。攝屏及肉眼觀察，第一台新購入的明基顯示器與iPad的差異是最小的。當然，由于不同顯示器的調教不一樣，色溫也相對有一些差異。（鑒于攝屏存在曝光等問題，觀感以肉眼觀察為準，攝屏僅供參考。）

明基BenQ PD2700U

4k顯示器2

1080p顯示器3

接下來對比了手機與顯示器的顔色差異，對比手機為iPhone 12 Pro，并将背光調至最亮。肉眼觀感來說新購入的明基相對色彩更準。而旁邊這台色彩差異相對較為明顯。

明基BenQ PD2700U

4k顯示器2

選擇好一點的顯示設備

是避免色差的第一要素

在這裡需要強調一點，色差無法完全避免，但我們也應該追求更準确的色彩。選擇更好的顯示設備進行設計和測試，可以保證色彩和你預想中的差異更小，培養更好的色感。UI設計師在觀察的時候，以同一張圖片統一亮度進行測試，在缺少校色設備的情況下，肉眼的觀感也是很重要的考量依據。必要的時候選擇業界公認的色彩較準确的設備來進行對比測試。

之前靜電還買過校色用的蜘蛛，但畢竟之前買的一兩千的顯示器大部分都是為了遊戲和多媒體而生的，色彩多少不太适合設計師。底子薄再校色也不太行（校色能改變一部分的色準，但是無法改變顯示面闆本身的色域）。

前幾天購入的這台顯示器發了朋友圈，不少小夥伴問到型号，是明基PD2700U，覆蓋sRGB色域，據說能顯示出10.7億自然的過渡色，每台機器出廠前已統一校色，既然寫着Designer Monitor，我想肯定色彩會更加準确了。

糾結了半天就選這個吧。據說價格好像還挺堅挺，所以雙十一就下單了。有興趣的小夥伴可以試試看。順便說一下，這個還能旋轉，底座也足夠大。

底座很厚實很大，所以很穩，不會搖搖晃晃，還可以很方便的旋轉。

對比一下之前買的這個，不能旋轉也不能升降。底座還不太穩。

這款還可以上下升降和橫豎旋轉，非常方便，而且有個很貼心的可以拎的提手。

這個人性化的設計我很喜歡，隻需按兩次按鍵就可以調整顯示器輸入源。如果你有多台電腦進行連接顯示器，會非常方便。

随便拍一下自己的工作台，原本兩台顯示器，現在多了台新買的PD2700U，三台更加方便了，一個屏幕講課，一個屏幕看直播聊天窗口，一個屏幕準備課件。工作效率更高了。

在做頁面設計的時候，還可以把顯示器豎起來，這樣的話UI頁面再長，也能一覽全貌，非常方便。

今天的分享就到這裡~有興趣的話，我會出一期詳細視頻和後續的體驗文章，讓靜電來做小白鼠，幫大家找到靠譜的設備。

本文轉載自公衆号“靜Design”