#141414 深灰画布与三层表面阶梯
为什么不用纯黑 #000000?深入分析 OLED 像素拖尾残影、阴影深度保留与 Tuff 三层深灰空间阶梯。
#141414 深灰画布与三层表面阶梯
在暗色模式普及初期,不少产品为了宣称“完全关闭 OLED 像素”,将背景粗暴设为绝对纯黑(#000000)。在实际人机工效学中,这造成了严重的体验灾难。
为什么绝对纯黑 #000000 是个误区?
纯黑 #000000 存在两大不可调和的缺陷:
- 对比度压迫(Glare Contrast):纯白文字在纯黑底板上的反差达到极致的 21:1,在暗光环境中会产生强烈的眩光刺眼感,视网膜极易疲劳。
- 消灭了阴影层级:阴影的物理本质是遮挡漫射光产生的暗区。如果底板已经是绝对的 0 亮度,下层投影直接隐形,整个 UI 的三维深度感被彻底压扁。
OLED 像素点亮延迟(Purple Smearing)
在 OLED 和 AMOLED 屏幕上,#000000 意味着自发光子像素彻底断电关闭。
当内容滚动时,关闭的二极管重新点亮需要数十毫秒的物理响应时间。此时,文字和卡片边缘会在黑色背景上拖出明显的紫色/墨水状拖尾残影(Purple Smearing),在低亮度下尤为明显,极易引起眩晕。
阴影深度(Elevation)的物理要求
若要表达卡片悬浮于底板之上,卡片下方投射的弥散阴影必须能“沉”到底板下方: 因此,底板画布必须保留微弱的基础亮度,才能承载阴影衰减,让界面形成深邃立体的空间纵深。
TuffEx 三层深灰空间阶梯
Tuff 选定 #141414(极深温和碳灰)作为画布基底,并建立了严谨的深灰阶梯:
| 空间层级 | 令牌与色值 | 物理感知 | 典型应用 |
|---|---|---|---|
| 底板层 | --tx-bg-color: #141414 | 吸收环境杂光的深空 | 桌面窗体底板、全局空白视口 |
| 容器层 | --tx-bg-color-overlay: #1d1e1f | 带有微弱漫反射的哑光表面 | 卡片、对话框、抽屉、弹出浮层、Toast 面板 |
| 高亮层 | --tx-fill-color-light: #262727 | 凸起于底盘的操作介质 | Hover 悬停态、选中高亮行 |
暗色下 --tx-fill-color-blank 是 transparent,不承担容器色。
这一色阶完全规避了 OLED 像素点亮延迟,同时为光照与阴影提供了完整的物理呼吸空间。
示例加载中...