为数据网格设计键盘导航

高级用户希望脱离鼠标进行工作。

设计良好的数据网格能让他们仅通过键盘即可进行导航、编辑和操作。这些用户的操作速度比鼠标用户快两到三倍。

如果你的网格要求每一步操作都必须点击,高级用户会讨厌你的工具。

解决方法很简单。它只需要大约一百行代码和明智的设计选择。

请遵循以下规则来构建专业的网格:

• Tab:用于进入或退出网格。进入网格后,Tab 应在行内的按钮或输入框之间切换。不要使用 Tab 在单元格之间移动。

• 方向键:用于在单元格之间移动。上下键在行之间移动,左右键在列之间移动。

• Enter:用于触发行的主要操作,例如打开详情视图。

• Space:用于选中或取消选中一行。

• Escape:用于取消编辑或关闭菜单。

• Home 和 End:用于跳转到行的开头或结尾。

最大的错误是使用 Tab 在单元格之间移动。在大型网格中,这样做太慢了。如果一个网格有 7 列和 20 行可见行,用户必须按 140 次 Tab 键才能看完一个屏幕。方向键解决了这个问题。按一下即可移动到下一行。

对于行内编辑,请遵循电子表格模式:

  • 按 Enter 开始编辑单元格。
  • 再次按 Enter 保存更改。
  • 按 Escape 取消编辑。
  • 按 Tab 保存并移动到下一个可编辑单元格。

为了帮助用户找到这些快捷键,请使用以下模式:

  • 添加一个 "?" 快捷键来打开帮助菜单。
  • 在按钮的工具提示中显示快捷键。
  • 使用一次性的新手引导提示。

优秀的键盘导航是生产力的倍增器。这是一项小投入,却能大幅提升用户速度。

来源:https://dev.to/137foundry/how-to-design-keyboard-navigation-for-a-data-grid-so-power-users-stop-reaching-for-the-mouse-mh4