菜单 关闭

manbetx官方网站手机版 Guidelines for Input Steppers

通过 周杰伦2018年11月11日

总结:通过允许用户在单次按下按钮时增加或减少数值,减少对与默认值相差很小的字段的输入工作避免对具有较大可变性的值进行GUI控制。


manbetx官方网站手机版ing for data input can be tricky移动设备或屏幕上的有限屏幕空间交互成本用户难以键入信息有许多输入选项,但不是所有的方法都适合于每一个任务。

一个公共输入控制是输入步进器,一个用于输入数字信息的用户接口单元。

输入步进器
步进器的例子:水平(左)和垂直(右)

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

大多数输入步进电机是一个图形用户界面的视觉元素(即他们的GUI控件),语音和手势界面也可以步进例如,对音控电视机说“音量放大”或“音量下降”将按设定音量修改音量。And in a 3D gestural interface, waving your hand up might increase the value of a selected variable所有这些步进器的关键属性是它们是相对的控件-用户的操作将指定变量的值以一定的固定量更改。(将这种类型的控件与绝对控件(如文本输入字段)进行比较;使用绝对控件,用户指定新的期望值,而不参照先前的值。)

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

输入步进器的优点

无键盘

步进器可以绕过设备限制。例如,在智能手机上使用键盘容易出错,并且一些计算机系统(如运输终端或博物馆亭)没有键盘。在这些情况下,输入步进器是一种合适的MPENTX系统,用于支持小调整。默认值(As in many other areas of interaction manbetx官方网站手机版, selecting good defaults based on task analysis or other user research will be crucial for the usability of these systems.)

皮艇输入步进器
皮艇使用输入步进器,允许用户在搜索形式上改变旅行者的数量。

直观使用

输入步进器有明确、明确的输入。意符加段通常位于值的右侧(或上方),减段则位于值的左侧(或下方);这些位置自然地映射到概念隐喻上,比如“从左到右的进展”或“多是上,少是下”(这些隐喻取决于,然而,在文化上,例如,在左到右语言的文化中,进步隐喻颠倒过来。步进段的位置应该反映文化规范——如下面的iOS示例所示。)方向按钮和符号标签通信功能,而不需要额外的指令。

输入步进器
在iOS中,将系统语言更改为从右到左的语言,比如阿拉伯语(左),与英语版本(右)相反,将步进段放置(右边递减,左边递增)颠倒。

低交互成本

为了调整小值,步进器需要比其他输入法少的交互作用。例如,为了在一个表单中增加客人的数量从1到2,用户只需在“加”按钮上点击一个按钮即可。此操作比选择输入字段、轻击键盘上的数字“2”并按Enter或取消键盘所需的工作量少。

步行者与其他人
这3个屏幕截图显示了3种不同的数值输入方法。美国航空公司(左)用下拉机选择乘客人数。这个控件需要几个手势(选择字段,滚动并选择数字,然后点击完成)Treadmill Run Tracker(中心)使用一个文本字段来输入距离;用户必须选择该字段,键入所需的数字,然后单击Save按钮或轻击其他字段相比之下,在Delta Airlines的移动应用程序(右)中,将乘客数量从1更改为2的交互成本由单个抽头组成(However, the interaction cost of the stepper would be much higher if the user wanted to increase the number from 1 to 10; this increased cost for large deviations from default is a major disadvantage of using steppers.)

当用户不知道精确值时的相对控制

因为步进器是相对的控件,它们可以让用户不考虑它们正在修改的变量的确切值。人们只需要考虑相对于当前的状态,他们是否希望价值上升或下降。例如,当在web浏览器中指定所需的文本大小时,不具有图形化manbetx官方网站的用户将很难确定将优化易读性一个网页。

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

输入步进器的缺点

难以获取

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

在下面的示例中,上下箭头非常细小,并且彼此非常接近,因此用户需要放慢速度,并仔细规划他们的移动,以避免错误地单击相反的方向。

草图输入步进器
Sketch,一个具有创造性的manbetx官方网站工具包编辑器,使用微小的垂直步进按钮来调整屏幕上组件的大小。

没有对默认值进行大的调整

点击和敲击太多会刺激人。步进器不适合大量调整例如,当用户需要将值从1更改为50时,输入步进器不是明智的选择。因此,步进器对于具有大多数用户可能选择的默认默认值的数值参数是有意义的。如果频繁,与预期的大偏差,则不同的输入方法将更合适。

Stepper-manbetx官方网站手机版 Guidelines 

基于以上考虑,这里有一些关于MyBETX公司的通用输入步进器的一般性建议:

  • 使用步进器用于具有最频繁选择值的数值场步进器对于具有一个常用输入值的字段工作得很好,并且大多数其他输入值仅偏离该值。如果用户通常为一个字段输入的值的范围(例如,年龄或出生日期)存在许多可变性,那么步进器是不合适的。
  • 将最频繁选择的值设置为步进默认值这个指南是第一个直接的暗示。例如,通常是1订票或默认数量的项添加到车的乘客的默认值,而2可以在预订餐厅食客的默认数量。
  • 避免连续数量的步进器步进场只能采用离散值,即步进增量的倍数。(您不能为数量步进器指定1.5项。)有时,将连续变量转换为离散变量是有意义的(例如,我们通常将年龄视为离散变量,按年计算)然而,在许多情况下,将连续变量(例如价格或距离)转换为具有错误步骤的离散变量可能对用户任务很烦人或不合适。

例如,当想买房子时,价格字段增加10万美元将太限制了,因为有些用户可能想要输入一个不是10万美元倍数的值,并且向上或向下舍入可能不会产生相同的结果。而不是强迫他们使用固定增量步进器。

  • 清楚地显示步进器控制的磁场是什么清楚地表明步进器应用的形式内容。例如,如果一个步进控制用于改变时间和日期、时间或日期调整应明确突出的部分,让用户知道他们改变的是什么。
NL输入步进器
荷兰铁路运营商Ns.nl使用步进机进行时间和日期输入。正在改变的确切部分是由深蓝色底线突出。
  • 使用桌面和移动的大按钮目标区域应该足够大以支持输入模态例如,对于触摸屏,我们长期推荐最小目标尺寸为1厘米×1厘米。即使鼠标比指尖更精确,也不要让桌面太小。
GPA输入步进器
在职业规划网站Handshake的左边示例中,调整按钮很小并且很难获得,即使使用鼠标也是如此。右边的例子说明了这个UI是怎样的,可以被改进和改进。这两个按钮放在更远的地方,便于选择。

水平步进器通常比垂直步进器好,它往往很拥挤。如果决定垂直放置,请将增量控件和减量控件隔开,以确保避免意外命中导致的滑移。

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

垂直水平输入步进器
STACKExchange(左)使用垂直步进器(红色显示)Airbnb移动应用(右)使用水平步进器来调整预订的客人数量。水平放置的分离按钮在输入之间产生足够的空间,以帮助用户避免意外触摸。另一方面,up/down比喻更适合Stack Exchange步进器(它指示有多少人对帖子投了“大拇指向上”或“大拇指向下”的票)。
  • 使用+/-或箭头上下按钮作为按钮可视化对于水平步进器,加和减符号通常最好用作步进段的标记。对于垂直步进器(具有高于或低于值的段),您还可以使用向上和向下箭头按钮,通常可视为chevrons。

箭头左/右按钮对于水平步进器是可能的,但是很少被推荐,因为它们具有较少的直接内涵,而具有使某物更大或更小的概念。

  • 添加其他输入方法除了manbetx官方网站上的stepper之外,您可能还想添加其他输入方法来给用户控制和灵活性,尤其是当输入值复杂或不可预测时。这里有一些额外的输入方法与步进器相结合,以便使输入更有效:
    • 文本字段步进器是一个UI组件,它支持使用文本字段和两侧的步进按钮快速输入数字以进行调整用户可以选择直接输入精确值,或者使用步进器来调整默认值,如果它接近期望值并且只需要几个轻敲即可更改这对于缺省表大小为2个用餐者的餐厅预订示例是合适的:stepper可以容易地用于指定单个用餐者或4口之家,而文本输入对于10口之家会更好。
    • 允许长按或点击按钮以更快地连续递增或递减。
    • (For desktop) allow users to use keyboard arrows for increment or decrement: up and down, left and right should match the button layout on the screen.

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

  • 阐明步进值和步进范围manbetx官方网站手机版ers should make the step and the unit explicit  (e.g., dollars, cents, percentage).Also, if the input value has a maximum or minimum limit, be sure to indicate it通常最好让步进器每按一次按钮就改变一个单位的电流值,但如果任务分析指出,有时其他步骤值更合适。(例如,在指定学生GPA的上述屏幕截图中,适当的步长值是满分点的十分之一。)
Expedia输入步进器
Expedia使用灰色的加段来表示值达到极限。

何时使用输入步进器

何时使用输入步进器 不要使用输入步进器
数值字段具有最常见的选择值,并且大多数用户不会显著地偏离它(例如,乘客数量)。 数值字段可以采用范围广泛的值(例如,年龄),没有任何一个值比其他值更频繁地输入。
数字字段需要通过一个小的、离散的量来调整,或者精度不重要(例如,卧室的数量)。 数值场是连续的,精确的值是重要的。
有足够的空间,以慷慨间隔的步进段。 有限的MyBETX SouthStudio Sudio Studio空间为按钮布局将使步进片段小或狭窄。

为那些有明确的优先值的用户实现输入步进器,用户只需稍稍调整即可。步进段应该足够大,防止用户出错。