手指不是鼠标

Fitts 定律

1954 年的一条心理物理学定律，说的是「移动到一个目标要多久」：

难度 ID = log2(距离 / 目标宽度 + 1)      单位：bit
耗时 MT = a + b × ID

两个直觉都在里面：目标越远越慢，目标越小越慢。但有意思的是那个 log2——它说明这两者的影响都是对数的。

拉一下滑杆，看这几组：

48dp 是怎么来的

不是拍脑袋。成年人指尖的接触面直径大约 8–10mm，而在 160dpi（也就是 1dp = 1px 的那个基准密度）下：

48 dp = 48 / 160 英寸 = 0.3 英寸 = 7.62 mm

刚好覆盖大部分人的指尖，同时不至于太浪费屏幕。同一个数在别的地方是这样的：

WCAG 2.2 把 AA 的底线定在 24 而不是 44，是因为 44 在密集界面（比如日历、表格）里确实做不到。但 24 是底线，不是目标。

最重要的一条：视觉尺寸 ≠ 触摸目标

这是这一章唯一一条你今天就能去改代码的规则：

Icon(
  Icons.Default.Close,
  contentDescription = "关闭",
  modifier = Modifier
    .size(24.dp)
    .clickable { onClose() }
)

IconButton(
  onClick = onClose,
  modifier = Modifier.size(48.dp)
) {
  Icon(
    Icons.Default.Close,
    contentDescription = "关闭",
    modifier = Modifier.size(24.dp)
  )
}

// ✗ 可点区域 = 内容大小，那 12dp 留白点不到
Modifier.padding(12.dp).clickable { onClick() }

// ✓ 可点区域 = 内容 + 留白
Modifier
    .clip(shape)              // 先裁形状，涟漪才不会溢出圆角
    .clickable { onClick() }  // 可点区 = 这一层拿到的尺寸
    .padding(12.dp)           // 留白在可点区内部

拇指弧

手机是单手握着用的。拇指的活动范围是以拇指根为圆心的一段圆弧，而不是一个矩形。

Demo 右边那张图画的就是这个：绿色是轻松够到的，黄色是够得着但要伸，白色的地方要换手。

还有两件小事

① 手指会挡住自己点的东西。所以反馈不该出现在手指下面——这就是长按弹出的菜单总是出现在上方、滑块的数值气泡总是浮在上面的原因。

② 相邻可点元素之间要留间隙。两个 48dp 的按钮紧挨着，中间那条边界上的误触率很高。Material 建议至少 8dp 的间隔——这正好是第 6 章那个阶梯上的一档。

// Compose 测试里可以直接断言触摸目标 —— 这条能进 CI
@Test
fun allIconButtonsMeetMinimumTouchTarget() {
    composeTestRule.setContent { OrderScreen(...) }
    listOf("close", "share", "more").forEach { tag ->
        composeTestRule.onNodeWithTag(tag)
            .assertHeightIsAtLeast(48.dp)
            .assertWidthIsAtLeast(48.dp)
    }
}

// 另外：别关掉 Material 的最小尺寸保障，除非你非常清楚在干什么
CompositionLocalProvider(
    LocalMinimumInteractiveComponentSize provides Dp.Unspecified  // ✗ 慎用
) { /* … */ }