Material 3支付主题适配实战指南 - 第1节
1.1 设计 体系
Material 3 的设计 是主题适配的原子单元。在支付场景中， 将品牌色、形状、排版等视觉属性抽象为语义化键值对，实现跨平台、跨组件的样式统一。
1.1.1 分类与支付映射
Material 3 将 分为三个层级：参考 （原始值）、系统 （语义别名）和组件 （具体部件样式）。支付场景主要使用系统 与组件 ：
| 类型 | 支付场景用途 | 示例值 |
|---|---|---|
| 颜色 | 品牌主色、交易状态色（成功/失败/进行中） | --md-sys-color-primary: #1a73e8 |
| 形状 | 支付卡片圆角、安全键盘按钮形状 | --md-sys-shape-corner-medium: 8px |
| 排版 | 金额字号、对账单标签字重 | --md-sys-typescale-title-large: 22sp |
| 间距 | 表单输入区间距、交易列表项间距 | --md-sys-spacing-unit: 4dp |
关键原则：支付主题的 值必须同时满足 WCAG 2.1 AA 级对比度 与 品牌色可访问性，避免在金额、密码输入等关键区域使用低对比度配色。
1.1.2 定义示例（YAML）
以下是一个面向支付收银台场景的 配置文件片段，展示了从参考值到组件 的映射链：
# tokens/payment-tokens.yaml
# 参考 层
ref:
colors:
brand-blue: "#1565C0"
success-green: "#2E7D32"
alert-red: "#C62828"
neutral-bg: "#F8F9FA"
# 系统 层（语义化）
sys:
color:
primary: "{ref.colors.brand-blue}"
positive: "{ref.colors.success-green}"
negative: "{ref.colors.alert-red}"
surface: "{ref.colors.neutral-bg}"
# 组件 层（支付专用）
comp:
payment-button:
bg-color: "{sys.color.primary}"
text-color: "#ffffff"
corner-radius: "{sys.shape.corner-medium}"
transaction-status-badge:
success-bg: "{sys.color.positive}"
fail-bg: "{sys.color.negative}"
pending-bg: "#FFF3CD"
工程注意： 的命名应采用
--md-sys-* 或 --md-comp-* 前缀，保持与 Material 3 设计工具的自动同步能力。支付场景中避免使用硬编码色值。
1.2 支付主题专用色板
支付主题色板在 Material 3 的 动态颜色 基础上，叠加了金融场景特有的安全语义与品牌识别需求。色板由 主色、辅色、中性色 和 状态色 四部分组成。
1.2.1 色板构建原则
- 品牌优先：主色直接取自金融机构的品牌色，确保收银台、账单页面的品牌一致性。
- 语义固化：交易成功/失败/进行中三种状态的颜色不可随主题切换改变，保持用户操作记忆。
- 无障碍强制：所有支付关键元素（金额、按钮、输入框）的对比度必须 ≥ 4.5:1（AA 级）。
1.2.2 色板与 的映射规则
色板中的每个色值都通过 表达式引用，而非直接硬编码。下表展示了支付专用色板的核心配置：
| 色板角色 | 引用 | 典型色值（Light） | 典型色值（Dark） |
|---|---|---|---|
| 主色（Primary） | --md-sys-color-primary | #1565C0 | #90CAF9 |
| 辅色（Secondary） | --md-sys-color-secondary | #00897B | #80CBC4 |
| 成功色（Positive） | --md-sys-color-positive | #2E7D32 | #66BB6A |
| 危险色（Negative） | --md-sys-color-negative | #C62828 | #EF5350 |
| 警告色（Warning） | --md-sys-color-warning | #F9A825 | #FFD54F |
| 背景（Surface） | --md-sys-color-surface | #F8F9FA | #121212 |
适配陷阱：直接使用 Material 3 默认动态色板可能导致支付场景的状态语义混淆。例如，动态主题可能将“成功”与“主色”混同。必须通过
--md-sys-color-positive 等专用 固化语义。
1.3 适配的目标与边界
支付主题适配不是简单的“换肤”，而是在 Material 3 框架下，兼顾品牌、无障碍、跨平台与安全约束的系统工程。
1.3.1 适配目标
- 跨平台一致性：同一支付产品在 Android、Web、iOS 上呈现相同的 解析结果。
- 无障碍合规：所有支付操作元素满足 WCAG 2.1 AA 级，金额输入等关键区域建议达到 AAA 级。
- 品牌识别强化：收银台、支付成功页、账单详情等核心页面的品牌色覆盖率 ≥ 80%。
- 动态主题兼容：用户切换系统深色模式时，支付主题色板自动切换且语义色不变。
1.3.2 适配边界
| 边界维度 | 约束说明 | 降级策略 |
|---|---|---|
| 设备能力 | 不支持动态颜色API的设备（API < 31） | 回退到静态 配置文件 |
| 品牌锁定 | 主色不可被用户自定义主题覆盖 | 使用 --md-sys-color-primary-fixed 锁定 |
| 第三方SDK | 支付 SDK 内部可能使用独立主题 | 通过 CSS Shadow Part 或组件 覆盖 |
| 无障碍强制 | 对比度不得低于 4.5:1 | 自动对比度检测 + 警告日志 |
| 深色模式 | 所有语义色必须拥有深色变体 | 色板必须提供 Light/Dark 两套值 |
边界决策原则：当支付安全要求与 Material 3 设计指南冲突时，支付安全优先。例如：密码输入框的字体不可跟随系统字体 缩放，必须使用等宽字体且禁用字号自适应。