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)

Web 命令面板与键盘无障碍工作流

Web Command Palette & Keyboard A11y Workflow

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),降低记忆负担。

App 硬件键盘支持与无障碍快捷键

App Hardware Keyboard & Accessibility Shortcuts

iPad 连接硬件键盘后,通过 UIKeyCommand 注册快捷键组合——如 Cmd+N 新建文档、Cmd+Shift+Z 重做,系统自动生成快捷键发现提示(按住 Cmd 键时浮层展示可用快捷键)。Android TV 和机顶盒使用 D-pad 方向键导航,通过 focusable 属性和 nextFocusDown/Up/Left/Right 精确控制焦点移动路径。Accessibility Shortcut(无障碍快捷方式)允许三击 Home 键或电源键快速启用辅助功能(如 VoiceOver、色彩滤镜)。移动端设计需要将触控手势映射为等价键盘操作:滑动 = 方向键,点击 = Enter,长按 = 右键菜单,确保键盘用户和触控用户获得对等体验。

LIVE PLAYGROUND: Command Palette (Cmd+K) 命令面板实时演示 点击按钮或在演示区域内按 Cmd+K / Ctrl+K 唤起命令面板
https://web.meta-ui.edu/keyboard
09:41
📶 🔋
或使用键盘快捷键 Cmd+K (Mac) / Ctrl+K (Win)
文档列表
3 个文件
最近编辑
5 分钟前
收藏夹
12 项

⌨️ 通用快捷键速查表 (Universal Shortcuts)

复制⌘C
粘贴⌘V
剪切⌘X
撤销⌘Z
全选⌘A
查找⌘F
保存⌘S
新建⌘N

🧭 导航与焦点键 (Navigation)

下一焦点Tab
上一焦点⇧Tab
激活按钮Enter ⏎
勾选/选择Space ␣
关闭弹窗Esc
跳到主内容Alt+M

💡 设计原则:所有鼠标可操作的元素都必须能用键盘完成。Tab 顺序应符合视觉阅读顺序(左→右、上→下),可见的 focus ring 不可用 CSS 移除(outline: none 是反模式)。屏幕阅读器用户完全依赖键盘与 ARIA 语义完成所有操作。

iPad 硬件键盘快捷键发现
新建文档 ⌘N
保存 ⌘S
撤销 / 重做
⌘Z ⌘⇧Z
命令面板 ⌘K
无障碍快捷方式映射
👆👆👆 三击 Home → VoiceOver
↑↓←→ 方向键 → 焦点移动
Enter → 激活/选择
📋 大模型统一 Prompt (LLM Prompt)