MODULE 08 / LESSON 04
触摸、鼠标、键盘与手势
不要让一种输入方式成为隐形前提。
先理解这个概念
鼠标适合精确指向,触摸需要更宽裕的目标,键盘依赖合理焦点顺序与快捷键,手势需要可发现性。设备可能同时拥有触屏和鼠标,因此不能简单以屏幕宽度判断输入方式。
不同输入方式的精度、可发现性和反馈不同。鼠标有悬停,触摸依靠直接接触,键盘依赖焦点顺序,手势则常缺少可见入口。设备类型不能可靠推断输入方式:平板能接键盘,桌面也可能触摸。应从输入能力与等价路径设计。
像支持多个客户端的 API,核心任务应有等价的操作路径。
记住这三个原则
- 01
hover 内容也要能通过触摸或焦点访问。
- 02
拖拽提供按钮或菜单等替代方式。
- 03
快捷键避免与系统、浏览器和辅助技术冲突。
实际设计时,分三步做
- STEP 01
列出每项操作在鼠标、触摸和键盘下的入口,检查是否有功能只在悬停或拖拽时出现。
- STEP 02
给手势和快捷键提供可发现的替代入口;快捷路径用于提效,不作为新用户完成任务的唯一方式。
- STEP 03
验证焦点、按下、拖动和取消行为,特别是滚动与横向手势冲突时,用户能否安全退出。
一个容易理解的例子
任务只能通过拖拽改变分组,键盘用户无法完成。
保留拖拽,同时提供“移动到…”菜单和明确结果反馈。
不同输入能力的用户都能完成同一个任务。
展开看:从场景到设计决定
任务排序支持拖拽很直观,但手部精度有限或只用键盘的用户可能难以完成。可以同时提供“上移、下移”或选择目标位置的菜单。鼠标悬停显示操作时,键盘聚焦也应能发现,触屏则保留明确的更多入口。不同输入路径最终修改同一排序规则,不能各自维护一份状态。
适用边界与取舍
快捷键越多越可能与系统或浏览器冲突。优先覆盖高频任务,提供说明,并避免拦截用户熟悉的基础编辑与导航行为。
把这个原则用一次
先做一个小判断
设计图片缩放的三种入口。
再完成一份设计练习
为相册中的选择、排序、打开和删除设计三种输入路径,找出最容易遗漏的一项。
不要把长按作为关键功能的唯一入口,也不要让可点击区域只包住小图标。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
WAI-ARIA Authoring PracticesMaterial Design 3