如何正确的从UI图中取色
在移动开发过程中,从UI图上获取颜色是日常开发中常有的事。不过从图片获取颜色也有很多种操作方式,很多人在日常中取到的并不是“正确”的值。
上策:避免从图片中取值
最好的情况就是不需要开发者从设计图上获取颜色。常见的方式有以下三种。
设计图上直接标注:sketch-measure
在设计图上直接标注,这类操作的典型应用是sketch的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挑选颜色,颜色就会出现在右边的面板中:
此时选中我们要输出的格式,可以是rgb,可以是css的#,也可以是直接的代码。然后选中你挑的颜色,复制就获得了最终输出的格式。如果你选择了UIColor-Swift,你的剪贴板就会有这样的字符串:UIColor(red:0.00, green:0.58, blue:1.00, alpha:1.0)
。方便你直接在Xcode中使用。
欢迎关注我的微博:@没故事的卓同学。
如何正确的从UI图中取色相关推荐
- 在UI设计中如何正确使用颜色
在我们进行UI设计时,颜色往往是我们表达理念重要的一点,但也是我们常常会忽视的一点.颜色其实如同语言一样,我们可以通过颜色的变化组合,来表达不同的情绪. 正确使用颜色不单能让我们吸引到客户,也能更好地 ...
- [css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?
[css] ui设计中px.pt.ppi.dpi.dp.sp之间的关系? QQ20150717160352 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: ...
- UI设计中的排版设计技巧
不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...
- PO设计模式在 UI 自动化中的实践
PO的思想最早是2013年由IT大佬Martin Flower提出的: https://martinfowler.com/bliki/PageObject.html 没错,就是他 - 没错,就是他 - ...
- UI设计中的一致性原则
为什么一致性在UI设计中很重要,我们平常挂嘴边的一致性原则到底是什么?一致性原则如何影响用户行为?价值在哪里? 今天我就带大家探讨我们在处理界面的时候,如何遵循一致性原则,该如何去做? 一致性原则的优 ...
- UI设计中AI黑科技插件合集
俗话说:欲善其事必先利其器. 作为设计师怎么能缺少神器般的AI黑科技插件?随着插画风分析图.轴测图.效果图等的流行,adobe Illustrator在设计类软件里的分量也越来越重.逆天的PS插件很多 ...
- MIT开发的一款最新Chrome插件,功能远超OCR软件,可快速识别和复制图中文字
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 有时你遇到一篇古老的文献,PDF文档还是扫描版.又或者是遇到一幅网页版海报,上面的 ...
- 关于python语言、下列说法不正确的是-下列语句中,___________是不正确的Python语句...
问题:下列语句中,___________是不正确的Python语句 更多相关问题 2,11,14,27,()A.34B.32C.30D.28 二氧化硫是造成酸雨的重要原因.某地区饱受酸雨困扰,为改善这 ...
- 如何通过Keil将程序正确的下载进flash中
前面介绍了一些创建工程和调试的基本步骤,在这里准备介绍一下如何正确的将Keil程序在仿真调试中下载到flash.这里再次涉及到了debug的窗口. 工具/原料 Keil uVision 4/5 Uli ...
最新文章
- SQL中的循环语句_类似FOR循环
- redis php web管理,redis web管理工具phpRedisAdmin安装
- java开发可以转什么软件有哪些_转行开发软件Java编程必须会什么
- oracle 如何 更改 ref cursor 结果集,oracle – 如何从anther调用一个存储过程并修改返回的refcursor?...
- 信息安全工程师-AES密码技术及XOR图像遮盖技术(JavaC++)
- 马的遍历(洛谷-P1443)
- UIView动画小问题。
- 企业网管服务器架设资料(极品中的极品)
- pc 浏览器最小字体12px
- 前后端数据交互(七)——前端跨域解决方案(全)
- 基于单片机的水温液位自动控制系统设计
- 如何提高公文写作水平?公文写作笔杆子写材料经典语句汇编(7类3800多字)
- 捷宇高拍仪XY530 网页集成总结
- 人脸识别与膜虹识别_虹膜识别技术优势明显 比指纹、人脸识别更可靠
- ppspp android编译,PPSSPP模拟器通用设置,伪福利
- 关于lvm扩容的方式
- Django连接数据库以及其他的基本操作
- spring cloud spring boot mybatis构建java版 分布式微服务 b2b2c o2o电子商务云商平台
- 3.Ray-Event编写
- 华为下矿不挖煤,鸿蒙搭台不唱戏