Google Material 3 的颜色系统（Material You）通过动态生成个性化的配色方案，使应用程序能够适应用户的个性化体验和设备外观。Material 3 提供了全新的色彩体系，以更加灵活和现代的方式使用色彩，使得应用程序的设计既美观又直观。以下是 Material 3 颜色系统的配色方案及其含义详解：
1. 颜色角色（Color Roles）
在 Google Material 3 的颜色系统中，每个颜色角色都承担着特定的视觉功能，能够帮助用户更好地理解和操作界面内容。以下是各个颜色角色的详细说明及其在界面中的使用建议：
1. Primary（主色）
• 功能：主色是应用的品牌色，代表应用的主要色调。它通常用于高亮显示主要操作按钮、标题栏或其他关键的界面元素。
• 用法：主色是用户最常看到的颜色，通常用于让用户注意到应用的主要交互区域，比如按钮、标签、标题等。
• 示例：在一个电商应用中，主色可以用在“购买”按钮或导航栏上，确保用户能迅速识别关键操作。
2. On Primary（主色上的颜色）
• 功能：On Primary 是用于主色元素上的文本和图标的颜色。为了确保清晰的对比，它通常是主色的对比色。
• 用法：通常用在主色按钮、主色背景的文本和图标上，以便文本或图标在主色背景上更清晰地显示。
• 示例：假设主色是蓝色，那么 On Primary 通常是白色，以保证文字在蓝色背景上易于阅读。
3. Secondary（辅助色）
• 功能：辅助色为主色提供支持，增强界面的层次感。它可以用于补充主色，给次要的按钮、标签或次级功能元素添加额外的视觉区别。
• 用法：通常用于不如主色重要但需要区别的内容或操作。比如，在一个多步骤的表单中，辅助色可以用来表示次要步骤。
• 示例：在社交媒体应用中，辅助色可以用在评论、回复等次要操作上，以区别于更重要的“点赞”或“发布”操作。
4. On Secondary（辅助色上的颜色）
• 功能：用于辅助色背景上的文本和图标的颜色。与 On Primary 一样，它的设计目的是在辅助色背景上保证文本和图标的清晰度。
• 用法：在使用辅助色的区域中（如次要按钮或标签），On Secondary 确保文本或图标不会被背景色掩盖。
• 示例：如果辅助色是浅灰色，那么 On Secondary 通常会选择深色，以增强可读性。
5. Tertiary（三级色）
• 功能：三级色比主色和辅助色更少使用，用于强调一些不常用或可选的功能，帮助增加界面的视觉层次。
• 用法：三级色通常用于一些装饰性的元素或状态标签，帮助用户区分信息层级。
• 示例：在健康类应用中，三级色可以用来表示次要的健康指标，如水分摄入量、睡眠时间等。
6. On Tertiary（三级色上的颜色）
• 功能：用于三级色背景上的文本和图标，确保在三级色上有足够的对比度。
• 用法：当三级色用作背景时，On Tertiary 用于确保文本或图标的可读性。
• 示例：如果三级色是浅橙色，那么 On Tertiary 通常会选择深色，以确保文本在橙色背景上清晰可见。
7. Surface（表面色）
• 功能：表面色用于界面的背景层，是界面中的基础色，用于提供内容的承载空间。
• 用法：表面色一般用于大面积的背景色块，比如卡片、对话框、底部导航栏等，是界面中的“表层”部分。
• 示例：在新闻应用中，文章的卡片背景可能是表面色，这样可以在不影响阅读体验的前提下，让内容更加突出。
8. On Surface（表面色上的颜色）
• 功能：用于表面色背景上的文本和图标，确保其可读性。
• 用法：一般用于表面色背景上的内容文字或图标，通常对比度较高，以确保清晰的可见度。
• 示例：表面色通常是浅灰色，而 On Surface 可以是深色的文本，以确保用户可以轻松阅读文字内容。
9. Background（背景色）
• 功能：背景色是应用的全局背景色，用于界面的主要底层区域。
• 用法：通常作为整个应用或页面的背景色，使页面内容层级更清晰。
• 示例：在大多数应用中，背景色可能是白色或浅灰色，为内容提供清晰的展示基础。
10. On Background（背景色上的颜色）
• 功能：用于背景色上的文本和图标，使其在背景上有足够的对比度。
• 用法：在背景色区域内（比如主界面、列表背景）使用的文本或图标的颜色，确保其清晰易读。
• 示例：如果背景色是白色或浅色，则 On Background 通常是深色，以便用户能轻松看到文本和图标。
11. Error（错误色）
• 功能：错误色用于标识错误信息和警告内容，确保用户能够识别界面中的错误或警告提示。
• 用法：通常用于错误提示、验证失败的输入框或警告信息的背景。
• 示例：在填写表单时，如果用户输入了不正确的信息，错误色会用来突出显示输入框边框，以提醒用户纠正输入。
12. On Error（错误色上的颜色）
• 功能：用于错误色背景上的文本或图标，确保内容清晰可读。
• 用法：在错误提示背景中，用于显示文字或图标，以便用户快速识别错误内容。
• 示例：如果错误色是红色，则 On Error 通常是白色或浅色，确保错误信息的可读性。
13. Outline（轮廓色）
• 功能：轮廓色用于分隔不同的内容区域，起到边界或边框的作用。
• 用法：通常用作边框颜色或分割线，使界面在视觉上更有结构。
• 示例：在卡片组件或分隔线中使用轮廓色，可以帮助用户更清晰地看到界面内容的分区。
小结
Material 3 中的颜色角色设计使得颜色使用更加系统化，并能够根据不同的场景和使用需求灵活组合应用。
2. 颜色组合（Color Schemes）
色值组件对应关系
Material 3 中的颜色组合基于动态生成的配色系统，支持从用户的壁纸或主题中提取颜色，从而产生个性化配色方案。这些颜色组合包括浅色主题和深色主题，并且可以自定义。每个主题可以适配以下颜色组合：
• Light Theme（浅色主题）：背景为浅色，强调色和文本颜色较深，适合光线充足的场景使用。
• Dark Theme（深色主题）：背景为深色，强调色和文本颜色较浅，适合低光环境，降低用户视觉疲劳。
在 Material 3 中，颜色角色不仅是简单的颜色定义，还被应用于不同的组件和界面的具体位置，使得整个应用界面的一致性和层次感更强。以下是颜色角色如何在常见 Material 组件中应用的详细分类描述：
1. 按钮（Button）
• Primary Button（主要按钮）
• 背景颜色：Primary，使按钮在界面中突出。
• 文本或图标颜色：On Primary，确保文字和图标在主色背景上清晰可见。
• Secondary Button（辅助按钮）
• 背景颜色：Secondary，区别于主要按钮，用于次级操作。
• 文本或图标颜色：On Secondary，保证文本在辅助色背景上的可读性。
• Tertiary Button（三级按钮）
• 背景颜色：Tertiary，用于一些不常用的操作或装饰性按钮。
• 文本或图标颜色：On Tertiary，确保在三级色背景上文本清晰可读。
• Error Button（错误按钮）
• 背景颜色：Error，用于错误或警告操作。
• 文本或图标颜色：On Error，确保用户识别错误信息。
2. 卡片（Card）
• 背景颜色：Surface，通常卡片组件的背景色采用表面色，以突出显示卡片内容。
• 内容文本或图标颜色：On Surface，确保卡片中的文本或图标在表面色背景上清晰易读。
• 边框或分隔线颜色：Outline，用于卡片的边框或分隔线，以增强界面的层次感和结构。
3. 文本框（Text Field）
• 填充颜色：Surface 或 Background，文本框的填充背景通常与表面色或背景色一致，减少干扰。
• 文本颜色：On Surface，确保用户输入的文本内容清晰可见。
• 提示文字颜色：On Surface 的较浅色变体，用于提示文本（Hint Text），与输入内容区分开。
• 错误边框颜色：Error，当输入错误时，文本框边框会变成错误色，帮助用户识别需要修改的区域。
4. 对话框（Dialog）
• 背景颜色：Surface，对话框的背景通常采用表面色，确保视觉上与主界面区分开。
• 标题和内容颜色：On Surface，确保对话框中的文本在表面色背景上清晰可见。
• 按钮颜色：通常使用 Primary 或 Secondary，根据按钮的主要性或次要性进行设置。
5. 导航栏（Navigation Bar）
• 背景颜色：Surface 或 Background，根据导航栏在界面中的层次使用表面色或背景色。
• 图标和文本颜色：On Surface，确保导航栏中的图标和文本在背景上有足够的对比度。
• 选中项颜色：Primary，用于选中项的高亮显示，帮助用户区分当前选择的页面。
6. 顶部应用栏（Top App Bar）
• 背景颜色：Primary 或 Surface，通常顶部栏会使用主色或表面色，使其在界面中突出。
• 标题和图标颜色：On Primary（如果背景是主色）或 On Surface（如果背景是表面色），确保标题和图标在顶部栏中清晰显示。
• 返回或菜单按钮颜色：On Primary 或 On Surface，根据顶部栏的背景色调整，确保与背景对比明显。
7. 底部导航栏（Bottom Navigation Bar）
• 背景颜色：Surface，底部导航栏通常使用表面色背景，作为应用的基础结构色调。
• 选中项图标和文本颜色：Primary，突出选中的导航项。
• 未选中项图标和文本颜色：On Surface 的浅色变体，用于未选中的项目，提供视觉上的区分度。
8. 浮动操作按钮（FAB - Floating Action Button）
• 背景颜色：Primary 或 Secondary，通常会使用主色或辅助色以引起用户注意。
• 图标颜色：On Primary 或 On Secondary，根据背景色调整，使得图标在 FAB 上清晰可见。
• 错误状态 FAB：Error 和 On Error，如果 FAB 代表错误或重要警告操作，可使用错误色强调。
9. 列表项（List Item）
• 背景颜色：Surface 或 Background，根据列表项的位置和层级选择表面色或背景色。
• 标题和副标题颜色：On Surface，确保文本清晰显示在表面色背景上。
• 选中状态颜色：Primary 或 Secondary，突出显示选中的列表项，帮助用户识别当前选项。
10. 切换控件（Switch, Checkbox, Radio Button）
• 选中状态颜色：Primary，用于开关、复选框和单选按钮的选中状态，表明当前选中项。
• 未选中状态颜色：On Surface 的浅色变体，表示未选中的控件状态。
• 错误状态颜色：Error，用于控件的错误状态，特别是当需要警示用户当前选择不符合预期时。
11. 分隔线（Divider）
• 颜色：Outline，分隔线通常采用轮廓色，用于不同内容区域的分割。
• 用法：分隔线使用较浅的颜色，不会打扰用户注意力，同时提供视觉上的内容分隔。
颜色角色在组件中的总结****
Material 3 的颜色角色在各个组件中的应用有助于建立清晰的界面层次，同时通过不同的颜色角色（如 Primary、Secondary、Surface 等）确保用户能直观地分辨各个元素的功能和优先级。这种颜色系统还通过动态生成机制，实现了在不同主题下保持视觉一致性，提升了用户体验。
3. 颜色层次（Tonal Hierarchy）
Material 3 的颜色系统还引入了“色调层次”概念。每个颜色角色具有不同的色调（Tonal Variants），这些色调以不同的亮度和饱和度呈现，使得设计更具层次感。通常一个颜色角色会有 10 到 12 种色调变体，例如主色的浅色、中性色和深色版本。这种设计方式不仅增加了设计的一致性，还可以让设计师根据不同的使用场景灵活选择颜色深浅。
4. 颜色语义（Color Semantics）
每个颜色角色在界面中的作用会影响其语义意义。例如：
• Primary 和 Secondary：这些颜色通常用于积极或正面的操作，例如确认和提交。
• Error：表示错误或警告，帮助用户识别可能的问题。
• Surface 和 Background：这些颜色被用作页面的基础色调，以确保内容层级清晰，用户可以轻松识别界面区域。
5. 动态配色（Dynamic Color）
Material 3 提供了一种称为“动态配色”（Dynamic Color）的特性，可以从用户的壁纸中提取颜色并应用到整个应用程序中。这样，应用的配色会和用户的壁纸或设备主题相匹配，增强个性化体验。这种动态配色功能使得应用能够适应用户的偏好，并确保视觉一致性。
6. 使用 Material 3 的配色方案
在使用 Jetpack Compose 和 Material 3 时，开发者可以使用 MaterialTheme.colorScheme 来访问不同的颜色角色，例如：
// 使用主色和表面色
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
),
onClick = { */* Action */* }
) {
Text("点击我")
}
总结
Material 3 的颜色系统通过颜色角色、色调层次、动态配色等特性，为应用程序提供了更灵活且易于个性化的颜色设计。通过这种颜色系统，开发者可以更轻松地创建现代、符合用户偏好的视觉体验。
