Android 开发者和设计师必须了解的颜色知识

在近期发布的 Oreo 版本中,Android 开始获得颜色管理的支持,这有助于在不同的设备上对颜色进行校准。随着此次更新的到来,Android 设备现在可以显示 sRGB 色域之外的颜色。如果您不熟悉颜色配置文件或广色域,那么我强烈建议向您推荐这段来自 Google I/O 的视频,供您理解颜色:

开发者和设计师必须了解的Android颜色知识

简单来说,颜色管理可以确保颜色在不同的显示器上看起来一致。例如,颜色 #ff0000(我们的读者应该秒懂这是红色)当出现在采用不同技术的显示屏上时,观众看到的颜色可能会有所不同——有些屏幕可以显示比其他屏幕更饱和或更强烈的颜色。根据 sRGB 的表达方式,#ff0000 表示一种特定的红色(在 sRGB 色空间中),这样彩色显示管理就可以精确产生出符合观众期望的颜色。 在这篇文章中,我们想概述一下 Android 应用设计师和开发者需要如何理解这些改动。

显示广色域图像

图像可以嵌入颜色配置文件,声明其颜色信息所属的颜色空间。类似地,许多相机能够捕捉广色域并嵌入适当的颜色配置文件,从而显示超出标准 sRGB 色域的颜色。要在应用中展示具有广色域特征的图像,您需要在每个 Activity 中进行声明。为此,请在 manifest 的 activity 公告中设置 colorMode 属性:

您也可以通过代码来设置,但您需要在创建 Window 之前就在 onCreate 上设置完毕。广色域支持是可选的,因为它需要更多的系统资源(这可能会导致应用性能表现下降),事实上我们在开发者文档里已经强调过了:

“当启用广色域模式时,活动的窗口使用更多的内存和 GPU 处理能力来进行画面组合。在启用广色域模式之前,您应该仔细考虑活动能够真正从中受益。例如,全屏显示照片活动很适合采用广色域模式,但显示缩略图的界面则不够适合。”

请注意,如果您使用的是单一 Activity 架构,那么将广色域图像显示分解为新的 Activity 可能是有意义的。

下面是一个示例,显示了两个显示相同广色域测试图像的界面(嵌入了 Display P3 颜色配置文件的 PNG 文件),画面上部分的 Activity 声明了广色域颜色模式,而下半部分的 Activity 则没有声明。

△ 如果您的屏幕支持的话,上部分应该能看见一个 Android 小机器人,而下部分看不见。

颜色准确渲染

许多 Android设备在很久之前就拥有了能够显示较广色域的屏幕。在 Android 8.0 的颜色管理之前,所有内容都被假定为 sRGB,但宽色域显示器会将颜色值重新解释为其工作色域,并有效地对颜色值进行 “换算”(一般会让红色更红,绿色更绿),从而导致更饱和的成像效果。然而这种拉伸是不精确的,事实上不存在这种能预测您想要的颜色的“换算”算法,因此这样渲染出的颜色并不准确。

许多应用已经对图像等资源进行处理,比如降低一些饱和度从而进行颜色弥补。因此,在具有校准显示功能的设备上显示时,颜色可能会显得较为柔和。也就是说,在颜色显示精确的设备(如 Pixel 2)上,非饱和的图片资源的显示效果将不如显示不精确的设备那么饱满。当准确的颜色渲染技术广泛流行后,应用开发者终于可以不再需要对资源颜色自行处理了,同时还能确保他们的内容能够按预期进行显示。然而,在此之前,您可以采取一些措施,来确保您的内容在颜色精确的显示器上以及非颜色管理设备上看起来都很棒。

Android 8.0 添加了一个新的 widecg 资源限定符(resource qualifier),您可以使用该限定符来更改配备广色域屏幕并支持广色域渲染的设备上的颜色(nowidecg 则刚好相反)。

请注意,广色域支持不同于当前活动是否在 wideColorGamut颜色模式下运行。如果设备支持颜色准确的渲染,则该限定符将适用,而不管该活动是否在宽色域模式下运行。

例如,一个应用可以在 res/values/colors.xml 声明一个基色调色板:

并在 res/values-widecg/colors.xml 声明另一套设置

△ 如上面代码所示,可以为色彩显示准确的设备(左侧)和较旧的设备提供不同颜色

当然,您可以在可以栅格化成位图的资源上使用上述做法(例如 res/drawable-widecg-mdpi/foo.png),但是这意味着几乎倍增的应用体积,所以也许并不值得。如果一定要这么做,可以考虑转而使用可动态着色的矢量图形。

更广泛的支持即将到来

虽然我们最近有宣布计划添加一种新的 “饱和” 颜色模式,让用户选择不使用颜色精确的渲染(就像 nowidecg 设备一样),但我们仍然认为,为那些拥有颜色管理功能的设备更新应用非常重要。如果您更新了您的应用,并更好地支持了颜色准确渲染,选择退出此模式的用户就会变少,毕竟大家都更喜欢精准的颜色。我们计划在广色域支持领域继续进行投入; 在将来的版本中添加更多的 API 界面来处理广色域(比如更新后的 Paint API 和 Canvas API 已经可以接受更高比特精度的颜色)。

在频繁和现代显示设备打交道的如今,设计师和开发者现在需要了解色彩空间、颜色管理等知识,以及如何在应用中将其付诸实施。越来越多的设备开始提供广色域显示和颜色精确的渲染,领先一步在此时显得尤为必要,更新您的应用,为用户提供最佳体验。我们认为,这是向您的用户提供卓越体验的最佳方式 —— 确保他们所看到的颜色就是您想要展示出来的颜色。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

3175
来自专栏数据小魔方

Xcelsius(水晶仪表)系列5——统计图综合运用

今天继续跟大家分享水晶仪表系列的第5篇——统计图的综合运用。 本例是一个通过展现某银行前八年的存款储蓄以及贷款数据,通过预计后两年的存款储蓄增长率、贷款增长率等...

35811
来自专栏互联网杂技

全面屏下的新交互方式

全面屏时代,交互方式会有哪些变化? ? 什么是全面屏? 2017年可以称为全面屏集中爆发的一年,小米,OPPO,VIVO,华为,三星,苹果等等都在今年发...

3586
来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

942
来自专栏葡萄城控件技术团队

前端开发者常用的9个JavaScript图表库

2133
来自专栏数据小魔方

think-cell chart系列13——簇状堆积柱形图

今天跟大家分享的是think-cell chart系列13——簇状堆积柱形图。 关于柱形图这一部分,有很多图表的变形,用来展示多重信息,每一种都其特定的应用场景...

5903
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

4387
来自专栏葡萄城控件技术团队

前端开发者常用的9个JavaScript图表库

当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。 对任何一个组织来说...

4537
来自专栏腾讯大讲堂的专栏

玩转HTML5移动页面(动效篇)

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上...

5858
来自专栏数据小魔方

think-cell chart系列2——堆积百分比柱形图!

今天要跟大家分享的是think-cell chart系列的第二篇——堆积百分比柱形图! 我们还是先欣赏一下使用think-cell chart制作的堆积百分比柱...

6799

扫码关注云+社区

领取腾讯云代金券