C6.27.3Candidate window blocking controls below设计研究

候选窗口遮挡输入框下方的其他控件时会阻断后续操作

别名: 候选挡按钮 · 提交按钮被盖 · 浮层阻断

概念解释

搜索框、登录表、对话框里,输入框正下方常常紧挨着提交、取消、下一步或联想结果。候选窗向下展开时会盖住这些控件,组字尚未结束,用户已经无法点“搜索”。这是阻断后续操作,不是看不见自己刚打的字——被盖的是别的可操作对象。软键盘抬起造成的遮挡是另一套布局问题;这里即使键盘在底部,候选浮层仍能单独挡住按钮。

机制

对话框把输入框和主按钮做成固定垂直节奏,间距按“没有 IME”来排。候选窗不属于对话框的布局流,以顶层窗口画在它们上面,命中测试先到候选。用户若以为点到了提交,实际点到某个候选词,会把词上屏或选错词,提交并未发生。回车有时绑定提交、有时绑定首选候选,冲突在被遮挡时更难排查。短表单(只有一个框和一个按钮)几乎必然撞上这条。移动端候选若贴在输入框下沿而不是键盘上沿,同样挡住框下的芯片和筛选。

怎么研究

用真实登录和搜索对话框,在组字态尝试点击被遮挡的主按钮,记录命中的是候选还是按钮、任务能否完成。比较:按钮在输入框上方、表单在候选出现时自动增高、候选强制贴键盘。测量“从开始组字到成功提交”的额外步骤。自动化命中测试可列出与候选矩形相交的可点击控件。

边界

页面很长,主按钮远在折叠下方,候选窗够不到。候选始终画在键盘顶上时,挡住的是键盘键而不是按钮,失败模式变了。无障碍用户用键盘回车提交,不依赖点击被挡按钮,但仍会被回车/候选冲突伤到。游戏 HUD 的输入框没有标准按钮,阻断表现为盖住技能栏。

怎么落地

  • 短表单把主按钮放在输入框上或侧,或在候选出现时把按钮移出重叠区。
  • 组字期间若检测到来自主按钮区域的点击,不要把它当候选命中,除非点在候选词的字面上。
  • 明确回车在组字态只上屏、提交要第二次回车,并在按钮上写出来。
  • 验证:打开目标对话框,输入需要候选的词但不选完,尝试点击主按钮;若激活的是候选词或点击无响应,就算阻断。

延伸

  • 同组C6.27.1 候选词条通常悬浮在光标附近,容易遮挡正在编辑的文本 · C6.27.2 候选窗口位置需要根据光标离屏幕边缘的距离动态翻转 · C6.27.4 候选窗口消失时机需要一致,否则会遗留浮层
  • 相邻C6.06 软键盘与屏幕占用 · C6.28 表单自动填充
  • 站内检索blocked submit · overlay hit-testing · IME dialog

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.27.3