(deepseek )Md设计方案标签对应的组件场景

Material Design 3（Material You）的 colorScheme 通过语义化颜色角色为组件提供系统化的配色方案。以下是 MaterialTheme.colorScheme 中核心颜色角色及其典型应用场景的详细说明：

---

1. 主要品牌色组

▶ primary（主品牌色）

• 应用目标：核心交互元素
• 典型组件 ：
  • 主要按钮（Button）
  • 导航栏背景（BottomAppBar）
  • 选中标签页指示器
  • 重要图标（如 FAB）
• 设计原则：界面中最突出的视觉焦点

▶ onPrimary（主品牌色上的内容色）

• 应用目标 ：显示在 primary 色上的内容
• 典型组件 ：
  • 主按钮文字/图标
  • 导航栏图标和文字
  • 浮动操作按钮（FAB）图标

▶ primaryContainer（主品牌容器色）

• 应用目标：次级重要容器
• 典型组件 ：
  • 进度条背景
  • 强调标签背景
  • 中等重要程度的卡片容器

▶ onPrimaryContainer（主容器上的内容色）

• 应用目标 ：primaryContainer 上的内容
• 典型组件 ：
  • 进度条标签文字
  • 强调标签文字
  • 次级卡片内的文本

---

2. 次要品牌色组

▶ secondary（次要品牌色）

• 应用目标：补充性交互元素
• 典型组件 ：
  • 次要按钮（OutlinedButton）
  • 滑块（Slider）的激活部分
  • 开关（Switch）的选中状态
  • 信息提示条（Snackbar）背景

▶ onSecondary（次要色上的内容色）

• 应用目标 ：显示在 secondary 色上的内容
• 典型组件 ：
  • 次要按钮边框/文字
  • 滑块激活状态标签
  • 开关选中状态图标

▶ secondaryContainer（次要容器色）

• 应用目标：低强调度容器
• 典型组件 ：
  • 下拉菜单背景
  • 次级进度条
  • 非活跃标签背景

▶ onSecondaryContainer（次要容器上的内容色）

• 应用目标 ：secondaryContainer 上的内容
• 典型组件 ：
  • 下拉菜单项文字
  • 非活跃标签文字
  • 次级进度条标签

---

3. 表面色组

▶ surface（表面基准色）

• 应用目标：界面容器的基底色
• 典型组件 ：
  • 卡片（Card）背景
  • 对话框（Dialog）背景
  • 导航抽屉（NavigationDrawer）背景
  • 菜单（Menu）背景

▶ onSurface（表面上的内容色）

• 应用目标：常规文本和图标
• 典型组件 ：
  • 大部分正文文字（Text）
  • 列表项图标
  • 未激活的导航栏项

▶ surfaceVariant（表面变体色）

• 应用目标：区分表面层级
• 典型组件 ：
  • 次级卡片背景
  • 输入框（TextField）未激活状态背景
  • 分割线（Divider）颜色

▶ onSurfaceVariant（表面变体上的内容色）

• 应用目标：次级内容
• 典型组件 ：
  • 输入框提示文字（placeholderText）
  • 禁用状态图标
  • 低对比度文本

---

4. 背景与错误色

▶ background（全局背景色）

• 应用目标：屏幕基底色
• 典型组件 ：
  • Scaffold 背景
  • 全屏容器背景

▶ onBackground（背景上的内容色）

• 应用目标：背景上的主要内容
• 典型组件 ：
  • 大标题文字
  • 背景上的高对比度图标

▶ error（错误状态色）

• 应用目标：错误提示相关
• 典型组件 ：
  • 错误提示文本（Text 的 color = MaterialTheme.colorScheme.error）
  • 错误边框（TextField 的 isError 状态）
  • 错误图标（如 Icons.Default.Error）

▶ onError（错误色上的内容色）

• 应用目标 ：显示在 error 色上的内容
• 典型组件 ：
  • 错误提示按钮文字
  • 错误 toast 中的关闭图标

---

5. 特殊状态色

▶ tertiary（第三强调色）

• 应用目标：需要额外强调的次要元素
• 典型组件 ：
  • 徽章（Badge）背景
  • 高亮标签
  • 特殊状态指示器

▶ onTertiary（第三色上的内容色）

• 应用目标 ：tertiary 容器上的内容
• 典型组件 ：
  • 徽章文字
  • 高亮标签内的图标

▶ outline（轮廓色）

• 应用目标：划分视觉边界
• 典型组件 ：
  • 输入框（TextField）未激活边框
  • 分割线（Divider）
  • 卡片（Card）边框

---

使用示例（Jetpack Compose）

Button(
    onClick = { /* ... */ },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
    Text("主要操作")
}

Card(
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "次级内容",
        color = MaterialTheme.colorScheme.onSurfaceVariant
    )
}

---

设计原则

1. 对比度保证 ：onXxx 颜色需与对应容器保持至少 4.5:1 的对比度（WCAG AA 标准）
2. 语义化覆盖 ：通过 colorScheme 自动适配亮/暗主题，避免硬编码颜色值
3. 层级表达 ：使用 surface → surfaceVariant 的渐变表现界面深度

掌握这些颜色角色的语义，可以确保界面在保持品牌一致性的同时，符合 Material Design 的可访问性规范。