反模式 · 可访问性 · 高
小于 44px 的点击区
小于 44px 的点击区指任何可点控件的热区不足 44×44 CSS 像素,真机上很难点准。
症状
图标按钮、关闭按钮、复选框、分页链接的热区小于 44px。
为什么会这样
紧凑控件在生成布局里更整齐,而且模型是为截图优化而不是为手指优化。触控人体工学在桌面预览里是看不见的。
规则
每个点击区至少 44×44 像素——用 padding 扩大,而不是放大图形。
- 量出每个图标按钮、复选框、分页控件的热区尺寸。
- 用 padding 或 ::before 覆盖层补到 44px,图形保持原尺寸。
- 相邻目标之间至少留 8px,避免点偏时误触邻居。
小于 44px 的点击区是什么?
16px 图标配 20px 按钮,用鼠标没问题,用拇指就很恼火。WCAG 最低要求 24px,苹果与谷歌都推荐 44-48px。热区不一定要等于视觉尺寸:图标保持小,用 padding 扩大热区,或者用伪元素把盒子延伸到可见图形之外。
修复 Prompt
贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。