[转]滑块的应用

nll

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

本文出自：http://piglili.blogbus.com/logs/32525520.html

G36393GG

总是在滑竿上滑动

penxyz

图片怎么看不到呢？

wkang1478

不错 很详细！！学习了！！

zhangdi

谢谢分享！！！

lenpert

不错。就是看不图阿。

langfengyiyi

没图

zhanchangjian

是啊,图呢???

qzf_2003

感觉没什么用。

shinpaul

图在哪里  大哥