03 · 输入方式与交互分类

适用:选择一个交互方式,或审查交互是否只能在开发者自己的设备上工作。这里给出分类索引,具体平台手势冲突需要另行验证。

INT-01 · 先定义意图,再定义输入动作

“移动项目到下一个分组”是意图;拖拽、菜单里的“移动到”、键盘快捷键是不同入口。业务能力应复用,不应把业务逻辑只写在拖拽事件中。

输入或模式适用任务必须补齐的行为与替代
点击、轻触选择、触发动作按下反馈、取消、忙碌时防重复
双击、双触熟练用户快速打开或编辑提供单次点击入口;区分单击与双击冲突
悬停补充预览、辅助说明焦点也能触发;触屏可发现;不隐藏主操作
右键菜单对象上下文操作提供可见“更多”按钮与键盘入口
长按移动端上下文动作提供普通按钮,避免劫持文本选择
拖拽排序、跨区移动、上传可取消、清楚落点、提供无需拖动的操作
滑动浏览、轻量对象操作防止与页面滚动冲突,危险动作可恢复
滚动连续浏览保留位置,固定区域不挡内容
缩放、捏合地图、画布、图片提供放大缩小与重置按钮,不禁用页面缩放
多指、路径手势绘画、专业操作评估是否必要,提供更简单的输入入口
Tab、Shift+Tab在可操作元素之间移动顺序符合阅读;焦点清晰可见
Enter、Space激活控件使用原生按钮,遵循控件自身约定
方向键、Home、End组合控件内部移动按具体控件模式实现,不能全局劫持
Escape取消临时模式、关闭弹层返回原焦点;未保存内容按风险处理
快捷键、命令面板高频专业操作可发现、可关闭冲突,避免单字符误触
文本与输入法搜索、编辑不在中文组词期间触发提交或破坏光标
粘贴、自动填充批量输入、身份字段保留常见格式;不要阻止密码管理器
文件选择、拖入、拍照导入素材类型和大小可预知,逐项反馈和取消
语音输入与命令手忙、低视力、口述显示识别结果,允许纠正,确认高风险动作
摄像头、扫码识别对象、建立连接权限前解释用途,提供手动输入
读屏、开关控制非视觉或顺序导航语义名称、角色、状态、逻辑顺序
手柄、遥控器电视、游戏与远距界面方向焦点、返回路径,按平台专项设计
眼动、空间指向空间与辅助交互误触防护、停留策略、替代输入,需专项验证

INT-02 · 每个动作包含完整生命周期

开始 → 进行 → 完成;也可能进入取消、失败或中断。设计时为每条分支给出可见状态。

以拖拽排序为例:

  1. 鼠标、触屏或键盘入口开始移动,清楚指出当前对象。
  2. 移动时保持占位与候选落点,必要时自动滚动。
  3. 放下后给出新位置;服务端失败时恢复或明确显示未同步。
  4. 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 · 处理输入法和连续操作

中文输入使用组合态。搜索建议等待组合结束,异步结果只应用最新请求。联想列表不应抢走输入焦点。清空按钮保留可访问名称。

高频操作需要明确策略:重复点击是忽略、排队还是合并?撤销是撤销最后一次还是整批?不要用随意的节流掩盖语义问题。

检查

分别用鼠标、仅键盘、触屏走完主任务;需要读屏的产品再做真实读屏测试。检查每个高级手势是否有可发现的简单入口、每次取消是否留下合理状态。