SuperAPI AI 工具集

touch-target-design

设计与创作

查看项目

更新于 10-16 03:14

技能介绍

用途:为运动障碍、震颤、灵活性受限或使用辅助指点设备的用户设计可点击、可触控的交互元素,使其足够大、间距足够、容错足够。

主要能力与要点: 最小尺寸:触控(手机、平板)最小 44×44 CSS 像素(WCAG 2.2 AA),推荐 48×48(Google Material),高风险或高频目标 56×56 或更大;指针(桌面)最小 24×24 CSS 像素(WCAG 2.2 AA),常用操作推荐 32×32,破坏性或不可逆操作应更大以减少误触。 间距:相邻交互元素最小间隔 8px,并排高频元素推荐 12–16px;破坏性操作(如删除)不得紧邻常用操作(如保存),需留间距或视觉分隔。 设计模式:可点击区域可大于可见元素,用内边距而非仅图标或文字尺寸;列表项整行可点;链接文字应具描述性(如“阅读完整报告”而非“这里”)。宽容交互:在抬起时触发而非按下时触发,便于滑开取消;破坏性操作需二次点击或确认,避免双击要求与仅靠长按访问功能。安全间距:确认与取消拉开距离或视觉权重,破坏性操作远离常用操作,相关操作分组、无关操作分开;移动端主操作放在拇指区(屏幕下半部)。精度替代:复杂界面提供缩放,移动端允许双指缩放(不可禁用),精确任务(取色器、滑块)提供文本输入替代,长下拉菜单加搜索/筛选。

使用方式:作为无障碍设计检查清单,用于评估与改进界面。评估问题包括:触控设备上所有交互元素是否至少 44×44px;相邻目标间距是否充足;破坏性操作是否与常用操作分离;每个交互是否无需精确计时或精确指点即可完成;滑块、拖放等依赖精度的交互是否总有替代方案。

适用场景:移动端与桌面端 UI 设计、组件库规范、无障碍审计。

限制:资料未提供具体实现代码、框架集成方式、安装命令或收费信息。