作者：Yuxuan (Tammy)Zhou  I  翻译：毕纪灵

摘要：在输入值与默认值相差不大时，通过让用户点击单个按钮来增加或减少数字，可以减少用户的输入工作量。对于变化较大的值，请避免使用此GUI控件。

设计数据输入控件可能很棘手。移动设备上有限的屏幕空间、较高的交互成本，会让用户难以输入信息。有许多输入控件，但不是所有方法都适合每个任务。

一个常见的输入控件是数值输入框（the input stepper），这是一个用于输入数值信息的用户界面控件。

图1：标准数值输入框（the input stepper）示例:水平(左)和垂直(右)

定义：数值输入框（the input stepper）是一个两段式UI控件，用于递增或递减数值。

大多数数值输入框（the input stepper）是图形用户界面(即GUI控件)，语音和手势界面也可以做规范数值输入。例如，对声控电视机说“音量上”或“音量下”，音量就会按设定的数量变化。在3D手势交互界面中，向上挥手可能会增加所选变量的值。所有这些步骤的关键是它们是相对控件——用户的操作将指定变量的值做固定数量的修改。(将这类控件与单纯的输入框如文本输入框进行对比，在那些控件中，用户输入所需的新值，而与之前的数值没有关系。)本文主要讨论GUI设计中的数值输入框（the input stepper）。

虽然在某些情况下，数值输入框（the input stepper）是输入数字的方便工具，但并非所有情况下，它们都是理想的选择。在本文中，我们将讨论这种UI控件的优缺点，以及如何正确使用数值输入框（the input stepper）。

1.数值输入框（the input stepper）的优点

1.1没有键盘

数值输入框（the input stepper）可以绕过设备限制。例如，在智能手机上使用键盘是容易出错的，而且一些计算机系统(如交通终端系统或博物馆信息亭)没有键盘。在这些情况下，数值输入框（the input stepper）是对默认值进行小范围调整的恰当选择。(与交互设计的其他领域一样，基于任务分析或其他用户研究选择恰当的默认值对于系统的可用性至关重要。）

图2：Kayak使用数值输入框（the input stepper）允许用户更改搜索表单中的旅行人数。

1.2使用样式直观

数值输入框（the input stepper）具有清晰、明确的特征：增量通常位于控件的右边(或上面)，减量位于控件的左边(或下面);这些位置很自然地映射到概念隐喻上，如“进步是从左到右”或“多是上少是下”。(然而，这些隐喻是取决于文化的，例如，在使用从右到左语言的文化中，进度隐喻是相反的的。输入框按钮的位置应该反映文化习惯——如下面的iOS示例所示)。具有通信功能的方向按钮和符号标签不需要额外的说明。

图3：在iOS中，将系统语言更改为从右到左的语言。例如与英文版本(右)相比，阿拉伯文(左)反向放置输入框按钮的位置(右递减，左递增)。

1.3交互成本低

对于调整较小的值，数值输入框（the input stepper）需要的交互比其他输入方法更少。例如，要将表单中的人数从1增加到2，用户只需单击一次plus按钮。这一操作比选择输入字段、点击键盘上的数字“2”、按回车键或关闭键盘要省力得多。

图4：这3个手机截图显示了3种不同的数字输入方法。美国航空公司(左)使用下拉菜单选择乘客数量，这个控件需要四个步骤(选择字段，滚动并选择数字，然后单击Done)。跑步机运行跟踪系统使用文本字段输入距离：用户必须选择字段，输入所需的数字，然后单击Save按钮或单击另一个字段。相比之下，在达美航空(Delta Airlines)的移动应用程序(右图)中，将乘客数量从1人更改为2人的交互成本只需要1次点击。(但是，如果用户想要从1增加到10，它的交互成本会更高。与默认值有较大偏差而增加的交互成本是使用该控件的一个主要缺点。)

1.4当用户不知道确切值时，可进行相对控制

由于数值输入框（the input stepper）的作用是相对控制，因此可以让用户不必考虑正在修改变量的确切值，只需要考虑相对于当前状态，他们想要的是增是减。例如，在web浏览器中自定义所需的文本大小时，非图形设计人员很难确定优化网页可读性的确切数值。

但是，他们肯定知道当前文本是太小还是太大，因此很容易使用类似的操作，例如CTRL-plus或CTRL-minus，将文本放大或缩小(当然，前提是他们熟悉这些浏览器的快捷操作)。

2.数值输入框（the input stepper）的缺点

2.1很难精确点击

费茨定律预测人们到达目标所需的时间。无论使用鼠标还是手指，较大的按钮都比较小的按钮更快到达。但许多数值输入框（the input stepper）的特点是堆叠按钮或小尺寸按钮。

在下面的例子中，向上和向下的箭头非常小且距离很近，因此用户需要放慢速度、小心移动鼠标，以避免出错。

图5：Sketch使用微小的垂直按钮来调整屏幕上组件的大小。

2.2不适合对默认值进行大的调整

太多的单击和点按可能会令人讨厌。数值输入框（the input stepper）不适合进行大量的调整。例如，当用户需要将值从1更改为50时，它不是一个明智的选择。因此，当大多数用户都会选择某一默认值时，数值输入框（the input stepper）是有意义的。如果用户期望与默认值经常差距较大，使用其他输入控件更合适。

3.数值输入框（the input stepper）设计指南

基于上述分析，以下是设计数值输入框（the input stepper）的一些建议:

3.1有明确的常用数值选项时使用数值输入框（the input stepper）。有一个常见值、且大多数其他值与该值相差较少时，数值输入框（the input stepper）很适合。如果用户通常输入的值有很大的变化范围(例如年龄或出生日期)，则不适合使用数值输入框（the input stepper）。

3.2将最常用的数值设置为默认值。这条准则是第一条准则的直接应用。例如，1通常是预订机票的默认乘客数量，或者是向购物车添加商品的默认数量，而2可能是餐馆预订时的默认用餐者数量。

3.3对于连续的数量，避免使用数值输入框（the input stepper）。根据设计，字段只能取离散值，即每次操作增加的值。(您不能为一步操作指定1.5个增值。)有时，将连续变量转换为离散变量是有意义的，例如，我们通常将年龄视为一个以年为单位的离散变量。然而，在许多情况下，使用错误的方法将连续变量(如价格或距离)转换为离散变量可能会惹怒用户或不适合用户任务。

例如，在购买房子时，价格字段中10万美元的增量是不恰当的，因为一些用户可能希望输入的值不是10万美元的倍数，向上或向下四舍五入可能会产生不同的结果。最好允许用户直接输入此类连续值，而不是强制用户使用固定增量输入框。

3.4清楚展示控件控制的内容。清楚地展示数值输入框（the input stepper）所应用的表单内容。例如，如果使用数值输入框（the input stepper）来更改时间和日期，则应该清楚地突出显示正在调整的时间或日期部分，以便用户确切地知道他们正在修改什么。

图6：荷兰铁路运营商Ns.nl使用数值输入框（the input stepper）输入时间和日期。修改的部分用深蓝色下划线突出显示。

3.5在桌面和移动设备上使用大按钮。目标区域应该足够大以方便用户输入。例如，对于触摸屏，我们一直建议最小目标尺寸为1cm×1cm。即使鼠标比指尖更精确，也不要把按钮做得太小，这不适合桌面屏幕。

图7：在左边的例子中，职业规划网站Handshake的调整按钮很小，即使是用鼠标也很难点击。右边的例子展示了如何重新设计和改进这个UI。这两个按钮放置得更远，便于选择。

水平放置的数值输入框（the input stepper）通常比垂直的好，因为垂直的一般比较拥挤。如果决定垂直放置，请在递增和递减按钮之间留出空格，以避免意外点击。

考虑到使用指尖固有的精度限制，我们建议在移动设备上水平放置数值输入框（the input stepper）。

图8：StackExchange(左)使用垂直数值输入框（the input stepper）(红色高亮显示)。Airbnb移动应用程序(右)使用水平数值输入框（the input stepper）调整预订的客人数量。分离的按钮水平放置为操作创建足够的空间，以帮助用户避免意外的点击。另一方面，向上/向下的寓意更适合StackExchange用于表示有多少人对帖子投了“赞成”或“反对”的票。

3.6使用+/-或上下箭头使按钮可视化。对于水平放置的数值输入框（the input stepper），加号和减号最适合作为步骤式的标签。对于垂直放置的输入框(有高于和低于该值的内容)，您还可以使用向上和向下箭头作为按钮，这些按钮通常被可视化为chevrons（v形臂章）。

左/右箭头的按钮也是一种水平放置的数值输入框（the input stepper），但不推荐，因为它们与输入更大、更小的数值概念没有直接联系。

3.7添加其他输入方法。除了设计良好的数值输入框（the input stepper）之外，您可能还希望添加其他输入方法，给予用户可控性和灵活性，特别是在输入值复杂、不可预测的情况下。以下输入控件与数值输入框（the input stepper）相结合，可以使输入更有效:

结合文本输入框的数值输入框（the input stepper）是一个UI组件，它支持文本输入和两侧的按钮来快速输入数字。用户可以直接输入精确的值，也可以使用按钮来调整默认值，如果它接近所需的值，只需要单击几下即可。这适用于餐馆预订场景，默认就餐人数是2个，按钮可以很容易地指定1人或一个4口之家就餐，而文本输入对于10口之家更好。 允许长按或单击按钮，来更快地连续递增或递减。 (对于桌面设备)允许用户使用键盘箭头进行递增或递减:上下、左右应与屏幕上的按钮布局相匹配。

我们一般不建议使用多种不同的交互技术来实现同一个目标，因为要在多种方法之间学习并选择，会给UI带来额外的负担。然而，对于数值输入框（the input stepper），替代的输入方法在视觉上并不突出，而那些只想对默认值做一个小调整的人，也不会因为考虑了替代方法而放慢速度。

3.8阐明每步操作的数值变化大小和单位。设计者应该明确每步操作导致的数值变化和单位(例如，美元、美分、百分比)。此外，如果输入值有一个最大或最小值限制，一定要指出它。通常情况下，每按下一次按钮，数值变化单元最好是当前值，但如果任务分析指出变化单元是其他值，则可能更合适。(例如，在上面指定学生GPA的截图中，适当的步骤值是满分的十分之一。)

图9：Expedia使用灰色的加号按钮来表示该值何时达到极限。

4.何时使用数值输入框（the input stepper）

原文作者：Yuxuan (Tammy) Zhou. Tammy Zhou is a Research Assistant with Nielsen Norman Group, conducting user research on broad web usage behaviors in the United States and China.

原文链接：https://www.nngroup.com/articles/input-steppers/

原文标题：《Design Guidelines for Input Steppers》

发布日期：November 11, 2018

封面：转载自网络侵删