A2.06.3Overlays need explicit figure-ground cues设计

浮层必须与底层建立清晰的图底关系

别名: 浮层图底 · modal figure-ground · scrim

概念解释

弹层、菜单、提示框这类浮在页面内容之上的元素,要让用户瞬间读出"这个在上面、那个在下面",就需要给出足够强的图底线索,而不是指望浮层单靠"后加载出来"这一点就自动被当成图形。浮层的目标是让自己稳定地赢得图形的角色,让底层内容稳定地退成背景,不要落入两者势均力敌、被反复重新判断的状态。

机制

决定谁是图形、谁是背景靠的是一组相对强弱的线索——面积、清晰度、是否被遮挡、深度暗示(阴影、模糊)。浮层如果只是简单地叠在原内容之上、没有额外处理,两者在这些线索上可能相差不大:面积也许浮层更小,但底层内容原本就是页面的主体,清晰度、色彩饱和度都不弱于浮层,图底关系就会含糊,用户需要多花一步判断才能确定该看哪一层、该点哪一层。

给底层降低对比度或亮度(压暗、去饱和)、给浮层加投影或明确的边框,都是在人为拉开两者在图底线索上的差距:底层因为清晰度、对比度下降而在这些线索上明显"输"给浮层,图底分离就会稳定倒向"浮层是图形"这一个方向,不再有来回判断的余地。

边界

如果浮层本身面积很大、几乎覆盖整个可视区域,底层内容退为背景的空间被压缩到很小,这种情况下图底关系更多要依赖是否完全遮挡而不是对比度差异来判断,此时压暗、模糊这类手法的边际作用有限。

多层浮层叠加(弹层之上再弹出菜单)时,每一层都要相对于它下面的一层建立图底关系,不能只处理最外层和最底层的关系,中间层级如果被忽略,用户对层级顺序的判断依然会含糊。

怎么落地

  • 浮层出现时,同步压暗或模糊底层内容,让底层在清晰度、对比度上明显弱于浮层,而不是让两者保持同等清晰度叠放在一起。
  • 给浮层本身加一层视觉上的"抬升"信号(投影、明确的容器边界、与底层有色差的背景),不要只依赖它出现的时间顺序来传达层级。
  • 底层内容在浮层展示期间应当被禁用交互,避免用户在图底关系尚未完全稳定的瞬间误触底层元素。
  • 验证办法:在浮层刚出现的瞬间让用户随手点一次,统计点击落在浮层内还是仍然落在底层元素上——落在底层的比例越高,说明图底关系在那个时间点还不够清晰。

延伸

  • 同组A2.06.1 视觉场自动分离为图形与背景 · A2.06.2 图形与背景关系模糊时注意力被消耗
  • 相邻A2.04.2 留白可以替代实线边框界定区域 · A5 注意
  • 站内检索overlay · scrim · elevation · modal figure-ground

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.06.3