触摸目标尺寸（Touch Target Size）是什么：效果预览与 AI 设计提示词

效果预览

适合用在哪

所有移动端可点元素：图标按钮、列表项操作、关闭按钮、分段控件。

容易踩的坑

用 ::after 扩大热区却与相邻按钮的热区重叠，点击时触发了错误的那个。
只把图标放大到 44px 而不是扩热区，界面变得臃肿、视觉层级被打乱。
表格行内的编辑、删除图标并排间距不足 8px，误触删除的风险很高。

设计提示词 · Prompt

触摸目标尺寸（Touch Target Size）：视觉尺寸可以保持小巧（如 24px 的图标），但通过 padding 或伪元素 ::after 把实际点击热区撑到至少 44×44px（iOS HIG）/ 48×48dp（Material Design）。相邻可点元素之间至少留 8px 间距，否则容易误触（尤其是删除这类危险操作）。实现技巧：给按钮设 min-width/min-height 44px 配 box-sizing:border-box，或者用 ::after 配 content:"" 与 inset:-10px 扩大热区而不影响布局。WCAG 2.2 的 2.5.8 要求目标尺寸至少 24×24px，但 44px 是真正的移动端舒适线。

Touch Target Size: the visual size can stay compact (e.g. a 24px icon), but use padding or an ::after pseudo-element to expand the actual hit area to at least 44×44px (iOS HIG) / 48×48dp (Material Design). Leave at least 8px between adjacent tappable elements, otherwise mis-taps are likely (especially for destructive actions like delete). Techniques: give buttons min-width/min-height 44px with box-sizing:border-box, or use ::after with content:"" and inset:-10px to enlarge the hit area without affecting layout. WCAG 2.2 criterion 2.5.8 requires targets of at least 24×24px, but 44px is the real mobile comfort line.

常见搭配

同一页面里经常和「触摸目标尺寸」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

图标按钮Icon Button 底部标签栏Bottom Tab Bar 触摸反馈Touch Feedback / Active States 悬浮操作按钮FAB (Floating Action Button)

演示 HTML 结构

<div class="s d-center">
  <div class="a11y-touch">
    <div class="a11y-touch__i"><div class="a11y-touch__b is-ok">♥</div><span class="is-ok">合格</span><em>44×44</em></div>
    <div class="a11y-touch__i"><div class="a11y-touch__b is-bad">♥</div><span class="is-bad">过小</span><em>24×24</em></div>
  </div>
</div>