F2.04.3excess whitespace severs related elements设计
留白过多会切断本应相关的元素
别名: 留白过多 · 断开 · orphaned label
概念解释
标签和输入框隔了 40 px，标签会像上一节的说明，不像这个框的名字。商品卡里标题和价格被 space-between 撑开 80 px，价格像是整页页脚，不像这张卡的一部分。照片和说明之间一条肥缝，说明会被读成下一篇文章的标题。
空会双向工作：太大的间隙是「新组开始」的信号，语义上再怎么声明它们相关也压不过去。
机制
邻近性没有「语义通道」可以申诉。间隙一旦大过该对象到无关邻居的距离，视觉系统就改判归属。常见推手是弹性布局把多余空间分给了不该分的缝：卡片被拉高，中间的空先长，标题和价格被送到两端。
切断之后，用户会做错误的配对：把说明送给上一张图，把价格送给下一张卡，把标签送给上一个输入框。补救如果是再画一条线把它们「圈回来」，等于承认空已经发了相反的信号，而且多了一层墨水。
边界
封面、章节扉页、仪式感很强的首屏，故意切断是节奏：标题和正文之间的大空是「现在开始」。那是叙事，不是表单。大图集里图与图之间的大空用于沉浸，只要每张图的说明仍贴着自己的图。
小屏上为了把主按钮推到拇指热区而在上方留下大空，会切断按钮和它对应的内容。这时该改的是滚动或粘性底栏，而不是让按钮和说明在空间上离婚。
怎么落地
- 成对清点：标签–控件、图–说明、标题–价格、错误提示–字段。每一对的间隙必须小于任一方到「下一个无关对象」的间隙。
- 禁止用
space-between或同等弹性去撑开一对相关元素；多余的高度留给组与组之间，或接受卡片不要拉满。 - 验证：在真机上用手指比一下每对相关元素的缝，再比该元素到下一个无关元素的缝。前者更大或几乎一样，就是切断。把这对收紧到能被一眼看成绑定，再看整卡是不是变矮——变矮通常说明之前的空是弹性撑出来的，不是分组需要的。