# 画流程图之前，先说出这页是哪一种关系

流程图和关系图不是一种图：先写一句带关系类型词的关系句，再选链、分叉、树、回流还是节点—连线；交叉线是实验里最伤理解的一项，改图要先重排节点位置。

> 视觉层次 · 汇报结构 · 结论先行 · 约 5 分钟 · 10 月 17 日

## 本篇要点

1. 图和列表的分工在于“找”：图把一次判断需要同时用到的信息放在同一处，让下一步的线索就在旁边；所以只有当内容存在顺序之外的关系时才值得画，只是并列几件事就写成列表。
2. 动手前先写一句带关系类型词的关系句，再据此选骨架：顺序用链，条件用判断加分叉，归属用树，往返用回流箭头，彼此相连用节点—连线图。
3. 把“包含、调用、负责、相关”全画成同一种箭头是最常见的隐性错误，因为箭头默认读作“先后”；一张图只用一种箭头含义，需要两种含义就明确标注或拆页。
4. 交叉线是最伤理解的一项：实验显示它的影响远超折弯、对称、正交和最小夹角，而且小图上看不出、数量多了才致命，所以改图要先重排节点位置，而不是先换线条样式。
5. 路径的连续性同样影响读取成本：一条多段路径越接近直线越好读，折点、回头和沿途分支都会拖慢观众找到那条路。
6. 节点超过二十个，节点—连线图在多数任务上不如矩阵好读，只有“找到一条路径”仍然占优；一页节点过多就该拆页或改表格。
7. 流程图形状和默认方向早有约定（矩形处理、菱形判断、椭圆起止；默认自上而下、自左向右），约定固定下来，观众才能把注意力移到“下一步是什么”。

---

你花了四十分钟把流程图画好：五个方框，箭头连得整整齐齐，还配了图标。投出来第一句问的是——“这两个框之间是并行还是先后？”你才发现，图上那根箭头根本没回答这个问题。

上一篇讲数据图表时立过一条规矩：动手之前，先写下这张图要证的那句结论。流程图和关系图是同一条规矩的下一层，但多了一道判断：你要表达的是**哪一种关系**。

## 图值得画，是因为省掉了“找”

Larkin 和 Simon 比较过同一份信息的两种摆法：顺序排列（像列表）和按平面上位置排列（图）。图的优势集中在两点——做一次判断需要同时用到的信息被放在同一处，观众不用满篇去找；下一个线索就摆在旁边，眼睛顺着走就行[1]。

这给出一条判断标准：**这张图让观众少找了什么？**如果五步写成带序号的列表已经很清楚，画成五个方框只多出一堆线条要读。所以只有当内容存在“不像一条直线”的关系时，图才划算。

## 先写一句关系句

动形状库之前，先写下一句话，而且这句话里要出现关系的类型词。

| 关系句里的意思 | 该用的骨架 |
| --- | --- |
| 先 A，再 B，再 C，一条路走到底 | 一条链 |
| 走到 B 时看条件，走不同的路 | 判断节点加分叉 |
| A 下面有 A1、A2，A1 下面还有 A1a | 树，缩进或自上而下 |
| 最后一步要回到前面某一步 | 回流箭头，并指明回到哪一步 |
| A 连 B、B 连 D，找不出一条路 | 节点—连线图 |
| 只是并列的五件事 | 列表，别画图 |

三个常遇到的句子：

- “工单从录入到关闭要经过五个岗位，其中现场核实和责任判定可以同时做。”这是链，但链里夹着并行——画成两条并排的支线最后汇合，而不是在一条链上多挂两个框。
- “金额超过五万元才需要财务复核。”这是分岔：条件写在判断节点上，两条支线要能一眼看出是同一个条件分出来的。
- “华东大区下辖三个城市团队。”这是层级，用缩进或位置表示就够，**不要用箭头**——箭头默认读作“先后”。

由此得到最容易犯的一条错：**拿箭头代替所有关系**。把“包含、调用、负责、相关”全画成同一根箭头，观众只能猜。真需要两种含义时，用不同样式并写上标签，或者拆成两页。

## 三种把图越画越乱的做法

骨架选对之后，问题几乎都出在线条上。

### 一、交叉线：最伤理解的一项

Purchase 在 1997 年做过一组实验：同一张结构图画成多个版本，每次只系统性改动一种“美观要求”，记录答错次数和用时。五种要求是减少连线交叉、减少折弯、增加对称、增大节点出边的夹角、把节点固定到正交网格上。结果很集中：**减少交叉的影响远远超过其余各项**；折弯和对称只在“错误数”或“用时”其中一项上显著，正交和夹角则完全测不出影响。还有一条限定：在 4 个节点的小图上，交叉的坏处看不出来，它是数量多起来之后才成为大问题的[2]。

这条排序直接决定改图顺序：**先重排节点位置**（把有连线的框挪到一起、能排成直线就排成直线），而不是先换虚线、加圆角。交叉是结构问题。

Ware 等人研究人怎么在图上找最短路径，结论也能用上：在路径长度之后，影响最大的是**连续性**（一条多段路径越接近直线越好读）和交叉数，其次是沿途每个节点挂着的分支数量[3]。所以一条本该走直线的路径，别画成折线。

### 二、方向不统一，箭头一物多义

流程图有成形已久的约定：矩形是处理步骤，菱形是判断，椭圆是开始和结束；ISO 5807 还规定流程一般自上而下、自左向右，只有不符合这个默认走向时箭头才必须画出来[5]。

约定固定下来，观众才能把注意力从“这是什么”转到“接下来是什么”。一张图里混用上下和左右，观众每遇一个转角都要重新判断方向；用三种箭头样式表达三种含义，等于要观众现场解密。选一种方向贯穿全图。

### 三、节点太多，框里塞整句话

Ghoniem 等人比较过两种画关系的方式：节点—连线图，和矩阵（行和列都是节点，有关系的格子打勾）。七个任务里，**只要节点超过二十个，大多数任务上矩阵都更好读；唯一始终偏向节点—连线图的，是“找到一条路径”**[4]。

反过来用：一页节点超过二十个，就该拆页或改表格。另外，一个框只装一个动作或一个对象，塞进整句话就没人顺着读。

## 走一遍：投诉工单处理页

**写关系句。**“工单从录入到关闭经过五步，其中现场核实和责任判定可并行；超过两小时未处理的自动升级。”

**选骨架。**顺序加并行加一个超时条件：一条横向主线，两个并行框上下并排、宽度一致，合并后回到主线；超时用一根回流箭头指回“派单”，旁边标“超过 2 小时”。

**减交叉。**两支并行的框放在同一条竖线上，分流点和合流点对齐同一横坐标；回流箭头从图的下方绕行，不穿过任何框。

**统一含义。**全图只用一种细箭头，含义是“流转到下一步”；回流箭头加粗、单独写标签，因为它表达的是不同的事。

**压数量。**这页只放五个主步骤。“每个岗位的具体职责”是下一页。

## 交出去之前，问四句

1. 这页的关系句是哪一句？里面有没有关系类型词？
2. 骨架是按关系类型选的，还是照着脑子里第一个浮现的形状拖出来的？
3. 交叉线是不是减到最少？方向是不是统一？
4. 这页的箭头只有一种含义吗？每根箭头，观众都能说出它是什么意思吗？

## 术语表

- 关系句：动手画之前写下的一句话，里面必须出现关系类型词（顺序、分岔、层级、往返、相连），它是选骨架的依据。
- 骨架：五种基本结构——链、分叉、树、回流、节点—连线；由关系类型决定，和线条样式无关。
- 交叉线：两条连线在图面上相交或相互穿过。实验显示它是各类版式问题中最伤理解的一项，且只在大图、交叉多时才明显。
- 连续性：一条多段路径越接近一条直线越好读，折点、回头和沿途分支都会增加观众找到这条路的成本。
- 节点—连线图与矩阵：前者适合节点少、以及“找到一条路径”的任务；节点超过二十后，多数任务上矩阵更好读。

## 来源

1. [Larkin & Simon, Why a Diagram is (Sometimes) Worth Ten Thousand Words（1987）— 图按位置组织信息，减少搜索、让下一步线索就在旁边](https://doi.org/10.1016/s0364-0213(87)80026-5)
2. [Purchase, Which aesthetic has the greatest effect on human understanding?（1997）— 交叉线的影响远超折弯、对称、正交与最小夹角](https://doi.org/10.1007/3-540-63938-1_67)
3. [Ware、Purchase、Colpoys、McGill, Cognitive Measurements of Graph Aesthetics（2002）— 找最短路径时连续性与交叉数最重要](https://doi.org/10.1057/palgrave.ivs.9500013)
4. [Ghoniem、Fekete、Castagliola, On the readability of graphs using node-link and matrix-based representations（2005）— 节点超过二十个后矩阵在多数任务上更好读](https://doi.org/10.1057/palgrave.ivs.9500092)
5. [ISO 5807 流程图符号与约定 — 矩形处理、菱形判断、椭圆起止，默认自上而下、自左向右](https://en.wikipedia.org/wiki/ISO_5807)

---

原文：https://pangzhengboyin.com/articles/flowchart-first-identify-relationship-type-e5665188

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具。说出想学什么，它会先了解你的基础，再把主题写成一篇篇 5–10 分钟能读完的文章；边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com