间距在说「这两个是不是一伙的」

一个不需要解释的实验

看这两行点：

A    ● ● ●   ● ● ●   ● ●

B    ●  ●  ●  ●  ●  ●  ●  ●

A 行你读到的是「三组」。B 行你读到的是「八个点」。

点是一样的点，数量是一样的数量，颜色大小全都一样。唯一的区别是间距。

这就是格式塔心理学里的接近性原则：靠得近的东西会被知觉自动归为一组。它不需要你同意，也不需要你注意——它在你意识到之前就完成了。

算出来给你看

「眼睛会自动分组」听起来还是有点玄。所以下面这台引擎用一个算法把它复现了一遍：

单链聚类——把相邻元素之间的间隙全部列出来，排个序，然后在「相邻两个间隙差得最多」的地方切一刀。切完，剩下的就是组。

这个算法不知道什么是设计，也不知道什么是格式塔。它只知道 28 比 8 大得多。而它给出的分组，和你眼睛给出的分组是同一个。

试三件事：

• 把组内和组外调成一样 → 算法找不到该在哪儿下刀，只剩一整团。你的眼睛也一样。这就是第 4 章说的「散」。
• 把组外调到组内的 1.5 倍 → 分开了，但跳变比很小，读起来要愣一下。
• 把组外调到组内的 2 倍以上 → 干净利落，不用想。

最常犯的错：间距写在错的地方

知道了规则，来看为什么大家还是会写错。看这段：

Column {
    Text(title,    Modifier.padding(bottom = 8.dp))
    Text(subtitle, Modifier.padding(bottom = 16.dp))
    Text(price,    Modifier.padding(bottom = 8.dp))
    Text(desc,     Modifier.padding(bottom = 16.dp))
    Button(...)
}

每个元素自己带一个 bottom padding。看起来很合理，实际有三个问题：

1. 间距的归属不清。标题和副标题之间那 8dp，是标题给的。那如果这个标题被复用到另一个地方呢？它会把 8dp 带过去。
2. 最后一个元素多了一段。desc 的 16dp bottom 会在 Button 上面留一段，但 Button 下面就没有了——除非 Column 自己再补一个 padding，于是又多了一处。
3. 看不出分组意图。读代码的人要在脑子里把 8、16、8、16 排出来，才能推断出「哪几个是一组」。

// 用 Arrangement.spacedBy 让容器管间距，
// 分组直接用嵌套 Column 表达 —— 代码结构 == 视觉结构
Column(
    verticalArrangement = Arrangement.spacedBy(Spacing.groupGap),   // 组外 24
    modifier = Modifier.padding(Spacing.screenPadding)
) {
    // 第一组：标题区
    Column(verticalArrangement = Arrangement.spacedBy(Spacing.tight)) {   // 组内 8
        Text(title,    style = MaterialTheme.typography.headlineSmall)
        Text(subtitle, style = MaterialTheme.typography.bodyMedium)
    }

    // 第二组：价格区
    Column(verticalArrangement = Arrangement.spacedBy(Spacing.tight)) {
        Text(price, style = MaterialTheme.typography.titleLarge)
        Text(desc,  style = MaterialTheme.typography.bodySmall)
    }

    Button(onClick = onBuy) { Text("立即购买") }
}

间距是一棵树

把上面的想法推到底，你会得到一个很有用的心智模型：

用这本书的间距阶梯举例，一个典型的层次是：

注意 24 和 8 之间的比是 3 : 1，远超过 2 : 1 的下限。这不是浪费——层次越多，每一层的比值就要留得越足，否则中间那几层会糊在一起。

从太多留白开始，往回收

这是《Refactoring UI》里一条关于方向的建议，短，但改的是习惯：

这条建议对开发者尤其有用，因为我们的默认起点几乎总是「零间距」——你写 Column { ... }，什么都不加，孩子们就是贴着的。贴着不是中性的起点，它是一个极端。

一个很常见的追问

「我的界面就是很挤，塞不下这么多留白怎么办？」

答案是：那就把所有间距整体缩小，但比值不能动。

4 : 8 : 16 和 8 : 16 : 32 表达的是同一个结构，只是密度不同。真正会毁掉分组的，是把它压成 8 : 10 : 12——那时候你保住了「有间距」，却丢掉了「间距在说什么」。