从用户那里获取号码的最佳方法是什么？

Question

我想知道一个小数字列表[1..20]，你会建议用什么样的控制来提示用户选择。

我在想NumericUpDown控件，但WebForm不存在，更糟糕的是，我正在Pylons应用程序（Python Framework）上部署

你觉得DropDown控件就足够了吗？从某种程度上说，我仍然认为NumericUpDown控件更直观，更容易从用户角度使用。

会喜欢SO社区的意见，也许会就最佳实践提出建议。

非常感谢！

编辑：忘了提到我正在使用YUI库和webhelpers库，并且据我所知，没有这样的控件具有与numericupdown相同的功能

Answer 1

如果用户主要与键盘进行交互，请考虑使用常规编辑框并对限制进行测试。它比敲击向下箭头更容易选择其他数字。

如果它是基于鼠标的并且你有空间，那么按钮或收音机的网格会很快。

如果它是基于键盘的，那么Jakob Nielsen在他的Alertbox文章 Drop-Down Menus: Use Sparingly 中写道，请注意：

  

要避免的设计

     

下拉菜单确实有其优点。首先，它们可以节省屏幕空间。它们还会阻止用户输入错误数据，因为他们只显示合法选择。最后，因为它们是标准的小部件（即使是令人不快的小部件），用户在遇到它时也知道如何处理下拉菜单。

     

尽管有这些优势，但如果设计师不经常使用下拉菜单，那么Web可用性会增加。为此，以下是一些要避免的设计示例：

     

  

• 州名缩写，，例如美国邮寄地址。用户只需输入“NY”就可以快得多，而不是从滚动下拉菜单中选择状态。自由格式输入到具有受限选项的字段确实需要在后端进行数据验证，但从可用性角度来看，它通常是最好的方法。 （这是e-commerce usability的准则＃178，因为我们在签出表单中遇到了很多错误，并且状态下拉。）

  

• 用户熟知的数据菜单，例如他们出生的月份和年份。这些信息通常硬连线到用户的手指中，并且必须从菜单中选择这样的选项打破了用于输入信息的标准范例，甚至可以为用户创建更多的工作，如以下示例所示。

  

Answer 2

下拉很好，数字范围很小，可以快速访问范围两端的数字。请记住，用户可以使用firebug或其他内容更改下拉列表的选定值，因此请使用验证以确保提供的数字在范围内。

Answer 3

感谢各位回复人员。

从一些可用性测试中，我认为

1. NumericUpDown控件又名NumberSpinner最适合挑选小范围内的数字，例如1-100

2. 经过验证的文本框可以很好地输入大量数据

3. 下拉菜单可能仅适用于较小的数字范围，例如1-10，因为下拉的长度（上网本用户？手机用户）

4. 单选按钮网格不如下拉菜单，因为用户必须扫描整个屏幕长度以选择他的号码

对于使用萤火虫防止数字改变进行验证的问题，请向达米恩致敬。

Answer 4

如果你更喜欢NumericUpDown风格，你可以使用javascript轻松制作一个简单的版本。我已经用jQuery完成了，所以我不能真正给你详细说明用YUI做这件事，但总的来说，这就是我实现的。创建一个标准文本框，其中包含预设的默认值，并设置为只读。添加上下按钮并根据需要设置样式（我使用div，在框的左侧，在右侧）。为每个按钮集添加一个单击事件，以增加或减少文本框的值。在您的脚本中，限制值的范围，但也验证输入以确保它不会像之前建议的那样更改。我不承认任何这方面的专家，所以可能有更简单的方法来做到这一点。