网格布局的跨行跳转成本高
别名: 跨行跳转 · 网格换行 · two-dimensional grid traversal
概念解释
同一行里左右挪,步数等于列差。要去另一行的某一列,必须先纵向走到那一行,再横向对齐,两条腿加起来。网格看起来是一块平面,走起来却是先走完一个轴再走另一个轴。跨行跳转因此系统性地贵于同行移动:不是因为那张卡片远,而是因为它不在当前这一条轴上。
机制
四向键没有对角线。从第 1 行第 1 列到第 4 行第 5 列,最少是 3 次下加 4 次右,七步,中间没有任何「斜着一步到位」。人往往先把一行走完才发现目标在下一行,于是又加上已经浪费的水平步。视觉上相邻的两张海报如果分属两行的两端,屏幕距离很近,图上距离却是整行宽度加一行。
换行策略会再乘一次代价。若行末再按右会掉进下一行行首,人以为在环内打转,实际已经换行,要对齐目标列还得走完整段错位。若行与行之间不能直接上下对齐——下面一行错位、插入了「更多」槽、或行长度不同——纵向一按不是落到「正下方那张」,而是落到几何上最近的另一张,然后还要水平修正。
网格越宽,跨行的水平分量越大。六列的内容墙,选错行之后的横向修正可以比纵向本身更贵。这就是为什么「看起来密」的内容墙操作起来发黏:密的是列数,贵的是列数变成了每次换行都要付的水平税。
怎么研究
在固定起点上比较「目标与起点同行」和「目标差 N 行」的到达,路径长度按曼哈顿距离预测,再记录人实际采用的轴顺序(先横后纵还是先纵后横)以及换行产生的额外步。
自变量:列数、行数、行是否等长、行末是否换行、上下是否按列对齐。 因变量:按键数相对曼哈顿最优的超出、轴切换次数、选错行后的修正步数。
注意:主试若把目标高亮出来,人会规划对角线式的先纵后横;真实浏览里目标并不预先发光,人按行扫描,跨行代价里有一截是「发现自己在错行」的时间。不要把超出步数全算成布局罪——其中一部分是搜索策略。
边界
单行轨道(一排海报,上下进入别的轨道)把跨行变成「换轨道」,成本是一次上下加轨道内水平,不再是规则网格的行列求和。圆形或径向菜单用的不是行列,跨行这个词不适用。列数很少的设置页(两列开关)跨行便宜,主要成本在纵向深度。允许跳过整行的快捷键(频道键、分页键)会切掉水平税,前提是人知道有这个键。
怎么落地
- 把同一任务要用到的项放进同一行或同一短列,避免「相关功能」在视觉上成块、在焦点图上分属远行。
- 行与行按列对齐;不要让下一行错半格,导致「按下」落到意外的卡片。
- 宽网格提供按行的入口:行标题可聚焦,一次下移换行并落到该行的默认列,而不是从上一行的末列斜切进去。
- 验证:选一对视觉相近但分属两行的卡片,只用量步的方法走过去。若实际步数稳定高于同行对照的两倍以上,先减列数或加行级入口,不要先加动画。