输入步进器的设计指南

为数据输入进行设计是很棘手的。移动设备的屏幕空间有限或太高交互成本会使用户输入信息变得困难。有许多输入选项，但并不是所有方法都适合于每个任务。

一个常见的输入控件是输入步进器，一个用于输入数字信息的用户界面元素。

定义:一个输入步进器是一个两段UI控件，用于递增或递减数值。

大多数输入步进器都是图形用户界面的视觉元素(例如，它们是GUI控件)，声音和手势界面也可以有步进器。例如，对声控电视机说“音量提高”或“音量降低”，就会按设定的数量调整音量。在3D手势界面中，向上挥手可能会增加所选变量的值。所有这些步进器的关键定义属性是它们是相对控件-用户的操作将指定变量的值更改一定的固定量。（将这种类型的控件与绝对类型的控件（如文本输入字段）进行对比；使用绝对控件，用户指定新的所需值而不参考以前的值。）在本文中，我们重点介绍GUI输入步进器的设计。

尽管在某些情况下，输入步进器是一种方便的输入数字的工具，但它们并不是每种情况下的理想选择。在本文中，我们将讨论这个UI控件的优缺点，以及如何正确使用步长。

输入步进器的好处

没有键盘

步进器可以绕过设备限制。例如，在智能手机上使用键盘很容易出错，一些计算机系统(如公交终点站或博物馆亭)没有键盘。在这些情况下，输入步进器是一个适当的设计选择，以支持小的调整默认值．(在交互设计的许多其他领域中，基于任务分析或其他用户研究选择好的默认值对于这些系统的可用性至关重要。)

直观的使用

输入步进器有清晰、显式极大的可能性：加号段通常位于值的右侧（或上方），减号段位于左侧（或下方）；这些位置很自然地映射到概念隐喻上，如“进步是从左到右”或“多多少少”（然而，这些隐喻取决于文化；例如，在使用从右到左语言的文化中，进度隐喻相反。步进器段的位置应反映文化规范，如下面的iOS示例中所示。）方向按钮和符号标签在无需额外说明的情况下发挥功能。

交互成本低

对于调整较小的值，步进器需要的交互比其他输入方法更少。例如，要将表单中的客人数量从1个增加到2个，用户只需点击一次加号按钮。这个动作比选择输入区域，点击键盘上的数字“2”，然后按Enter键或取消键盘要省力得多。

当用户不知道确切值时的相对控件

由于步进是相对控制，它们可以使用户从考虑他们正在修改的变量的确切值。人们只需要考虑相对于当前状态，他们想要的价值是上升还是下降。例如，当在网页浏览器中指定所需的文本大小时，非图形设计师的人将很难决定将优化的确切数字易读性网页的一部分。

但是，他们肯定知道当前文本是否太小或(很少)太大，所以很容易使用类似CTRL-plus或CTRL-minus的阶梯式操作来使文本更大或更小一步(当然，前提是他们熟悉这些浏览器命令)。

输入步进器的缺点

很难获得

费茨法则计算人们到达目标所需的时间。无论是使用鼠标还是手指，较大的按钮都比较小的按钮快。但许多输入步进器都具有堆叠的按钮位置或较小的按钮大小。

在下面的例子中，向上和向下的箭头非常小，而且彼此挨得很近，以至于用户需要放慢速度，仔细计划自己的移动，以免在相反的方向上点击错误。

对默认值进行较大调整时不适用

过多的点击和轻敲可能会令人恼火。步进器不适合进行大量调整。例如，当用户需要将值从1更改为50时，输入步进器不是明智的选择。因此，步进器对于数字参数很有意义，大多数用户可能会选择一个明确的默认值。如果频繁，则会出现较大偏差如果默认值是预期值，则更适合使用不同的输入方法。

Stepper-Design指南

基于以上考虑，这里有一些设计输入步进器的一般性建议:

• 对于具有最常选择的清晰值的数值字段使用步进器．步进器可以很好地用于具有一个常用输入值且大多数其他输入值与该值稍有偏差的字段。如果用户通常为字段输入的值范围有很大的可变性(例如，年龄或出生日期)，则不适合使用步进器。
• 将最常选择的值设置为步进默认值．这个指导方针是第一个的直接暗示。例如，1通常是预订机票的默认乘客数量，或将商品添加到购物车的默认数量，而2可能是餐厅预订的默认就餐者数量。
• 避免连续数量的步进器．根据设计，步进字段只能取离散值，即步进增量的倍数。(不能为数量步进指定1.5项。)有时，将连续变量转换为离散变量是有意义的(例如，我们通常将年龄作为离散变量，以年计算)。然而，在许多情况下，将一个连续变量(如价格或距离)转换为一个步骤错误的离散变量可能会令人恼火或不适合用户任务。

例如，当寻找购买一所房子时，价格字段的增量为$100K将会太受限，因为一些用户可能希望输入一个不是$100K倍数的值，并且向上或向下舍入可能不会产生相同的结果。最好允许用户输入这样的连续值，而不是强迫他们使用固定增量的步进。

• 清楚显示步进控制的磁场。清楚地指出步进器适用的表单内容。例如，如果使用步进器控件更改时间和日期，则应清楚地突出显示调整的时间或日期部分，以便用户确切地知道他们正在更改的内容。

• 在台式机和手机上都使用大按钮．目标区域应该足够大，以支持输入方式。例如，对于触摸屏，我们一直推荐a最小目标尺寸为1厘米× 1厘米．尽管鼠标比指尖更精确，但也不要让按钮对桌面屏幕来说太小。

水平步进器通常比垂直步进器更好，因为垂直步进器往往比较拥挤。如果您决定垂直放置，请间隔增量和减量控件，以确保避免由于意外撞击而发生滑动。

我们建议在移动设备上水平放置步进器，考虑到使用指尖固有的精度挑战。

• 使用+/-或上/下箭头作为按钮可视化．对于水平步进器，加号和减号通常作为步段的标签是最好的。对于垂直步进器(在值的上面和下面有分段)，您也可以使用向上和向下的箭头按钮，通常是可视化的标志。

左/右箭头按钮是水平步进器的一种可能，但很少推荐使用，因为它们与将内容变得更大或更小的概念没有直接联系。

• 添加额外的输入方法．除了设计良好的步进器外，您可能还希望添加可选的输入方法，以给予用户控制和灵活性，特别是在输入值复杂或不可预测的情况下。这里有一些额外的输入方法结合步进，以使输入更有效:
  • 文本字段步进器是一种UI组件，它允许使用文本字段和侧面的步进按钮快速输入数字进行调整。用户可以选择直接输入精确的值，或者使用步进来调整默认值，如果它接近需要的值，改变它只需要几个点。这对于默认表大小为2个就餐者的餐厅预订示例来说是合适的:stepper可以很容易地用于指定单个就餐者或4人家庭，而文本输入则更适合10人组。
  • 允许长时间按或点击按钮，以更快地连续增加或减少。
  • (桌面)允许用户使用键盘箭头来增加或减少:上和下，左和右应该匹配屏幕上的按钮布局。

我们通常不推荐使用许多不同的交互技术来实现相同的目标，因为需要在多种方法之间进行学习和选择，这会给UI增加额外的开销。然而，对于步进器，替代的输入方法在视觉上并不突出，而那些只想对默认值做一个小调整的人不会因为考虑替代方法而放慢速度。

• 明确步进值和步进范围．设计师应该明确步骤和单位(游戏邦注:如美元、美分和百分比)。另外，如果输入值有一个最大值或最小值限制，一定要指出它。通常最好是让一个步进器按下一个按钮来改变当前值，但如果任务分析表明，其他步进值可能更合适。(例如，在上面的截图中，指定一个学生的GPA，适当的步长值是整个绩点的十分之一。)

何时使用输入步进器

为那些具有清晰的首选值(用户只会稍微调整)的字段实现输入步进。步进段应足够大，以防止用户错误。