关于 touch-target-design
面向设计师和产品团队的触控目标设计技能，提供尺寸、间距和交互建议，帮助降低操作精度要求并避免误触。
主要功能
- 01触控与指针目标尺寸建议
- 02相邻目标间距规范
- 03宽容的交互模式
- 04精确操作的替代方案
- 05设计评估问题
适用场景
- 01检查移动端按钮和链接尺寸
- 02降低删除等操作的误触风险
- 03为滑块等控件提供替代输入
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/touch-target-design确认已加载。
详细介绍
触控目标设计
设计交互元素时，要确保其尺寸足够大、间距足够宽，并且操作足够宽容，以便精准度有限的人群也能使用，无论这是由残障、年龄、环境还是设备所致。
最小尺寸
触控（手机、平板电脑）
- 最小尺寸：44×44 CSS 像素（WCAG 2.2 AA 级）
- 建议尺寸：48×48 CSS 像素（Google Material 指南）
- 对于高风险或频繁使用的目标：56×56 或更大
指针（桌面设备）
- 最小尺寸：24×24 CSS 像素（WCAG 2.2 AA 级）
- 建议尺寸：常见操作使用 32×32
- 对于具有破坏性或不可逆的操作：增大目标尺寸可减少错误
目标之间的间距
- 最小间距：相邻交互元素之间留出 8px
- 建议间距：并排放置的常用元素之间留出 12–16px
- 切勿将具有破坏性的操作（删除）与常见操作（保存）紧挨着放置，除非留有间距或在视觉上加以区分
设计模式
扩大命中区域
- 可点击区域可以大于元素的可见范围
- 使用内边距，而不只是图标或文字的可见尺寸
- 列表项中的整行都应可点击，而不只是文字
- 链接文字应足够具体，能形成合理的点击目标（使用“阅读完整报告”，而不是“这里”）
宽容的交互方式
- 不要在触屏按下时触发操作，而应在抬起时触发（这样用户可以滑开以取消操作）
- 对于具有破坏性的操作：要求用户有意再次点击或进行确认，而不是单击一次即执行
- 避免要求双击——对于有震颤的用户来说，这种操作并不可靠
- 避免将长按作为访问功能的唯一方式
安全间距
- 通过拉开距离或调整视觉权重，将“确认”和“取消”操作区分开
- 将具有破坏性的操作放在远离常见操作的位置
- 将相关操作放在一起，将不相关的操作分开
- 在移动设备上：将主要操作放在拇指易触及的区域（屏幕下半部分）
精准操作的替代方式
- 为复杂界面提供缩放功能
- 允许在移动设备上双指缩放（切勿禁用此功能）
- 对于需要精确操作的任务（颜色选择器、滑块）：提供文本输入替代方式
- 对于包含大量选项的下拉菜单：添加搜索或筛选功能
评估问题
- 触屏设备上的所有交互元素是否至少为 44×44px？
- 相邻目标之间是否留有足够的间距？
- 是否将具有破坏性的操作与常见操作区分开？
- 是否无需精确掌握操作时机或精确定位，也能完成每种交互？
- 对于滑块或拖放等依赖精准操作的交互，是否始终提供替代方式？
评论
支持 Markdown