1. 简介
上次更新日期：2022 年 4 月 18 日
应用可以采用基准方案、用户生成的动态颜色或品牌颜色中的一系列颜色。
之前的 Material You 颜色实验探讨了如何在设计模型中直观呈现动态颜色，但您也可以使用 Material 主题设置来使用品牌颜色自定义应用。将新颜色系统与品牌颜色搭配使用，可创建易于使用的配色方案，并实现更多动态功能！
学习内容
- 如何使用 Material Theme Builder 创建自定义主题。
- 将自定义主题应用于设计模型。
- 可将动态颜色与自定义颜色相结合。
前提条件
在此 Codelab 中，我们将根据一些基础设计概念进行构建。
- 了解基础设计概念：调色板
- 了解当前的 Android 配色方案和角色
- 了解 Figma
- 可选：完成“在应用中直观呈现动态配色”Codelab
所需条件
2. 开始
设置
首先，您需要访问 Designlab Figma 文件。此实验所需的一切资源都在 Figma 文件中。您可以下载并导入该文件，也可以从 Figma 社区复制该文件。
首先，登录 Figma 或创建一个账号。
从 Figma 社区复制
找到自定义 Material 文件，或在 Figma 社区中搜索“使用 Material Design 可视化应用中的动态配色”。点击右上角的 Duplicate（复制），将该文件复制到您的文件中。
文件版式
浏览文件时，请注意该文件是独立的，开头是一个简介。每个部分被划分为一行链接在一起的画板，其中包含一些核心概念，然后是练习。这些部分和练习相辅相成，应依序完成。
本 Codelab 将详细介绍这些概念并引导您完成练习。请继续阅读本 Codelab，详细了解新的 Material You 功能！
从介绍性画板开始，系统提供了一些按钮，用于按顺序将画板链接到一起。如需访问链接，请点击按钮。
安装 Figma 插件
此 Codelab 主要依赖于新的 Figma 插件生成动态配色方案和令牌。直接从 Figma 社区页面安装 Figma 插件，或在 Figma 社区中搜索“Material Theme Builder”。
3. Material 配色方案
首先，简要介绍一下如何在 Material 中使用颜色以及新的颜色系统如何运作。
颜色用于表现样式和传达含义，无论是用户个人含义、品牌含义还是语义含义。颜色系统能够处理配色方案随着用户输入的更改而呈现的动态变化。色调关系和色相与色度的变化逻辑为灵活应用颜色奠定了基础。
该颜色空间提供了一种生成无障碍浅色和深色配色方案的方法，即通过生成 5 种关键颜色，然后生成色调调色板（其中会选择某些色调步长），从源颜色中提取配色方案。
这种颜色转换技术不仅提供了易于使用的配色方案，还提供了创建品牌配色方案的方法，这些配色方案易于使用，并且与用户生成的配色方案保持一致。
配色方案由 5 种关键颜色生成为色调调色板，以创建易于使用的方案
品牌主题
M3 支持系统地应用自定义参数，以帮助定义和维护传达您品牌的样式。
自定义方案是一种并非从用户设备壁纸派生，而是从应用开发者派生的配色方案。M3 颜色系统和自定义方案是实现应用中的动态颜色的基础。
自定义方案将通过设置必要的令牌（颜色槽）来弥合 M2 和 M3 之间的差距，从而实现轻松迁移并打造更具品牌特色的体验。
将品牌颜色添加到 Material Theme Builder 中
4. 配色方案：强调色
配色方案的基础是五种关键颜色，其中每种颜色都分别对应于包含 13 种色调的单独色调调色板。每个色调调色板中的特定色调会分配给界面中的颜色角色。我们先打开 Material Theme Builder 插件，然后设置第一个强调色：Primary。
如果仅输入主要颜色，系统会将其用作生成整个配色方案的来源。
- 在插件模态框中，点击“自定义”。这会使主题切换为自定义主题。在此实验中，我们将使用已生成的材料主题，不过您也可以根据需要创建新的主题，详情请参阅直观呈现动态颜色。
- 接下来，我们将设置主要颜色。主要颜色可以是主要的品牌颜色，也可以是最常用的主要强调色。其余的关键颜色将根据主要颜色进行填充。这意味着，如果您不需要其他颜色，则无需添加。
5. 构建主题的其余部分
原色用于生成主题，但您也可以使用强调色来支持主要品牌颜色。
- 在插件模态框中，点击“辅助颜色”颜色选择器，添加辅助颜色。辅助角色用于界面中不太显眼的组件，同时扩大了颜色表达的机会。辅助色将在配色方案和应用界面中更新。
- 对“三级”执行相同的操作。第三色角色用于对比强调，可以平衡主色和副色，或者引起用户对某个元素的高度关注。第三色角色留给制造商自行使用，旨在支持产品中更广泛的色彩表达。
- 现在，中性色角色用于界面和背景，以及高强调文本和图标。
提供辅色、第三色和中性色，以完全自定义配色方案。
您的品牌颜色现在将包含在核心配色方案中，并会进行调整以匹配 M3 色彩空间，完全可访问，并且能够作为主题在代码中导出和实现。
6. 应用主题
角色和令牌
每种强调色（主色、辅色和第三色）都会提供一组四种不同色调的兼容色，以便进行配对、定义强调效果和视觉表现。该组由强调色、前景色、容器色和容器前景色组成。
中性角色用于界面和背景，以及高强调文本和图标。
设计令牌表示构成设计体系外观样式的重复小设计决策。令牌会将静态值（例如颜色的十六进制代码）替换为一目了然的名称。设计令牌可将原本缺乏明确关系的样式选择有意义地联系起来。
Figma 插件会创建令牌，并以 Figma 样式的形式输入您自己的源颜色，以便与现有模拟、品牌样式指南甚至设计系统相关联。
设计令牌在颜色角色和实现之间创建了一种通用语言。
颜色层次结构
将颜色角色应用于模型时，请考虑元素的重要性顺序（即层次结构）。此概念不仅有助于将品牌颜色分配给各自的角色，还能将其应用到界面中。通常，饱和度或浓度较高的颜色会先吸引用户的注意力，因此主色角色会映射到更侧重于号召性用语的组件。虽然 Material 主题构建器使用 M3 颜色系统来生成合适的颜色，但如果提供的辅色或第三色的饱和度较高，则生成的颜色会比主色更亮。请考虑您希望用户以什么顺序与界面和内容互动，以便分配颜色角色，并非所有组件都应使用主色。
饱和的纯色最能吸引注意力。
7. 切换到主题
如需将您创建的自定义主题应用于设计，我们需要将模型设置为现有 material-theme 中的令牌。
Material 组件预先映射了角色，可自动与 Material 主题构建器搭配使用。
从 Material Theme Builder 模态框切换到主题。
- 让我们将右侧布局中的所有令牌 (Figma 样式) 设置为使用此主题，方法是选择布局的框架，然后点击“交换”。您会看到所选颜色中的样式前缀更新。
- 并非所有内容都已更新？自定义组件（例如植物护理提示卡片）需要先应用 Figma 样式。选择护理提示容器，在选中该容器的情况下，点击四点状图标以分配样式，然后选择三级容器。对“养护提示”卡片的内容执行相同的操作，但要分配 on-tertiary container。列表中的小标签也是自定义组件，但我们稍后会介绍这些组件！
- Material Design 组件使用默认映射，但您可以尝试使用样式分配，以最适合界面。花点时间尝试不同的颜色层次结构和品牌表达方式。
（代码的导出文件中仅包含主题。如果与工程师合作，请分享模拟数据以传达令牌映射，因为这不会包含在导出内容中）
打开没有主题的插件时，系统会显示一个设置界面，以便您开始使用。“开始”将生成默认基准“material-theme”，作为 Figma 样式组，以连接到您的模拟或与 Material Design 套件搭配使用。
8. 扩展到核心方案之外
现在，您已将品牌色彩主题映射到组件和设计模拟，但您可能还有其他颜色需要纳入。这时，扩展方案便可派上用场，让您能够添加自定义颜色。
这些颜色可以是语义颜色、品牌专属颜色，甚至是产品专属颜色，需要通过颜色算法分配和调整角色，或者保持输入时的状态。
扩展配色方案还引入了将动态（用户生成的）颜色与品牌颜色相结合的可能性。允许核心方案具有个性化的用户影响，同时在扩展方案中设置品牌颜色。这意味着界面元素可以更贴近用户，而品牌颜色可以在应用中发挥更精准的影响。
核心方案可以扩展为包含自定义颜色。
9. 扩展和自定义
通过自定义颜色扩展方案，可以添加语义颜色或其他品牌颜色。
添加了自定义颜色的自定义协议。
- 在插件模态框中，点击关键颜色下方的添加颜色。
- 当前主题将更新为包含新的 Custom0 行。点击颜色框，然后选择一种新颜色，即可更新此颜色。
- 这些扩展颜色可以作为只读样式中的一种样式（即 Custom0）找到。色调和配色方案均存在。让我们通过选择标签背景来将列表中的一些标签与新颜色相关联，并分配添加的颜色角色之一（on-custom0 容器）。
在所选颜色中设置自定义颜色。
- Material Theme Builder 会自动生成颜色，并将其命名为“自定义#”。如需重命名添加的自定义颜色，请在“样式”面板中展开主题的样式组（当未选择任何内容时，系统会显示此面板）。然后，在来源子群组中查找 Custom0。在此处重命名来源会重命名插件模态框中的颜色。
您可以在“样式”面板中找到自定义颜色样式。
- 删除添加的颜色也可以通过类似的方式完成，即右键点击并删除样式。下次打开插件时，添加的颜色将被移除。重命名和删除操作可能不会反映在颜色图中。
10. 恭喜
您已成功学习如何使用 Material Theme Builder 构建自定义色彩主题、将其应用于设计模拟，并添加到配色方案中。新的 Material 3 颜色系统为设计带来了易于使用、灵活且协调一致的颜色，我们迫不及待地想看看您如何使用它们！
如果您有任何疑问，请随时通过 Twitter 上的 @MaterialDesign 向我们咨询。
敬请关注 youtube.com/MaterialDesign，了解更多设计内容和教程