颜色、语义与对比
颜色要同时表达品牌气氛、层级和状态。星际翻牌使用深蓝背景、浅色文字、浅绿色主操作与不同的反馈色,让玩家能迅速找到棋盘和下一步。
用语义命名颜色
| 语义 | 案例颜色 | 用途 |
|---|---|---|
| background | #0B1026 | 屏幕底色 |
| surface | #182345 | 卡牌、面板 |
| primary | #B7F36B | 主操作与强调 |
| text | #F5F7FF | 主要文字 |
| muted | #B5C0DF | 辅助信息 |
| success | #7DE3BC | 匹配成功 |
| danger | #FF969E | 失配和风险提示 |
| line | #33436A | 边界与弱分隔 |
green-400 告诉你色值,action/primary 告诉你用途。小项目可以先使用上述语义名,规模增长后再增加基础色和语义别名层。
主操作要有唯一优先级
如果“继续游戏”“设置”“退出”和“领取奖励”全用最亮的绿色,玩家就失去了选择依据。先选定当前屏幕的主要目标,再分配强调色。危险操作应清楚表达后果,不能只靠红色吓人。
半透明填充需要考虑叠加后的颜色。图层 opacity 会影响整个子树,文字也会一起变淡;填充 opacity 只改变该层的一项 paint。调暗面板时要确认你正在修改哪一层透明度。
不只用颜色表达结果
卡牌匹配成功可同时使用边框、勾选和“已配对”;失配可使用另一种边框、叉形标记和短暂反馈。即使玩家分辨颜色困难,也应能理解。
主按钮文字与底色需要实际计算对比,不能因为两者“看起来差很多”就认定合格。对比检查是设计验收方法,不代表小游戏所有复杂背景都能仅靠一个固定比值完成可读性判断。
请审查四种卡牌状态。
保持主操作色的用途稳定;成功和失配同时提供形状或文字线索。
报告文字实际前景与合成背景色,指出透明叠加影响。
每次只调整一类语义色,并检查所有引用对象。
练习与检查
临时把截图转为灰度观察,检查未翻开、已翻开、已配对是否还能区分。再检查降低屏幕亮度时,辅助说明是否仍可读。灰度测试是诊断工具,不能代替色觉与真实设备检查。
依据:变量与样式、W3C 文字对比说明。核查:2026-10-31。