每天早上,我醒来,往茶壶里倒水,然后打开开关。水一烧开,我就把水壶关掉,给自己倒一杯水。我水壶上的开关就是一个开关的例子。如果你仔细观察,你会发现我们身边到处都是切换开关,因为很多东西都有两种简单的状态:要么开着,要么关着(但不是“开一点点”)。从电灯开关,到移动热点的打开,再到我们最喜欢的移动应用程序的偏好页面,我们每天都在与这些开关互动。

定义:拨动开关是数字开/关开关。

切换开关最适合用于更改系统功能和首选项的状态。切换可以代替两个单选按钮或一个复选框,允许用户在两个相反的状态中进行选择。

有时决定使用哪个用户界面元素单选按钮、复选框,或切换——可能会很困难。当您想知道哪个选项适合您的用例时,请考虑选项的数量和类型,以及是否有任何明确的默认值。下表总结了关于这些常用UI元素的问题和答案。

单选按钮 复选框 单一的复选框 切换开关

有多少种选择?

多个

多个

1

1

用户可以做出多少选择?

1

0 -所有

2(开/关)

2(开/关)

有默认选项吗?

是的

没有

是的

是的

你会如何描述这些选择?

互相排斥的

彼此独立的

互相排斥的

互相排斥的

选择什么时候生效?

用户单击提交按钮后

用户单击提交按钮后

用户单击提交按钮后

立即

当设计师为特定场景使用适当的UI元素时,它可以帮助用户预测UI元素将做什么以及如何控制它。为了避免用户感到沮丧并确保理解,请遵循以下切换开关的指导方针。

提供直接的结果

拨动开关应采取立即效果并且不应要求用户单击Save或Submit来应用新状态。一如既往,我们应该努力让系统与现实世界相匹配.以我的茶壶为例:我不应该关掉开关,拔掉电源线来体验状态的变化。因此,用户期望从数字切换中获得与现实世界中相同的即时结果(例如,电灯开关)。即时结果是切换开关的一个方面,它允许用户根据需要自由和控制更新他们的首选项。

如果不能立即得到结果或者看起来不合适,那么应该使用另一种选择(如单选按钮或单个复选框——见上图)。如果您正在考虑在长表单中包括其他类型的表单字段,用户将需要单击提交按钮以使其他更改生效,请不要。这种情况会让用户感到困惑,因为他们不能确定他们的切换选择是否会立即生效。不惜一切代价避免混乱。将产生即时结果的控件与需要单击命令按钮的控件分开。

别:

美国联合航空公司iOS应用程序的切换开关截图
在美国联合航空公司(United Airlines)的iOS应用程序中,当用户点击切换开关时,除了视觉变化之外,没有任何变化。用户如何知道切换是否有效?没有提供结果。在这种情况下,单个复选框将是最好的选择。

做的事:


当在iOS上打开飞机模式时,苹果通过将左上角的手机条更改为飞机图标来提供即时结果。

提供简洁、非中性的标签

保持切换开关的标签简短和直接.考虑之一Tog交互设计原则“菜单和按钮标签应该首先有关键字,形成独特的标签。”例如,当设计一个用户可以更新通知首选项的设置页面时:一定要说邮件通知文本通知,别说了您想收到我们的电子邮件通知吗?我们知道用户只阅读相同的内容因为他们认为他们需要,所以用关键字Frontload标签删除多余的短语。避免问问题,并为之写作scannability

切换标签应该描述开关打开时控件将做什么;它们不应该是中立的或模棱两可的。有疑问时,大声说出标签,并在末尾加上“on/off”。如果不合理,就重写标签。

别:

标签包括非孕妇用品?因为Le Tote上的这个切换开关是中性的,让用户怀疑他们是包含还是排除产品。

做的事:

相比之下,谷歌日历应用程序中使用的切换标签是直接和明确的;它们描述了当开关打开时系统的状态,并与“开/关”附件有意义。

遵循标准视觉设计

确保切换开关看起来像滑块和利用视觉线索(例如动作和颜色)以避免混淆。首先,当用户改变开关的状态时,开关应该改变位置——就像在现实世界中那样。

颜色是切换的重要视觉符号,有两件事要记住:对比和文化差异。当设计师使用低对比度的颜色时,用户就很难知道切换是否正确.因此,总是使用高对比度的颜色来表示状态的改变。此外,一定要评估你的听众的社会和文化影响。例如,红色代表位置与停车标志或停车灯的联系是违反直觉的。

此外,状态描述符——单词旁边的切换-可以提供清晰系统状态的可见性

这个开关是开的还是关的?在Windows 10中,状态描述符(Off)用于标识切换(Off)的当前状态。不幸的是,这个描述符是不明确的:因为单词Off出现在开关的右边,而切换点在左边,用户也可以将切换的状态解释为on(即远离标签Off)。

当添加状态描述符时,坚持/以匹配现实世界的约定,并包括两者为避免混淆,分别设置到切换开关的左侧和右侧。如果一个切换标签旁边只有一个描述符,则可以将其作为一个切换标签。

如果您不确定如何平衡颜色和状态描述符,请评估和测试以确定哪种组合最适合您的用户。

做的事:

Daylio Android应用程序使用对比色(紫色),没有状态描述符来明确表示切换状态(左图为关闭,右图为打开)。

实现一致

遵循平台的约定确保切换开关已执行始终如一地在您的应用程序。不一致性迫使用户放慢速度,花更多时间思考如何与组件交互。不要让用户怀疑带有两个单选按钮的问题或语句的功能是否与拨动开关相同。

别:

大通银行的iOS应用程序对切换和单选按钮的使用并不一致。除了元素类型和内容数量外,这三个页面几乎是相同的。当我与这些页面交互时,我希望它们以同样的方式运行。相反,我花时间思考为什么我的营销偏好没有起到作用。

结论

切换帮助用户更新首选项、设置和其他类型的信息。当使用切换时,提供直接的标签,使用标准的视觉设计,并提供即时的结果。请记住,只有当用户需要在两个相反的状态之间做出决定时,才应该使用切换开关。当你在你的网站或应用程序上检查开关的使用时,评估上下文并确保它们被一致地实现。请记住,这个简单的用户界面组件可以对用户体验产生很大的影响。