列表项高度决定单屏信息量与触达难度
别名: 列表行高 · 信息密度 · 触达面积 · row height
概念解释
列表里每一行的垂直尺寸同时做两件事:它决定一屏能并排看见多少条,也决定这条作为触达目标有多容易点中。行高权衡(list-row height tradeoff)说的就是这两股力互相拉扯——行变高,拇指更好点,能同时对照的邻居变少;行变矮,一屏条数上去,点空、点邻行的概率也上去。它不是审美上的疏密,而是「比较窗口」和「命中窗口」抢同一段像素。
机制
视觉比较依赖同时在场。要判断哪封邮件更新、哪位联系人更匹配,人需要让候选落在同一注视范围内;滚出屏幕的条目必须靠记忆维持,工作记忆很快不够用。行高每增加一行文字的高度,视口里的候选集合就按比例缩小,比较就从「扫一眼」变成「记住再滚回来」。触达则走另一条路:目标高度进入菲茨定律(Fitts's law)的目标宽度项,行越矮,指向时间越长、邻行误触越多。触屏上手指接触椭圆通常大于细行的视觉高度,系统只能把命中区扩到行间,于是相邻两行的有效边界开始重叠。桌面指针精度高,行可以更矮;拇指操作的手机不能直接搬那套密度。
怎么研究
用同一份名单做两种任务:一是在列表里找出符合若干条件的条目(依赖同屏比较),二是连续点选指定行(依赖触达)。系统改变行高,记录正确率、滚动次数、误触邻行次数和完成时间。自变量:行高、设备(鼠标 / 拇指)、条目辨识字段是否重复。因变量:可见集合大小、误选率、滚动幅度。眼动可以看比较是在视口内完成还是伴随来回滚动。不要只用主观「看起来挤不挤」——挤的感觉和比较失败、点错不是同一件事。
边界
可预测、几乎不互相比较的队列(播放列表按顺序点下一首)更能容忍高行;要在几十条里挑一个属性组合的管理列表则更吃同屏数量。键盘用户用方向键移动,行高几乎不影响选择精度,却仍影响一屏能扫到的上下文。大字号、动态字体放大后,原来刚好可点的行会变成两行文字加一条截断,任务从「点哪一行」变成「这一行还是不是刚才那条」。横屏、折叠屏展开后视口变高,同一行高对应的比较窗口会突然变大,原先为窄竖屏做的疏密会显得空洞。
怎么落地
- 按任务选行高:以比较、筛选为主的列表优先保证一屏能看见一组可对照的候选;以打开单条为主的列表才加高到舒适触达。
- 触屏上把命中高度做进行的结构,而不是只加视觉内边距却让两行命中区重叠。
- 允许用户或场景切换密度(舒适 / 紧凑),但每档都要单独测误触和滚动,而不是按比例缩放。
- 验证:在目标设备上完成「从二十条里找出两个属性都符合的那条」和「连续点十条指定行」。前一个任务滚动过多就降行高,后一个邻行误触过多就加行高。