F5.08.1Elevation设计研究

深色下用表面明度而非阴影表达高度

别名: 深色海拔 · 表面叠加 · drop shadow

概念解释

浅色主题里,卡片底下那圈软阴影在说「这块浮起来了」。把同一圈阴影搬到深色主题,不是看不见,就是变成一圈脏边。深色里表达高度要改表面明度:浮起来的那一层比底下更亮,像暗室里被灯照到的台面,而不是再在黑洞里投一块更黑的影子。

机制

阴影是把周围再压暗。深色表面已经靠近显示下限,没有多少更暗的余量;勉强加上去的那点黑,要么低于可辨差,要么像脏污。即使用浅色外发光去「代替阴影」,外观也更接近焦点环或选中态,高度语义被借用走了。

暗环境里的深度更多靠受光:离光源近、或被当成上层的表面更亮。把海拔写成一层半透明白叠在底色上,高度变化的是 L*,不是投影半径。这和「深色不是反色」是两件事——即使色相已经正确重映射,若高度仍靠阴影,层还是会粘在一起。

怎么研究

让观察者给界面元素排「谁在上面」,比较阴影版与表面加亮版。自变量:阴影可见度、表面 ΔL*、是否同时有描边。因变量:排序正确率、是否把发光当成选中。深色适应后再测一次,刚从浅色主题切过来的人会高估阴影的作用。

边界

  • 浅色主题里阴影仍然有效,不要把这条倒回去禁浅色阴影。
  • 真黑底上加亮很明显,中灰底上同样的 ΔL* 会弱很多,高度系统要跟窗体底走,不能写死一枚叠加白。
  • 高对比模式会去掉软阴影,也会压平许多中间明度;高度要另找描边或间距,不能指望这套加亮还在。

怎么落地

  • 深色海拔用表面叠一层中性白(或略亮的表面色),阴影只当极弱的辅助,不能当唯一线索。
  • 不要用彩色发光表示高度,免得和焦点、错误抢语义。
  • 模态、菜单、卡片各自规定一种表面,而不是复制浅色主题的 shadow-8。
  • 验证办法:把阴影图层关掉,只留表面色,问还能不能说出谁叠在谁上面;说不出,高度就还没迁到明度上。

延伸

  • 同组F5.08.2 层级越高表面越亮 · F5.08.3 层级数量受可辨明度差限制
  • 相邻F5.07 深色模式的重映射 · F5.12 高对比模式
  • 站内检索elevation · surface overlay · dark theme shadow

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F5.08.1