如何正確的從UI圖中取色

在移動開發過程當中，從UI圖上獲取顏色是平常開發中常有的事。不過從圖片獲取顏色也有不少種操做方式，不少人在平常中取到的並非「正確」的值。

上策：避免從圖片中取值

最好的狀況就是不須要開發者從設計圖上獲取顏色。常見的方式有如下三種。

設計圖上直接標註：sketch-measure

在設計圖上直接標註，這類操做的典型應用是sketch的measure插件。

measure

在sketch中能夠爲選中元素標註尺寸、margin和其餘一些屬性。

可是直接標註有幾個顯而易見的缺陷：

• 標註的元素會影響設計圖美觀
• 設計師可能須要爲全部元素進行標註，工做量不小；若是隻標註一些元素，進行開發的時候開發者仍是須要本身進行測量
• 設計圖更改屢次後發給開發，不知道最終是哪一個版本

  設計圖交付爲HTML：marketch

  優化一步的方案是交付給開發的並非一張標註好的圖片，而是能夠點擊元素查看屬性的網頁。這方面的典型是marketch：
  

  

  
  measure在後面的版本中也加進了相似的功能，在線演示: utom.design/news/ 。
  

  

  
  這個方案解決了設計師須要手動標註元素的工做。導出的網頁部署到內網上也能夠方便的保證開發訪問到的是最新的設計圖。

  現成的在線spec標註軟件：zeplin

  導出成網頁還須要解決網頁部署的問題，就像github的代碼託管，也有一個相似的spec標註線上託管服務：zeplin。
  Zeplin有一個sketch插件，能夠直接以artboard爲單位同步到zeplin上。zeplin不只有網頁端，還有本地的客戶端。除了傳統的元素標註外還提供了不少方便的功能，好比能夠自動生成切圖，標記每一個版本的更新記錄，對設計圖進行標註說明等。
  

  

  
  還能夠爲多格式文字生成代碼：
  

  

不會出錯的取值方案：PS

一個保守的不會取錯值的方案是使用專業的圖片編輯軟件，打開圖片後使用取色工具進行拾取。

雖然結果準確，可是過程仍是挺痛苦的。首先你須要有這麼一個圖片編輯工具，PS價格昂貴包也很大；其次每次找到圖片後都須要操做一番也讓人以爲有些繁瑣。

從屏幕取色

直觀的方式是使用系統的測色計直接從屏幕取色。

從Launchpad進入在「其餘」文件夾下：

須要特別強調的是 直接從屏幕取到的顏色和設計圖的真實顏色可能不同。淘寶賣家常常在介紹裏提到顏色可能受顯示器色差影響也是同樣的道理。從顯卡輸出色彩給顯示器，到顯示器展現的過程當中，顯示器也會有本身的調教。不一樣的顯示器有着不一樣的發光原理，同款顯示器的硬件也會有必定範圍的誤差，出廠須要前都會通過教色。
拋開硬件的因素，軟件層面要注意的就是選對模式。

展開「顯示原生值」後會看到一堆選項：

若是是直接從圖片中選擇，必定要選擇圖片對應的色彩配置。如今主流的還都是sRGB。可是蘋果從iPhone 7開始支持 P3 色域，也有一些先進的設計師設計時再也不使用sRGB。不一樣的色彩空間天然致使取到的色值不一樣。
這裏簡單的貼一張圖，P3 的色域比 sRGB 更廣，一樣的RGB值對應的顏色是不一樣的。更多的這方面知識能夠看這篇： 漫談顯示器色彩管理。

可是在編輯軟件裏就須要選擇「顯示原生值」得到纔是正確的值。

道理也簡單，這個時候顏色的值軟件直接告訴操做系統，操做系統是根據應用程序裏的值渲染的，屏幕的原生值就是對的。導出成圖片後，有對應的編碼格式，則須要選中正確的編碼才能還原。

這裏圖中展現的色值是導出的png圖片的值。可是透過截圖仍是能夠分辨出左右兩張圖片的藍色並不一樣。（Sketch目前不支持色彩管理，也是一件悲傷的事。）

選擇完顏色的操做

選擇完顏色天然須要使用這個色值。那麼如何獲取到顏色值呢？使用快捷鍵cmd+L鎖定挑中的顏色後，選擇「將顏色拷貝爲文本」。

這個時候你的剪貼板會是對應的3個RGB值： 0 147 255。可是這種格式的意義不大。由於做爲開發者，不管是在 xib 中仍是代碼中使用，這個格式都不能直接使用。
若是藉助alfred，你能夠在輸入顏色值後把格式調整成 0，147，255後，使用 color 這個 workflow 進行轉換。

神器xScope：Loupe

xScope是一個老牌的輔助工具。使用裏面的Loupe挑選顏色會使流程更簡單。在界面的右側能夠選擇色彩空間。咱們選擇第三個「Gneric RGB- for Xcode」

主界面的左上角能夠選擇顏色的顯示格式。

按住shift+cmd+c挑選顏色，顏色就會出如今右邊的面板中：

DraggedImage-9.png

此時選中咱們要輸出的格式，能夠是rgb，能夠是css的#，也能夠是直接的代碼。而後選中你挑的顏色，複製就得到了最終輸出的格式。若是你選擇了UIColor-Swift,你的剪貼板就會有這樣的字符串：UIColor(red:0.00, green:0.58, blue:1.00, alpha:1.0)。方便你直接在Xcode中使用。

歡迎關注個人微博：@沒故事的卓同窗。