E4.12.3popover must not occlude trigger设计研究

弹出层不得遮挡其触发对象

别名: 弹出层挡住按钮 · 触发器可见 · 锚点遮挡 · occluded trigger

概念解释

弹出层开着时,把它唤出来的那个控件仍应看得见。不遮挡触发器(not occluding the trigger)让人对照「我开的是哪一个」和层里的内容,也能再点一次触发器把层关掉。层盖住自己的按钮,归属线索被层自己吃掉,关闭还常常变成点猜。它与翻转不同:翻转是为了整层可见;这条是为了让原点可见。两者有时打架,可见原点优先于偏好方向。

机制

锚定靠相邻,相邻要求两边都在。触发器被盖住之后,相邻变成「层底下好像有个按钮」,空间归属只剩记忆。一排相同按钮里,记忆很快把层安错到邻钮上。触发器还常常承担关闭:再点一次即关。被盖住后,这次点击打在层上,可能选中一项、可能什么都不做,就是关不掉。箭头若画在层上却指向一块被盖住的空白,箭头也失去了所指。翻转到另一侧通常就能让出触发器;若所有方向都会盖住(层太大),应缩小层或改用不会盖住原点的容器,而不是接受原点消失。

怎么研究

打开层后看触发器暴露的像素、能否再点触发器关闭、以及在按钮行里是否指认错误。自变量:层的尺寸、偏好方向是否盖住触发器、翻转是否被允许改方向来让出触发器。因变量:触发器可见面积、二次点击关闭成功率、归属错误。禁止翻转且层向触发器内侧展开时,关闭成功率应下降。

边界

全宽的底部动作面板本来就不靠按钮相邻来声明归属,触发器被挡住是另一种结构,不按弹出层这条约束来。工具提示几乎总是避开触发器,但提示不是弹出层。触发器是一条很长的输入框、层从框的下缘展开时,框仍可见,不算遮挡;层若向上反盖住输入文字,正在对照的值被挡住,就违规。动画过程中的短暂重叠可以容忍,停留态不行。

怎么落地

  • 碰撞计算把触发器矩形当作禁止覆盖区,优先选不会相交的方向。
  • 保留再点触发器即关;该点击不得落到层的选项上。
  • 层大到任何方向都盖住触发器时,改小内容或换容器,不要把原点藏起来。
  • 验证:层停留时截图,触发器应完整可见;再点它应关闭层而不是激活层内第一项。

延伸

  • 同组E4.12.1 弹出层需锚定到触发元素 · E4.12.2 边界处需自动翻转方向
  • 相邻E4.13 工具提示 · E4.15 底部动作面板
  • 站内检索occlusion · trigger visibility · popover placement

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.12.3