活力配色展开区可读性 · 九方案对比(高还原版)
用例:CPU(活力红 #FA4D56)展开态,行结构逐字节对齐真机——逐核圆环内衬块、P/E 占用格、 指标 stat tile 网格(列距 8/行距 5/footnote 10px)、TOP 5 进程列表。 方案分三族:表面处理(②渐变衰减 ⑤中性蒙版 ⑧边缘强调 ⑨图标徽章), 内容表面(③内衬加深 ④叠加),文字处理(⑥ Vibrancy 补偿——Apple 在 visionOS/iOS 毛玻璃上 提亮前景内容的思路 ⑦同色相文字——彩底上文字趋近背景色相而非中性灰)。 ①为现状对照;唯一变量是 tint/文字的应用方式。
暗色模式
① 现状(对照)
tint 16% 整卡均布;caption 小字直接坐染色底。
② Tint 渐变衰减
行头满浓度,46px 后衰减至近中性;身份留行头,可读性还内容。
③ Tile 内衬加深
行底不动,展开区内衬 8%→13%,小字坐更实的中性面。
④ ②+③ 叠加
渐变衰减 + 内衬加深双保险。
⑤ 中性压色蒙版
展开区叠 24% 黑蒙版压住红相;经典 scrim 手法(图片叠字同款)。
⑥ Vibrancy 文字补偿
表面不动,展开区文字令牌升一档(.68→.82 / .90→.96),Apple 毛玻璃前景增亮思路。
⑦ 同色相文字
展开区文字改红相浅色变体,消除灰字×彩底的边缘色散。
⑧ 边缘强调(面退色)
行面退回中性玻璃,模块色收进图标/分隔线/sparkline + 左侧 2.5px 强调条。
⑨ 图标徽章(面退色)
行面中性,图标坐 20% tint 圆角徽章;辨识度浓缩到一个点。
亮色模式
① 现状(对照)
亮模式 tint 8%,红色相仍让小字发灰。
② Tint 渐变衰减
行头保持浓度,展开区衰减。
③ Tile 内衬加深
内衬加深隔离底色相。
④ ②+③ 叠加
渐变衰减 + 内衬加深。
⑤ 中性压色蒙版
展开区叠 45% 白蒙版压色相。
⑥ Vibrancy 文字补偿
展开区文字令牌升一档(caption→secondary,value→primary)。
⑦ 同色相文字
展开区文字改红相灰/红相深墨。
⑧ 边缘强调(面退色)
中性面 + 左侧强调条。
⑨ 图标徽章(面退色)
中性面 + tinted 图标徽章。