开关(Switches)是设定选项状态的控件,多用于软件设置中,其控件形态是一个滑块沿着轨道运行,轨道的两端分别代表开启和关闭两种工作状态。

开关(Switches) - 图2

在移动端,Android 和 iOS 系统中,开关的视觉样式并无特别明显的区别

开关(Switches) - 图3

应用范例

开关的工作原理较为简单,他只关注单一选项的两种状态,即开启关闭,但是在实际应用中,有些概念不清的设计人员,经常发生控件错用的情况,下面我们举例说明一下

1. 单选按钮错用

如下面这个案例,单选按钮是在众多选项中选择唯一的选项,而开关表意对单一选项的两种状态进行设定,显然下面的四个选项之间不存在唯一选择的问题,而每个选项有两种状态,需要分别设定

开关(Switches) - 图4

2. 开关错用

如下图案例,如果为消息设置,选择多个选项,应该使用复选框,而不是开关,另外,复选框可以占据较少的视觉空间。

开关(Switches) - 图5

3. 重复赘述

开关控件本身就具备明确的”开 “” 关“状态属性,一定避免避免在图形之外引入 “ on” 和“ off”等多余注释

开关(Switches) - 图6

交互状态

开关控件的交互状态,总结如下

开关(Switches) - 图7