C1.20.5Hover-induced path occlusion设计研究

悬停引发的布局变化会遮挡后续操作路径

别名: 悬停遮挡 · 布局位移 · 操作路径

概念解释

当悬停打开子菜单、卡片预览或说明层时,新增内容可能覆盖用户正要经过的区域,或推动原控件改变位置。这样的路径遮挡会让指针离开触发区、误入新目标或失去对原位置的空间记忆,使一个本应辅助发现的反馈反而中断后续操作。

机制

浮层与重排会改变可命中区域和视觉地图。若它出现在父目标与子目标的连线路径上,进入子目标的运动就被截断;若页面发生重排,原先计划的终点发生位移。系统还可能立即把新层当作新的悬停目标,形成循环触发或意外关闭。

怎么研究

用真实的父项到子项、列表到预览、以及快速扫过任务,记录路径偏离、目标丢失、误触发、重新定位时间和关闭次数。比较叠加层、预留空间、侧向展开与延迟显示,检查不同屏幕边缘和缩放下的可达路径。

边界

覆盖并不总是有害:固定位置的非交互提示或不在运动路径上的预览可减少布局跳动。完全禁止悬停内容也会损失效率;关键是保证它不改变下一步所需的目标、路径或焦点,而非把所有浮层视为错误。

怎么落地

  • 优先用不重排布局的叠加层,并将其放在远离预计指针路径的一侧。
  • 保留父项到子项的可达走廊或安全区域,避免新层截断连线。
  • 内容出现后不要移动用户即将点击的控件;必要时要求点击或固定预览。

延伸

  • 同组C1.20.1 悬停延迟时长需要在响应速度与误触发率间取一个具体数值,而非仅原则性权衡 · C1.20.2 菜单悬停展开与提示气泡悬停各自需要独立的延迟阈值 · C1.20.3 鼠标划过多个目标时,短暂经过不应逐一触发悬停内容 · C1.20.4 移出后延迟消失的宽限时间避免用户因手抖立刻丢失悬停内容
  • 相邻E1 界面元素与控件 · B1 交互原理与定律
  • 站内检索occlusion · layout shift · hover menu

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C1.20.5