E4.01.2nested hit-target conflict设计研究

整卡可点与卡内可点元素会冲突

别名: 整卡点击 · 嵌套可点击 · 卡片命中冲突 · nested interactive targets

概念解释

当整张卡片被做成一个大按钮,卡里又放收藏、菜单、开关或链接时,同一块面积上叠了两套命中目标。这种结构叫嵌套命中冲突(nested hit-target conflict):外层承诺「点哪里都进详情」,内层又要求「只点这个小控件才改状态」。用户无法从外观预先知道这一下会导航、会切换,还是两个都触发。它不是分组问题,而是同一表面上动作所有权不清。

机制

指针和手指的命中是几何问题。外层把整张卡注册成点击区之后,内层控件只是这个大目标里的小洞。移动指针时,洞的面积远小于卡,精细指向容易成功;拇指在触屏上却经常擦到洞的边缘仍被判成外层导航。事件冒泡让情况更糟:内层处理完一次点击,外层仍可能收到同一事件,于是收藏成功的同时页面已经跳走。键盘用户面对的是另一套冲突:整卡若是链接,Tab 会把整张卡和卡内按钮都收进焦点序列,听上去像两个目的地叠在同一句话里。视觉上「整张都能点」的暗示越强,卡内小控件就越像装饰而不是独立动作。

怎么研究

用指向任务比较三种布局:仅整卡可点、仅卡内控件可点、两者并存。记录点击落点、错误动作(本想收藏却进了详情)、以及双触发率。自变量包括内层控件尺寸、它与卡边缘的距离、外层是否用语义链接实现。因变量是首次命中是否为意图动作、撤销或返回的次数、以及键盘焦点停留数。触屏实验应区分拇指与食指,因为大卡上的小洞对拇指更不公平。日志里若「进详情后立刻返回再点收藏」成对出现,就是冲突被用户用两步操作手动拆开。

边界

卡内只有不可点的文本和一张图、唯一动作就是进详情时,整卡可点没有对手,冲突不发生。桌面宽卡把动作集中在明确的按钮条、其余区域不可点,冲突也可避免。反向的失败出现在「看起来像卡、其实只有标题是链接」:用户点了图或空白,什么都不发生,那是命中区小于视觉区,不是嵌套冲突。游戏手柄与开关选择器没有指针落点,冲突改以焦点对象谁先响应来表现。

怎么落地

  • 决定这张卡的主动作是不是导航。若是,卡内不要再放第二个同等权重的点击目标;次要动作放到详情里,或改用与导航明确分开的控件(例如滑动、长按菜单)。
  • 若必须并存,切断冒泡:内层动作完成时外层不得再导航,并给内层足够的独立命中面积,不要靠几个像素的图标硬点。
  • 整卡可点时用单一语义角色(链接或按钮)包裹主内容,卡内额外控件从该角色中排除,避免朗读成「链接里套按钮」。
  • 验证:在真机上用拇指连点二十张卡的边角、图标和空白,统计有多少次不是用户想要的那个动作。每次「进错页再返回」都记一次冲突。

延伸

  • 同组E4.01.1 卡片通过共同区域建立分组 · E4.01.3 卡片嵌套会瓦解分组语义
  • 相邻E4.02 列表项 · E4.05 行内与批量操作 · E1.07 按钮的点击区域
  • 站内检索nested hit target · event bubbling · clickable card

同组卡片

快捷操作

分享

分享当前页面

ios_share

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