Apple Human Interface Guidelines Colors

iOS System Colors

平台分流

• Android：下文 hex 表 → values/colors.xml / values-night/colors.xml
• iOS：禁止在业务 UI 使用本表 hex；改用 SwiftUI Color（见 iOS SwiftUI 实施方案）

iOS SwiftUI 实施方案

iOS 全部界面语义色与主题色走 SwiftUI Color — context-dependent，渲染前由系统解析，自动适配浅色/深色/增对比度。

创建颜色的优先级

1. Color.primary / Color.secondary — 主/次级文字
2. Color.cyan / Color.pink / Color.blue / Color.red 等标准 palette
3. Color(uiColor: .systemBackground) 等 — 背景、分割、grouped 列表（SwiftUI 无对应静态成员时）
4. Color("Name") — 仅 VIP/品牌等无系统等价色

禁止（业务 UI）：Color(red:)、Color(hex:)、自定义 token 转发系统语义色、UIColor.systemCyan 作主题色。

主题色三档（App 设置）

@EnvironmentObject private var appearance: ThemeStore

.tint(appearance.accentColor)
.background(appearance.accentColor)

// ThemeStore.AccentTheme
var accentColor: Color {
    switch self {
    case .cyan: Color.cyan
    case .pink: Color.pink
    case .blue: Color.blue
    }
}

业务 View 直接写 SwiftUI Color；主题色唯一来源是应用级 ThemeStore（或等价的 ObservableObject），不新增二次封装层。

语义色（View 内直接用）

着色 API

• 用 .foregroundStyle(...)、.tint(...)，新代码不用 .foregroundColor
• 不缓存 color.resolve(in:) 的 RGB
• 避免 Theme.textPrimary 等语义色二次封装；优先在 View 内直接写 SwiftUI Color

白天模式 (Light Mode) — Android hex 参考

彩色系

VIP配色 (opn48 design)

灰色系

黑白系

夜间模式 (Dark Mode)

彩色系

VIP配色 (opn48 design)

灰色系

黑白系 (反向)

使用方式

iOS — SwiftUI Color

不要把下方 hex 写入 Swift。主题色与语义色直接在 View 里写 SwiftUI API：

.foregroundStyle(Color.primary)
.background(Color(uiColor: .systemBackground))
.tint(appearance.accentColor)   // Color.cyan / .pink / .blue

Android hex 表仅用于 Android 资源与跨端设计对照。

Android (values/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 白天模式颜色 (默认) -->
    <color name="sys_red">#FF3B30</color>
    <color name="sys_blue">#007AFF</color>
    <!-- ... 其他颜色 -->
</resources>

Android 夜间模式 (values-night/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 夜间模式颜色 -->
    <color name="sys_red">#FF453A</color>
    <color name="sys_blue">#0A84FF</color>
    <!-- ... 其他颜色 -->
</resources>

使用场景

1. UI组件着色: Button、Icon、Badge等使用sys_blue等品牌色
2. 状态指示: 成功(green)、警告(yellow)、错误(red)
3. 文字颜色: 标题(sys_black/white)、次要文字(sys_gray1/2)
4. 背景色: 卡片(sys_gray6)、分割线(sys_gray5)
5. VIP特权: vip_golden用于VIP标识，vip_bg用于VIP专区背景

透明度颜色

基于已有配色，在16进制RGB前增加两位十六进制数表示透明度。

跨平台透明度格式差异

格式说明

• 透明度通用规则: 00 = 完全透明，FF = 完全不透明
• Android (ARGB): 透明度在前，RGB在后
• iOS / CSS / Web (RGBA): RGB在前，透明度在后

透明度对照表

跨平台转换示例

以 50% 透明度 的 #007AFF (蓝色) 为例：

命名规则

格式: {原色名}_{透明度百分比}

例如: sys_red_20 表示20%透明度的sys_red

白天模式示例

夜间模式示例

Android使用示例

<!-- values/colors.xml (白天) -->
<color name="sys_red_20">#33FF3B30</color>
<color name="sys_blue_50">#80007AFF</color>

<!-- values-night/colors.xml (夜晚) -->
<color name="sys_red_20">#33FF453A</color>
<color name="sys_blue_50">#800A84FF</color>

CSS / Web 使用示例

/* CSS 变量方式 (推荐) */
:root {
    --sys-red: #FF3B30;
    --sys-red-50: rgba(255, 59, 48, 0.5);
    --sys-blue: #007AFF;
    --sys-blue-50: rgba(0, 122, 255, 0.5);
}

/* 直接使用 */
.button-overlay {
    background-color: rgba(255, 59, 48, 0.2);
}

/* 使用8位十六进制 (iOS/CSS兼容) */
.card-overlay {
    background-color: #FF3B3033; /* 20% 透明度 */
}

Flutter 使用示例

// 使用ARGB格式 (与Android一致)
Color sysRed20 = Color(0x33FF3B30);
Color sysBlue50 = Color(0x80007AFF);

// 使用RGBA参数
Color sysBlue50Alt = Color.fromARGB(128, 0, 122, 255);

使用场景

1. 遮罩层: 半透明黑色/白色覆盖层
2. 图标填充: 图标使用半透明颜色作为填充
3. 背景装饰: 卡片弱化背景色
4. 边框/分割线: 使用低透明度颜色作为细微分割

注意事项

1. Android XML: 透明度放在RGB前面 (ARGB)
2. iOS / CSS: 透明度放在RGB后面 (RGBA)
3. Flutter: Color() 构造函数使用 ARGB 格式 (0xAARRGGBB)
4. Web 开发: 推荐使用 rgba() 或 hsla() 函数，兼容性好
5. 设计工具: Sketch/Figma 导出通常是 RGBA 格式，Android 使用需转换