🎨 千次色彩的淬炼：Material You 主题如何取色？

Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

译者注：

本文编译自 Google Material Design Blog 文章 The Science of Color & Design，原作者 Google 色彩科学家 James O'Leary。

带着印刷和数字设计行业的工作背景，我最初以软件工程师的身份加入了 Google。我在 Gogole 的第一个项目，则是为 Android 10 的 Google Assistant 设计一套新的 UI 界面。这个项目比较有挑战性的地方在于背景——即如何才能在从黑色渐变至半透明的 UI 中，呈现准确且观感舒适的文本效果。

当时主导这一项目的工程师 Miranda Kephart 提出：要在视觉上让用户觉得赏心悦目，关键在于从黑色过渡到透明这一过程中，色彩梯度 （或者说颜色直方图）在视觉感知上是否平滑。

我的第一反应是不赞同。从设计师的角度来说，我们从来不会这样谈论直方图、甚至从来不会讨论如何去改变它，直方图就是直方图，我们将其默认为正确的参考标准。提出这个想法的同时，我也对随即而来的一系列问题感到困扰：设计学与工程学真的是完全分离、彼此独立的吗，一组颜色在视觉感知上的「平滑」这个说法背后究竟意味着什么，又该如何将颜色「平滑地」组织起来……甚至这些问题是不是真的有答案？

如果我们能够为这些问题找到答案，结果又能帮我们搞清楚上面提到的「文本放在哪里最合适」这个问题吗？

我随后花了好几年时间来寻找答案，这个过程同时也是从科学学科和设计领域深入、交叉探究的过程。这个答案为我们指明了一种全新的色彩空间，我相信它能赋予设计师更多的创造力，并且进一步丰富我们的色彩运用手段。

寻找可以准确感知的色彩系统

从设计规范的角度出发，要想构建一组平滑的色彩梯度，我们首先需要一套精确的色彩管理系统。在此之前，我们已经在数十载时间、数千次的色彩实验以及成千上万的调查对象帮助下，通过收集到的数据创造出的色彩公式，在三维空间中将人眼所见的色彩重建了出来。

这些用以构建色彩空间的色彩实验，一般会向人们展示两种色彩，然后询问他们哪一个更亮、哪一个更多彩。由此得来的色彩组织方式也被分为三个维度，色调、色度（也被称作饱和度）以及亮度。色相告诉我们色彩在色轮上的大致位置，例如红色、紫色这样的区别；色度则是通过展示色彩的鲜艳程度来进一步定位位置，颜色越鲜艳，在色轮上就离中心越远；亮度指的是一种颜色看起来有多接近白色或黑色，在色轮中是类似 Y 轴一样的垂直定位坐标。

如今设计师使用的 HSL 色彩系统与之类似，即色相（Hue）、饱和度（Saturation）以及亮度（Lightness）。这套系统并不精确，事实上它也并不是奔着「精确」这个目的被设计出来的。HSL 的诞生是为了让上世纪 70 年代的的计算机进行快速的色彩计算，它在发明之初就没有考虑过精确色彩管理的需求。

而我们所创建的这套全新的、基于准确感知的 色彩管理系统 HCT，则基于色相（Hue）、色度（Chroma）以及色调（Tone）。

虽然 HCT 是全新的色彩系统，但它仍然是建立在现有的色彩科学技术之上的，这当中就包含了许多能准确定义感知颜色的色彩空间。简单来说，我们在建立新的色彩系统时将重点放在了其中两个之上 —— Lab，也被称为 LCH（亮度、色度、色相）以及 CAM16。

HCT 的亮度指标 —— 色调，与 LCH 中的亮度相同。使用这种测量方式，再加上一些数学技巧，就意味着我们可以用 HCT 来测量色彩对比度并且直接将对比度检查器和可阅读性等算法直接整合其中。

而 HCT 剩余的两个维度 —— 即色相和色度则取自 CAM16，与后者的色调和色度相同。看到这里你可能会问：为什么不直接使用 LCH 来测量颜色？当然了，不过我们在实际 UI 设计中使用它时发现，LCH 在观感上太不一致了。

无论如何，在 HCT 被设计出来后，设计师们第一次有了能够真正反映用户所见的色彩系统，可以借助此在考虑到一系列的变量之后，确保在适当的色彩对比度、无障碍标准之下，让不同色调获得一致亮度/色度。

找出并解决对比度问题

色彩对比度长期以来一直是设计中的一个大挑战：当我还是一名平面印刷设计师的时候，对比度意味着不同印刷内容之间有足够的差异，能让读者更舒服地进行阅读：毕竟你无法在黑色的背景上准确阅读到同为黑色的文字内容，因为没有足够的对比度来让你进行内容区分。

而当我真正加入 Google、成为一名软件工程师时，才惊讶地发现原来颜色之间的对比度也有一套精确的定义与计算公式。为了满足无障碍设计准则要求，我们所交付的每一个软件 UI 设计也都受到这一对比度算法的严格约束（Material Design 设计规范也有一个 专门页面 来讲述关于应用对比度以及工具）。

在过去，设计师通常会直接把颜色组放入 对比度检查工具 中，得到一个代表当前对比度的数字。但调整成对的颜色以满足要求并不容易。在此之前没有色彩系统可以在调整亮度的同时保证色彩与色调不变，设计师只能凭借感觉与经验猜测颜色是否满足对比度。

在 HCT 色彩系统中，对比度这种并不直观的差异被「抛弃」了，取而代之的是相对简单的色调来计算颜色对，通过挑选色调值相差足够大的颜色来保证足够的辨识度 —— 这一过程并不需要太多复杂的计算。

举例来讲：为了满足 WCAG（网页无障碍性指导原则，Web Content Accessibility Guidelines）中对对比度的要求，较小的元素需要和背景有至少 50 以上的色调差异，而较大的元素则需要有 40 以上的色调差异，类似这种的设计准则对每一组颜色来讲都是相同的。

创造一套可扩展的设计系统

正如所有设计系统都需要满足大规模通用设计一样，HCT 同样也支持规模化的处理不同的色彩场景，这为其成为各种追求扩展性的设计系统的色彩准则奠定了基础。

在常见的设计规范中，颜色往往被赋予了不同的含义，来让开发者/设计师在填充不同内容时更加方便快速：比如在 Material Design 设计指南中的主色调  Primary，通常指的是用于按钮的色调。

类似地，设计规范中每一种色调都是被准确定义的，包括各种元素甚至是文本的颜色，这样才能让整个 UI 设计的色彩确保对比度符合要求，最终呈现出的效果看起来更加协调。

而在颜色其他的维度：即色相与色度上，对于设计师来讲都是开放的，每个设计师都可以通过调整这些来进一步拓展 UI 设计的表现力；而 Material You 的色彩系统，就是通过用户设置的桌面壁纸，动态地确定色相与色度两个维度，从而快速地打造出一个动态、个性化的设计系统。

用动态色彩高效实现个性化

在 Android 12 的 Material You 中，主题取色引擎会自动从设置的壁纸中选择数个颜色，并让用户手动选择其中一个，围绕此来创建整个系统级的 UI 主题。

在这一实现效果的背后，首先是通过将壁纸中的色彩量化，在色彩空间中合并，将其中的数千种颜色「压缩」成为一个较小的颜色集。使统计算法可以高效运行：这些算法是用来给颜色分类并进一步筛选的，Android 12 可以根据颜色的丰富程度，以及它们所代表的颜色在壁纸中所占的比重给不同的色彩打分。

在这套取色算法运行完毕之后，排名靠前的数个颜色就会出现在用户设置壁纸界面之中，成为一切基础的「源色」（source color），它的色相与色度都会直接影响到整体的主题色彩观感：既可以是充满活力的亮蓝色，也可以是相对柔和的绿色。

在「源色」的基础之上，Android 12 会进一步拓展出由五个色调组成的「核心调色板」：这些可以有效的帮助设计师降低创建设计系统时的认知负担：不用为界面中的每个元素/组件手动指定色调/色度，核心调色板用算法可以轻松地完成这些工作。

最后，通过完成定义每个颜色的色相色度与色调的表格，使用这些值在 HCT 中，就可以创建出 Material You 主题中使用的所有颜色。

这些其实并非什么机器学习算法之后的黑盒，在 Android 12 中，如果你将系统自带的彩蛋桌面小组件放置在桌面，你甚至就直接能看到这些算法最终为你生成的色彩集。

为你准备的开源色彩工具

在 Android 12 以及 Material You 正式发布之后，Google 也将这套系统背后的色彩科学研究成果 —— 代码库 Material Color Utilities 正式开源，Google 还计划通过 SASS 和 GLSL 着色器，将其应用到 iOS、 CSS 之中。

它最初是为 Pixel 手机而开发的，但现在随着代码库开源，不仅其他 Android 手机厂商可以使用，其他任何开发者都可以对其作出贡献。

未来，Google 还会进一步为 Material Color Utilities 添加各种模块：包括 GLSL 着色器，图像过滤模式以及新的梯度类型，进一步拓展 Material You 取色系统的应用可能性。

在这些实际应用效果的背后，新的 HCT 色彩系统功不可没；它可以成为帮助更多设计师打破扁平化设计当道时代的的极简主义困境，激励更多人创造出探索新色彩潮流的作品。

套用 Tag Savage 的话说：「现代博物馆的极简设计上都很漂亮，但最终这些设计想强调的特殊性仍会逐渐落伍。但这对博物馆来说是一件好事：现在他们真的可以把这个地方搞得千奇百怪了」。

后记

从 Android 12 发布之后 Material Design 开发团队在采访中公布的相关细节来看：Material You 在 Google 内部已经研发了五年之久。

虽然就 Android 当前动态来看，应用动态取色效果的第三方 App 还不是很多，但 Google 还是联合了三星、小米，OPPO/vivo 等主流定制 Android 系统开发商，来推动更多 Android 设备能应用到这一主题引擎效果。同时不仅 Android TV、WearOS / ChromeOS 等第一方系统会加入，今年年内也会登陆 iOS 平台，为 App 实现更多主题效果提供新工具。

除了开源代码库之外，在 Android Developer Blog、Material Design Blog 近期都陆续放出了很多与此相关的设计指南以及可视化的主题生成器，这些对于推动支持这一功能的 App 进一步普及都有很大帮助。

即便不是开发者。设计师利用这套系统中的各种可视化工具，也能更加准确的找到恰当的色彩搭配，这些都是 Material Design 开发团队在这套「手机主题」之外的成果。

本文整理以及技术细节校对得到 @studiomockup 另外两名设计师的帮助，再次感谢。

🚏 Find us

Email：[email protected]
Twitter：@update4weekly
Telegram 频道：@update4weekly
Design by @studiomockup/小樣設計

🔗参考链接：

• Android Developers Blog：Material You: Coming to more Android devices near you
• Material Theme Builder：可视化 Material You 壁纸取色应用效果工具。
• Material Design：Accessibility
• Color Tools
• Jacob Rus’ CAM16 live document
• 原文链接

> 下载 少数派 2.0 客户端、关注 少数派公众号，解锁全新阅读体验 📰

> 实用、好用的 正版软件，少数派为你呈现 🚀

© 本文著作权归作者所有，并授权少数派独家使用，未经少数派许可，不得转载使用。