UI组件-滑块用户超爱的选择小助手

2020-05-14

1434

在设计界面交互时，为了让用户主动提供信息，有很多种方式供其录入或选择。比如，用文本框打字输入、从复选框中勾选、从下拉菜单里选择，等等。今天的主角–滑块组件也是选择工具的一种。

什么是滑块

滑块（Slider）是让用户通过滑动，在一定范围内选择数值，或数值范围的组件。

图源：追波Cuberto

滑块是触发类组件，也就是说，每滑到一个位置，会立刻响应，这个属性很方便调试和即时预览效果。滑块还有个特点是只能在一定范围内选择。在这两种条件都满足时，就可以使用滑块，它比选择控件和文本框等组件都来得快捷方便。

滑块经常出现在调音量、播放条控制进度的场景中：

腾讯视频

类型

滑块分为两种：连续滑块 (Continuous slider) 和间续滑块 (Discrete slider) 。

连续滑块

用户在一定范围区间内可自由选择数值。适合场景：不要求精准，遵照用户的主观感受，比如调音量：

iOS 13音量滑条

间续滑块

用户在一定范围内只能选择特定值，滑动小滑块时，它会自动咬合到最接近的特定位置。适合场景：要求精准，以设定值为主，比如字号设置，字号只能是离散的整数：

iOS 13字号设置

原型

滑块的形状有线性和圆形之分，它们的物理原型分别是调音器推杆和旋钮开关：

线性滑块和圆形滑块的原型

一个滑块

剖析一下滑块的组成元素：

轨道*
小滑块*
选中值标签
刻度
文本框
滑块标签

标*为必需

轨道（track）：可以是线性或圆形，线性轨道是UI中用得更多的，它可以垂直或水平分布。圆形轨道多用在和圆圈形象相关的场景，比如时钟区间，旋转角度等。

线性轨道和圆形轨道

图源：追波Shunsuke Kawai/Renat Muratshin

在从左至右阅读的语言中，水平轨道其数值是左边最小，右边最大。

小滑块（thumb）：有些地方把thumb这个元素也翻译作“滑块”，但由于整个组件叫滑块，为了不混淆我把thumb叫做小滑块。小滑块绝大多数时候是一个圆，偶尔也会是方形或指针形状。

macOS指针形状的小滑块

小滑块可能会有两个，这样的滑块叫区间滑块（Range slider），它是用来选择一个范围的。

tip：

区间滑块的两个小滑块如果是同色的纯色块，那么它们两太接近的时候，要加上描边效果，以免两者融化在一起难以辨认：

选中值标签（value label ）：这是告知用户当前选中的数值，它既可以悬浮于小滑块上方，也可以出现在轨道边上一个固定的地方–如上面的macOS节能面板。设计移动端时，要注意手指的遮挡，这时标签不能离小滑块太近了。选中值标签可以只在滑动时出现，也可以常显。

刻度（tick mark）：沿着轨道分布的若干刻度，可以帮助用户在滑动时更准确地感知选项值。它可以用在连续和间续滑块中。刻度不一定是均匀分布的，这和参数值本身是否呈线性有关。如果参数值呈线性，通常只需要标最小值和最大值就足够了，但如果非线性，如下图的macOS的关屏时间设置，不仅需要有刻度，还需加上对刻度值的描述，否则会有歧义：

时间刻度不是线性分布，需要文字描述其刻度

最小值和最大值的描述文本可以用更形象的图标来替代，比如用一大一小的图标表示字号大小：

文本框：可以辅助滑块做精准输入，对那些明确自己要录入哪一个数值，不乐意通过滑块来逐渐接近目标值的用户有帮助。同时，文本框还可以自带一个步进器(stepper)。文本框和滑块要做到互相实时同步。

带有步进器的文本框（蚂蚁金服）

滑块标签：和选中值标签不同，这是介绍整个滑块的，一般带个冒号结尾。

tips：

线性滑块的轨道在最小值和小滑块之间的部分需要填充一个焦点色，区间滑块的两个小滑块之间同理。当小滑块的形状是一个指针，且有刻度标记时，可以不填充颜色，如上图macOS节能面板；
选用最符合直觉的滑块形状，举个??，物体平移用线性更好，旋转用圆形更佳；
小滑块可以给出厂默认位置做个标记，让用户知道原来位置在哪。这个细节虽小却能避免用户因滑离了原来位置而不安，提升体验。