E4.03.1table as comparison surface设计研究

表格适合多属性对比而非单条浏览

别名: 表格对比 · 多属性比较 · 表格适用场景 · data table

概念解释

表格把多条记录的同一组属性排成行列,让眼睛沿列比较、沿行拼出一条对象。它是对比平面(comparison surface),不是浏览单条故事的版式。用户要回答的是「哪一行在这一列上更大、更新、更贵」,而不是「这一条本身好不好看」。把本该一篇一篇读的内容(文章、会话、商品详情)塞进表格,行列对齐帮不上忙,只会把叙事切成难以阅读的单元格。

机制

比较依赖对齐。同一属性落在同一列、同一量纲、同一小数位时,差异以位置而不是以阅读被看见——数字的高位对齐后,哪一行突出几乎是前注意的。列表和卡片把每条对象做成独立区块,比较必须在区块之间做记忆匹配,工作记忆很快被属性数量打满。表格把匹配改成空间对齐,代价是单条的沉浸阅读:单元格打断句子、行高压缩,故事性内容没有落脚点。任务若是「挑一台内存和价格都合适的」,表格赢;任务若是「读懂这条评论」,卡片或详情赢。用错容器不是视觉风格问题,是比较通道和阅读通道被安到了对方的任务上。

怎么研究

把同一数据集分别做成表格、卡片流和主从详情,做两类任务:跨记录比较指定属性、以及阅读单条并复述要点。自变量:属性数量、记录数量、属性是否为可对齐的数值。因变量:比较正确率、完成时间、复述完整度、滚动与跳转次数。若比较任务在表格上显著更快、阅读任务在表格上显著更差,容器与任务的匹配就被测出来了。不要用「看起来专业」作为表格的理由——那是风格偏好,不是对比优势。

边界

记录只有一两条、属性也少时,对齐的优势还没开始工作,表格的表头和网格成了空开销。时间线、对话、逐步操作这些本就按顺序阅读的内容,强行进表会破坏时间结构。手机上列数稍多,对比平面会被横向滚动拆碎,表格的比较优势可能保不住,需要另说窄屏重构。专家用户每天盯同一张表,会把列位置记成肌肉记忆,这时表格甚至承担导航;新手第一次面对二十列,比较优势会被定位成本抵消。

怎么落地

  • 先写下用户的问句。问句里有「哪一条在某属性上更…」就用表;问句是「这条是什么」就不要用表。
  • 只把真正要拿来比较的属性做成列;描述性长文本放进展开行或详情,不要占一列起不到对齐作用的散文。
  • 需要既比较又阅读时,用主从:左表承担对比,右栏承担单条阅读,而不是把阅读硬塞进单元格。
  • 验证:用真实任务计时。比较任务若必须点进每条才能完成,表就没在工作;阅读任务若要横向拼单元格才能读懂句子,内容就不该在表里。

延伸

  • 同组E4.03.2 数值列右对齐、文本列左对齐 · E4.03.3 列宽应由内容类型决定 · E4.03.4 窄屏下表格需要重构而非等比缩放
  • 相邻E4.01 卡片 · E4.02 列表项 · E4.08 分栏与主从视图
  • 站内检索data table · attribute comparison · information layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

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