原文链接:http://babich.biz/slider-concepts
滑动进度条已经存在很长一段时间了,它实际上已经成为选择值或值范围的标准UI控件。滑块很有帮助,因为它允许用户快速浏览一系列选项。
在本文中,我将回顾这个熟悉的UI元素的一些创造性概念。
1. 可视化的输出
Slider是允许用户选择特定值(或值的范围)的控件。用户常常通过读取滑块上的标签来获取关于值的信息。与此同时,通过可视化连接到滑块的数据,可以对用户产生更强的效果。
一张图片胜过千言万语
比如用户选择想购买的房屋的房间数量:
或者当他们尝试为个人网站找到一个完美的背景颜色:
可视化使用户更容易做出明智的决定。
在某些情况下,不先查看输出几乎不可能做出明智的决定。Tylko用这种视觉化的输出来帮助用户了解家具的外观。毕竟仅仅通过阅读测量数据是很难理解的。
2. 帮助用户选择一个值
这种滑动滑动器允许用户探索可用的选项,但在某些情况下,用户可能更想知道应该选择什么值。
良好的用户界面可以帮助和指导用户
Airbnb网站上有一个很好的例子。Airbnb将价格范围滑块与显示每晚价格分布和平均价格的直方图配对。此图使用户更容易选择一个价格范围。
3.允许用户设置特定的值
许多滑块都有相同的问题——使用滑块不可能选择一个精确的值。对于精确的输入没有任何疑问,滑块永远无法打败常规的输入字段。这就是为什么如果您的设计需要精确的输入,那么最好将输入字段与滑块一起使用。
SGS的住房成本计算器提供了两种设置一个值的方法——要么使用滑块,要么在相关字段中输入一个值。如果你想使用这种技术在设计中是至关重要的,以确保一切保持同步:当用户使用滑块改变值,输入框中的值应该更新,当输入框中的值改变,滑块应该被更新。
4. 解决盲点问题
移动应用中的滑动条往往存在盲点问题。当手指覆盖重要数据(选定值)时,就会发生此问题。Virgil Pana创建的流体滑块的概念试图解决盲点问题,它允许用户在与滑块交互的那一刻看到select的值。