一个 UI 问题:对于将数据输入到网格中的最佳方式(定义为“最终用户最喜欢的方式”)或最不坏的方式是否有一些共识?
我有一个网格,有很多行。网格的列包含用户可以输入/编辑的各种类型的属性。属性的“类型”包括:
- 自由文本
- 数字(数字)
- 枚举值(例如“高”、“中”和“低”之一)
- 其他(例如日期、持续时间)
“自由文本”类型不难设计(所以我不会问这个),但是接下来的两种类型呢?
数字
- 当使用键盘输入数字时,您是否允许自由文本输入,然后在 blur 上运行 validate 方法?或者,监控每个按键以将数据输入限制为仅数字?
- 您如何告诉用户(在网格上,而不是在表单上)某些列中数据的语法仅限于数字?如果用户按下了错误的(非数字)键,你会怎么做?
- 'spin' 或 'spinner' 控件是标准的 Windows 控件;尝试在基于 HTML 的网格上使用一个是否合适?
枚举值
对于使用鼠标输入或编辑枚举值,我想在鼠标单击时弹出一个小上下文菜单是要做的事情。
- 另一种方法是使用
<select>
输入控件(即组合框)。我想虽然拥有一整列组合框并不像拥有一列文本值那样容易阅读(因为组合框添加了额外的非文本墨水)?您如何看待通常显示纯文本,但是当字段获得输入焦点时用组合框替换该文本(然后在模糊时删除组合框)? - 当焦点因键盘(即 [Tab] 键)而不是鼠标(即单击)而改变时,您是否还会在焦点上弹出相同的菜单?换句话说,是否应该跳到一个字段导致弹出菜单?顺便说一句,我见过的基于 CSS 的弹出菜单响应鼠标而不响应键盘(例如,响应 [Up] 和 [Down] 箭头键)。你知道任何可以在浏览器中运行的类似 Intellisense 的数据输入实现吗?
例如?
我也有兴趣看到任何你认为是典型例子的东西。我对桌面 UI 和/或浏览器内的答案感兴趣。
编辑:在另一个带有 [data-entry] 标签的问题之后(“有人使用过 Sigma Grid(基于 Javascript 的可编辑数据网格)吗? ”),我正在查看 Sigma Grid 示例。它在 IMO 上做了很多事情(对键盘和即时选择框的良好支持);但它对数字字段的支持可能不完善,例如,如果我在数字单元格中按“a”,那么有时它会弹出一个警告框告诉我我错了(工具提示可能不那么具有侵入性),和/或有时它使单元格为空(空白),擦除'a'并且什么都没有留下。
编辑以回复以下答案之一。
但是,再次确定表单的主要用途是什么,并为此进行优化。数据可视化或分析与批量录入的需求不同,满足键盘用户与键盘+鼠标用户完全不同。
我希望相同的显示(即表格/网格)能够很好地显示现有属性、创建新属性和编辑现有属性。我期望有几十个项目(即几十行数据),每个项目只有几列(例如,一列文本/项目描述,加上 1 个或更多列用于 1 个或多个相关项目属性)。
一些数据/属性可能是主观的和相对的(例如,每个项目的两个属性是每个项目的“优先级”或“难度”,只有与其他项目相比才特别有意义),这就是我想要的原因将所有数据一起显示在一个屏幕上:以便最终用户可以比较它们。
我的应用程序是针对相对专家(不是新手)的计算机用户,但不是数据输入专家:例如,用户是软件开发人员、项目经理、产品经理、QA 人员等,但在某种程度上也是他们的客户;它在 Intranet(不是公共 Internet)上运行,但易于使用且易于学习和/或直观学习都很重要。
此外,我不明白为什么满足键盘用户与键盘+鼠标用户完全不同:我认为单个解决方案可以/应该支持其中一个和/或两者。