数字参数是对象的属性,其值是数字。示例包括电子商务网站上的产品价格和数量或照片编辑应用程序中的对象透明度。

用于数字参数的共同交互式控件范围从文本输入字段,滑块,旋转的虚拟旋钮,具有可编辑曲线的2D矩阵,以及逐步增加或减少给定值的初步。每种类型的控制在不同的情况下都很有用,并传达有关正在修改的数据的信息。尽可能存在,应该有一个自然的映射控件类型和数据之间。例如,一个旋转的虚拟旋钮自然对应于一个角度参数。当UI控件传递一些关于它修改的参数的信息时,设计遵循其中一个10个可用性启发式-系统和真实世界之间的匹配。

许多应用而网站,特别是那些用于创造性追求或数据分析的网站,有一长串的参数,允许对特定属性进行详细调整。对于复杂的连续参数,必须在以下两者之间建立平衡:

  • 探索:允许用户轻松探索整个参数范围内控件的效果,
  • 精确:允许用户精确地选择一个特定的值。

离散控制与连续控制

有两种主要类型的输入控件:

  • 离散控制提供有限数量的步骤或可用选项。示例包括开/关开关或复选框和单选按钮有一些预先选定的选项。
  • 连续控制允许输入范围,通常介于最小值和最大值之间。滑块或旋钮是连续控件。(请注意,理论上,连续参数可以取范围内的任何可能值。)

(严格地说,从技术上讲,一个从0到100的整数步长的滑块是一个离散控制,因为整数集不是连续的。在实际操作中,一个具有大量数值而不是少数固定选项的滑块可以被认为是一种连续控制,因为这就是用户体验的感觉。)

面向Mac滑块的Kindle
Kindle for Mac特征是离散和连续的控制:1)字号Slider是一个离散控件,因为唯一的字号选择是12个预设值中的一个,对应于滑块下面几乎不可见的散列标记。如果用户试图在可用的离散选项之间移动滑块,界面将它捕捉到最近的可用值。2)单选按钮颜色模式也是离散的,因为只有3个选项可供选择。3)每行字亮度滑块是连续控制 - 用户可以选择沿范围的任何值。

支持探索的UI控件

线性滑块

一个线性滑块当相应的参数具有已定义的范围(带有明确的最大值和最小值)时,是一个有用的默认控件,但精确的值对用户可能不太重要。在滑块上获得精确的值是困难的,因为Accot-Zhai转向法律(著名的推论Fitts的法律),这是一个HCI原则,即用户引导指向设备通过2D通道(如滑块)所需的时间取决于通道的长度和宽度。大多数滑块的宽度都很窄,所以用户通常很难准确地击中一个特定的点。

当用户可以在控件范围内滑动并实时看到效果时,滑动条是有效的;当用户操作和屏幕效果之间存在显著的响应延迟时,它们就不是一个好的选择。(根据标准响应时间的指导方针,此延迟最多为0.1秒。)例如,滑块是一个糟糕的选择,包括复杂的计算,如视频效果,可能无法实时渲染或过滤器控制(例如,价格范围),大数据集,如果它将花费时间加载变化的结果。

iOS亮度滑块
iOS屏幕亮度滑块不用于选择精确的亮度值,而是要获取相对,近似亮度值:最常尝试使屏幕更亮(或调光器)。对此控制的可用性至关重要是系统立即响应反馈,随着用户移动控制而改变屏幕亮度;如果用户的动作与其对屏幕亮度的影响之间存在显着延迟,则用户无法准确选择滑块上的适当值。

滑块的变体具有两个控件,分别选择最小和最大可接受值。此变体通常用于在网站上实施过滤器,允许用户设置最低和最高价格、航班的开始和结束时间等。与其他类型的滑块一样,选择精确值是很困难的lt,因此此模式在大多数情况下的实用性有限。但是,当与直方图(显示滑块范围内有多少可用选项)等图形结合使用时,双控制滑块可以确保用户选择具有可用匹配内容或选项的范围,从而防止零搜索结果。

Kayak双滑块
Kayak.com特色范围滑块,用于选择飞行的可接受的耗时时间间隔。虽然精确的出发价值如12:15 PM将难以使用此滑块选择,但随附的图表,在出发时间内绘制飞行成本,使用户能够优化它们在时间和价格上的选择。橙色垂直线可帮助用户将其选择映射到价格图表上。

虚拟旋钮

用户必须“旋转”的虚拟旋钮或其他控件可以自然地表示参数,例如平移,当混合音频时,音频工程师将声音从左或右扬声器(或任何介于两者之间的地方)播放。然而,使用普通的输入设备如鼠标和触控板来操作虚拟旋钮在身体上是有挑战性的,这些设备没有自然的旋钮功能可见性因为像鼠标这样的线性输入设备很难执行旋转,一些设计增加了隐藏的旋钮的线性拖动功能,允许用户垂直地向上或向下点击和拖动,以增加或减少参数值。然而,这种行为是意料之外的,而且通常没有能指,因此用户可能永远不会发现它。(此外,如果实施不当,它可能会使那些试图在圆圈内移动鼠标以模拟旋钮旋转的人失去控制。)

(点击播放视频。)GarageBand具有多个旋钮控件,可以单击并垂直拖动以控制旋转。该设计支持不妥善处理旋转的设备(如小鼠),但它不容易被发现,它可能会干扰用户试图将鼠标围绕旋钮的圆形路径移动,以便“旋转”它。在这种情况下,旋钮的选择是对过去的音频工程师使用的物理控制的暗示,并且代表了偏斜的使用差 - 水平滑块将是更适合的控制压缩参数,因为它的值不映射到圆上。
Adobe Lightroom滑块和旋钮
Adobe Lightroom对数字参数使用多种类型的输入控件,包括滑块和虚拟旋钮。尽管它们都表示连续的数字数据,但每种类型的输入控件都反映了有关被修改数据的一些重要的附加信息:控件使用旋钮自然地表示对象周围阴影的角度,以及滑块(例如不透明度,从0%–100%)运行,表示具有自然最大值和最小值的数字数据。

二维矩阵

2D矩阵是一种专门的输入控制,用于通过绘制复杂曲线同时修改多个相关参数。与该控件的交互通常通过单击add来实现断点到现有的直线或曲线;一旦添加了一个新的断点,将该断点拖动到一个新的位置,就会告诉系统在断点之间插入并绘制一条曲线。这种类型的控制是非常有用的,当你有两个相关参数相互依赖或通常会被修改(如亮度或RGB曲线在照片和视频编辑应用程序),或者当你需要表示一个物体的位置或通路通过一个二维空间(比如电影环绕声)。

(点击播放视频)GIMP(GNU图像处理程序)使用2D矩阵同时控制多个参数,否则需要多个滑块。在这种情况下,每个轴显示不同的参数:x轴为输入音调(从阴影突出了),y轴为输出音调.曲线越水平,图像的整体色调范围就越有限。用滑块或其他数字控件表示这些数据将需要使用多对控件(每个特定控件对应一对语气用户想要操纵的值)。对于二维网格,用户只需单击即可在直线上的任何位置添加断点,并可以将该断点拖动到一组新的坐标。这种设计允许用户通过进行许多小的调整来创建复杂的曲线。

链接控制粗+细参数调整

解决获取精确值问题的最简单方法是使用输入文本框,用户可以在其中为该参数键入精确值。然而,尽管该解决方案提供了精度,但它不允许用户有效地探索由该参数提供的值范围。如果你事先知道数值,输入它是很容易的,但如果你不知道数值应该是多少,那么输入随机值来找出一种看起来正确的颜色,充其量是很乏味的,即使有额外的输入步进按钮来增加或减少数值。而且,文本框不会显示可能的值的范围。(例如,对于RGB颜色,每个红、绿、蓝参数的范围为0-255,对于新用户来说一点也不直观。)

输入步进
Microsoft Office在文本字段旁边以箭头按钮的形式使用数字输入步进器,作为快速增加或减少参数值的方法。

此问题的典型解决方案是使用单独的链接控件美好的调整相同的参数。链接控件调整同一参数的两个(或多个)控件。通常,连续控件(如滑块)用于输入-轻松探索一系列值的效果,并找到所需值的大致近似值。然后,添加一个文本框以允许美好的控件—选择特定的值。精细控制还可以帮助那些已经知道他们想要使用的具体值的高级用户。该设计不仅可以对参数进行详细的调整,还可以显示参数当前状态下的数值,使用户了解与期望输出相关联的数值。

至关重要的是,这两个控件要连续地链接,以便两者都显示相同的值,调整其中一个控件会立即改变另一个控件。(这里,“立即”是指≤0.1秒。)

键盘焦点指向链接控件

利用与控制更简单,键盘焦点移动到文本框当用户调整粗滑块,从而允许用户都使用粗控制设置的值,然后输入一个更精确的值,而无需点击好打字之前输入字段。这种设计有助于降低与之相关的低效率归航(即将手中从鼠标移动到键盘,反之亦然)。但是,确保仍然可以使用键盘快捷键,而焦点呈现给精细输入控制。

Photoshop输入场聚焦
在最近的一项可用性研究中,一个在PC上使用Adobe Photoshop的用户在使用时遇到了困难透明度滑块与键盘命令组合放大(ALT +滚轮):由于键盘焦点移动到细型输入控制,每次尝试使用他的键盘快捷键时会发出错误发出错误(因为输入的字段仅限预期数字作为有效输入)。[作为一边,蜂鸣声违反了所有错误消息指南;我们不推荐。

参数控件的默认值

良好的参数默认值是重要的:它们不仅可以节省时间和用户的努力,而且可以为新手提供指导。使用默认值的典型方法是使用中立值,该值将根据特定参数而变化:对于缩放滑块,100%(放置在滑块的中间)是一个合理的默认值,对于其他控件,0或最大值可能提供一个中立点。提供跳转到默认值的简单方法,例如重启按钮。This button is especially helpful if the neutral value is contained somewhere in the middle of the range (like in the zoom example before), or is not obvious (e.g., if the range is not from 0–100, or if the default value is not likely to be known by a novice user). It is also helpful to have some sort of visual indicator for default value, such as a small tick or hash mark above the slider, showing the location of the default value.

Apple照片调整滑块
苹果的照片应用程序有多个滑块来控制参数,还有一个选项可以将参数重置为默认值。(不幸的是,重启函数隐藏在上下文菜单中。)

结论

详细参数需要正确的控件—也就是说,控件不仅传递关于如何使用它们的信息,而且还传递关于它们所表示的参数的适当值范围的信息。该控件应该提供简单的方法来探索可能值的范围并指定一个精确的值。为用户提供单独但链接的粗值和细值控件,使用良好的默认值(并允许使用简单的方法将值重置为这些默认值),并在用户操作粗控件时为细控件提供键盘焦点。

了解有关UI控件的更多信息为期一天的应用程序设计课程