菜单 关闭

切换开关准则

通过 艾莉塔乔伊斯7月29日,二千零一十八

总结:拨动开关是数字开/关开关。它们提示用户在两个互斥选项之间进行选择,并且始终具有默认值。切换应提供即时结果,允许用户根据需要自由控制自己的偏好。


每天早晨,我醒来,把水倒进我的茶壶里,打开开关。一旦水沸腾了,我关上水壶,给自己倒了一杯。我水壶上的开关就是一个拨动开关的例子。如果你密切关注,你会发现我们周围都有拨动开关,因为很多事情都有两个简单的状态:它们要么是开着的,或者它们是关闭的(但不是“稍微打开一点”)。从灯光开关,要打开移动热点,到我们最喜爱的移动应用程序的首选项页面,我们每天都用套环互动。

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

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

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

单选按钮 复选框 单一复选框 钮子开关

有多少选项可用?

倍数

倍数

用户可以做出多少选择?

0 -所有

2(开/关)

2(开/关)

是否有默认选项?

是的

是的

是的

你如何描述这些选择?

互相排斥

彼此独立

互相排斥

互相排斥

选择什么时候生效?

用户单击提交按钮后

用户单击提交按钮后

用户单击提交按钮后

立即

当设计人员manbetx官方网站手机版为特定场景使用适当的UI元素时,它帮助用户预测UI元素将做什么以及如何控制它。为了避免用户受挫并确保理解,请遵循有关切换开关的指南。

立即交付结果

拨动开关应立即的影响并且不应要求用户单击保存或提交以应用新状态。一如既往,我们应该努力使系统与现实世界相匹配.考虑一下我的茶壶:我不应该为了体验状态的变化而把开关打开,拔下电源线。因此,用户希望通过数字切换获得与现实世界中相同的即时结果(例如,灯光开关)。立即的结果是切换开关的一个方面,它允许用户根据需要自由和控制更新他们的首选项。

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

不要:

来自联合航空iOS应用程序的带有切换开关的屏幕截图
在联合航空iOS应用程序中,除了视觉上的变化,当用户点击切换开关时,不会发生任何事情。用户如何知道切换是否有效?未提供结果。在这种情况下,一个复选框是最好的选择。

做:


打开iOS的飞行模式时,苹果公司通过将左上角的蜂窝条更改为飞机图标来提供即时结果。

提供简洁的,非中性标签

短而直接地保留切换开关的标签.考虑其中之一TOG交互设计原则manbetx官方网站手机版这种状态,“菜单和按钮标签应首先显示关键字,形成独特的标签。”例如,当设计一个manbetx官方网站手机版用户可以更新通知首选项的设置页面时:说电子邮件通知文本 通知,不要说您想接收我们的电子邮件通知吗?我们知道用户只读他们认为他们需要,所以正面用关键词加载标签删除多余的词组。避免提问和写信扫描性.

切换标签应描述当开关打开时控件将执行的操作;它们不应该是中立的或模棱两可的。当有疑问时,大声说出标签并在末尾附加“开/关”。如果不合理,然后重写标签。

不要:

标签上有非孕妇用品吗?因为LeTote上的切换开关是中性的,用户会再次猜测他们是否包括或排除了产品。

做:

比较而言,谷歌日历应用程序中使用的切换开关标签是直接且明确的;它们描述了开关打开时系统的状态,并用“开/关”附件说明其意义。

遵循标准视觉设计manbetx官方网站手机版

确保切换开关看起来像滑块和利用视觉提示(即运动和颜色)以避免混淆。首先,当用户更改切换状态时,开关应该改变位置-就像在现实世界中那样。

颜色是切换的一个重要视觉符号,有两件事要记住:对比和文化差异。当设计师使manbetx官方网站手机版用低对比度颜色时,用户很难知道切换是否远离的.因此,总是使用高对比度颜色信号状态改变。此外,一定要评估对观众的社会和文化影响。例如,红色代表对于那些将其与停车标志或停车灯关联的人来说,位置是违反直觉的。

此外,状态描述符-单词下车开关旁边-可以提供清晰系统状态的可见性.

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

添加状态描述符时,坚持/远离的与现实世界的惯例相匹配,包括远离的左右两侧,分别以避免混淆。如果切换旁边只有一个描述符,它可以作为切换标签。

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

做:

Daylio Android应用程序使用对比色(紫色)和无状态描述符来清楚地指示切换的状态(左屏幕截图中为关,右屏幕截图中为开)。

始终如一地执行

跟随平台约定确保实现切换开关一贯地整个应用程序。不一致性迫使用户放慢速度,并花费更多时间思考如何与组件交互。不要让用户怀疑带有两个单选按钮的问题或语句是否与切换开关的功能相同。

不要:

大通银行iOS应用程序使用的开关和单选按钮不一致。在元素类型和内容量之外,这三页几乎是相同的。当我与这些页面交互时,我希望它们的功能是一样的。相反,我花了很多时间想知道为什么我的营销偏好没有生效。

结论

切换帮助用户更新首选项,设置,以及其他类型的信息。使用切换开关时,提供直接标签,采用标准视觉设计,manbetx官方网站手机版并立即取得成果。请记住,只有当用户需要在两个相反的状态之间做出决定时,才应该使用切换开关。当您查看网站或应用程序上切换的使用时,评估环境并确保一致地实施。记得,这个简单的用户界面组件可以对用户体验产生很大的影响。