菜单 关闭

输入控制参数:平衡勘探精度和滑块,旋钮,矩阵

通过 页面Laubheimer2017年5月14日

简介:有关控制支持粗和细参数选择和确保易于勘探和精度。


数值参数对象的属性的值是数字例子包括产品价格和数量在电子商务站点或对象照片编辑程序的透明度。

常见的数字互动控制参数范围从文本输入字段,滑块,虚拟旋钮旋转,2 d矩阵与可编辑曲线,和步进增量或减量给定值每种类型的控制是有用的在不同的情况下和通信数据被修改的信息只要有可能,应该有一个自然的映射之间的控制和数据的类型For example, a rotating virtual knob naturally corresponds to an angle parameter当UI控制一些参数的修改信息,通信的manbetx官方网站手机版坚持的一个10个可用性启发式——系统之间的匹配和真实的世界。

许多应用程序和网站,特别是用于富有创造性的活动中获得或数据分析,长期以来的参数列表允许特定属性的详细调整复杂的连续参数,必须设置之间的平衡:

  • 探索:允许用户轻松地探索的影响控制的一系列参数,
  • 精度:让用户精确地选择一个特定的值。

离散和连续控制

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

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

(严格地说,一个滑块,范围从0 - 100在整个整数的步骤在技术上是一个离散的控制,由于整数的集合不是连续的实际上,一个滑块,大范围的值,而不只是一些固定的选项可以被认为是一个连续控制,因为在用户体验的感觉。)

Kindle的Mac滑块
Kindle Mac特性的离散和连续控制:1)字体大小 滑块是一个离散的控制,因为字体大小的选择是一个只有12个指定值对应的滑块下面的几乎不可见的标记如果用户试图移动滑块之间离散的可用选项,界面会提前到最近的可用价值2)单选按钮颜色模式 也离散,因为只有3选项可供选择3)每行字 亮度 滑块是连续控制,用户可以选择任何值范围。

支持探索的UI控件

线性滑块

一个线性滑块是一个有用的默认控制相应的参数定义了范围(有明确的最大和最小值),但精确的值对用户不太可能重要获得一个精确的值在一个滑动条是困难的,因为Accot-Zhai转向法律(一个著名的推论费茨定律),这是一个人机交互原理,说的时间用户引导定位设备通过一个2 d隧道(如滑块)取决于隧道的长度和宽度大多数滑动条的宽度很窄,所以用户往往很难达到一个特定的位置准确。

Sliders are effective when users can scrub through the range of the control and see the effects in real time; they are not a good choice when there is significant response delay between the user action and its effect on the screen(根据标准响应时间的指导方针, this delay should be at most 0.1 seconds.) Examples where sliders are a poor choice include complex computations such as video effects that might not render in real time or filter controls (e.g., price ranges) for large datasets, if it will take time to load the results of the change.

iOS亮度滑块
iOS屏幕的亮度滑块不是用来选择一个精确的亮度值,而是获得一个相对,近似亮度值:通常,用户试图使屏幕亮度比目前(或调光器)Critical to the usability of this control is that the system responds immediately with feedback, changing the screen brightness as the user moves the control; if there was a significant delay between the user’s action and its effect on screen brightness, the user would not be able to accurately select an appropriate value on the slider.

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

Kayak双滑块
Kayak.com功能范围滑动条选择一个可接受的航班起飞时间间隔Although a precise departure value such as 12:15pm will be hard to select with this slider, the accompanying chart, graphing flight cost over departure time, enables users to optimize their choice over both time and price橙色的垂直线帮助用户映射到他们的选择的价格图表。

虚拟旋钮

虚拟旋钮或其他控件,用户必须“旋转”可以自然代表等参数平移,哪里音频工程师将声音播放从左或右扬声器(或任何中间)混合音频然而,虚拟旋钮是身体具有挑战性的操纵与常见的输入设备(如鼠标和触摸板,不自然功能可见性对于转动因为线性输入设备执行旋转像老鼠有困难,一些manbetx官方网站手机版添加一个隐藏的linear-dragging旋钮的功能,允许用户单击并拖动向上或向下,垂直,以增加或减少参数值然而,这种行为不是预期,通常没有能指,因此用户可能永远不会发现它(另外,如果不好实现,它可以夺取这些试图移动鼠标控制围成一圈来模仿旋钮的旋转)。

(Click to play video.) GarageBand has multiple knob controls that can be clicked and dragged vertically to control rotation这manbetx官方网站手机版支持设备(比如老鼠)不处理好旋转,但它是不容易发现的,它会干扰用户的尝试移动鼠标的圆形路径旋钮以“旋转”选择旋钮在这种情况下是一个针对所使用的物理控制音频工程师过去,和代表一个穷人使用skeuomorphism——水平滑块将是一个更合适的控制压缩 参数,由于其价值观不映射到一个圆。
Adobe lightroom滑块和旋钮
Adobe Lightroom使用多种类型的输入控制数字参数,包括滑块和虚拟旋钮虽然他们都代表连续数值型数据,每种类型的输入控件反映了一些重要的,关于数据的附加信息修改:使用旋钮来控制自然代表阴影物体周围的角度,和滑块(如不透明度 ,从0% - -100%)表示与自然最大和最小数值数据。

二维矩阵

一个二维矩阵是一个专门的输入控制用于同时修改多个相关参数通过一个复杂的曲线点击添加交互,常常会发生这种控制断点to an existing line or curve; once a new breakpoint has been added, dragging that breakpoint to a new location tells the system to interpolate between the breakpoints and draw a curve这种类型的控制是非常有用的,当你有两个相关参数相互依赖或通常会被修改(如亮度或RGB曲线在照片和视频编辑应用程序),或者当你需要表示一个物体的位置或通路通过一个二维空间(比如电影环绕声)。

(Click to play video.) GIMP (GNU Image Manipulation Program) uses a 2D matrix to control simultaneously several parameters that would otherwise require multiple sliders在这种情况下,每个轴显示一个不同的参数:轴输入音调 (从阴影 突出了 ),y轴输出音调 水平曲线,越多,图像的整体色调范围有限表示这个数据与滑块或其他数字控制需要使用多个双控制(每个特定的一个语气 值,用户想要操纵)2 d网格,用户只需点击添加断点的地方,和可以拖动,断点一套新的坐标这manbetx官方网站手机版允许用户创建复杂的曲线,使许多小的调整。

链接控制粗+细参数调整

最简单的方法解决问题获得精确值是使用一个文本框,用户可以输入一个参数的精确值然而,虽然这个解决方案提供了精度,它不允许用户有效地探索这个参数提供的值的范围如果你知道事先价值,打字很容易,但如果你不知道应该数量,输入随机值求出一个颜色看起来正确的是,在最好的情况下,乏味,即使有额外的输入步进按钮,盈亏值更多,一个文本框不显示可能值的范围RGB颜色(例如,范围0 - 255的红、绿和蓝色的参数是不直观的新用户。)

输入步进
微软办公用数字的形式输入步进文本框旁边的箭头按钮来迅速盈亏参数值。

典型的解决这个问题是单独的使用,控制有关adjustment of the same parameter.与控制两个(或更多控制)调整相同的参数吗通常情况下,一个连续控制使用滑块等输入——轻松地探索影响一系列的值,并找到所需的值的一个粗略的近似值然后,添加一个文本框允许控制——选择一个特定值The fine control also helps power users that already know the specific value they’d like to use这manbetx官方网站手机版不仅允许详细的参数调整,但也显示参数的数值在其当前状态,它可以让用户所需的数值与输出。

关键是这两个控制不断的联系,这都显示相同的值,并相应地调整立即改变了另一个(在这里,再一次,“立即”意味着≤0.1秒。)

键盘关注与控制

利用与控制更简单,键盘焦点移动到文本框当用户调整粗滑块,从而允许用户都使用粗控制设置的值,然后输入一个更精确的值,而无需点击好打字之前输入字段这manbetx官方网站手机版有助于减少所带来的低效率归航(即把某人的手从鼠标键盘,反之亦然)然而,确保仍然可以使用键盘快捷键,重点提出了优良的输入控件。

Photoshop输入字段集中
在最近的一次可用性研究中,一个用户使用Adobe Photoshop在PC上使用时遇到了困难透明度 滑块结合键盘命令来放大(ALT +滚轮):从键盘焦点移动到fine-input控制,一个错误哔哔声是每次他试图利用键盘快捷键(因为只输入字段将数字作为一个有效的输入)(说句题外话,哔哔声违反错误消息的指导方针; we don’t recommend them.]

参数控制的默认值

良好的参数默认值很重要:他们不仅可以节省时间和用户的努力,但他们可以提供指导新手吗违约的一个典型的方法是使用一个中立的价值,这将取决于具体的参数:缩放滑块,100%(放置在中间的滑块)使得一个明智的违约,对于其他控件,0或最大值可能提供一个中立点提供一种简单的意味着跳转到默认值,如重置按钮这个按钮是特别有用如果中性值包含中间的范围(如在变焦的例子),或不明显(例如,如果不从0 - 100的范围,或者默认值是不可能被一个新手用户)也有助于有某种视觉指示器为默认值,如一个小勾或散列马克滑块上方,显示默认值的位置。

苹果照片调整滑块
苹果的照片应用有多个滑动条控制参数和一个选项重置默认值(不幸的是,重置 函数是隐藏在一个上下文菜单)。

结论

详细的参数需要正确的控制,控制,不仅传达一些信息关于他们应该被使用,但也适合他们所代表的参数的值的范围控制应提供简单意味着探索可能的值的范围和指定一个精确值为用户提供单独的粗和细值,但与控制使用好的默认值(并允许简单的意味着重置价值违约),并提供键盘焦点的精细控制当用户操纵控制粗。

了解更多关于我们的UI控件为期一天的application-manbetx官方网站手机版