44. 🎯 键盘与命令 Keyboard & Command ★★★★☆
🌏 Web 网页规范
- Command Palette: Cmd+K / Ctrl+K 全局命令面板,模糊搜索+即时执行
- Focus Trap: 模态框/对话框焦点陷阱,Tab 循环锁定,Esc 关闭退出
- Skip Navigation: 隐藏跳转链接让屏幕阅读器绕过重复导航直达主内容区
- Hotkey System: 分层快捷键注册表,冲突检测与优先级裁决机制
📱 App 移动端规范
- iPad 硬件键盘: UIKeyCommand 注册快捷键,Cmd 键修饰符组合,discoverability 提示
- D-pad 导航: Android TV/盒子方向键焦点移动,focusable + nextFocusDown 属性链
- Accessibility Shortcut: 三击 Home/电源键触发辅助功能快捷操作
- 手势-键盘映射: 触控手势等价于键盘操作 (Swipe = Arrow, Tap = Enter)
Command Palette(Cmd+K)已成为现代 Web 应用的标配交互范式——用户按下快捷键唤起全局命令面板,输入关键词通过模糊匹配算法(Fuzzy Search)实时过滤命令列表,上下箭头键导航、Enter 执行、Esc 关闭。VSCode、Linear、Notion 等效率工具型产品将此模式发扬光大。Focus Trap(焦点陷阱)是模态框无障碍的核心——打开模态框时焦点自动移入,Tab 键在模态内部循环,Shift+Tab 反向循环,Esc 关闭并恢复先前焦点。Skip Navigation(跳过导航)链接是屏幕阅读器用户的"逃生通道"——按 Tab 后页面顶部出现隐藏链接,点击直接跳转主内容区,避免每次都要听完几十个导航项。快捷键冲突解决需要分层注册表:全局快捷键 → 页面级快捷键 → 组件级快捷键,按作用域优先级裁决;按住 Cmd/Ctrl 时显示快捷键提示浮层(Cheatsheet Overlay),降低记忆负担。
iPad 连接硬件键盘后,通过 UIKeyCommand 注册快捷键组合——如 Cmd+N 新建文档、Cmd+Shift+Z 重做,系统自动生成快捷键发现提示(按住 Cmd 键时浮层展示可用快捷键)。Android TV 和机顶盒使用 D-pad 方向键导航,通过 focusable 属性和 nextFocusDown/Up/Left/Right 精确控制焦点移动路径。Accessibility Shortcut(无障碍快捷方式)允许三击 Home 键或电源键快速启用辅助功能(如 VoiceOver、色彩滤镜)。移动端设计需要将触控手势映射为等价键盘操作:滑动 = 方向键,点击 = Enter,长按 = 右键菜单,确保键盘用户和触控用户获得对等体验。
⌨️ 通用快捷键速查表 (Universal Shortcuts)
🧭 导航与焦点键 (Navigation)
💡 设计原则:所有鼠标可操作的元素都必须能用键盘完成。Tab 顺序应符合视觉阅读顺序(左→右、上→下),可见的 focus ring 不可用 CSS 移除(outline: none 是反模式)。屏幕阅读器用户完全依赖键盘与 ARIA 语义完成所有操作。