滑块控制的4个创意概念

滑块已经存在很长一段时间了,并且事实上已经成为了标准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用图表配对价格范围滑块,该图表展示了价格的分布和每晚的平均价格。这个柱状图使用户更容易在一个价格范围里去选一个过滤值。


Airbnb价格范围柱状图防止用户有零结果过滤。

在Trulia网站上,发现了另一个更有意思的解决方案。Trulia的房屋可购性计算器使用了滑块的颜色作为功能工具—滑块来通知用户关于债务—收入选择。这个滑块防止用户选择潜在的危险值


3 允许用户去设置一个特殊的值

许多滑块有同样的问题—用滑块选择一个精确值不可能。毫无疑问对于精确输入,滑块绝不会击败一个常规的输入框。那就是为什么如果你的设计需要精确的输入,最好一起使用输入框和滑块。

SGSf房屋成本计算器提供两种设置值的方式—或者通过使用一个滑块,或者通过将值放入相关的输入框。如果你想在你的设计中使用这个技术,确保一切要保持同步至关重要:当用户使用滑块改变值时,输入框的值也应当被更新,当输入框中的值改变的时候,滑块也应当更新。


4 解决盲点的问题

移动app的滑块通常早搜盲点的问题。这个问题发生在手指覆盖重要数据(选定值)时。由Virgil Pana创建的流体滑块的概念试图通过允许他们与滑块交互的时看到的选中的值来去解决盲点这个问题。


Virgil Pana的概念,这个概念由Ramotion 编码(在github上的流体滑块项目)

原文链接:《4 Creative Concepts of Slider Control》Nick Babich

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,033评论 3 119
  • 515发布会之后,经历坚果R1的质量风波,TNT工作站砍单传闻的罗永浩再一次站在了舞台上。坚果2是锤子的口碑爆款,...
    StarCode阅读 586评论 0 5
  • 最近和同学商量投稿的事情,发现其实自己真的没有进步,反而处于一种退步的状态。 同学发来几篇样稿,都是很美的抒情散文...
    今天安好阅读 234评论 0 0
  • 余大师又出书了,而且在图书畅销榜名列前茅,不由得不去买来读一读。 这本书经过一个晚上3个小时的时间就读完了。读完了...
    大力稳重阅读 623评论 11 34