📚 课程目录第1章课程介绍与目标

支付UI集成Material 3主题适配教程 - 第1节

1.1 核心概念：Material 3 设计语言

Material 3（亦称 Material You）是 Google 在 Android 12 中推出的第三代设计系统，它在 Material 2 基础上引入了动态配色（Dynamic Color）、形状系统（Shape System）和无障碍动效（Accessible Motion）三大支柱。对于支付类 UI 而言，Material 3 提供了开箱即用的品牌化主题引擎，同时兼顾金融场景必需的清晰度与信任感。

1.1.1 动态配色体系

Material 3 不再使用固定调色板，而是从用户壁纸或品牌色中提取 Seed Color（种子色），通过算法生成五组 Tone（色调）角色：Primary、Secondary、Tertiary、Neutral 及 Error。每组角色又分为 13 个色阶（0‑100），形成完整的色彩系统。

色调角色	用途示例（支付 UI）	色阶范围
Primary	付款按钮、主操作栏、高亮金额	0‑100
Secondary	辅助操作、卡片次级标签	0‑100
Tertiary	品牌跳转链接、特殊促销标签	0‑100
Neutral	背景、分割线、占位文本	0‑100
Error	支付失败提示、风险确认弹窗	0‑100

  实现要点：支付 UI 中 Primary 色调建议使用 40‑60 阶（中高饱和度），避免过亮（>80）导致按钮与白色背景粘连；Error 色调始终使用系统默认的 Red 40（#B3261E），不可从壁纸派生，以保证风险信号的跨平台一致性。

1.1.2 形状系统与层叠语义

Material 3 定义了 small、medium、large 三种形状尺寸，分别对应 4dp / 8dp / 12dp 圆角。支付 UI 中，金额输入框、交易确认对话框、安全键盘等组件需要清晰的形状层级，以引导用户视线完成关键操作。

// 主题配置中的形状映射（Jetpack Compose 示例）
M3Tokens.Shapes.extraSmall = RoundedCornerShape(4.dp)   // 标签 / Chip
M3Tokens.Shapes.small       = RoundedCornerShape(8.dp)   // 输入框 / 按钮
M3Tokens.Shapes.medium      = RoundedCornerShape(12.dp)  // 卡片 / 弹窗
M3Tokens.Shapes.large       = RoundedCornerShape(16.dp)  // 底部表单 / 全屏页

1.1.3 无障碍动效原则

支付 UI 中的动效必须以 「用户控制」为前提：任何闪烁、滑动、缩放都不能干扰支付决策。Material 3 的动效 motion-duration 和 motion-easing 允许开发者统一设定过渡时长（150ms / 250ms / 400ms）和缓动曲线，确保所有交互反馈符合 WCAG 2.1 对癫痫与眩晕的防护要求。

1.2 Material You 与支付 UI 的契合点

Material You 的核心理念是 「个性而不失可靠」。支付场景要求品牌识别与系统原生感并存，而动态配色机制正好解决了「品牌色与系统风格冲突」这一长期矛盾。

品牌色自动派生：将支付企业的主色（如支付宝蓝 #1677FF、微信绿 #07C160）设为 Seed Color，系统自动生成完整色板，无需手动调色。
明暗双模式统一：Material 3 的 Tone 角色在 Light / Dark 模式下保持语义不变（Primary 始终是主操作色），只需切换色阶映射，无需重写组件样式。
无障碍默认内建：色彩对比度（Contrast Ratio）在色阶生成时已满足 AA 级（4.5:1），支付文案、金额数字、错误提示均天然可读。

经验数据：在 2023 年 Google I/O 公布的案例中，使用 Material You 的金融类 App 平均降低 37% 的品牌色自定义代码量，同时通过无障碍审核的通过率提升至 92%。

1.3 主题适配目标与交付标准

本章节设定的支付 UI 主题适配目标分为三层，确保从设计稿到生产环境可验证、可回滚。

层级	适配目标	验收标准
L1 基础令牌	Seed Color → Primary / Secondary / Tertiary / Neutral / Error 五组色板	每个角色至少包含 13 阶色值，且 Light/Dark 两组均通过 AA 对比度
L2 组件映射	按钮、输入框、对话框、底部栏、状态指示器均绑定对应色调角色	组件在 Light/Dark 下正确切换，且动效时长统一为 250ms（反馈类）/ 400ms（过渡类）
L3 支付场景验证	付款确认页、交易记录列表、安全键盘、风险弹窗四个核心界面	用户测试中关键操作（确认付款）的点击热区无偏移，Error 色仅用于失败/风险状态

重要约束：支付 UI 中禁止使用 Tertiary 色作为主按钮色，因为 Tertiary 色阶在 Dark 模式下可能亮度不足；禁止将 Neutral 色阶低于 20 的值用作背景，否则与白色文字对比度 < 3:1。

上述流程图展示了从品牌种子色出发，经过动态色调引擎生成五组色调角色，最终绑定到支付组件的完整适配链路。Error 角色使用独立虚线路径，强调其在金融 UI 中不可从壁纸派生的硬性约束。