1. 概览
在 2019 年 Google I/O 大会上，Material Design 推出了有关如何打造深色主题的指南，以补充您产品现有的 Material 主题。浅色主题非常适合阅读长篇内容，对比度也更高，而深色主题可降低亮度，在黑暗环境中提供安全保障，并最大限度地减少眼睛疲劳。
在 Material 中，深色主题旨在用作默认浅色主题的补充模式，通过细致入微且适合夜间使用的呈现方式，保持应用的独特身份（包括颜色、形状、类型和高度的样式）。
在此设计实验室中，我们将逐步介绍如何使用我们的某个 Material Study 基于现有的 Material 主题创建深色主题。
我们将与 Reply 合作，这是一款旨在实现清晰、易读、直观和易用的电子邮件应用。我们将了解 Reply 的身份，并做出谨慎的决定，在应用中保留品牌元素，同时打造在黑暗环境中仍舒适的主题。
我们还将进一步完善主题，并使用超出基本深色主题的自定义界面颜色，以再次强调 Reply 的独特个性。
所需材料：
2. 收集所需的文件
在开始之前，您需要下载我们的 Figma 入门文件。此文件中包含设计实验室所需的一切内容。
- 下载 DarkTheme DesignLab Kit.fig (7.6MB)
3. 设置您的环境
接下来，您需要设置设计环境。
首先，登录 Figma 或创建一个账号。
登录后，导入您在上一步中下载的文件。为此，只需在 Figma 文件屏幕的左上角找到“导入文件”图标，然后在“下载内容”文件夹中找到相应文件即可。
花点时间浏览一下该文件。它包含浅色主题、基于应用品牌的预构建色调调色板，以及我们将创建的最终深色主题的副本。
- 在另一个标签页中，打开深色主题的 Material Design 指南。在整个设计实验室中，我们都会参考这些准则。
4. 了解商品的身份
在开始为 Reply 设计深色主题之前，我们需要了解 Reply 的一些品牌特征。这将有助于我们根据实际情况选择主题，以便在浅色主题和深色主题中始终如一地体现 Reply 的身份和品牌。
Reply 的品牌非常注重沟通。应用优先考虑功能质量，与没有功能用途的设计元素相比，更注重易用性。
在此设计实验室中，Reply 品牌表达的最重要元素是颜色、字体和形状。
颜色
“Reply”的颜色主题使用深蓝灰色的主色，搭配橙黄色的辅助颜色。
由于次要颜色很少使用，因此 Reply 的界面通常是单色的，使用主色的各种变体。这种柔和的色彩主题可让您轻松阅读内容，而不会分心，并且可让您轻松看到照片头像。
因此，Reply 的辅助颜色在任何使用它的地方都会产生巨大的影响，强调关键操作，并在整个应用中清晰地突出品牌时刻。
类型
作为一款非常注重基于文本的内容和效率的应用，字体和排版是 Reply 表达身份的关键。该应用依赖 Work Sans 来实现完整的字型比例，并使用各种样式，其中包含六种字重的 Work Sans：Light、Regular、Medium、SemiBold 和 Bold。
通过 Work Sans 构建整个字体比例，Reply 实现了始终如一且可预测的排版，同时又具有自然流畅且清晰易读的特点。
据 Work Sans 设计师 Wei Huang 称，该字体系列针对屏幕使用进行了优化。因此，它非常适合高效地朗读电子邮件或其他内容中的文本段落。它松散地基于早期的 Grotesque 字体，因此具有更友好、更人性化的美感，而更宽的字间距则可带来更流畅的阅读体验。
形状
Reply 在形状方面有细致入微的设计，将圆形和尖锐的组件搭配在一起，既强化了电子邮件列表的效率和功能性，又为关键操作和较大的组件赋予了柔和的触感。
- 小型组件
- 中等组件
- 大型组件
按钮和 FAB 等小型组件完全圆角化，而电子邮件卡片和底部应用栏等中型组件则完全方角化。账号切换器和底部动作条等大型组件的边角略微圆润。
这些形状组合在一起，可帮助用户更好地了解自己在应用中的位置、每个组件的设计方式，以及它与界面其余部分的关系。
5. 处理颜色
了解颜色与 Reply 在其默认浅色主题中的品牌表达方式之间的关系后，我们可以对其调色板进行明智的调整，从而打造实用且富有表现力的深色主题。
在 Material 中，颜色系统基于色调调色板。这些调色板使用您的品牌颜色创建一组和谐的变体，这些变体共同构成一个全面的颜色系统，应用于您的整个应用，从而确保样式和可读性。
在 Figma 文件中，您可以看到 Reply 的主要和次要色调调色板。每个调色板上方的浅色箭头表示在“回复”应用的浅色主题中使用的值，而深色箭头表示在深色主题中使用的变体。
使用 Material 设计深色主题时，我们会选择较浅的变体，以便您的颜色系统能够保持表现力并维持适当的对比度，而不会造成眼睛疲劳。饱和度较高的颜色在深色背景上往往会产生视觉上的“振动”，从而使文字更难阅读。浅色调还可在改变高出表面的颜色方面提供更大的灵活性，我们稍后会介绍这一点。
6. 调整界面颜色
现在，我们已经了解 Reply 的色调调色板以及将在深色主题中使用的颜色，接下来就可以开始调整模型中的颜色值了。
在 Material 深色主题中，界面的最底层通常是十六进制值为 #121212 的深灰色。
- 在 Figma 文件中，找到名为“Reply Starter”的画板，然后选择名为“Background”的图层。
- 在屏幕右侧检查器面板的“填充”下方，将颜色值设置为 121212，然后按 Return 键。
- 您的画板应如下所示：
在 Reply 的单色收件箱视图中，电子邮件卡片的颜色比背景略浅，因此我们应在深色主题中对卡片进行相同处理，以保持收件箱的视觉层次结构。
- 在同一画板上，展开名为 "Email cards" 的群组，然后选择所有名为“Email card.”的图层。
- 与之前一样，在检查器面板中选择填充值。将值设置为 121212，然后按 Return 键。
- 现在，仅选择名为“电子邮件卡片叠加层”的图层。借助这些图层，我们可以创建叠加层，以区分电子邮件卡片及其背景。
- 为图层添加填充，并将其设为 FFFFFF，不透明度为 2%。
现在，电子邮件卡片变暗了，我们的文字变得难以辨认。接下来，我们将介绍文字颜色。
7. 调整文字颜色
若要了解深色主题中的文字颜色，请务必先了解在更广泛的 Material Design 系统中，颜色是如何应用于文字的。
Material 组件定义了“on”颜色的概念，之所以这样称呼，是因为这些颜色显示在使用了主色、副色、表面色、背景色或错误色的组件和关键界面之上。“On”颜色主要用于文字，以确保文字在这些 surface 上保持清晰可读。
Material 中的默认“开启”颜色为白色 (#FFFFFF) 和黑色 (#000000)。由于黑色或深色“on”颜色不适合在变暗的界面上使用，因此我们将使用白色。
使用此“on”颜色建立文字层次结构非常简单。高强调文本的不透明度为 87%，中强调文本的不透明度为 60%，已停用文本的不透明度为 38%。
高优先级文本不是纯白色，因为正如第 5 步中所述，#FFFFFF（一种明亮的颜色）在深色背景上会产生视觉上的“振动”。此外，纯 #FFFFFF 文本在深色背景上可能会影响可读性，因为该文本的光线在深色背景上会显得模糊不清。
了解了以上所有内容后，我们来修复深色主题中的文字颜色。
- 我们起始布局中的所有文本都已分组，方便您轻松访问。找到名为 Inbox text 的组，然后展开该组以查看其所有组成图层。
- 选择所有以“Hi -" 开头的图层。这些都是布局中需要重点强调的文字。
- 在检查器面板中，将填充设置为 FFFFFF，并将不透明度设置为 87%。
- 返回到收件箱文本组，选择以 “Med-”开头的所有图层
- 在检查器面板中，将填充设置为 FFFFFF，并将不透明度设置为 60%。
8. 调整组件颜色
在采用 Material 构建的深色主题中，高度较高的界面和组件会使用叠加层着色。表面高度越高，叠加效果就越强、越亮。当背景太暗而无法可靠地呈现深色阴影时，这是一种传达高低和层次感的方式。
底部应用栏
对于 Reply 的底部应用栏（高于收件箱界面的其余部分），我们将应用细微的叠加效果。
- 在图层列表中找到名为 Bottom app bar 的群组，然后展开该群组，以便查看其组成图层。
- 在该群组中找到名为 Surface 的图层，并将其填充值设置为 121212。
- 找到其上方的名为 Surface overlay 的图层，并为其提供 Fill 值 FFFFFF，不透明度为 12%。
悬浮操作按钮
接下来，我们将为 FAB 应用新颜色。为此，请返回我们之前看到的色调调色板，并获取“Reply”辅助颜色的 700 值。
或者，对于您自有应用中影响较小但效果显著的组件，您可以选择饱和度稍高的颜色，前提是该颜色与底层颜色保持适当的对比度。我们将在后续步骤中介绍此选项。
- 在图层列表中找到名为 FAB 的群组，然后展开该群组以查看其组成部分。
- 找到 Surface 图层并将其选中。将其填充颜色设置为 FCC13B。
所选卡片
您可能会注意到，在 Reply 的收件箱中，所选电子邮件卡片的角落也会显示相同的醒目橙黄色。这是另一个强品牌化时刻，但它无法完全融入组件、界面或文本中。
对于这种情况，最好从我们的次要变体颜色（在本例中为 #FFFBE6）开始，然后向后调整，找到既能充分表达情感，又不会分散用户对 Reply 功能美学的注意力。对于“回复”，我们可以继续使用常规的次要变体。
- 选择名为 Earmark 的图层，并将其填充设置为 FFF5A0。
9. 更进一步：自定义界面
正如我们之前所了解的那样，“Reply”中的悬浮操作按钮（或 FAB）是一种高强调度组件，也是应用中具有强烈品牌特征的元素。因此，我们可能会决定在“Reply”的深色主题中保留其颜色表达，方法是使用“Reply”的原始次要颜色。
- 在图层列表中找到名为 FAB 的群组，然后展开该群组以查看其组成部分。
- 找到 Surface 图层并将其选中。将其填充颜色恢复为 F9AA33。
我们可能还希望将 Reply 的主色作为底部应用栏和电子邮件卡片的自定义表面颜色重新引入。为此，我们只需更改叠加层，以使用我们一直在参考的色调调色板中指示的深色主色。
- 在图层列表中找到名为 Bottom app bar 的群组，然后展开该群组，以便查看其组成图层。
- 找到名为 Surface overlay 的图层，并为其指定新的填充值 344955，不透明度为 48%。这样一来，在保持足够对比度的同时，品牌色也会更加醒目。
- 在图层列表中找到名为 Email card overlay 的图层，然后选择所有这些图层。
- 将其填充设置为 ADC0CB，并将不透明度设为 4%。
10. 总结
在 Material 中，深色主题是浅色主题中体现的产品独特身份的周到而有意的延伸。通过简单调整颜色和呈现海拔高度的方式，您刚刚成功创建了第一个 Material 深色主题。恭喜！
请将此设计实验室中的步骤视为一个框架，用于了解和定义您自己的产品的深色主题，并始终牢记品牌和产品的属性和目标。
如需了解有关深色主题的更多指南，请参阅 Material Design 深色主题规范。
如果您有任何疑问，请随时通过 Twitter 上的 @MaterialDesign 向我们咨询。
敬请关注 Google Design YouTube 频道，了解更多设计内容和教程。