03 · 输入方式与交互分类
适用:选择一个交互方式,或审查交互是否只能在开发者自己的设备上工作。这里给出分类索引,具体平台手势冲突需要另行验证。
INT-01 · 先定义意图,再定义输入动作
“移动项目到下一个分组”是意图;拖拽、菜单里的“移动到”、键盘快捷键是不同入口。业务能力应复用,不应把业务逻辑只写在拖拽事件中。
| 输入或模式 | 适用任务 | 必须补齐的行为与替代 |
|---|---|---|
| 点击、轻触 | 选择、触发动作 | 按下反馈、取消、忙碌时防重复 |
| 双击、双触 | 熟练用户快速打开或编辑 | 提供单次点击入口;区分单击与双击冲突 |
| 悬停 | 补充预览、辅助说明 | 焦点也能触发;触屏可发现;不隐藏主操作 |
| 右键菜单 | 对象上下文操作 | 提供可见“更多”按钮与键盘入口 |
| 长按 | 移动端上下文动作 | 提供普通按钮,避免劫持文本选择 |
| 拖拽 | 排序、跨区移动、上传 | 可取消、清楚落点、提供无需拖动的操作 |
| 滑动 | 浏览、轻量对象操作 | 防止与页面滚动冲突,危险动作可恢复 |
| 滚动 | 连续浏览 | 保留位置,固定区域不挡内容 |
| 缩放、捏合 | 地图、画布、图片 | 提供放大缩小与重置按钮,不禁用页面缩放 |
| 多指、路径手势 | 绘画、专业操作 | 评估是否必要,提供更简单的输入入口 |
| Tab、Shift+Tab | 在可操作元素之间移动 | 顺序符合阅读;焦点清晰可见 |
| Enter、Space | 激活控件 | 使用原生按钮,遵循控件自身约定 |
| 方向键、Home、End | 组合控件内部移动 | 按具体控件模式实现,不能全局劫持 |
| Escape | 取消临时模式、关闭弹层 | 返回原焦点;未保存内容按风险处理 |
| 快捷键、命令面板 | 高频专业操作 | 可发现、可关闭冲突,避免单字符误触 |
| 文本与输入法 | 搜索、编辑 | 不在中文组词期间触发提交或破坏光标 |
| 粘贴、自动填充 | 批量输入、身份字段 | 保留常见格式;不要阻止密码管理器 |
| 文件选择、拖入、拍照 | 导入素材 | 类型和大小可预知,逐项反馈和取消 |
| 语音输入与命令 | 手忙、低视力、口述 | 显示识别结果,允许纠正,确认高风险动作 |
| 摄像头、扫码 | 识别对象、建立连接 | 权限前解释用途,提供手动输入 |
| 读屏、开关控制 | 非视觉或顺序导航 | 语义名称、角色、状态、逻辑顺序 |
| 手柄、遥控器 | 电视、游戏与远距界面 | 方向焦点、返回路径,按平台专项设计 |
| 眼动、空间指向 | 空间与辅助交互 | 误触防护、停留策略、替代输入,需专项验证 |
INT-02 · 每个动作包含完整生命周期
开始 → 进行 → 完成;也可能进入取消、失败或中断。设计时为每条分支给出可见状态。
以拖拽排序为例:
- 鼠标、触屏或键盘入口开始移动,清楚指出当前对象。
- 移动时保持占位与候选落点,必要时自动滚动。
- 放下后给出新位置;服务端失败时恢复或明确显示未同步。
- Escape 取消;“上移 / 下移”按钮提供同等能力。
Web 拖动功能通常需要单指针、无需拖动的替代方式,规范允许“拖动本质必要”或由用户代理决定等例外。键盘支持仍需另外检查。见 WCAG 2.5.7。
INT-03 · 不为不同设备猜测用户能力
同一设备可能同时连接鼠标、触屏、键盘和辅助工具。根据能力提供增强,不因为判断为“手机”就移除键盘行为。
@media (hover: hover) and (pointer: fine) {
.preview-trigger:hover { text-decoration: underline; }
}
.preview-trigger:focus-visible { outline: 3px solid currentColor; }
建议:常用触控目标可以从 44px 高起步。WCAG 2.2 AA 的目标尺寸条款以 24×24 CSS px 或符合间距等例外为准,44px 不是该条 AA 的统一硬性要求。见 WCAG 2.5.8。
INT-04 · 处理输入法和连续操作
中文输入使用组合态。搜索建议等待组合结束,异步结果只应用最新请求。联想列表不应抢走输入焦点。清空按钮保留可访问名称。
高频操作需要明确策略:重复点击是忽略、排队还是合并?撤销是撤销最后一次还是整批?不要用随意的节流掩盖语义问题。
检查
分别用鼠标、仅键盘、触屏走完主任务;需要读屏的产品再做真实读屏测试。检查每个高级手势是否有可发现的简单入口、每次取消是否留下合理状态。