跳到正文
UIGrammer
EN 中文

反模式 · 可访问性 ·

小于 44px 的点击区

小于 44px 的点击区指任何可点控件的热区不足 44×44 CSS 像素,真机上很难点准。

症状

图标按钮、关闭按钮、复选框、分页链接的热区小于 44px。

为什么会这样

紧凑控件在生成布局里更整齐,而且模型是为截图优化而不是为手指优化。触控人体工学在桌面预览里是看不见的。

规则

每个点击区至少 44×44 像素——用 padding 扩大,而不是放大图形。

  1. 量出每个图标按钮、复选框、分页控件的热区尺寸。
  2. 用 padding 或 ::before 覆盖层补到 44px,图形保持原尺寸。
  3. 相邻目标之间至少留 8px,避免点偏时误触邻居。

小于 44px 的点击区是什么?

16px 图标配 20px 按钮,用鼠标没问题,用拇指就很恼火。WCAG 最低要求 24px,苹果与谷歌都推荐 44-48px。热区不一定要等于视觉尺寸:图标保持小,用 padding 扩大热区,或者用伪元素把盒子延伸到可见图形之外。

修复 Prompt

贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。