滑块已经存在很长一段时间了,并且事实上已经成为了标准UI控件,用于选择一个值或者一系列值。滑块很有用,因为它允许用户快速的去探索一系列选项。
本文中,我们将回顾一下这个熟悉的UI元素的几个创意概念。
1 可视化输出
滑块是一个允许用户选择一个特定的值(或者一个范围的值)的控件。通常,用户通过阅读滑块上的标签来获取这个值是关于什么的信息。同时,通过可视化连接在滑块上的数据,有可能对我们的用户产生一个更强的影响。
“A picture is worth a thousand words” 一幅图值一千个字
试图去找到一个完美的背景色用于他们的个人网站:
探索不同类型的汉堡:
或者是,想留下关于产品或者服务的反馈
Visualisation makes it easier for users to make an informed decision.
可视化使用户更容易做明智的决定。
在一些案例中,起初没有看到输出的情况下下,去做一个明智的决定几乎不可能。在Tylko,视觉输出让用户明白了家具可能是什么样子。仅仅通过阅读测量来获得这种理解很难。
2 帮助用户选择一个值
滑块让用户去探索可用的选项,但是在一些案例中,用户或许会疑惑他们应当选择什么值。
Good user interface helps and guides the user.好的用户界面帮助和指导用户。
滑块可以帮助用户做出明智的决定。
在Airbnb网站上发现了一个很好的例子。Airbnb用图表配对价格范围滑块,该图表展示了价格的分布和每晚的平均价格。这个柱状图使用户更容易在一个价格范围里去选一个过滤值。
在Trulia网站上,发现了另一个更有意思的解决方案。Trulia的房屋可购性计算器使用了滑块的颜色作为功能工具—滑块来通知用户关于债务—收入选择。这个滑块防止用户选择潜在的危险值
3 允许用户去设置一个特殊的值
许多滑块有同样的问题—用滑块选择一个精确值不可能。毫无疑问对于精确输入,滑块绝不会击败一个常规的输入框。那就是为什么如果你的设计需要精确的输入,最好一起使用输入框和滑块。
SGSf房屋成本计算器提供两种设置值的方式—或者通过使用一个滑块,或者通过将值放入相关的输入框。如果你想在你的设计中使用这个技术,确保一切要保持同步至关重要:当用户使用滑块改变值时,输入框的值也应当被更新,当输入框中的值改变的时候,滑块也应当更新。
4 解决盲点的问题
移动app的滑块通常早搜盲点的问题。这个问题发生在手指覆盖重要数据(选定值)时。由Virgil Pana创建的流体滑块的概念试图通过允许他们与滑块交互的时看到的选中的值来去解决盲点这个问题。
原文链接:《4 Creative Concepts of Slider Control》Nick Babich