切换开关 设计指南
简介：切换开关提示用户在两个互斥选项之间进行选择，并且总是有一个默认值。开关应该提供即时的结果，用户可以根据需要自由的切换。
每天早上，我醒来，把水倒进我的茶壶，然后打开开关。水一开，我就把水壶关掉，给自己倒一杯。我水壶上的开关就是一个例子。如果你仔细观察，你会注意到它围绕在我们周围，因为很多东西都有两个简单的状态：它们要么已经打开，要么已经关闭。从电灯开关，到打开移动热点，再到我们APP的设置页面，我们每天都与切换器进行交互。
切换开关最适合用于更改系统功能和首选项的状态。它可以替换两个单选按钮或一个复选框，允许用户在两个相反的状态之间进行选择。有时候，决定使用哪个组件(单选按钮、复选框或切换开关)可能很困难。当您想知道哪个组件适合时，请考虑选项的数量和类型，以及是否有任何明确的默认值。下表总结了有关这些常用组件的问题和答案。
当设计人员为特定场景使用适当的组件时，它可以帮助用户预测组件将做什么以及如何控制它。为了避免用户的挫折感，请在切换开关设计上遵循以下指南。
及时反馈结果
切换开关应该立即生效，不应该要求用户单击保存或提交。如果直接的结果无法实现或看起来不太合适，那么应该使用替代方法(例如单选按钮或一个复选框——参考上表)。如果您想在表单列表中包含切换开关，并且用户需要单击“ 提交”按钮以使其更改生效，请不要这样做。这种情况会使用户感到困惑，因为他们无法确定他们的切换选择是否会立即生效。我们要不惜一切代价避免混淆。单独的控件可以从需要单击命令按钮的控件生成即时结果。
don’t
在美国联合航空公司的iOS应用程序中，除了视觉更改之外，当用户点击切换开关时没有任何反应。用户如何知道切换是否有效？没有提供结果。在这种情况下，单个复选框将是最佳选择。
do
当为iOS启用飞行模式时，Apple会通过将左上角的细胞条更改为飞机图标来立即提供结果
提供简洁明确的标签
保持开关的标签短而直接。考虑到交互原则，即“菜单和按钮标签应首先具有关键字，形成唯一标签。”例如，当设计一个用户可以更新通知的设置页面时:一定要说电子邮件通知或短信通知，不要说你想要收到我们的电子邮件通知吗?我们要知道用户只阅读他们认为他们需要的内容，所以在标签前加上关键字，去掉多余的话术。
切换标签应该描述当开关打开时控件会做什么，它们不应该是模棱两可的。
don’t
do
遵循标准进行设计
确保切换开关看起来像滑块，并利用视觉提示(如运动和颜色)以避免混淆。当用户改变切换状态时，开关应该改变位置——就像在现实中那样。
颜色是开关重要的视觉提示，有两件事需要注意：对比和文化差异。当设计师使用低对比度的颜色时，用户很难知道开关是什么状态。因此，始终使用高对比度的颜色来表示状态变化。此外，一定要评估对你的受众的社会和文化影响。
此外，状态描述符(开关旁边的单词On和Off)可以提供系统状态的清晰可见性。
这个切换是打开还是关闭？在Windows 10中，状态描述符（单词Off）用于标识切换（关闭）的当前状态。不幸的是，这个描述符是不明确的：因为单词Off出现在开关的右边，切换点在左边，用户也可以将切换的状态解释为on（即远离标签Off）。
在添加状态描述时，请坚持on/off以迎合现实，并分别在切换的左边和右边包含off和on，以避免混淆。如果开关旁边只有一个描述，则可以将其作为切换标签。
Daylio Android应用程序使用对比色（紫色）和没有状态描述符来清楚地指示切换的状态（在左侧屏幕截图中和在右侧屏幕截图中关闭）。
设计要一致
遵循平台规范，确保在应用中一致地设计切换开关。不一致性会迫使用户放慢速度，并花更多时间考虑如何与组件交互。不要让用户去思考不同的设计功能是否相同。
don’t
Chase Bank iOS应用程序使用切换和单选按钮不一致。在元素类型和内容量之外，这三个页面几乎相同。当我与这些页面进行交互时，我希望它们以相同的方式运行。相反，我花时间想知道为什么我的营销偏好没有生效。
总结
切换开关帮助用户更新设置信息。当使用切换开关时，提供直接的标签，使用标准的设计，并给出即时的结果。请记住，切换开关只能在用户需要在两个相反的状态之间进行选择时使用。
nngroup
译文地址：UI中国
作者：Alita Joyce
译者：我的鞋带