Material You动态配色的相关内容

在 2021 年的 I/O 大会上，我们展示了 Material Design 大胆而富有表现力的演变。Material Design 3 在 Material Design Primary 颜色和 Secondary 颜色的基础上，引入了 Tertiary 颜色和附加色槽，用于验证无障碍访问功能并保障显示的和谐性。在本篇文章中，我们将为您展示更多有关 Material You 动态配色的内容，包括动态配色是什么，以及如何在您的应用中实现它。

Material You 通过动态配色，将颜色重新定义为更加个性化的体验。那么，什么是动态配色？Android 12 可以通过动态配色提取算法来选择颜色值，基于动态配色，您可根据用户的桌面壁纸颜色生成自定义调色板。动态的浅、深色方案可体现在整个用户系统界面，以及某些应用中。这些方案将根据用户偏好和视觉需求进行更改或调整。动态配色是一种算法系统，支持个性化颜色体验的同时还尊重蕴含品牌标识或具有传统意义的颜色，如绿色代表 "Go"，红色代表 "Stop"。

首先，它从用户的壁纸上提取一种源颜色，并推算出五种关键颜色，然后将每个关键颜色转化为由 13 种色调组成的调色板。接下来，它会为从调色板中选择的颜色分配一组特定的角色和值，并将这些角色和值映射到我们称之为 "方案"的组件上。

配色方案

配色方案可视为一组拼合在一起的相关色调，而非一组固定不变的值。每种色调都会生成一组浅、深色方案，这些方案将根据偏好和视觉需求进行更改或调整。Error 颜色也会自动分配到相应色槽中。界面需要的每个颜色角色，都会经历这个过程: 通过元素之间的适当对比，从关键颜色派生出来。这些颜色角色就是您在设计中要映射到的内容。

△不同颜色的浅深色方案

△新增的 Container 及 Tertiary 颜色色槽

Token

Token 可以有多种类型，它可以与某个值配对或引用另一个 Token。在使用了 M3 后，我们就有了调色板、色彩引用和系统 Token 三个概念。您创建的颜色角色是系统 Token，它们可以继承我们在调色板中引用的 Token，包括 Primary、Secondary、Tertiary、Neutral、Neutral Variant 以及 Error 颜色。

设计 Token 使得整个产品更具灵活性和一致性，它允许设计师们为界面中元素指定颜色角色，而非设定一个用于实现的值。生成设计 Token 时可通过确定一个单一事实来源，来节省开发者和设计师的时间。例如，开发者可以引用设计 Token 文件以映射到 Compose 中的主题对象；而如果您在代码中更改了 Token，则可以与设计师共享这些更改，以便设计师在其设计中更新这些值。

△使用 Token 为界面元素指定颜色角色

△相同的 Token，不同的色值

无障碍访问

如下图所示，在亮度接近时，尽管两种颜色的色调并不相同，但调色却非常相似。这样的色彩组合使得对比度过低，而对于有一定程度色盲的人来说更是如此。如果对组件应用这样的色彩组合，则会导致无法满足无障碍访问。因此，为了保证颜色在无障碍层面的可及性，所有成对颜色均存在 60 的亮度差。

自定义扩展

这对于您应用的配色来讲，也许是一种全新思维方式。但我们如今所创建的数字化产品，会反映出现实生活中的产品趋势，这意味着更多个性化的色彩、图案和元素。在我们需要一套配色时，如果您觉得自己的调色板不合适或缺少可用资源时，动态配色可为您提供用户喜欢的、现成的、可无障碍访问的调色板。

我们充分理解，您可能需要品牌配色方案成为用户瞩目的焦点，所以最新的配色系统可以在支持无障碍访问的同时融入应用的颜色背景。您可以使用自己的品牌和设计系统颜色创造出和谐的、可无障碍访问的调色板。M3 支持自定义参数的系统化应用，这有助于您定义和维护品牌。在 Android 应用上，自定义配色方案也可以作为禁用动态配色后的备用方案。不过，无论是使用动态配色，还是自定义配色，要将您的 Android 应用迁移并使用 Material 3，您首先需要迁移到基础颜色或 M3 自定义方案来访问新的 Token。

△M3 基础颜色角色

我们始终鼓励您利用 Material Design 并根据需要进行扩展。M3 的颜色系统可以与自定义组件和品牌风格相结合，通过自动处理关键调整，满足无障碍访问的颜色对比度，保障易读性、交互状态和组件结构。

接下来向您介绍如何将应用迁移至 Material 3。迁移的第一步是引用新 Token 并将其与应用中的组件连接。Material 3 的排版、形状和颜色文件与 Material 2 十分类似，请您确保获取到最新基础颜色或自定义品牌方案并设置值。

M3 中有一些新的 Token 需要注意，例如 Primary、Secondary、Tertiary Container 以及 On Variants 系列颜色。对您来说，管理这些颜色可能非常费力，因此我们创建了一个名为 Material Theme Builder 的工具来为您生成这些内容。您可在网页中打开它并点击 "Custom"，然后点击 "Export for Compose"。

最后，您可将这些文件直接放入 Android Studio，并在必要时更新软件包。这一操作将更新颜色、排版和主题背景文件，更新代码后您即可运行应用来查看组件映射的新品牌主题背景。

val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Sval colorScheme = if (dynamic) {       val context = LocalContext.current       if (dark) dynamicLightColorScheme (context) else dynamicDarkColorScheme (context)} else {       // 使用 lightColorScheme、darkColorScheme 等}

您可以有选择地应用动态配色，并与品牌配色方案同时生效。例如，个人资料或帐户界面可展示个人的用户颜色，使重要的时刻变得个性化；如果您有语义颜色，则不必将其排除在外，而是可以将其包含在准备实现的其他颜色之内。这意味着您可为应用的主要主题、语义上的扩展颜色，甚至品牌颜色使用动态配色；或者您使用自己丰富的颜色库。

△配色方案随用户设置的壁纸变化

结语