UE设计中输入步进器设计指南

 通过允许用户在单击一次按钮时增加或减少数字，就可以减少值与缺省值有少许偏离的字段的输入工作。对于具有较大可变性的值，请避免使用此GUI控件。

数据输入的设计可能很棘手。移动设备上有限的屏幕空间或较高的交互成本可能会使用户难以键入信息。输入选项很多，但并非所有方法都适合每个任务。

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

输入步进

步进器示例：水平（左）和垂直（右）

定义：一个输入步进是用来递增地增加或减少的数字值的两段UI控制。

大多数输入步进器都是图形用户界面的可视元素（即它们是GUI控件），语音和手势界面也可以具有步进器。例如，对声控电视机说“调高音量”或“调低音量”将以设定数量修改音量。在3D手势界面中，举手可能会增加所选变量的值。所有这些步进器的关键定义属性是它们是相对控件-用户的操作将指定变量的值更改为某个固定量。（将这种类型的控件与诸如文本输入字段之类的绝对控件进行对比；对于绝对控件，用户无需参考先前的值即可指定新的期望值。）在本文中，我们着重于GUI输入步进器的设计。

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

输入步进器的好处

没有键盘

步进器可以绕开设备限制。例如，在智能手机上使用键盘容易出错，并且某些计算机系统（例如运输终端或博物馆自助服务终端）没有键盘。在这些情况下，输入步进器是支持对默认值进行细微调整的合适设计选择。（与交互设计的许多其他领域一样，基于任务分析或其他用户研究选择良好的默认设置对于这些系统的可用性至关重要。）

皮划艇输入步进

Kayak使用输入步进器允许用户更改其搜索表中的旅行者数量。

使用直观

输入步进器具有清晰明确的指示符：加号段通常位于值的右侧（或上方），而减号段通常位于值的左侧（或下方）。这些位置自然地映射到概念隐喻上，例如“进步是从左到右”或“更多是上升而更少是下降”。（但是，这些隐喻取决于文化；例如，在使用从右到左语言的文化中，步进比喻则相反。步进段的位置应反映出文化规范-如下面的iOS示例。）方向按钮和符号标签可传达功能，而无需其他说明。

iOS输入步进

在iOS中，将系统语言更改为从右到左的语言（例如阿拉伯语（左））会与英语版本（右）相反，从而改变步进器段的位置（右侧递减，左侧递增）。

互动成本低

为了调整较小的值，步进器比其他输入方法需要更少的交互。例如，要将一个表格中的来宾人数从1个增加到2个，用户只需要轻按一次加号按钮即可。与选择输入字段，点击小键盘上的数字“ 2”，然后按Enter或关闭键盘相比，此操作所需的精力更少。

步进与其他

这3张手机屏幕截图显示了3种不同的数字输入方法。美国航空（左）使用下拉菜单选择乘客人数。此控件需要几个手势（选择字段，滚动并选择数字，然后单击“完成”）。跑步机运行跟踪器（中间）使用文本字段输入距离；用户必须选择该字段，输入所需的数字，然后单击“保存”按钮或点击另一个字段。相比之下，在达美航空的移动应用程序中将乘客人数从1更改为2的交互成本（右）仅需轻按一下即可。（但是，如果用户希望将数字从1增加到10，则步进器的交互成本会高得多；对于默认值的较大偏差，这种增加的成本是使用步进器的主要缺点。）

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

由于步进器是相对控件，因此它们可以使用户不必考虑要修改的变量的确切值。人们只需要考虑相对于其当前状态值是上升还是下降。例如，当在Web浏览器中指定所需的文本大小时，非图形设计师的人员将难以决定确切的数字，以优化网页的可读性。

但是，他们肯定知道当前文本是感觉太小还是（很少）太大，因此很容易使用像CTRL-plus或CTRL-minus这样的步进式操作来使文本变大或变小（提供，当然，他们熟悉这些浏览器命令）。

输入步进器的缺点

难以获得

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

在下面的示例中，上下箭头是如此之细且彼此靠近，以至于用户需要放慢速度并仔细计划其运动，以避免错误地点击相反的方向。

草图输入步进器

创意设计编辑器Sketch使用了很小的垂直步进按钮来调整屏幕上组件的大小。

不适用于默认值的大调整

过多的单击和点击可能会令人烦恼。步进器不适用于大量调整。例如，当用户需要将值从1更改为50时，输入步进器不是明智的选择。因此，步进器对于具有大多数用户可能选择的默认缺省值的数字参数有意义。如果经常出现与该默认值的较大偏差，则更适合使用其他输入法。

步进设计准则 

基于上述考虑，以下是一些设计输入步进器的一般建议：

• 将步进器用于具有明确的最常用值的数字字段。对于具有一个共同输入值且大多数其他输入值仅略有偏离的字段，步进器效果很好。如果用户通常为某个字段（例如，年龄或出生日期）输入的值的范围内存在很大的可变性，则不适合使用步进器。

• 将最常选择的值设置为步进默认值。该准则是第一个准则的直接含义。例如，通常1表示预订机票的默认乘客人数或将商品添加到购物车的默认数量，而2则可能是预订餐厅的默认用餐人数。

• 避免步进式连续量。根据设计，步进器字段只能采用离散值-即步进增量的倍数。（您不能为数量步进指定1.5个项目。）有时，将连续变量转换为离散变量是有意义的（例如，我们通常将age视为离散变量，以年为单位）。但是，在许多情况下，以错误的步骤将连续变量（例如价格或距离）转换为离散变量可能会令人讨厌或不适合用户任务。

例如，当寻求购买房屋时，价格字段的$ 100K增量将限制太大，因为某些用户可能希望输入的值不是$ 100K的倍数，并且对它进行向上或向下取整可能不会产生相同的结果。最好允许用户键入这样的连续值，而不是强迫他们使用固定增量步进器。

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

NS.NL输入步进器

荷兰铁路运营商Ns.nl使用步进器输入时间和日期。更改的确切部分用深蓝色下划线突出显示。

• 使用大型按钮同时用于台式机和移动设备。目标区域应足够大以支持输入方式。例如，对于触摸屏，我们长期以来建议最小目标尺寸为1 cm x 1 cm。即使鼠标比指尖允许的精度更高，也不要使按钮对于桌面屏幕也不会太小。

gpa输入步进器

在职业规划网站“握手”的左例中，调整按钮很小，即使用鼠标也很难获得。右边的示例显示了如何重新设计和改进此UI。这两个按钮相距较远，以便于选择。

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

考虑到使用指尖固有的精度挑战，我们建议将步进机水平放置。

垂直水平输入步进

StackExchange（左）使用垂直步进器（以红色突出显示）。Airbnb移动应用程序（右）使用水平步进器来调整预订人数。具有分离按钮的水平放置可在输入之间留出足够的空间，以帮助用户避免意外触摸。另一方面，向上/向下隐喻更适合于Stack Exchange步进器（指示有多少人对该职位投了“赞成”或“反对”表决）。

• 使用+/-或向上/向下箭头作为按钮可视化效果。对于水平步进器，加号和减号通常最适合用作步骤段的标签。对于垂直步进器（段在值的上方和下方），您还可以使用向上和向下箭头按钮，这些按钮通常显示为人字形。

左右箭头按钮是水平步进器的一种可能，但极少推荐，因为它们与使某物变大或变小的概念没有直接的涵义。

• 添加其他输入法。除了精心设计的步进器之外，您可能还想添加其他输入方法，以使用户能够控制和灵活使用，尤其是在输入值复杂或不可预测的情况下。以下是一些与步进器结合使用的其他输入法，以使输入更有效：

• 文本字段步进器是一个UI组件，它允许使用文本字段以及侧面的步进器按钮快速输入数字以进行调整。用户可以选择直接输入精确值，也可以使用步进器来调整默认值（如果它接近所需值），并且只需点击几下即可对其进行更改。这将适合我们的餐厅预订示例，其默认表大小为2个食客：步进器可轻松用于指定单个食客或4口之家，而文本输入对于10人一组更好。

• 允许长按或单击按钮以更快地连续递增或递减。

• （对于台式机）允许用户使用键盘箭头进行递增或递减：上下左右应与屏幕上的按钮布局匹配。

我们通常不建议您使用多种不同的交互技术来实现相同的目标，因为需要学习多种方法并在多种方法之间进行选择会增加UI自身的开销。但是，在步进器的情况下，替代输入法在视觉上并不突出，只想对默认值进行小的调整的人就不会因为考虑替代方法而放慢速度。

• 明确步进值和步进范围。设计人员应明确显示步长和单位（例如，美元，美分，百分比）。此外，如果输入值有最大或最小限制，请务必注明。通常最好使步进器每按一次按钮就以一个单位为单位更改当前值，但是如果任务分析表明，则在某些情况下其他步进值更合适。（例如，在上面指定学生的GPA的屏幕截图中，适当的步长值是满分的十分之一。）

Expedia输入步进器

Expedia使用灰色加号段表示该值已达到极限。

何时使用输入步进器

为那些具有明确的首选值的字段实施输入步进器，用户只需稍加调整即可。步进器段应足够大以防止用户出错。