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

对于数值参数共同交互控制范围从文本输入字段，滑块，该虚拟转动旋钮，2D矩阵可编辑的曲线，并且该步进递增或递减一个给定值。每个类型的控制是在不同情况下非常有用和关于被修改的数据进行通信的信息。只要有可能，应该有一个自然的映射控件类型和数据之间。例如，一个旋转的虚拟旋钮自然对应于一个角度参数。当UI控件传递一些关于它修改的参数的信息时，设计遵循其中一个10个可用性启发式-系统与现实世界之间的匹配。

许多应用程序而网站，尤其是那些用于创造性追求或数据分析的网站，有很长的参数列表，允许对特定属性进行详细调整。对于复杂的连续参数，必须在以下之间设置平衡:

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

离散控制vs.连续控制

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

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

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

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

支持探索的UI控件

线性滑块

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

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

iOS亮度滑块
iOS的屏幕亮度滑块不用于选择精确的亮度值，但以获取相对的，近似的亮度值：最多，用户尝试使屏幕更亮（或更暗）比它是目前。临界该控制的可用性是，该系统具有反馈立即响应，在用户移动的控制改变屏幕亮度;如果有用户的行为及其对屏幕亮度效果之间的显著延迟，用户将不能够准确地选择滑块上适当的值。

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

Kayak双滑块
Kayak.com设有范围滑块，用于选择一个航班可接受的起飞时间间隔。虽然精确的偏离值，如下午12:15将很难与此滑块，伴随图表来选择，比发车时间绘图飞行成本，使用户在时间和价格，以优化他们的选择。橙色垂直线可帮助用户自己选择映射到价格走势图。

虚拟旋钮

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

（点击播放视频）GarageBand中具有可点击和垂直拖拽到控制旋转多个旋钮控制。该设计支持设备（如鼠标），不办理转好，但它是不容易发现的，它可以与用户的企图走动旋钮的圆形路径鼠标以‘轮流’它干扰。旋钮在这种情况下，选择是暗指由过去的音频工程师使用了物理控制，并代表了恶劣的使用skeuomorphism的 - 一个水平滑块就一直在为一个更适当的控制压缩参数，因为它的值不映射到圆上。
Adobe的Lightroom滑块和旋钮
Adobe Lightroom为数字参数使用多种类型的输入控件，包括滑块和虚拟旋钮。尽管它们都表示连续的数字数据，但每种类型的输入控件都反映了一些关于被修改数据的重要的附加信息:角控件使用一个旋钮自然地表示对象周围阴影的角度，以及滑块(例如不透明度，从0%到100%)表示带有自然最大值和最小值的数值数据。

二维矩阵

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

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

链接控制粗+细参数调整

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

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

结论

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

了解更多关于UI控件我们为期一天的应用程序设计课程．