菜单 关闭

manbetx官方网站手机版输入步进器设计指南

通过 周万博官网manbetx下载玉轩11月11日,二千零一十八

总结:通过允许用户在一次按钮按下中增加或减少数字,可以减少值与默认值偏差很小的字段的输入工作量。避免对具有较大可变性的值使用此GUI控件。


manbetx官方网站手机版数据输入的设计可能很复杂。移动设备屏幕空间有限或高交互成本可能会使用户难以键入信息。有许多输入选项,但并非所有的方法都适用于每项任务。

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

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

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

大多数输入步进器都是图形用户界面的可视元素(即它们是图形用户界面控件,语音和手势界面也可以有步进器。例如,对声控电视机说“音量增大”或“音量减小”,将按设定的数量修改音量。在3D手势界面中,向上挥手可能会增加所选变量的值。所有这些步进器的关键定义属性是相对的控件-用户的操作将指定变量的值更改一定的固定值。(将此类型的控件与绝对控件(如文本输入字段)进行比较;有了绝对控制,在本文中,我们重点介绍了GUI输入步进器的设计。manbetx官方网站手机版

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

输入步进器的优点

无键盘

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

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

使用直观

输入步进器清晰,明确的意符:加号段通常位于值的右侧(或上方),减号段则位于值的左侧(或下方);这些位置自然地映射到概念隐喻上,例如“进步是从左到右”或“多是向上,少是向下”。然而,论文化;例如,在有从右向左语言的文化中,进步的比喻是相反的。步进器段的位置应反映出文化规范,如下面的iOS示例中所示。)方向按钮和符号标签无需额外说明即可实现通信功能。

IOS输入步进器
在IOS中,将系统语言更改为从右向左的语言(如阿拉伯语(左))会与英文版本(右)相反,颠倒步进器段的位置(右减量,左增量)。

低交互成本

对于调整小值,与其他输入方法相比,步进器需要的交互更少。例如,将客人数量从1增加到2,用户只需点击一次加号按钮。此操作比选择输入字段所需的工作量小,轻敲键盘上的数字“2”,然后按回车键或取消键盘。

步进器与其他
这3个移动屏幕截图显示了3种不同的数字输入方法。美国航空公司(左)使用下拉列表选择乘客数量。此控件需要多个笔势(选择字段,滚动并选择号码,然后点击完成。跑步机运行跟踪器(中心)使用文本字段输入距离;用户必须选择字段,键入所需的数字,然后点击保存按钮或点击其他字段。相反,三角洲航空公司的移动应用程序(右)将乘客数量从1改为2的交互成本由一个点击组成。然而,如果用户希望将步进器的数量从1增加到10,步进器的交互成本会更高;由于与默认值的较大偏差而增加的成本是使用步进器的主要缺点。)

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

因为步进电机是相对控制的,他们可以让用户不用考虑他们正在修改的变量的确切值。人们只需要考虑价值是上升还是下降,相对于其当前状态。例如,在Web浏览器中指定所需的文本大小时,非图形设计师的人将很难决定将优化manbetx官方网站手机版易读性一个网页。

然而,他们肯定知道,如果当前文本太小或(很少)太大,因此,很容易使用像ctrl-plus或ctrl-minus这样的步进操作将文本放大或缩小一步(前提是,当然,他们熟悉这些浏览器命令)。

输入步进器的缺点

难以获得

费茨法则计算人员达到目标所需的时间。无论是用鼠标还是手指,较大的按钮比较小的按钮更容易触及。但许多输入步进器的特点是按钮位置堆叠或按钮尺寸小。

在下面的示例中,上下箭头太小,相互靠近,用户需要放慢速度,仔细计划自己的移动,以避免在相反的方向上误用。

草图输入步进器
草图,创意设计编辑,manbetx官方网站手机版使用微小的垂直步进按钮来调整屏幕上组件的大小。

不适用于对默认值的大调整

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

步进器设计指南manbetx官方网站手机版

基于上述考虑,以下是设计输入步进器的一般建议:manbetx官方网站手机版

  • 将步进器用于具有最常选择的清晰值的数字字段.对于通常输入一个值的字段,步进器工作得很好,而大多数其他输入值仅与此稍有偏差。如果在用户通常为字段输入的值范围内有很多可变性(例如,年龄或出生日期)步进器不合适。
  • 将最常选择的值设置为步进器默认值.本指南是第一条的直接含义。例如,1通常是预订机票的默认乘客数量或将项目添加到购物车的默认数量,而2可能是餐厅预订中的默认用餐人数。
  • 避免连续使用步进器.通过设manbetx官方网站手机版计,步进器字段只能采用离散值-也就是说,步进增量的倍数。(不能为数量步进器指定1.5项。)有时,将连续变量转换为离散变量(例如,我们通常把年龄当作一个离散变量,以年计)。然而,在很多情况下,将连续变量(如价格或距离)转换为具有错误步骤的离散变量可能会对用户任务造成刺激或不合适。

例如,当你想买房子的时候,价格字段增加10万美元的限制性太强,由于某些用户可能希望输入的值不是10万美元的倍数,上下取整可能不会产生相同的结果,最好是允许用户键入这样的连续值,而不是强制他们使用固定增量步进器。

  • 清楚地显示步进器控制的字段.明确指出步进器适用的表单内容。例如,如果使用步进控制来更改时间和日期,调整的时间或日期部分应清楚地突出显示,这样用户就知道他们到底在改变什么。
ns.nl输入步进器
Ns.nl荷兰铁路运营商,使用步进器输入时间和日期。正在更改的确切部分用深蓝色下划线突出显示。
  • 桌面和移动设备都使用大按钮.目标区域应该足够大以支持输入模式。例如,对于触摸屏,我们一直建议目标尺寸最小为1厘米乘1厘米。即使鼠标比指尖更精确,对于桌面屏幕来说,按钮也不要太小。
GPA输入步进器
在左侧的握手示例中,职业规划网站,调节按钮小,难以获取,即使是用老鼠。右边的示例显示了如何重新设计和改进此UI。manbetx官方网站手机版这两个按钮相距较远,便于选择。

水平步进比垂直步进好,很拥挤。如果你决定垂直放置,为增量和减量控件留出空间,以确保避免意外命中导致滑动。

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

垂直水平输入步进器
StackExchange(左侧)使用垂直步进器(以红色突出显示)。Airbnb移动应用程序(右)使用水平步进器调整预订的客人数量。水平放置和分离的按钮在输入之间创建足够的空间,以帮助用户避免意外接触。另一方面,“向上/向下”这个比喻更适合于堆栈交换步进器(它表示有多少人对邮件投了“向上”或“向下”的票)。
  • 使用+/-或上/下箭头作为按钮可视化效果.对于水平步进电机,加号和减号通常最适合作为步骤段的标签。对于垂直步进器(段高于或低于值),您也可以使用向上箭头和向下箭头按钮,常被视为V字形。

左/右箭头按钮可用于水平步进,但很少被推荐,因为它们与使事物变大或变小的概念没有直接的内涵。

  • 添加其他输入方法.除了设计精良的步进电机外,manbetx官方网站手机版您可能希望添加可选的输入方法,以便为用户提供控制和灵活性,尤其是当输入值复杂或不可预测时。以下是一些与步进器结合使用的其他输入方法,以提高输入效率:
    • 文本字段步进器是一个用户界面组件,它允许使用文本字段和侧面的步进器按钮快速输入数字进行调整。用户可以选择直接输入精确值或使用步进器调整默认值,如果接近所需值并更改,只需轻敲几下。这适用于我们的餐厅预订示例,默认表大小为2个就餐者:步进器可以很容易地用于指定单个就餐者或4个家庭,而文本输入对于一组10个更好。
    • 允许长按或单击按钮以更快地连续递增或递减。
    • (对于桌面)允许用户使用键盘箭头进行递增或递减:向上和向下,左边和右边应该与屏幕上的按钮布局相匹配。

我们通常不建议有很多不同的交互技术来实现相同的目标,因为需要在多个方法之间学习和选择,这会给UI增加自己的开销。然而,对于步进电机,备选输入法在视觉上并不突出,只想对默认值进行小调整的人不会因为考虑备选方案而放慢速度。

  • 明确步进值和步进器范围.manbetx官方网站手机版设计师应明确步骤和单位(例如,美元,美分,百分比)。如果输入值有最大或最小限制,一定要注明。通常最好让步进器每按一次按钮改变一个单位的电流值。但有些情况下,其他阶跃值更合适,如果由任务分析指示。(例如,在上面指定学生GPA的屏幕截图中,适当的步进值是满分的十分之一。)
Expedia输入步进器
Expedia使用了一个灰色的加号段来表示该值何时达到了极限。

何时使用输入步进器

使用输入步进器时 在以下情况下不要使用输入步进器:
数字字段有一个最常用的选定值,大多数用户不会与之产生无意义的偏差(例如,乘客人数)。 数字字段可以采用广泛的值(例如,年龄)没有一个值比其他值输入得更频繁。
数字字段需要调整一个小的,离散量或精度不重要(例如,卧室数量)。 数字字段是连续的,精确的值很重要。
有足够的空间来容纳步进器段的大间距。 按钮布局的设计空manbetx官方网站手机版间有限,会使步进器段小或狭窄。

为那些字段实现输入步进器,这些字段有一个清晰的,用户只会稍微调整的首选值。步进器段应该足够大,以防止用户出错。