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

公共输入控制是输入步进器,用于输入数字信息的用户界面元素。

输入步骤
步骤者的示例:水平(左)和垂直(右)

定义:一个输入步进is a two-segment UI control used to incrementally increase or decrease a numeric value.

大多数输入垫草是图形用户界面的可视元素(即,它们是GUI控件),语音和手势接口也可以具有脚步。例如,将“音量上升”或“音量向下”表示为语音控制的电视机将通过设定的数量修改音量。并且在3D格术界面中,挥动挥动可能会增加所选变量的值。所有这些脚步程序的关键定义属性是它们相对控件 - 用户的操作将指定变量的值更改为某个固定金额。(将这种类型的控件对比为绝对一个这样的文本输入字段;使用绝对控件,用户指定具有对先前值的引用的新所需值。)我们专注于GUI输入步进的设计。

虽然输入脚步是在某些情况下输入数字的方便工具,但它们不是每种情况都不是一个理想的选择。在本文中,我们讨论了这个UI控件的优缺点,以及如何正确使用脚步。

输入脚步的好处

No Keyboard

步骤者可以绕过设备限制。例如,在智能手机上使用键盘是错误的,并且某些计算机系统(如运输终端或博物馆亭)没有键盘。在这些情况下,输入的垫草是支持小调整的适当设计选择默认值。(与交互设计的许多其他领域一样,根据任务分析或其他用户研究选择良好的默认值对于这些系统的可用性至关重要。)

Kayak Input Steppers
KAYAK使用输入脚步程序允许用户在其搜索表单上更改旅行者的数量。

直观使用

输入踏步者已经清晰,明确意义员:正段通常位于(或以上)的右侧,该值和减号置于左侧(或下方);这些放置自然地映射到概念隐喻,例如“从左到右从左到右的进展”或“更加越来越长”。(然而,这些隐喻依赖于培养;例如,在具有右向左语言的文化中,进度隐喻逆转。步进段的位置应该反映在下面的iOS示例中的文化规范。)方向按钮和符号标签通信功能,无需其他指令。

iOS输入步进
在iOS中,将系统语言更改为左右左右,例如阿拉伯语(左)反转步进段放置(左右递减左侧)与英文版(右侧)相反。

低互动成本

为了调整小值,脚步者需要比其他输入方法更少的互动。例如,为了在表单中增加1到2的访客人数,用户只需要在加号上的一个点击。此操作比选择输入字段更少的努力,在键盘上点击数字“2”,并击中键盘或拆除键盘。

步骤人与其他人vs
这3个移动屏幕截图显示了3种不同的数字输入方法。美国航空公司(左)使用下拉下拉目来选择乘客数量。此控件需要多个手势(选择字段,滚动并选择数字,然后按完成)。跑步机运行跟踪器(中心)使用了用于输入距离的文本字段;用户必须选择字段,键入所需的数字,然后点击“保存”按钮或点击不同的字段。相比之下,在Delta Airlines'移动应用程序(右)中将乘客数量从1到2更改的乘客数量组成包括单个龙头。(然而,如果用户希望将数量从1到10增加数量,则步进器的交互成本将要高得多;从默认偏差的大偏差增加的增加是使用步进者的主要缺点。)

当用户不确定确切值时,相对控制

Since steppers are relative controls, they can free users from considering the exact value of the variable they’re modifying. People only need to think about whether they want the value to go up or down, relative to its current state. For example, when specifying the desired text size in a web browser, people who are not graphic designers will be hard pressed to decide on the exact number that will optimize the易读性网页。

However, they definitely know if the current text feels too small or (rarely) too large, so it’s easy to use a stepper-like operation like CTRL-plus or CTRL-minus to make the text one step bigger or smaller (provided, of course, that they are familiar with these browser commands).

Drawbacks of Input Steppers

难以获得

Fitts的法律计算人们到达目标所需的时间。无论是使用鼠标还是手指,都比较小的按钮更快地达到更大的按钮。但是许多输入垫草功能堆叠按钮位置或小按钮尺寸。

In the example below, the up and down arrows are so tiny and close to each other that users need to slow down and plan their movement carefully in order to avoid misclicking on the opposite direction.

素描输入步进
素描,创意设计编辑器,使用微小的垂直步进按钮,用于调整屏幕上的组件的大小。

Not for Large Adjustments to Default Value

点击和攻丝太多可能会刺激。踏步者不适合大量调整。例如,当用户需要将值从1到50更改时,输入步进器不是明智的选择。因此,Seperpers对数值参数进行了意义,默认情况下,大多数用户可能会选择。如果频繁,预期默认的大偏差是预期的,则不同的输入法将更合适。

Stepper-Design Guidelines

基于上述考虑,以下是设计输入步进者的一些一般性建议:

  • Use steppers for numerical fields with a clear most frequently selected value。Seperpers适用于具有一个常用值的字段,大多数其他输入值仅略微偏离。如果用户通常输入用于字段的值范围(例如,年龄或出生日期),则步进是不合适的。
  • Set the most frequently selected value as a stepper default。本指南是第一个直接含义。例如,1通常是用于预订票证的默认乘客数量或将物品添加到购物车的默认数量,而2则可能是餐厅预订中的默认食客数量。
  • 避免持续数量的垫脚。通过design, stepper fields can only take discrete values — that is, multiples of the step increment. (You cannot specify 1.5 items for a quantity stepper.) Sometimes, it makes sense to transform continuous variables into discrete ones (for example, we usually treat age as a discrete variable, counted in years). However, in many situations, transforming a continuous variable (such as prices or distances) into a discrete one with the wrong step can be irritating or inappropriate for the user task.

For instance, when looking to buy a house, an increment of $100K for the price field will be too restrictive, since some users may want to enter a value that is not a multiple of $100K, and rounding it up or down may not produce the same results.It’s best to allow users to type such continuous values instead of forcing them to use a fixed-increment stepper.

  • Show clearly what field is controlled by the stepper。清楚地表明步进器适用的表单内容。例如,如果步进控制用于更改时间和日期,则应清楚地突出显示正在调整的时间或日期的部分,以便用户知道它们更改的内容。
ns.nl输入步进
ns.nl,荷兰铁路运营商,使用experpers进行时间和日期输入。被改变的确切部分被一个深蓝色的下划线突出显示。
  • Use large buttons for both desktop and mobile。Target areas should be big enough to support the input modality. For example, for touchscreens, we’ve long recommended a最小目标尺寸为1厘米1厘米。即使鼠标允许比指尖更精确,但也不会使按钮太小,也可以是桌面屏幕。
gpa input stepper
在握手的左侧示例中,一个职业规划网站,调整按钮很小且难以获取,即使用鼠标也是如此。右侧的示例显示了如何重新设计和改进UI。这两个按钮放在更远的间隔,允许更容易选择。

横向步进通常比变性al ones, which tend to be crowded. If you decide for a vertical placement, space the increment and decrement controls to make sure that you avoid slips due to accidental hits.

We recommend horizontal placement for steppers on mobile devices, considering the inherent precision challenges of using a fingertip.

vertical horizontal input steppers
Stackexchange(左)使用垂直的膝步(以红色突出显示)。Airbnb移动应用程序(右)使用水平的脚步机来调整预订的客人数量。分离按钮的水平放置在输入之间创建足够的空间,以帮助用户避免意外触摸。另一方面,向上/下的隐喻更适合堆栈交换步进器(这表明有多少人给出了“竖起大拇指”或“拇指”投票给帖子)。
  • 使用+/-或箭头作为按钮可视化。对于水平的挺杆,加号和减号通常最好用作阶梯段的标签。对于垂直的膝步脚步(具有高于值的段),您还可以使用箭头向上和向下按钮,通常可视化为曲折。

箭头左/右按钮是水平台步的可能性,但很少推荐,因为它们具有较少的直接内涵,其概念使东西更大或更小。

  • Add additional input methods。除了设计精心设计的步进器外,您可能需要添加备用输入方法,以提供用户控制和灵活性,尤其是当输入值复杂或不可预测时。以下是一些额外的输入方法,可以与河流组合起来,以使输入更有效:
    • A text-field stepper is a UI component that enables quick entry of a number using a text field along with stepper buttons on the sides for adjustment. Users can choose to either directly enter the precise value or use the stepper to adjust the default value, if it’s close to the desired value and changing it requires only a few taps. This would be appropriate for our restaurant-reservation example with a default table size of 2 diners: the stepper could be easily used to specify single diners or a family of 4, whereas text input would be better for a group of 10.
    • 允许长按或单击按钮以更快地连续增量或减少。
    • (for Desktop)允许用户使用键盘箭头以增加或减少:上下,向左和向右应匹配屏幕上的按钮布局。

我们通常不建议使用许多不同的交互技术来实现相同的目标,因为需要在多种方法之间学习和选择,因此在UI中增加了自己的开销。然而,在步骤者的情况下,替代输入方法在视觉上突出,并且只想考虑替代方案,只想减慢默认值的人的人员不会减慢。

  • Clarify the step value and the stepper range。设计人员应该使步骤和单位显式(例如,美元,美分,百分比).Also,如果输入值具有最大值或最小限制,请务必指示它。通常最好通过每个按钮按下一个单位的步骤更改电流值,但如果由任务分析指示,则可能存在其他步骤值更合适的情况。(例如,在上面的指定学生GPA的屏幕截图中,适当的步骤值是完整成绩点的十分之一。)
Expedia输入步骤
Expedia used a grayed-out plus segment to signal when that the value had reached its limits.

何时使用输入的脚步

Use Input Steppers When 不要使用输入的脚步
The numeric field has a most commonly selected value and most users will not deviate insignificantly from it (e.g., number of passengers). 数字字段可以采用各种值(例如,年龄),没有一个值比其他值更频繁地输入。
The numeric field needs to be adjusted by a small, discrete amount or precision is not important (e.g., number of bedrooms). 数字字段是连续的,并且确切的值很重要。
There is enough room for generous spacing of the stepper segments. Limited design space for button layout would make the stepper segments small or cramped.

为那些具有明确,首选值的字段实现输入脚步程序,即用户将仅略微调整。步进段应该足以防止用户错误。