MODULE 08 / LESSON 04

触摸、鼠标、键盘与手势

不要让一种输入方式成为隐形前提。

32 / 60 课组织界面与交互

先理解这个概念

鼠标适合精确指向,触摸需要更宽裕的目标,键盘依赖合理焦点顺序与快捷键,手势需要可发现性。设备可能同时拥有触屏和鼠标,因此不能简单以屏幕宽度判断输入方式。

不同输入方式的精度、可发现性和反馈不同。鼠标有悬停,触摸依靠直接接触,键盘依赖焦点顺序,手势则常缺少可见入口。设备类型不能可靠推断输入方式:平板能接键盘,桌面也可能触摸。应从输入能力与等价路径设计。

用程序员的语言说

像支持多个客户端的 API,核心任务应有等价的操作路径。

记住这三个原则

  1. 01

    hover 内容也要能通过触摸或焦点访问。

  2. 02

    拖拽提供按钮或菜单等替代方式。

  3. 03

    快捷键避免与系统、浏览器和辅助技术冲突。

实际设计时,分三步做

  1. STEP 01

    列出每项操作在鼠标、触摸和键盘下的入口,检查是否有功能只在悬停或拖拽时出现。

  2. STEP 02

    给手势和快捷键提供可发现的替代入口;快捷路径用于提效,不作为新用户完成任务的唯一方式。

  3. STEP 03

    验证焦点、按下、拖动和取消行为,特别是滚动与横向手势冲突时,用户能否安全退出。

一个容易理解的例子

BEFORE / 常见问题

任务只能通过拖拽改变分组,键盘用户无法完成。

AFTER / 可以这样改

保留拖拽,同时提供“移动到…”菜单和明确结果反馈。

不同输入能力的用户都能完成同一个任务。

展开看:从场景到设计决定

任务排序支持拖拽很直观,但手部精度有限或只用键盘的用户可能难以完成。可以同时提供“上移、下移”或选择目标位置的菜单。鼠标悬停显示操作时,键盘聚焦也应能发现,触屏则保留明确的更多入口。不同输入路径最终修改同一排序规则,不能各自维护一份状态。

适用边界与取舍

快捷键越多越可能与系统或浏览器冲突。优先覆盖高频任务,提供说明,并避免拦截用户熟悉的基础编辑与导航行为。

YOUR TURN

把这个原则用一次

先做一个小判断

设计图片缩放的三种入口。

再完成一份设计练习

为相册中的选择、排序、打开和删除设计三种输入路径,找出最容易遗漏的一项。

容易踩的坑

不要把长按作为关键功能的唯一入口,也不要让可点击区域只包住小图标。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

WAI-ARIA Authoring PracticesMaterial Design 3