E1.07.3text button hit expansion设计研究

文字按钮的命中区需显式扩展

别名: 文字按钮热区 · 链接式按钮点不准 · ghost button hit

概念解释

文字按钮没有填充色块,视觉边界就是那几个字的墨区。浏览器和很多工具默认把命中区设成这团墨的包围盒:高度跟着字号,宽度跟着字数,「取消」两个字在中文里可能只有 32×16 的可点矩形。命中区必须被显式扩展——加内边距、加最小宽高——而不能指望文字自己长到可点。填充主按钮的色块已经带了面积,文字按钮没有这份免费面积。

机制

字形包围盒对阅读刚好,对手指过小。上下延伸(ascender / descender)还让包围盒在不同字母、不同语言里忽高忽低:「Cancel」有 y 的下行,「OK」没有,两枚并排的文字按钮实际热区高度不一致。人按的是「那几个字附近」,不是墨像素。若命中贴着墨,点在字的上方空白——看起来仍属按钮行——会落空。移动端尤其明显:文字按钮常被放在对话框底部当取消,拇指从下往上够,落点偏下,正好偏出矮包围盒。扩展不是为了好看,是给一条没有色块的触发器补上运动宽度。

怎么研究

对比三种文字按钮:命中=墨盒、命中=墨盒+固定内边距、命中=平台最小正方形。任务是快速点取消,起点在屏幕下半。

自变量:是否显式扩展、字数(OK vs 稍后再说)、语言(有无下行字母)。 因变量:漏点率、落点相对墨盒的偏移分布、两枚不同字数按钮的成功率差。

用「点中文字中心」的指示会人为降低漏点。应指示「点那个取消」,让人按自然瞄准,才能看到墨盒策略的失败。

边界

段落里的真正链接跟文字走,扩展过大会把邻行、邻词卷进来;那是链接,不是文字按钮。表格单元格里的文字按钮若扩展超出单元格,会点到下一行。极窄工具栏里扩展可能立刻重叠邻居,应改用图标按钮加可访问名称,而不是放弃扩展。指针精细的桌面,漏点率下降,但键盘焦点框仍应按扩展后的盒子画,否则焦点框比可点区还小,看起来像没对准。

怎么落地

  • 给文字按钮写死最小高度和水平内边距,不要用行高凑巧等于字号。
  • 同一行里的文字按钮用同一外盒高度,避免「取消」比「稍后再说」更难点。
  • 在真机上打开命中区可视化,确认墨外面仍有一圈属于该按钮的区域。
  • 验证:快速点对话框底部取消的字上方与下方空白。若只有点中墨才触发,扩展没有发生。

延伸

  • 同组E1.07.1 命中区域可大于视觉区域 · E1.07.2 相邻按钮的命中区不得重叠
  • 相邻E1.01 按钮的层级 · J3.04 触达尺寸下限 · C2.02 最小触达尺寸
  • 站内检索text button · hit expansion · tap target

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.07.3