眯起眼睛：层级是能量出来的

眯眼到底在干什么

你眯起眼睛的时候，物理上发生了两件事：睫毛遮挡加上焦点失准，让高频信息（笔画、边缘、细节）糊掉，只剩下低频信息（块面、明暗、位置）。

用信号处理的话说：这是一次低通滤波。用图像处理的话说：这是一次高斯模糊。

而「视觉层级」正是低频信息。你第一眼看到什么、第二眼看到什么，不是由「这个标题写得好」决定的，是由哪一块又大又跟背景差得多决定的。

视觉权重 ≈ 面积 × 与背景的亮度差

算给你看

下面这台引擎做的就是刚才说的三步：栅格化 → 可分离高斯卷积 → 分区积分。拉动 σ 滑杆，就是把眼睛越眯越紧。

看「常见写法」那一版的排序。

你以为的顺序是：标题 → 主按钮 → 插图 → 正文 → 副标题 → 次要链接。

实际算出来的是：主按钮 → 插图 → 标题 → …

标题掉到了第三。原因很朴素：那个标题只有 200 × 26 像素，而按钮是 312 × 48 且是饱和的蓝色，插图是 312 × 150 的大灰块。面积上你就输了两个数量级不到一个数量级，但足够了。

改过之后：只动了量，没动审美

切到「改过之后」那一版。顺序对上了。而改的只有三件事：

没有换字体，没有加阴影，没有「重新设计」。只是把量调对了。

这里有一个很值钱的推论：

这台引擎是真的

为了让你相信上面那些数字不是编的，说一下它是怎么算的。

可分离卷积。二维高斯核可以拆成横竖两个一维核先后作用，复杂度从 O(r²) 降到 O(2r)。这就是 Photoshop 的高斯模糊快的原因，也是这里 σ 拉到 24 还能实时响应的原因。

// 一维核：3σ 之外的权重小到可以忽略
function gaussKernel(sigma) {
  var r = Math.ceil(sigma * 3), k = [], sum = 0;
  for (var i = -r; i <= r; i++) {
    var v = Math.exp(-(i * i) / (2 * sigma * sigma));
    k.push(v); sum += v;
  }
  return { r: r, k: k.map(function (v) { return v / sum; }) };
}

// 先横后纵，边界夹取
tmp[y][x] = Σ src[y][clamp(x + i)] * k[i]
out[y][x] = Σ tmp[clamp(y + i)][x] * k[i]

亮度差用的是 WCAG 的相对亮度。不是简单的 (R+G+B)/3——那个是错的，因为绿色对人眼的贡献远大于蓝色。正确的做法是先把 sRGB 做逆伽马变换回线性空间，再按 0.2126 / 0.7152 / 0.0722 加权。第 14 章会详细讲这三个系数从哪来。

顺序一致度用逆序对。把「意图顺序」和「实际顺序」当成两个排列，数其中有多少对元素的相对次序反了（Kendall 距离），除以总对数。100% 表示完全一致。

// ① 预览里直接糊一层 —— 最快的自查
@Preview
@Composable
fun SquintPreview() {
    OrderScreen(
        modifier = Modifier.blur(12.dp)   // API 31+
    )
}

// ② 抽掉颜色，只留明暗 —— 顺带查了「只靠颜色区分」的问题
val grayscale = ColorMatrix().apply { setToSaturation(0f) }
Box(Modifier.graphicsLayer {
    renderEffect = null
}.drawWithContent {
    drawContent()
}) { OrderScreen() }

什么时候用它

这一测试的正确用法是做完之后，不是做的过程中。

做的过程中你在处理细节，糊了看什么都看不清。做完之后糊一下，回答一个问题就行：