滑块通常是用户选择的UI控件,用于让用户从一组固定的选项中选择一个值或范围。但在实践中,,滑块很难操纵. 特别是在触摸界面上,精心操作滑块至精确值所需的控制水平根本不现实。

定义:A滑块是一种控制元件,使用水平移动的旋钮或杠杆来控制变量,如收音机的音量或屏幕上的亮度。

不精确相互作用

在设计可用的UI时,我们必须考虑使用接口的上下文。特别是在移动设计中,用户经常在看电视、走路甚至开车时用一只手拿着设备进行其他活动。在这种情况下,将控件精确地点击并拖动到特定位置可能会让人望而生畏。滑块受以下约束:转向规律,它描述了您可能猜到的穿越隧道所需的时间,隧道越长越窄,穿越隧道所需的时间就越长。(转向规律也适用于下拉菜单和水平滚动条)由于移动设备是可移动的,因此我们看到许多用户意外地将滑块从他们试图选择的值上移开也就不足为奇了只是当他们把手指从屏幕上拿开的时候。

Kayak iOS应用程序过滤器屏幕截图
Kayak应用程序使用多个滑块根据飞行时间进行过滤离开到达滑块仅允许整小时值,但期间滑块强制用户选择精确到分钟的值。

设计触摸界面时的另一个主要考虑因素是可达性各种UI元素的组合。想一想,对于有运动困难的用户来说,与滑块控件交互是多么具有挑战性。他们能选择一个更接近他们想要的值吗?他们需要付出多少努力和尝试多少次?许多的老年用户的手不太稳定与年轻用户相比,执行精确手势来操纵小UI元素也会有类似的困难。除非您想让这些用户束手无策,否则滑块控件可能不是最佳选择。

是否需要精确的值?

允许选择非常特定的值对用户来说通常不是必要的,也不是很有帮助。

滑块工作当具体值无关紧要时最好对用户来说,但是一个近似值就足够了。因此,Kayak可以在持续时间、到达时间和离开时间上使用滑块,因为大多数用户对出发时间(比如说中午)没有意见,也不关心具体的出发时间。但是,无论什么时候,精确的值很重要,滑块都是不好的。例如,如果必须在表单中输入年龄、当前体重或身高等数量,则滑块将不合适。

通过滑块选择的范围越宽或越密集,选择精确值就越困难. 这个美味可口的该应用程序要求用户对葡萄酒进行6-10级评分,精确到十分之一分。这不仅是因为不正常的刻度令人困惑,而且选择精确的数值(例如9.5对9.3)是一项非常艰巨的任务。有人可能会争辩说,用户不会介意将葡萄酒评级为9.3而不是9.5,因为它们的值在同一个范围内。但是,为什么要为十分之一的评分而烦恼,而不使用更简单的5分制来代替呢?

Delectable iOS应用程序和Amazon iOS应用程序上产品评级元素的屏幕截图
左图:Delectable应用程序使用一个滑块为一瓶葡萄酒指定一个非常具体的评级。右图:亚马逊应用程序使用更常见、更容易选择的可点击星星为产品指定评级。
Weightbot iOS应用程序滑块屏幕截图
Weightbot是一款重量跟踪应用程序,它犯了一个双重错误:(1)它使用一个滑块(这是一个不精确的控件)来表示需要精确(重量)的东西;(1)滑块以非常小的增量(.1磅)移动。另外,它的起始值是随机的:如果你体重120或210磅,祝你调整滑块好运!

想想拇指

在适当使用滑块的情况下,确保元素的视觉设计不会妨碍其可用性。对于触摸屏,考虑用户手指将被放置在屏幕上,在操纵滑块时,屏幕的哪些区域将被覆盖。虽然直接放置在滑块下方的标签可能适用于与鼠标光标一起使用的桌面设计,但相同的标签放置方式不适用于移动设备和其他触摸屏设计,因为在用户与控件交互时,标签可能会被手指遮挡。

BrilliantEarth.com和AirBnB.com上的过滤器截图
左图:BrilliantEarth.com上的滑块将描述滑块增量的标签放置在滑块轨迹下方,在交互过程中,用户的拇指会遮挡这些标签。右:AirBnB.com正确显示UI元素上方的滑块值,因此在整个使用过程中它们都保持可见。

为了在使用过程中保持可见,描述滑块或其当前选定值的任何标签必须出现在所涉及的两个拇指旁边或上方:用户拇指和滑块拇指(也称为旋钮或升降器)。

结论

只有当精确值对用户来说无关紧要,而只是大致范围时,才使用滑块。确保用户可以正确选择该范围,而无需费尽周折才能达到精确值。此外,任何滑块标签都必须显示在滑块的上方或旁边,而不是下方,以便保持可见当用户选择一个值时,另一方面,考虑一个不同的UI元素,允许用户点击甚至键入指定他们的选择,而不是依赖于按下和拖动手势。