连线交叉会破坏关系的可读性
别名: 连线交叉 · edge crossing · line crossing
概念解释
用连线表达关系的图(节点关系图、流程图、图表里的引导线)里,只要两条线交叉,人判断"这两个东西到底连没连"就会明显变慢、更容易出错。这和线本身画得多密、图看起来多乱是两回事——一张线很多但互不交叉的图,可读性通常远好于线更少但频繁交叉的图。
机制
判断一条连线连着哪两端,视觉系统要沿着这条线的路径连续追踪下去,这是一个需要集中注意力、逐段进行的过程,不是一眼就能读出的整体判断。线不交叉时,追踪只需要顺着一条不间断的路径走到底;一旦出现交叉,追踪到交点时会同时出现两条可能的延伸方向,必须靠比对交点处的方向、曲率或线型才能判断该往哪条方向继续,每一个交叉点都在原来的追踪任务上叠加一次额外的判断。这正是交叉比单纯的线条密集更伤可读性的原因——密集只是要追踪的线变多,交叉是让每条线的追踪过程本身变得不确定。
怎么研究
图形可读性研究常用的做法是:用同一批节点和同一批关系,重新排布节点位置或调整走线方式,生成交叉数不同但信息完全相同的几个版本,让被试完成"判断两个指定节点是否相连""找出从一点到另一点的路径"之类的任务,记录完成时间和错误率随交叉数变化的情况。这类研究反复发现交叉数是预测任务表现最强的版式因素之一,交叉数越多,完成时间和错误率越高,效应在交叉数较少时就已经能观察到,不需要等到线条极度密集才显现。
这套操纵的关键是保持节点数量、连线数量、信息内容完全不变,只通过重新布局改变交叉数,从而把可读性差异单独归因于交叉本身,而不是关系数量或图的整体规模。
边界
这个结论主要适用于用线表达关系的展示(节点关系图、界面里连接控件的引导线),关系条数很少(比如总共只有两三条线)时,交叉带来的损害本身也小,不必为了消除一两个交叉过度牺牲布局的其他要求。
线的样式如果本身就能区分(不同颜色、不同粗细、实线虚线),交叉处的方向判断会容易得多,损害程度会比同色同粗细的线交叉时轻很多——具体轻多少要看这批线之间的样式差异有多大,不能一概而论。
怎么落地
- 优先通过重新排布节点位置、改用正交或曲线走线、合并同起点或同终点的线(边捆绑)来减少交叉数,而不是保持原有布局不变、单纯指望用户耐心去追踪。
- 交叉确实无法完全消除时,给不同的线赋予可区分的样式(颜色、粗细、虚实),降低交叉点处判断方向出错的概率。
- 验证办法:挑一对具体相连的节点,让不熟悉这张图的人在图上指出这两个节点之间的连线,记录用时和是否指对;把交叉数不同的几个版式都测一遍,用时和出错率的差异就是这版布局实际付出的可读性代价。