如何正确的从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中使用。

欢迎关注个人微博：@没故事的卓同窗。