E3.12.3indeterminate distinct from checked设计

三态的视觉表达需与选中态明确区分

别名: 横线复选框 · mixed versus checked · 不确定态外观

概念解释

混合态的样子必须既能从空框里分出来,也能从对勾里分出来。常用手段是框内一条横线或一块小于满填的色块,而不是把对勾画淡一点、或把填充透明度降一半。和选中态分开(distinct from checked)失败时,部分选中会被扫成「全选」,用户会在折叠的父级上停止检查子项。空和混合若只差几个像素的灰,又会被扫成「什么都没选」。

区分靠形状,不靠色相。色盲和灰度截图里,形状还在,淡蓝对勾就不在。

机制

对勾是一个被长期训练的「真」符号,只要框里出现接近对勾的笔画,感知系统就按真来归类。把混合画成浅对勾、缺一笔的对勾、或半透明对勾,都还在对勾家族里,只是对比更差。横线、方块、去对角的填充不在这个家族,才能占用第三格。

扫描折叠树时,人不是在阅读每一框的说明书,而是在做三分类:空 / 混合 / 满。三类的两两距离都必须大于噪声。满和对勾已经占用了高对比的内部图形,混合就不能再借用那套图形去「弱化表达」——弱化只降低可探测性,不增加新类别。

边界

深色主题里白横线对深底、浅色主题里深横线对浅底,不能共用同一不透明度。高对比模式若把所有内部图形都加粗成同类笔画,横线和对勾会重新撞车,需要在该模式下换一种仍可分的几何(例如更短的横线加空心框)。打印后失去颜色时,形状必须仍能分开。动画从混合转到全勾若经过一个看起来像淡对勾的中间帧,会被误认为已经全选,中间帧应跳过对勾家族。图标尺寸很小时(树的深缩进),横线可能糊成点,此时宁可加大框,也不要把混合改回浅对勾。

怎么落地

  • 混合使用横线或明显非对勾的内部形,禁止浅对勾、半透明对勾、缺笔对勾。
  • 在灰度、模拟色盲、高对比下各扫一棵含空 / 混合 / 满的树,三类仍能分开才过。
  • 不要用颜色当唯一差别;框的填充可以帮忙,但形状必须先站住。
  • 验证:缩到实际树节点大小,让人在两秒内标出哪些是混合。标成全勾或标成空的那些,就是外形没分开。

延伸

  • 同组E3.12.1 父级复选框的部分选中需要第三态 · E3.12.2 三态不可用于用户直接输入
  • 相邻E3.01 复选框 · E3.16 树形多选与父子联动
  • 站内检索indeterminate glyph · mixed versus checked · checkbox dash

同组卡片

快捷操作

分享

分享当前页面

ios_share

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