第4章 支付UI配色策略：安全色、警示色、品牌色在Material 3中的映射

4.1 支付UI配色的三大语义色系

支付界面中的色彩不仅仅用于视觉装饰，更承担着传递状态、引导操作、建立信任的关键职能。在支付场景下，所有色彩必须围绕三类核心语义进行组织：

4.2 Material 3 色彩映射模型

Material 3 使用 ColorScheme 作为色彩与组件之间的中间层。设计者无需直接为按钮、文字、背景指定色值，而是通过 语义将色值注入组件。支付UI的三类色系在 Material 3 中应映射到以下 组：

4.3 映射关系总览图

下图展示了从「支付语义色系」到「Material 3 」再到「UI 组件」的完整映射链路：

4.4 自定义颜色方案代码实现

在 Jetpack Compose 中，通过定义 lightColorScheme() 或 darkColorScheme() 并传入自定义 值，即可完成支付UI配色的主题注入。

4.4.1 定义品牌色板与语义色板

// 支付UI专用色板
// 安全色系
val SafeGreen         = Color(0xFF2ECC71)
val SafeGreenDark     = Color(0xFF27AE60)
val SafeGreenLight    = Color(0xFFD5F5E3)

// 警示色系
val ErrorRed          = Color(0xFFE74C3C)
val ErrorRedDark      = Color(0xFFC0392B)
val ErrorRedLight     = Color(0xFFFADBD8)

// 品牌色系
val BrandPrimary      = Color(0xFF1A73E8)
val BrandPrimaryDark  = Color(0xFF1557B0)
val BrandSecondary    = Color(0xFF9B59B6)

// 中性色
val SurfaceWhite      = Color(0xFFF8F9FA)
val OnSurfaceDark     = Color(0xFF1C1B1F)
val OutlineGray       = Color(0xFFD0D0D0)

4.4.2 构建支付主题 ColorScheme

// 浅色支付主题
val PaymentLightColorScheme = lightColorScheme(
    // 品牌色 — 主操作 / 强调
    primary          = BrandPrimary,
    onPrimary        = Color.White,
    primaryContainer = BrandPrimary.copy(alpha = 0.12f),
    onPrimaryContainer = BrandPrimary,

    // 安全色 — 成功状态
    secondary        = SafeGreen,
    onSecondary      = Color.White,
    secondaryContainer = SafeGreenLight,
    onSecondaryContainer = SafeGreenDark,

    // 警示色 — 错误/风险状态
    error            = ErrorRed,
    onError          = Color.White,
    errorContainer   = ErrorRedLight,
    onErrorContainer = ErrorRedDark,

    // 表面与背景
    surface          = SurfaceWhite,
    onSurface        = OnSurfaceDark,
    surfaceVariant   = Color(0xFFE7E0EC),
    onSurfaceVariant = Color(0xFF49454F),
    outline          = OutlineGray,
    outlineVariant   = Color(0xFFCAC4D0)
)

// 深色支付主题
val PaymentDarkColorScheme = darkColorScheme(
    primary          = Color(0xFF8AB4F8),
    onPrimary        = Color(0xFF003258),
    primaryContainer = Color(0xFF004A77),
    onPrimaryContainer = Color(0xFFD1E4FF),

    secondary        = Color(0xFF66BB6A),
    onSecondary      = Color(0xFF003910),
    secondaryContainer = Color(0xFF00531A),
    onSecondaryContainer = Color(0xFFA5D6A7),

    error            = Color(0xFFEF5350),
    onError          = Color(0xFF601410),
    errorContainer   = Color(0xFF8C1D18),
    onErrorContainer = Color(0xFFF9DEDC),

    surface          = Color(0xFF1C1B1F),
    onSurface        = Color(0xFFE6E1E5),
    surfaceVariant   = Color(0xFF49454F),
    onSurfaceVariant = Color(0xFFCAC4D0),
    outline          = Color(0xFF938F99)
)

4.4.3 在应用入口注入主题

@Composable
fun PaymentAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        PaymentDarkColorScheme
    } else {
        PaymentLightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = PaymentTypography,   // 自定义字体排版
        shapes     = PaymentShapes,       // 自定义组件形状
        content    = content
    )
}

4.4.4 在组件中使用语义

// 支付成功状态标签 — 使用安全色 
@Composable
fun PaymentSuccessBadge(text: String) {
    Surface(
        color = MaterialTheme.colorScheme.secondaryContainer,
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = Icons.Default.CheckCircle,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSecondaryContainer
            )
            Spacer(Modifier.width(6.dp))
            Text(
                text = text,
                color = MaterialTheme.colorScheme.onSecondaryContainer,
                style = MaterialTheme.typography.labelMedium
            )
        }
    }
}

// 支付风险警示弹窗 — 使用警示色 
@Composable
fun PaymentRiskDialog(
    message: String,
    onConfirm: () -> Unit
) {
    AlertDialog(
        containerColor = MaterialTheme.colorScheme.errorContainer,
        titleContentColor = MaterialTheme.colorScheme.onErrorContainer,
        textContentColor = MaterialTheme.colorScheme.onErrorContainer,
        iconContentColor = MaterialTheme.colorScheme.error,
        onDismissRequest = { },
        title = { Text("交易风险提示") },
        text = { Text(message) },
        confirmButton = {
            TextButton(onClick = onConfirm) {
                Text("立即处理", color = MaterialTheme.colorScheme.onErrorContainer)
            }
        }
    )
}

4.5 调试与验证

配色方案集成后，必须通过以下三个维度验证：

• 语义正确性检查：确保 secondaryContainer 只用于成功/安全状态，error 只用于失败/风险状态，primary 用于品牌主操作。
• WCAG 对比度验证：使用 ContrastChecker 工具确认 onPrimary 与 primary、onError 与 error 的对比度 ≥ 4.5:1（AA 级），≥ 7:1（AAA 级为佳）。
• 深色模式回归：在深色主题下重新验证所有语义 的可读性，避免深色背景 + 深色文字。

// 对比度调试辅助函数
fun checkContrast(foreground: Color, background: Color): Double {
    val relativeLuminance = { c: Color ->
        val r = c.red / 255.0
        val g = c.green / 255.0
        val b = c.blue / 255.0
        val linearize = { v: Double ->
            if (v <= 0.03928) v / 12.92 else Math.pow((v + 0.055) / 1.055, 2.4)
        }
        0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b)
    }
    val l1 = relativeLuminance(foreground)
    val l2 = relativeLuminance(background)
    val lighter = maxOf(l1, l2)
    val darker  = minOf(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)
}

// 使用示例
val ratio = checkContrast(
    foreground = PaymentLightColorScheme.onSecondaryContainer,
    background = PaymentLightColorScheme.secondaryContainer
)
println("✅ 安全色对比度: $ratio")  // 应 ≥ 4.5

4.6 常见错误与性能优化

4.6.1 性能与稳定性优化

4.6.2 推荐配色调试工具

• Material Theme Builder (Figma 插件) — 可视化编辑 并导出 Compose 代码
• Android Studio Layout Inspector — 运行时查看实际组件的 colorScheme 属性
• Accessibility Scanner (Google Play) — 自动检测对比度不足和语义标签缺失