「这个控件叫什么」系列之步进器+Switch

@龙爪槐守望者 ：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。

往期回顾：

1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
2. 《「这个控件叫什么」系列之加载占位图+页面指示器》

这个控件叫：Stepper/步进器

Stepper（步进器）由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击增加按钮（或减少按钮）数字增长（或减少）的数量是恒定的。

△ Stepper

如何使用

适用于数值精确的小范围调整

在移动端，iOS普遍用Picker（拾取器/波轮选择器）解决多选一的问题，Android则是用Dropdown menu（下拉菜单）或者Dialog（对话框）。但对于数值型数据（商品数量、投资比率、人数等等）的精确小范围调整，Stepper优于其他控件。国外有用户测试结果显示：相比Dropdown menu，用户更喜欢在机票预订App里用Stepper选择乘客人数，因为Stepper更直观用起来更快更简单。（http://lukew_img.s3.amazonaws.com/LukeW_FlightBooking.pdf）

注意默认值和上限与下限

如果Stepper默认值离用户目标的数值越远，需要的点击次数越多。选择一个合理的默认值能帮助用户减少点击次数提升操作效率。此外，要注意考虑数值的上限与下限，在到达限制后禁用相关按钮。

△ 下限与上限

数字快捷修改

如果对数值有大幅度调整的需求，可将数字改造成输入框，通过键盘快捷大幅度精确修改。

△ 淘宝截图

相关资料

Sliding Stepper（滑动式步进器）

在PC端Stepper的点击区域非常小不易操作，而且Stepper每次点击后数字变化太小，如果要调整数值远不如直接改输入框来得方便。国外有案例将Stepper和Slider（滑块/滚动条）相结合为Sliding Stepper，加和减被合并为一个按钮，点击按钮后出现垂直滚动条，通过操作垂直滚动条，调整数值会更快幅度更大，且可以观察数值对应的事物产生连续变化，非常适合图形设计软件。

详情可阅读：http://uxmovement.com/forms/sliding-stepper-an-end-to-the-painful-clicking/

△ Sliding Stepper

争议

Google在Material Design里把Stepper 定义为步骤指示器。（详细请阅读：https://material.io/guidelines/components/steppers.html ）

△ Material design中的Stepper

考虑到除Material Design以外的设计规范都将Stepper 定义为步进器，因此我觉得Material Design的称呼方法不是主流，建议大家用Step Indicator来称呼步骤指示器。

Switch/开关/滑动开关/切换开关

Switch（开关/滑动开关/切换开关）有两个互斥的选项（例如开/关、是/否、启动/禁用），它是用来打开或关闭选项的控件。选择其中一个选项会导致立即执行操作。

△ Switch

如何使用

准确的Label（标签）

由于Switch控件本身就能表现当前的开/关状态，因此相关文案只需表示所控制内容，千万不要在Lable中加入一些逻辑词语。典型的反面教材就是Android 7.0的通知设置，双重否定表示肯定，大多数人都把左图的状态当做当前App的通知是关闭的，实际上右图才是关闭通知后的状态。

△ Android 7.0 通知设置

清晰的开关状态

Switch可以根据App视觉风格进行样式修改，但一定要清晰的表示开关状态，下图的钉钉PC版，由于加了显眼的颜色，很难第一眼分辨出这表示关的状态。

△ 钉钉PC版

立即执行操作

Switch与RadioButton（单选按钮）、CheckBox（复选框）最大的区别是：Switch操作后，程序立即执行相关操作。而RadioButton和CheckBox一般用在表单里，仅反映当前的选择状态，如果要执行操作并生效，需要点击额外的提交按钮。

△ Switch与RadioButton、CheckBox

危险操作二次确认

正是由于按下Switch后立即执行操作，如果操作比较危险，请在点击开关后加入二次确认流程，避免造成严重损失。

△ iCloud

注意加载状态

如果Switch所执行的操作需要与服务器交互，就必须考虑加载状态了，例如刚进入页面时，获取Switch的状态需要加载。如果改变Switch的状态，需要与服务器交互，必须等待服务器返回成功指令后才能改变Switch的状态，传统的做法是为初次加载和操作后等待准备特定的样式。

△ 加载等待

另外一种目前比较流行的策略是使用Optimistic UI（乐观派UI，请参考http://colachan.com/post/3531 ），用户操作Switch之后，Switch视觉上立即响应改变，然后再向服务器交互。微信朋友圈的点赞就是用的这个策略。Optimistic UI带给用户更流畅的体验，当然，采取这一策略最好保证服务器在97%到99%以上的状况下返回成功指令。

△ Optimistic UI

相关资料

Google Inbox的Pin样式

Google Inbox右上角的Pinned样式上很像Switch，实际上这是一个筛选工具，图钉竖直表示只显示Pin过的邮件。这给了我们启发，可以在Switch的按钮上增加视觉效果，表现Switch当前状态所代表的含义。

△ Google Inbox Pin

QQ音乐Android版的流畅度设置

QQ音乐Android版的设置项中有流畅度设置，关闭相关效果可提升流畅度和减少耗电。通常来说Switch打开有启用的含义，带有一点正面的褒义效果。QQ音乐却反过来了，Switch关闭有褒义的鼓励含义——关闭更流畅。

△ QQ音乐Android版，流畅度设置

本节先更新2个小科普，后面优设会持续更新，想提前学习的可以关注作者的微信公众号：

「新人科普好文系列」

1. 交互原型丨《术语小科普！聊聊线框稿、视觉稿与原型的区别》
2. 移动端尺寸丨《通俗易懂！超全面的移动端尺寸基础知识科普指南》
3. 字体规范丨《界面设计必备！全方位科普常用的字体规范（附神器）》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量190万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com