E3.01.1independent checkbox设计研究

复选框表示各项独立开关

别名: 复选 · checkbox · 多选框 · 独立勾选

概念解释

复选框(checkbox)把一组选项当成彼此独立的二值开关:每一项可以开或关,选中一项不会关掉另一项,全不选、只选一部分、全选都是合法结局。它回答的是「这些条件里哪些成立」,不是「从中必须挑一个」。把「接受条款」「订阅通讯」「记住登录」做成三个复选框,用户可以任意组合;若把同一组画成圆点,用户会误以为三项互斥、必须留一个。

独立不等于立刻改系统状态。复选框通常栖在表单里,勾选只是在本地记下意向,真正写入要等提交。立刻翻转的设置是另一类控件的职责。

机制

人靠形状和交互习惯来读选择语义。方框加对勾被长期训练成「可叠加的真值」:每一项是自己的命题,命题之间没有「只能有一个为真」的约束。圆点则被训练成互斥集合。一旦视觉形状和可选数量对不上——方框却只能选一个,或圆点却能叠选——用户会按形状预测,而不是按你想表达的数据模型预测。

独立性还带来零选合法。互斥控件在空集合上是错误态,复选框的空集合常常是「用户明确拒绝了全部附加项」。把空选当成失败去拦截,等于把独立选择改写成了必选集合。

怎么研究

用同一批选项比较「独立多选」与「强制单选」两种控件,看人是否按数据模型操作。任务可以是「勾选所有适用的症状」或「只选一种配送方式」,故意让一半被试拿到形状与规则相反的控件。

自变量:选项是否互斥、控件形状(方框 / 圆点)、是否允许空选。 因变量:非法组合率(独立题被做成单选、互斥题被叠选)、空选是否被当作完成、首次操作前的停顿。

方法上不要只问「你觉得这个叫什么」。让人提交一次真实选择,再问「还可以再选别的吗」——口头标签经常正确,实际点击却按形状走。

边界

父子联动的树里,勾选父项会改写子项,表面上的独立性被层级规则吃掉;那是另一套选择结构,不能拿「各项独立」去解释。权限矩阵、表格里每行一个复选框,独立性仍在,但扫描方式变成按行而不是按一组标签。若业务上「至少选一项」是硬约束,独立语义仍在,只是提交时多了一条集合校验——不要为此改成单选。屏幕阅读器用户听到的是勾选框角色和已勾/未勾,而不是「可以多选」这句说明;组标签必须把「可多选」说清楚,否则独立性只存在于视觉上。

怎么落地

  • 选项彼此不排斥时用复选框,不要用圆点或分段去「看起来整齐」。
  • 允许零项时不要把未勾选标成错误;只有业务要求至少一项时,在提交处提示,而不是改控件类型。
  • 把立即生效的系统设置留给开关;复选框的勾选结果跟提交按钮走。
  • 验证:拿一组真实选项问未参与设计的人「选了 A 还能不能选 B」「什么都不选能不能提交」。若答案与数据模型不一致,先改控件语义,不要先改文案。

延伸

  • 同组E3.01.2 标签本身应可点击 · E3.01.3 复选框的选中态需高对比
  • 相邻E3.02 单选按钮 · E3.03 开关 · E3.04 开关与复选框的选用 · E3.12 三态与不确定态
  • 站内检索independent checkbox · multiple selection · checkbox versus radio

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.01.1