Mobile UX设计：滑块

滑块已经存在了很长时间，已成为应用程序中选择和过滤的实际标准。然而，滑块应得到设计师的特殊考虑 - 正是因为它们使用户轻松解决查询，导致不正确或质量差的结果。

为什么要使用滑块？

因为滑块是直观的。他们从物理世界转换成触摸屏，看起来很好，不占用大量空间。当滑块的隐喻适用时，用户喜欢滑块。所以当用户将主题当作一个连续体，就像一个温度滑块是好的，因为你倾向于以“比现在冷一点”来考虑温度，而不是像“我想要温度23”这样的数字。

雷克萨斯IS触觉触摸温度滑块。

滑块类型

单和双

单个滑块最适合选择单个值。

Android Volumes中单个滑块的示例。

双滑块非常适合在一定范围内搜索。

连续和离散

连续滑块用于一定范围内的不确定值，例如下面的示例中的价格。

AirBnB双连续滑块价格范围。

离散滑块对于预定义的值很有用，例如评级控制。

用于产品评级的分立滑块（0至5颗星）。

单个滑块和双滑块都可以是连续的或离散的。

提示：连续范围滑块并不总是最佳选择。离散停止对于小型预定义值（如产品评级）更好。

是否需要确切的价值？

滑块很难精确调整 - 无论是在物理世界还是在触摸设备上。只是因为调整大屏幕中间的小钉子是很困难的。

因此，当特定值对用户无关紧要时，滑块效果最好，但近似值足够好。还允许选择非常特定的值对于用户通常是不必要的。

iOS亮度和音量控制。

如果你还需要一个确切的价值

然后，您可以使用具有可编辑数值的滑块。按下拇指时，文本框可变为可编辑文本输入，并通过拇指移动自动更新该值。

提示：如果选择确切的值对于界面的目标很重要，那么您也许应该选择一个替代的UI元素。

显示范围和直方图

如果您使用滑块进行过滤，则应该在整个集合中显示值的实际范围。而不是使用任意数字和无益的标签，如$ 0和Max（价格），您应该提供一个准确的范围，用户可以搜索的实际最小和最大值。

具有直方图的滑块（如下所示）可以非常有助于防止零响应。高条表示大量物品，而按比例缩小的条表示较少数量的物品。

提示：用户无法获取直方图。在这种情况下，他们只是忽略它，并继续使用该应用程序没有任何问题。

想想拇指，不要覆盖数字

当放在滑块正下方的标签可能在桌面设计上工作时，相同的标签放置对于触摸屏不起作用，因为当用户的手指与控件进行交互时，标签可能会被用户的手指遮住。为了在使用期间保持可见，值应该出现在引脚上方，用户的手指不会覆盖它们。

左：BrilliantEarth.com上的滑块错误地将标签放在滑块下方。右侧：AirBnB.com正确显示UI元素上方的滑块值。图片来源：nngroup

提示：确保可以轻松输入合理的值。

提供视觉反馈

视觉反馈在用户界面设计中非常重要。在现实生活中，按钮和控件对我们的互动产生了回应，这就是人们期望事情发生的方式。在输入事件时，系统应提供即时视觉确认。

各种滑块行为。资料来源：材料设计。

提示：视觉反馈的作用是因为它吸引了用户自然的认可欲望。

结论

滑块看起来不错，但并不总是最好的工具。当你想要的东西是相对的，但不是很好的精确值，它们是好的，除非你也有用户可以键入的文本框。在设计滑块时，请确保用户可以正确选择该范围（或单个值），而无需太多打击精确值。

谢谢！

转自：http://babich.biz/mobile-ux-design-sliders/#