数字参数是对象的属性,其值是数字。示例包括电子商务网站上的产品价格和数量或照片编辑应用程序中的对象透明度。
用于数字参数的共同交互式控件范围从文本输入字段,滑块,旋转的虚拟旋钮,具有可编辑曲线的2D矩阵,以及逐步增加或减少给定值的初步。每种类型的控制在不同的情况下都很有用,并传达有关正在修改的数据的信息。尽可能存在,应该有一个自然的映射控件类型和数据之间。例如,一个旋转的虚拟旋钮自然对应于一个角度参数。当UI控件传递一些关于它修改的参数的信息时,设计遵循其中一个10个可用性启发式-系统和真实世界之间的匹配。
许多应用而网站,特别是那些用于创造性追求或数据分析的网站,有一长串的参数,允许对特定属性进行详细调整。对于复杂的连续参数,必须在以下两者之间建立平衡:
- 探索:允许用户轻松探索整个参数范围内控件的效果,和
- 精确:允许用户精确地选择一个特定的值。
离散控制与连续控制
有两种主要类型的输入控件:
- 离散控制提供有限数量的步骤或可用选项。示例包括开/关开关或复选框和单选按钮有一些预先选定的选项。
- 连续控制允许输入范围,通常介于最小值和最大值之间。滑块或旋钮是连续控件。(请注意,理论上,连续参数可以取范围内的任何可能值。)
(严格地说,从技术上讲,一个从0到100的整数步长的滑块是一个离散控制,因为整数集不是连续的。在实际操作中,一个具有大量数值而不是少数固定选项的滑块可以被认为是一种连续控制,因为这就是用户体验的感觉。)
支持探索的UI控件
线性滑块
一个线性滑块当相应的参数具有已定义的范围(带有明确的最大值和最小值)时,是一个有用的默认控件,但精确的值对用户可能不太重要。在滑块上获得精确的值是困难的,因为Accot-Zhai转向法律(著名的推论Fitts的法律),这是一个HCI原则,即用户引导指向设备通过2D通道(如滑块)所需的时间取决于通道的长度和宽度。大多数滑块的宽度都很窄,所以用户通常很难准确地击中一个特定的点。
当用户可以在控件范围内滑动并实时看到效果时,滑动条是有效的;当用户操作和屏幕效果之间存在显著的响应延迟时,它们就不是一个好的选择。(根据标准响应时间的指导方针,此延迟最多为0.1秒。)例如,滑块是一个糟糕的选择,包括复杂的计算,如视频效果,可能无法实时渲染或过滤器控制(例如,价格范围),大数据集,如果它将花费时间加载变化的结果。
滑块的变体具有两个控件,分别选择最小和最大可接受值。此变体通常用于在网站上实施过滤器,允许用户设置最低和最高价格、航班的开始和结束时间等。与其他类型的滑块一样,选择精确值是很困难的lt,因此此模式在大多数情况下的实用性有限。但是,当与直方图(显示滑块范围内有多少可用选项)等图形结合使用时,双控制滑块可以确保用户选择具有可用匹配内容或选项的范围,从而防止零搜索结果。
虚拟旋钮
用户必须“旋转”的虚拟旋钮或其他控件可以自然地表示参数,例如平移,当混合音频时,音频工程师将声音从左或右扬声器(或任何介于两者之间的地方)播放。然而,使用普通的输入设备如鼠标和触控板来操作虚拟旋钮在身体上是有挑战性的,这些设备没有自然的旋钮功能可见性因为像鼠标这样的线性输入设备很难执行旋转,一些设计增加了隐藏的旋钮的线性拖动功能,允许用户垂直地向上或向下点击和拖动,以增加或减少参数值。然而,这种行为是意料之外的,而且通常没有能指,因此用户可能永远不会发现它。(此外,如果实施不当,它可能会使那些试图在圆圈内移动鼠标以模拟旋钮旋转的人失去控制。)
二维矩阵
2D矩阵是一种专门的输入控制,用于通过绘制复杂曲线同时修改多个相关参数。与该控件的交互通常通过单击add来实现断点到现有的直线或曲线;一旦添加了一个新的断点,将该断点拖动到一个新的位置,就会告诉系统在断点之间插入并绘制一条曲线。这种类型的控制是非常有用的,当你有两个相关参数相互依赖或通常会被修改(如亮度或RGB曲线在照片和视频编辑应用程序),或者当你需要表示一个物体的位置或通路通过一个二维空间(比如电影环绕声)。
链接控制粗+细参数调整
解决获取精确值问题的最简单方法是使用输入文本框,用户可以在其中为该参数键入精确值。然而,尽管该解决方案提供了精度,但它不允许用户有效地探索由该参数提供的值范围。如果你事先知道数值,输入它是很容易的,但如果你不知道数值应该是多少,那么输入随机值来找出一种看起来正确的颜色,充其量是很乏味的,即使有额外的输入步进按钮来增加或减少数值。而且,文本框不会显示可能的值的范围。(例如,对于RGB颜色,每个红、绿、蓝参数的范围为0-255,对于新用户来说一点也不直观。)
此问题的典型解决方案是使用单独的链接控件粗和美好的调整相同的参数。链接控件调整同一参数的两个(或多个)控件。通常,连续控件(如滑块)用于粗输入-轻松探索一系列值的效果,并找到所需值的大致近似值。然后,添加一个文本框以允许美好的控件—选择特定的值。精细控制还可以帮助那些已经知道他们想要使用的具体值的高级用户。该设计不仅可以对参数进行详细的调整,还可以显示参数当前状态下的数值,使用户了解与期望输出相关联的数值。
至关重要的是,这两个控件要连续地链接,以便两者都显示相同的值,调整其中一个控件会立即改变另一个控件。(这里,“立即”是指≤0.1秒。)
键盘焦点指向链接控件
利用与控制更简单,键盘焦点移动到文本框当用户调整粗滑块,从而允许用户都使用粗控制设置的值,然后输入一个更精确的值,而无需点击好打字之前输入字段。这种设计有助于降低与之相关的低效率归航(即将手中从鼠标移动到键盘,反之亦然)。但是,确保仍然可以使用键盘快捷键,而焦点呈现给精细输入控制。
参数控件的默认值
良好的参数默认值是重要的:它们不仅可以节省时间和用户的努力,而且可以为新手提供指导。使用默认值的典型方法是使用中立值,该值将根据特定参数而变化:对于缩放滑块,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.
结论
详细参数需要正确的控件—也就是说,控件不仅传递关于如何使用它们的信息,而且还传递关于它们所表示的参数的适当值范围的信息。该控件应该提供简单的方法来探索可能值的范围并指定一个精确的值。为用户提供单独但链接的粗值和细值控件,使用良好的默认值(并允许使用简单的方法将值重置为这些默认值),并在用户操作粗控件时为细控件提供键盘焦点。
了解有关UI控件的更多信息为期一天的应用程序设计课程.
分享这篇文章: