菜单 关闭

拨动开关的指导方针

通过 Alita乔伊斯2018年7月29日

简介:数字开关切换开关他们提示用户选择两个互斥的选项和之间总是有一个默认值切换应该提供即时的效果,让用户根据需要自由控制自己的偏好。


每天早上,我醒来,把水倒进茶壶,打开开关水开后,我关掉水壶,倒一杯我水壶上的开关切换的一个例子如果你密切关注,你会注意到切换开关在我们周围,因为很多事情有两个简单的国家:他们,或者他们了(但不是“一点”)从电灯开关,打开移动热点,在我们最喜欢的手机应用程序首选项页面,我们每天与切换。

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

切换开关是最好的用于改变系统状态的功能和偏好切换可能取代两个单选按钮或一个复选框允许用户选择两种对立状态。

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

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

有多少可供选择?

多个

多个

1

1

选择用户可以多少?

1

0 -所有

2(开/关)

2(开/关)

有一个默认的选项吗?

是的

没有

是的

是的

你会如何描述选择?

互相排斥的

相互独立的

互相排斥的

互相排斥的

选择什么时候生效?

用户点击提交按钮

用户点击提交按钮

用户点击提交按钮

立即

当manbetx官方网站手机版人使用适当的UI元素为一个特定的场景中,它帮助用户预测UI元素将做什么和如何控制它为了避免用户沮丧和确保理解,遵循这些指导方针在切换开关。

提供直接的结果

切换开关应立即效果也不应该要求用户点击保存或提交应用新的状态像往常一样,我们应该努力匹配系统真实的世界考虑我的茶壶:我不应该翻转开关,拔掉线体验的变化状态因此,用户期望相同的直接结果数字切换就像从现实世界同行(例如,电灯开关)切换开关的直接结果是一个方面,授予用户的自由和控制根据需要更新他们的偏好。

如果直接结果似乎不可行或不合适的,另一种(例如单选按钮或一个复选框(见图)应该使用如果你正在考虑在长形式包括切换其他类型的表单字段,和用户需要点击提交按钮为其他更改生效,不喜欢这个场景使用户感到困惑,因为他们不能确定他们的切换选择是否会立即生效不惜一切代价避免混淆独立的控制,产生即时的结果从那些需要单击命令按钮。

别:

截屏的切换开关联合航空iOS应用程序
美国联合航空公司的iOS应用程序,除了视觉变化,当用户点击切换开关什么也没有发生How does the user know if the toggle worked or not? No results were provided在这种情况下,一个单一的复选框将是最好的选择。

做的事:


当把飞机模式iOS,苹果提供即时结果通过改变细胞酒吧飞机图标的左上角。

提供简洁、Nonneutral标签

保持标签切换开关短和直接考虑之一Tog’s Principles of Interaction manbetx官方网站手机版that states, “Menu and button labels should have the key word(s) first, forming unique labels.” For example, when manbetx官方网站手机版ing a settings page where a user can update notification preferences: do say邮件通知文本 通知,不要说你想从我们接收电子邮件通知?我们知道用户只读因为他们认为他们需要承载你的标签和关键词和删除多余的短语避免提问和写scannability

The toggle labels should describe what the control will do when the switch is on; they should not be neutral or ambiguous有疑问时,大声地说标签附加“开/关”如果它没有意义,那么改写标签。

别:

The label Include non-maternity items? for this toggle switch on Le Tote is neutral and makes the users second-guess whether they’re including or excluding products.

做的事:

Comparatively, the toggle-switch labels used in the Google Calendar app are direct and unambiguous; they describe the state of the system when the switch is on and make sense with the ‘on/off’ appendage.

Follow Standard Visual manbetx官方网站手机版

确保切换开关滑块和样子利用视觉线索(即运动和颜色),以避免混乱首先,当一个用户更改的状态切换,开关应改变立场,就像在现实世界一样。

颜色是一个重要的视觉象征切换,有两件事要记住:对比和文化差异当manbetx官方网站手机版人使用低对比度的颜色,它让用户很难知道是否切换因此,总是使用一个高对比度的颜色信号状态变化此外,一定要评估对受众的社会和文化的影响例如,红色的position is counterintuitive to those that associate it with stop signs or stop lights.

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

Is this toggle on or off? In Windows 10, a state descriptor (the word Off) is used to identify the current state of the toggle (off)不幸的是,这种描述符是模棱两可的:因为这个词出现在右边的开关,切换点在左边,用户还可以解释的状态切换上(即远离标签)。

当添加状态描述符,坚持/与现实世界的约定和包括左边和右边分别的切换,以避免混乱如果只有一个描述符存在切换旁,它可以切换标签。

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

做的事:

Daylio Android应用程序使用对比色(紫色)和状态描述符明确表示的状态切换(在左边的屏幕截图和在正确的)。

实现一致

遵循平台的约定确保实现切换开关始终如一地在您的应用程序矛盾迫使用户放慢脚步,花更多的时间思考如何与组件交互不要让用户想知道一个问题或语句有两个单选按钮功能一样一个拨动开关。

别:

美国大通银行iOS应用程序使用切换和单选按钮不一致以外的元素类型和数量的内容,这三个页面是几乎相同的当我与这些页面,我期望他们函数相同的方式相反,我花时间想知道为什么我的营销偏好没有生效。

结论

切换帮助用户更新参数,设置,和其他类型的信息使用切换时,提供直接的标签,使用标准的视觉manbetx官方网站手机版,并提供即时结果记住,切换开关时才应该使用用户需要决定两种对立状态之间当你审查使用切换网站或应用程序,评估环境和确保他们的实现都保持一致记住,这个简单的用户界面组件可以对用户体验产生很大的影响。