将数据输入网格

Question

一个UI问题:对于最好的(定义为"最终用户最喜欢的那个")或实现数据输入网格的最差方法,是否存在一些共识？

我有一个网格,有很多行.网格列包含各种类型的属性,用户可以输入/编辑这些属性.属性的"类型"包括:

• 自由文本
• 数字(数字)
• 枚举值(例如'高','中'和'低'之一)
• 其他(例如日期,持续时间)

"自由文本"类型并不难设计(所以我不会问这个),但接下来的两种类型呢？

数字数字

• 使用键盘输入数字时,是否允许自由文本输入,然后对模糊运行验证方法？或者,监控每次按键以将数据输入限制为仅限数字？
• 如何告诉用户(在网格上,而不是在表单上)某些列中数据的语法仅限于数字？如果用户按错了(非数字)键,你会怎么做？
• 'spin'或'spinner'控件是标准的Windows控件; 是否适合尝试在基于HTML的网格上使用一个？

枚举值

为了使用鼠标输入或编辑枚举值,我想在鼠标点击时弹出一个小的上下文菜单就可以了.

• 另一种方法是使用<select>输入控件(即组合框).我想尽管拥有一整套组合框并不像拥有一列文本值那样容易阅读(因为组合框添加了额外的非文字墨水)？您如何看待通常显示纯文本,但在字段获取输入焦点时使用组合框替换该文本(然后在模糊时删除组合框)？
• 当焦点因键盘而变化(即[Tab]键)而不是鼠标的结果(即点击)时,您是否也会在焦点上弹出相同的菜单？换句话说,应该在弹出菜单中选择一个字段吗？顺便提一下,我见过的基于CSS的弹出菜单会响应鼠标但不响应键盘(例如[Up]和[Down]箭头键).您是否知道可以在浏览器中运行的任何类似Intellisense的数据输入实现？

例如？

我也有兴趣看到你认为是一个典范的例子.我对桌面UI和/或浏览器内的答案感兴趣.

---

编辑:关注[data-entry]标签的另一个问题(" 有人使用Sigma Grid(基于Javascript的可编辑数据网格)吗？ "),我正在查看Sigma Grid示例.它做了很多很好的事情IMO(对键盘和即时选择框的良好支持); 但是它对数字字段的支持可能是不完美的,例如,如果我在数字单元格中按"a",那么有时它会弹出一个警告框告诉我我错了(可能工具提示可能不那么干扰),和/或有时它将单元格留空(空白),擦除'a'并且不留任何东西.

---

编辑以回复以下答案之一.

但是,再次确定表单的主要用途是什么,并针对此进行优化.数据可视化或分析具有与批量输入不同的需求,并且令人满意的键盘用户与键盘+鼠标用户完全不同.

我希望相同的显示(即表格/网格)能够很好地显示现有属性,创建新属性和编辑现有属性.我期待几十个项目(即数十行数据),每个项目只有几列(例如,一列文本/项目描述,以及一个或多个列,用于一个或多个关联项目属性).

一些数据/属性可能是主观的和相对的(例如,每个项目的两个属性是每个项目的'优先级'或'难度',这仅在与其他项目比较时才特别有意义),这是我想要的原因在一个屏幕上一起显示所有数据:以便最终用户可以比较它们.

我的应用程序是针对相对专家(不是新手)的计算机用户,而不是数据输入专家:例如,用户是软件开发人员,项目经理,产品经理,QA人员等,但在某种程度上也是他们的客户; 它在内联网(不是公共互联网)上运行,但是易于使用且易于使用且易于学习和直观学习都非常重要.

此外,我不明白为什么令人满意的键盘用户与键盘+鼠标用户完全不同:我认为单个解决方案可以/应该支持和/或两者兼而有之.

Answer 1

恕我直言，您需要问的一个大问题是页面的主要目的以及用户的相对复杂程度。您是否正在与 Tab+10 键专业人士、鼠标点击+狩猎打字员打交道，或者两者兼而有之？

您做出的选择需要考虑到这一点。我假设通过选择网格，您的用户是从底部向上迈出的一步，并使用选项卡导航作为导航表单的主要方式，并且主要用途是批量数据输入。

关于数字输入：

• 如果您计划提供转换例程，则无需限制为数字。
• 如果用户输入无效输入（请注意，某些数字，而不仅仅是文本可能无效......例如，负年龄），您最好立即内联显示错误。
• 避免使用旋转器，尤其是在处理带小数的数字时。旋转器将焦点从数据输入上移开，并提供最小的价值，除非您处理的是一组有限的离散数字。如果是这种情况，组合/选择可能会更好（我将在下一篇文章中详细说明原因）。

关于枚举值：

• 像瘟疫一样避免弹出窗口/上下文菜单。它们要求用户使用鼠标并将焦点从当前任务上移开，毫不夸张地说，当您生成一个新窗口时。组合/选择允许用户进行一定程度的提前输入，并允许通过箭头进行键盘选择。
• 您提出的组合框问题（下拉箭头使文本难以阅读）可以通过您提供的焦点解决方案来缓解，但是，通常可以通过在行和列之间添加更多填充来使网格更具可读性。

额外评论：

• 如果可能的话，用文本形式输入带转换的日期。除非你计划培训你的用户，或者选择采用一些严厉的屏蔽系统（以及同样令人恼火的验证失败的惩罚），否则他们应该被允许输入他们想要的日期。 如果您与国际人士打交道，请注意，他们输入的月份和日期不同。美国的 SOP 以 mm/dd/yyyy 为单位，而许多国家/地区更喜欢 dd/mm/yyyy。
• 如果您有大量字段，您可能需要考虑将数据输入分成多行。超过 10 列的平面网格很难在单个视图中理解。这样做的缺点是增加了垂直滚动，因此您必须在一方面解释当前编辑数据行时使用数据上下文（例如上面的行和下面的行）的重要性与获取所有一行的信息（多行或水平滚动）在另一行上。

然而，再次确定表单的主要用途是什么，并对其进行优化。数据可视化或分析与批量输入有不同的需求，满足键盘用户与键盘+鼠标用户完全不同。

编辑：回复评论

另外，我不明白为什么满足键盘用户与键盘+鼠标用户完全不同：我认为单个解决方案可以/应该支持其中一个和/或两者。

这并不完全不同。将其视为“优化”和“支持”大部分用户之间的区别。举几个例子：代码编辑器针对键盘用户进行了优化。在热键、快捷方式和键盘导航之间，用户很少需要使用鼠标。大多数 RTS 游戏都是使用单手操作鼠标、另一只手操作键盘的方式进行操作。他们通常支持专门使用鼠标，但并未对此进行优化。ITunes 则处于另一个极端——它几乎完全依赖鼠标（就像大多数以拖放为主的 UI 一样），仅使用键盘几乎是不可能的。

是否允许输入并显示错误；或者阻止输入并显示错误？当它是网格（一个单元格，表格内的某个位置）时，将其显示为“内联”是什么意思？

我不确定你正在哪个平台上构建，但是是的，我的意思是表内的某个地方，最好是在你正在谈论的数据行上。在 ASP.NET 的 GridView 中，允许使用 TemplateFields，它允许您将多个控件嵌入到同一个“单元格”中。在富客户端世界中，大多数第 3 方组件都提供对类似 OOTB 的支持（例如 IDataErrorInfo），这会在上下文中提供错误。

如果替代方案是将所有错误放在网格上方或下方，则用户将很难找出数十行数据中的哪一行存在错误。有关对此进行次优处理的示例，请尝试将 10 件商品添加到亚马逊购物车，然后将所有金额更改为 2，但 1 件商品除外，您将其更改为 -1。点击更新并查看是否可以轻松导航到有错误的行。

此外，验证风格的“流行”风格是允许用户输入数据并在不正确时向他们提供消息，而不会阻止输入和/或删除他们的输入。StackOverflow 在很多地方都这样做，最容易通过添加评论来证明。验证会通知您至少需要 15 个字符，但在通知您时不会删除您的评论。紧随其后的是让用户明确地知道他们的输入是不正确的。一个例子是尝试在 Windows 中重命名带有反斜杠的文件。您会立即看到一个带有精确说明的气球。

嗯，智能感知或自动完成是一种弹出窗口，但它可以使用键盘进行操作（不会夺走焦点）。

如果您可以像 Visual Studio 中的 Intellisense 一样清晰地支持弹出窗口，我会建议您继续使用。我对弹出窗口的非 VS 经验是，大多数尝试都失败了（有些非常可怕，要求我拿起鼠标并重新聚焦到正确的位置）。使用 Intellisense 需要记住的另一件事是，它具有出色的语句结束处理（我的意思是与您键入的单词的交互 + 前瞻 + 拼写/大小写宽恕 + tab/enter 处理）。由于我假设您正在使用选项卡在字段之间导航（请注意，VS 没有字段），您将不得不找出另一种方法来让您的应用程序知道“我现在完成了，转到自动” -完整/智能感知我刚刚输入的内容”

我认为组合框围绕文本的框架使文本更难快速阅读；也许一些带有向下箭头但组合框周围没有框架（只是表格单元格的边框）的最小组合框对于没有焦点的单元格会更好：尽管我想知道为什么即使是向下箭头也可能对于没有焦点的单元格很有用。

如果您担心 ComboBox 的框架，我完全同意 - 将框架颜色更改为对比度较低的颜色。任何在未聚焦时最小化控件“chrome”的解决方案显然都会使其更像文本，并且（可能？）更具可读性。

无论如何，祝您的设计好运。