今天的主角是“滑动器”，这个名字可能有点生涩，它的英文名或许会更熟悉点——“slider”。滑动器这个控件应用的机会不多，主要适用于滑动设置数值的情况。下面来详细介绍。

Material Design Guidelines

在MD（Material Design）中，滑动器分成了两种：连续性滑动器和分离式滑动器，从名字也能看出它们的区别了：前者是数值是连续的情况；后者是分离的，也就是滑一下，只能选择特定的数值。

连续式滑动器

左：图标在左边的情况；右：图标在左右都有的情况

如上图所示，连续式滑动器可以有两种布局：图标在左 & 图标在左在右都有。当按住滑动器的按钮的时候，按钮的状态会发生变化以表示“按住”的状态，如上图右边第三个（focus）所示。

另外，MD中有一种比较特殊的滑动器：滑动器的最右端展示数值，并且数值可以更改，如下图所示：

滑动按钮的时候，数值跟着改变；点击数值可以进行修改。该种滑动器适用于需要设置具体数字的场景。

分离式滑动器

分离式滑动器示例

分离式滑动器，是在滑动器的滑杆上预设了固定的数值，用户左右滑动的时候，只可以选择这些预设的数值。上图第一行展示的是默认状态，第二行展示的是按住按钮时的状态，此时在滑动器上方展示了具体的数值。需要注意的是，当用户从一个数值变到了另一个数值，页面需要展现出可以察觉的变化（要不就白调了，摊手）。

iOS Human Interface Guidelines

iOS规范中定义说：滑动器只有水平的。通常包含一个滑动按钮，用于滑动进度；最左和最右是用于表示最小值和最大值。

滑动器示例

苹果建议，可以更改滑动器的外观，来提升界面的美感：进度条的颜色，滑动按钮的外观，左右图标这些都可以进行更改。

另外，笔者也有一个建议：滑动器在音乐、视频等有播放功能的APP使用比较多，在这类应用中，往往可以加入一些实用功能或情感化元素，丰富用户的体验。比如Youtube，在滑动的时候，会用小框展示滑动当前帧的画面，方便用户预览：

在Youtube中拖动滑动器的按钮，展示画面预览（这个广告是youtube日本站上的iPhone 7 Plus广告，展现的是一对日本情侣在上海旅游时，用iPhone拍照的情景。不得不说在日本站上看到这个广告，还是有些自豪的，嘻嘻）

以上介绍了iOS和MD中对于滑动器的介绍。讨论使我们认识更加深刻，欢迎留言讨论。

德国海龟一枚 ，曾任职于腾讯微生活、网易、宜信等公司。现为爱奇艺UDC高级交互设计师。欢迎关注。