E4.02.1list-row height tradeoff设计研究

列表项高度决定单屏信息量与触达难度

别名: 列表行高 · 信息密度 · 触达面积 · row height

概念解释

列表里每一行的垂直尺寸同时做两件事:它决定一屏能并排看见多少条,也决定这条作为触达目标有多容易点中。行高权衡(list-row height tradeoff)说的就是这两股力互相拉扯——行变高,拇指更好点,能同时对照的邻居变少;行变矮,一屏条数上去,点空、点邻行的概率也上去。它不是审美上的疏密,而是「比较窗口」和「命中窗口」抢同一段像素。

机制

视觉比较依赖同时在场。要判断哪封邮件更新、哪位联系人更匹配,人需要让候选落在同一注视范围内;滚出屏幕的条目必须靠记忆维持,工作记忆很快不够用。行高每增加一行文字的高度,视口里的候选集合就按比例缩小,比较就从「扫一眼」变成「记住再滚回来」。触达则走另一条路:目标高度进入菲茨定律(Fitts's law)的目标宽度项,行越矮,指向时间越长、邻行误触越多。触屏上手指接触椭圆通常大于细行的视觉高度,系统只能把命中区扩到行间,于是相邻两行的有效边界开始重叠。桌面指针精度高,行可以更矮;拇指操作的手机不能直接搬那套密度。

怎么研究

用同一份名单做两种任务:一是在列表里找出符合若干条件的条目(依赖同屏比较),二是连续点选指定行(依赖触达)。系统改变行高,记录正确率、滚动次数、误触邻行次数和完成时间。自变量:行高、设备(鼠标 / 拇指)、条目辨识字段是否重复。因变量:可见集合大小、误选率、滚动幅度。眼动可以看比较是在视口内完成还是伴随来回滚动。不要只用主观「看起来挤不挤」——挤的感觉和比较失败、点错不是同一件事。

边界

可预测、几乎不互相比较的队列(播放列表按顺序点下一首)更能容忍高行;要在几十条里挑一个属性组合的管理列表则更吃同屏数量。键盘用户用方向键移动,行高几乎不影响选择精度,却仍影响一屏能扫到的上下文。大字号、动态字体放大后,原来刚好可点的行会变成两行文字加一条截断,任务从「点哪一行」变成「这一行还是不是刚才那条」。横屏、折叠屏展开后视口变高,同一行高对应的比较窗口会突然变大,原先为窄竖屏做的疏密会显得空洞。

怎么落地

  • 按任务选行高:以比较、筛选为主的列表优先保证一屏能看见一组可对照的候选;以打开单条为主的列表才加高到舒适触达。
  • 触屏上把命中高度做进行的结构,而不是只加视觉内边距却让两行命中区重叠。
  • 允许用户或场景切换密度(舒适 / 紧凑),但每档都要单独测误触和滚动,而不是按比例缩放。
  • 验证:在目标设备上完成「从二十条里找出两个属性都符合的那条」和「连续点十条指定行」。前一个任务滚动过多就降行高,后一个邻行误触过多就加行高。

延伸

  • 同组E4.02.2 主要信息需在首行且不被截断 · E4.02.3 行内操作与整行点击的优先级需明确
  • 相邻E4.05 行内与批量操作 · E4.18 虚拟滚动与长列表 · E1.07 按钮的点击区域
  • 站内检索row height · information density · Fitts's law

同组卡片

快捷操作

分享

分享当前页面

ios_share

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