缩放后交互元素之间不能因挤压而产生误触
别名: 缩放误触 · squeezed hit targets · magnified adjacent controls
概念解释
字和按钮一起变大之后,它们之间的空隙如果不成比例变大,相邻可点区域就会贴上。贴上之后,瞄准「保存」可能落到「删除」,瞄准「下一封」可能落到「归档」。缩放后的误触问的不是默认尺寸够不够点,而是放大之后间距还能否把两个动作分开。
验收如果只看文案有没有露出来、栏有没有叠成一列,会漏掉这一层:内容都在,手却点错了。
机制
触达需要的是目标本身的面积,加上它和邻居之间的空带。缩放按同一因子放大控件时,空带若是固定像素、负边距或绝对定位叠出来的,空带会被吃掉。仅文本缩放更糟:标签变长把两个按钮挤进同一行残差空间,命中盒在视觉上重叠,指针或触控的落点落到了另一个动作上。
低视力用户的瞄准本来就不稳——放大镜里只看得到控件的一部分,落点常偏。空带被吃掉之后,偏一点就是另一个功能。破坏性动作若挨着确认动作,误触的代价从「点错一次」变成「提交了不可逆的事」。
怎么研究
在 200% 页面缩放与仅文本放大两种条件下,测量相邻可点目标中心距、空隙像素,并用触控或鼠标做重复瞄准任务。
自变量:缩放倍数、空隙是否随字号缩放、破坏性动作与普通动作是否相邻。 因变量:误触率、首次命中是否落在预期目标、完成任务中途的撤销次数。
不要只在桌面指针下测。触控仿真或真机上,手指落点的空间误差更大,挤压更早变成误触。把「看起来没重叠」和「点下去没点错」分成两个观察量,前者是布局,后者才是这条判据。
边界
内联在句子里的链接,缩放后仍会挨着前后词,不能按按钮间距来要求;它们的缓解是足够的行高和可撤销的导航,而不是把每个词变成大方块。刻意做的互斥切换(分段控件)本身就该贴在一起,这时要保证整组的命中仍落在组内,且当前项有非间距的选中指示。开关扫描用户不靠瞄准,挤压对他们不是误触问题。极高倍的屏幕放大镜会一次只显示一个按钮,邻居不在同一视野里,误触机制暂时退居其次。
怎么落地
- 让控件之间的空隙随字号一起涨,不要把间距写成与缩放无关的死像素,尤其不要用负边距把两个动作叠进同一槽。
- 破坏性动作不要在缩放后仍贴着确认动作;重排成一列时把它们上下分开,而不是挤在行尾。
- 图标按钮在标签变长后允许掉到下一行,而不是为了保一行去压缩命中盒。
- 验证:200% 缩放下用手指或鼠标反复点主路径上每一对相邻动作(保存/取消、发送/删除、下一封/归档)。每次落点落在另一个动作上,记一次挤压误触。