跳到主要内容

颜色、语义与对比

颜色要同时表达品牌气氛、层级和状态。星际翻牌使用深蓝背景、浅色文字、浅绿色主操作与不同的反馈色,让玩家能迅速找到棋盘和下一步。

用语义命名颜色​

语义案例颜色用途
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。