UI/UX 滑动条（slider）的设计

原文链接：http://babich.biz/slider-concepts

滑动进度条已经存在很长一段时间了，它实际上已经成为选择值或值范围的标准UI控件。滑块很有帮助，因为它允许用户快速浏览一系列选项。

在本文中，我将回顾这个熟悉的UI元素的一些创造性概念。

1. 可视化的输出

Slider是允许用户选择特定值(或值的范围)的控件。用户常常通过读取滑块上的标签来获取关于值的信息。与此同时，通过可视化连接到滑块的数据，可以对用户产生更强的效果。

一张图片胜过千言万语

比如用户选择想购买的房屋的房间数量:

Animation by Gal Shir. Available on Codepen

或者当他们尝试为个人网站找到一个完美的背景颜色:

A concept created by Rogie King visualizes the color user selects

可视化使用户更容易做出明智的决定。              

      在某些情况下，不先查看输出几乎不可能做出明智的决定。Tylko用这种视觉化的输出来帮助用户了解家具的外观。毕竟仅仅通过阅读测量数据是很难理解的。

2. 帮助用户选择一个值

这种滑动滑动器允许用户探索可用的选项，但在某些情况下，用户可能更想知道应该选择什么值。

良好的用户界面可以帮助和指导用户

Airbnb网站上有一个很好的例子。Airbnb将价格范围滑块与显示每晚价格分布和平均价格的直方图配对。此图使用户更容易选择一个价格范围。

Airbnb price range histogram prevents users from having zero-results filtering

3.允许用户设置特定的值

许多滑块都有相同的问题——使用滑块不可能选择一个精确的值。对于精确的输入没有任何疑问，滑块永远无法打败常规的输入字段。这就是为什么如果您的设计需要精确的输入，那么最好将输入字段与滑块一起使用。

SGS的住房成本计算器提供了两种设置一个值的方法——要么使用滑块，要么在相关字段中输入一个值。如果你想使用这种技术在设计中是至关重要的,以确保一切保持同步:当用户使用滑块改变值,输入框中的值应该更新,当输入框中的值改变,滑块应该被更新。

4. 解决盲点问题

移动应用中的滑动条往往存在盲点问题。当手指覆盖重要数据(选定值)时，就会发生此问题。Virgil Pana创建的流体滑块的概念试图解决盲点问题，它允许用户在与滑块交互的那一刻看到select的值。