滑块的应用

helicopter621 — 2008-12-15 23:19:58

*严重感谢博学轻侯与包掌柜宗羲对本文的指正！

上上周的一个产品测试中，看到设计师尝试将滑块应用在打分这一样式中。此滑块一直在我脑海中纠结，于是对滑块进行了一番小研究。

滑块（slider）以其滑动感，给用户一种流畅爽利的操作体验，下文将述及将其应用在UI上的好处。滑块基本能分为两种：单滑块与双滑块(要说明的是，单与双在此并非指单个或两个，如图1.1里PS的颜色选定滑块虽然形式上有两个，但二者没有起图1.2里双向限定的作用；图1.3里虽然有三个滑块，但其实也是多重双向限定)。


图1.1：PS里的单滑块	图1.2：PS里的双滑块
图1.3：PS里的多滑块

单滑块
单滑块基本呈现形式如图2，可以是水平也可以是垂直移动。单滑块借用了杆秤的概念，用户可延着一条轴线滑动滑块，直到到达理想的停止点，整个交互过程十分流畅。但在UI应用中，直接点击某个刻度，滑块会自动跳移到该值上，扩展了现实生活中滑块只能通过拖动才能到达某个点的限制。

图2：Windows里的音量调节

滑块操作除了给用户平滑流畅感以外，关键是让用户在拖移过程中看到滑块在不同值点所带来的变化（如尺寸、颜色等），也即提供实时的效果预览供用户比较、选择。这种良好的可视性和即时反馈有效减少了用户的评估鸿沟，对于模糊数值尤其有用，用户并不需要知道值点代表什么便能做出选择。例如当我们移动音量滑块，马上会听到声音强弱的变化。在图4的情形里，用户拖移滑块会立刻看到界面变大或变小；在图5里，色块会随着滑块的移动而变色。

要注意的是，当值域区间对应的是实际值（如百分比）而非相对值（如声量高低），应在滑块移到某点时显示对应值。当值域区间较广时，另设一个与滑块运动互相关联的输入框能照顾无需预览、可直接输入值的高级用户。如在图5的情况里，用户输入容差值，滑块会自动跳到相应位置。


图3：AcdSee里的页面放大缩小	图4：PS里的颜色容差调

理想的滑块使用场景
结合滑块的特点，以下的这些使用情景能使滑块发挥最大的作用：

选项值是连续的，或具有规则的变化规律（如线性增减）
效果预览——用户在拖移过程中能得到结果的实时反馈

图5是数值对用户有意义的一种应用。滑块在各个年份之间滑动，能让用户感觉到历年来民主党与共和党在选民中的变化。

图5：NYT选票分析图表

图6是数值对用户无意义时的应用。用户未必需要知道ta所选择的值代表着什么，只需要通过对结果的预览判断是否满足需求。如放大缩小、亮度变化等。

图6：http://www.stripegenerator.com/

滑块总是在滑竿上滑动，而滑竿在视觉上的轴向延伸性对于呈现连续的数值尤有优势。否则使用单选按钮的话，视觉流会被一个个置于选项标签前的按钮所打破。

若选项值本身就由一个个数值区间组成（图7），滑块能发挥更大的优势。因为这种呈现形式能帮助用户迅速地将心目中的数值投射到数值所在区间。

图7：淘宝礼物频道

再看一些综合实例：

图8是eBay Gift Finder 的年龄选择，当拖动滑块，粉色数字会同时变化。

图8：eBay Gift Finder的年龄选择。

图9是非常有创意的应用。日期展现在滑竿上，比起单选按钮或下拉菜单都要直观、流畅。当滑块分别移到某年月日，下方自动呈现该年月日视频，年月日可自由组合。

图9：脱口秀主持人网站视频库

非理想的滑块使用场景

误用为单选控件

在About Face 3.0 一书中，Alan Cooper将单滑块归入了边界已限定的输入控件（bounded entry controls），而非选择控件（selection control）。固然，对用户来说都是在选择，但设计师应注意不要将滑块与单选按钮混淆。若选项值不超过5个，还是建议使用后者。因为值较少时，可能出现的用户体验问题：

滑块的初始位置误导用户。无论滑块预置在哪个选项值上，都有可能让用户以为是已选或默认选中，除非额外标注初始点
相对增加鼠标操作复杂度。用户受现实生活习惯的影响，误以为必须拖动滑块到某个值才算选中。原本点选就能完成的事情，用户可能做出点-拖-放

那么对于本文开始提到的打分这种使用情景，滑块是否合适？除了上述提到的体验问题，还可能不妥的一点是，当在滑块所处点以外的地方 mouse over，该给出怎样的提示？Yahoo Design Library里面，对rating的解决方案中提到两点：

初始状态为空
鼠标移过某个分值点，要指示评价级别（如星星被灌满或灯亮起）以及文字解释

如果要满足这两点，滑块的打分界面就会十分拥挤了，也欠缺直观。

2. 误用为滚动条
Alan Cooper提到，滑块最常被误用作滚动条（scrollbar），作为呈现数据变化的控件（display control）。但多数情况下，由于不如滚动条那么直观地让用户知道每次移动所带来的数据改变幅度，滑块不太适用于呈现数据的变换状态。Apple则把两者结合起来并称之为滑动条（slidebar），如图10。

双滑块
双滑块是单滑块的扩展，可以用卡尺来理解，实质是双向限定区间。

图11：AcdSee

Amazon估计是首个将滑块应用于查询工具（query tool）的。06年时，他们对钻石购买增加了滑块形式的筛选辅助（图11）。该设计充分发挥了滑块这一控件的优势：实时预览、呈现规律性数据的选择。用户可以移动滑块来调节低端或高端值，或两者皆调，从而拓宽或缩窄范围。页面会同步更新，显示出滑块移动后的结果数量，让用户在提交前预先知道是否会有、有多少搜索结果。

Amazon这个例子其实包括了区间内筛选的两种稍有区别的应用情景。价格和克拉（头两行）有很多对应的数值点，用户划定的区间比较宽泛。对于切割工艺、颜色、清晰度（后三行），双滑块做的是小范围内、有限数值圈选，应用的时候要更加注意。小范围内跨区间选择的可能性更大，所以要确定极少可能出现跨区间选择的情形才好去用滑块，否则应用复选按钮。例如一个要买切割工艺极佳的人，大概只会选择较佳和极佳，而不会选极佳和极差。图12则是个反面教材，用户可能想选择极早或极晚的航班。


图11.1：原始数据集	图11.2：经过滑块限定区间进行筛选后

图12：双滑块的应用反例

综合实例：

Travelocity的酒店筛选，其中——
价格滑块：大范围数据筛选
星级滑块：跨区间选择可能性较小的小范围圈定（很少人只选5星和2星的吧？）
结果反馈：右侧大大的数字明确显示移动任一滑块后的结果

图13：Travelocity.com

最后值得一提的是，滑块的设计有很多细节问题，比如块和竿的比例、块的形状、数值的间隔。这些要素都会影响滑块的可用性以及用户体验是否优良。

延伸阅读 ：

YUI对滑块实现的详细介绍
丰富的滑块实例：http://www.aldenta.com/examples/script.aculo.us/
有时也可从代码上看到滑块的细节的设置：http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Slider/Slider.aspx http://www.filamentgroup.com/lab/developing_an_accessible_slider/

参考文献:

About Face 3: The Essentials of Interaction Design. Alan Cooper,Robert Reimann & David Cronin.

Microsoft Developer Network,Sliders

http://msdn.microsoft.com/en-us/library/bb246422(VS.85).aspx

设计心理学. 唐·诺曼.

相关话题：滑块(拖动条) 源地址：http://piglili.blogbus.com/logs/32525520.html

滑块(拖动条) - UCD大社区

滑块的应用