在应用中直观呈现动态配色

1. 简介

上次更新时间：2021 年 9 月 21 日

应用可以采用基准方案、用户生成的动态颜色或品牌颜色中的一系列颜色。

准备好深入了解 Material You 引入的全新动态配色功能。在此实验中，您将创建动态调色板，了解颜色系统的工作原理、创建无障碍调色板的驱动概念，以及使用最新设计工具直观呈现应用动态配色的方法。

学习内容

Material Design 颜色新变化
如何将用户生成的颜色应用到应用中
实用工具

前提条件

在此 Codelab 中，我们将根据一些基础设计概念进行构建。

了解基础设计概念：调色板
了解当前的 Android 配色方案和角色
了解 Figma

所需条件

2. 开始

设置

首先，您需要访问 Designlab Figma 文件。此实验所需的一切资源都在 Figma 文件中。您可以下载并导入该文件，也可以从 Figma 社区复制该文件。

首先，登录 Figma 或创建一个账号。

从 Figma 社区复制

找到使用 Material Design 直观呈现应用中的动态配色文件，或在 Figma 社区中搜索“使用 Material Design 直观呈现应用中的动态配色”。点击右上角的 Duplicate（复制），将该文件复制到您的文件中。

文件版式

浏览文件。您会发现，该文件是独立的，开头是一个简介。每个部分被划分为一行链接在一起的画板，其中包含一些核心概念，然后是练习。这些部分和练习相辅相成，应依序完成。

此 Codelab 将详细介绍这些概念并引导您完成练习。建议您继续阅读本 Codelab，详细了解新的 Material You 功能。

从介绍画板开始，系统提供了一些按钮，用于按顺序将画板链接到一起，点击按钮即可访问链接。

安装 Figma 插件

此 Codelab 主要依赖于新的 Figma 插件生成动态配色方案和令牌。直接从 Figma 社区页面安装 Figma 插件，或在 Figma 社区中搜索“Material Theme Builder”。

3. 颜色概念

什么是动态配色？

Material You 将色彩重新定义为更具个性化的体验。通过动态颜色提取，可实现的颜色体验范围显著扩大。

动态颜色是 Material You 的关键部分，使用此功能时，算法会从用户的壁纸中派生自定义颜色，以将其应用到其应用和系统界面。

亮度

动态颜色适用于各种不可预测的情境。为了管理不同观看情境中的对比度，亮度级别是让颜色成功组合的关键属性，即使产品团队不测试每个特定的颜色组合也不例外。

亮度类似的元素在可辨度方面没有适当的差异，而亮度值不同的元素则更容易区分。

色调调色板

色调调色板是将一种色相（一种动态提取的颜色）转换为一系列相关色调。将一种颜色转换为 13 种色调，可实现将一组色调范围（称为色调调色板）应用于不同的情境，从组件内的单个元素到整个应用主题。

转换为色调范围的颜色。

4. 提取颜色

从种子到方案

我们来看看动态配色如何与 Material 主题构建器搭配使用。

打开 Material Theme Builder。选择动态后，放入图片或从文件浏览器中选择图片。请注意，种子颜色会根据图片进行更新。
系统会从壁纸中提取颜色值，并为其分配一个“类型”，该类型决定了颜色在方案中与其他颜色的关系。这些“关键颜色”（右侧）已更新，可反映这些值。

然后，这些颜色会转换为基于亮度值的色调调色板，从而生成五种色调从浅到深的颜色范围。色调调色板在颜色输出中会相应地标记出来。
从这五个色调范围中，根据亮度将特定色调纳入构成方案的预定义角色。颜色通过设计令牌映射到方案。

根据第三色调范围创建并映射到组件的第三色角色。

5. 主题和令牌

设计令牌让设计师可以在界面中分配元素的颜色角色，而不是分配设定的值，因此可使整个产品中的颜色灵活多变，又具有一致性。令牌充当元素分配的角色与所选角色颜色值之间的桥梁。随着动态配色的推出，设计时考虑颜色角色而非具体颜色变得更加重要。

主题包含颜色和字体方面的 Material Design 令牌，可确保设计和代码具有一个真实来源来表示基准，以及用户生成的调色板和自定义值。

在 Figma 中，插件会将这些令牌生成为样式，这意味着如果您使用生成的样式，就会使用 MD 令牌。

通过设计令牌，调色板中的颜色会映射到浅色或深色方案。

映射系统会为组件中的每个元素分配一个音调。

设置令牌

如需将动态颜色应用于设计，我们需要将模拟对象设置为现有 material-theme 中的令牌。

让我们将布局中的所有令牌（Figma 样式）设置为使用此主题，方法是选择布局的框架，然后点击 swap。您会看到所选颜色中的样式前缀更新。

点击“交换”以更新所选设计中使用的关联主题。

现在，放入一张图片或从文件浏览器中选择一张图片。模型的值将采用从图片中提取的动态颜色。
点击随机播放按钮，系统会随机选择种子颜色进行外推，而不是从图片中提取颜色。这是另一种快速查看动态配色如何影响设计模拟效果的方式。

点击随机播放按钮可随机生成种子颜色。

打开没有主题的插件时，系统会显示一个设置界面，以便您开始使用。“开始”将生成默认基准“material-theme”，作为 Figma 样式组，以连接到您的模拟或与 Material Design 套件搭配使用。

6. 应用于界面

提供的布局是使用 Material Design 套件创建的，该套件利用了 Material Design 令牌，但有几个自定义元素未进行映射。

选择文章卡片。在填充中，将样式（四点图标）设置为 material-theme/surface。（您也可以搜索表面。）
按照类似流程，在卡片中选择类型，然后将类型设置为 on-surface，并将复选框设置为 primary。

设计卡片中使用的 Figma 样式。

接下来，我们将创建更多模拟对象，以迭代其余方案。

创建主题并进行迭代

我们现在已完全连接了一个模型来直观呈现动态颜色，但我们还可以创建多个主题，并将这些主题交换到单独的模型上，以便一次直观呈现一系列动态颜色。

在插件模态框中，点击下拉菜单，然后选择“添加新主题”。

创建唯一的主题名称，然后点击“创建主题”。这还会为创建的每个主题生成新的颜色图表。

通过下拉菜单添加新主题。

添加图片或随机调整种子颜色。
在插件模态框中，选择一个模拟界面（应用界面组件），然后点击 swap（交换）。这会将样式值更新为下拉菜单中显示的当前主题。
复制 (CMD + D) 模拟内容。