E4.01.3nested-card grouping collapse设计研究

卡片嵌套会瓦解分组语义

别名: 卡片套卡片 · 嵌套卡片 · 分组线索冲突 · card in card

概念解释

卡片靠一块底板告诉人「里面是同一个对象」。再在这张底板里放进另一张同样有底板、描边或阴影的卡,共同区域就被套了两层,分组线索开始互抢。嵌套卡片(nested cards)不是层次结构的合法表达,而是同一条感知规则被递归调用:外卡说这些字段是一条,内卡又说其中一块自己才是一条。用户看到的不再是对象边界,而是一堆深浅不同的盒子,不知道该以哪一层来计数、选择或朗读。

机制

共同区域是「谁和谁共用一块封闭面」。一层封闭面给出一个对象假设;第二层封闭面在内部再切一刀,等于同时主张「这是整体的一部分」和「这是另一个整体」。阴影和描边会放大这场竞争:外卡已经用投影抬离页面,内卡再用投影抬离外卡,深度暗示变成「盒子里还有盒子」,而不是「对象里有字段」。对齐和留白救不了这件事,因为眼睛先响应闭合轮廓。结果是计数失败(这是一条还是两条)、选择失败(高亮该圈外框还是内框)、以及辅助技术失败(两个 article 套在一起,标题层级与视觉层级对不上)。把内层改成无底板的区块,共同区域只保留一层,分组才能重新稳定。

怎么研究

用对象计数与选择任务:同一信息分别做成单层卡、双层卡、以及外卡加无底板内块,让被试回答「这里有几条」并点选「这一条」。自变量是嵌套层数、内外阴影是否同构、内外圆角是否相同。因变量是计数正确率、选择时圈中的是外框还是内框、以及朗读时标题被播报的次数。若双层条件下「几条」的答案分裂,而单层条件收敛,嵌套就是在拆分组而不是在表达层次。

边界

仪表盘里一张概览卡内嵌一张迷你图或进度条,只要内层没有自己的描边底板,就不构成嵌套卡片。真正的层次(项目包含任务包含评论)应改用缩进、标题层级或树,而不是靠卡套卡来画包含关系。印刷式资料卡、票据复刻有时故意做「纸上贴纸」,用户带着实物隐喻进来,竞争会被隐喻压住;普通信息流没有这层隐喻。深色模式里内外底板对比若变得极弱,嵌套问题会从「抢分组」变成「看不出有卡」,那是对比不足,不是嵌套特有的机制。

怎么落地

  • 默认禁止卡套卡。内层内容用标题、分隔、或无描边的区块承接,只让最外层保留底板。
  • 若产品隐喻就是「信封里有卡片」,让内外层的轮廓语言明显不同(外层是容器、内层是单据),不要复制同一套阴影和圆角。
  • 选择、拖拽和高亮以最外层对象为准;不要让内框也能被单独选中,除非内框在数据模型里就是另一条记录——那它就不该再被外卡包成同一对象。
  • 验证:把界面打印成灰度缩略图,请人用笔圈出每一条。出现「外框和内框都被圈、且说不清谁是一条」时,拆掉内层底板。

延伸

  • 同组E4.01.1 卡片通过共同区域建立分组 · E4.01.2 整卡可点与卡内可点元素会冲突
  • 相邻E4.06 树形控件 · E4.20 分隔线与留白的取舍 · F2.06 邻近性分组
  • 站内检索nested cards · common region · visual hierarchy

同组卡片

快捷操作

分享

分享当前页面

ios_share

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