UX用户体验设计 ·

app切换开关的交互设计指南

简介:切换开关提示用户在两个互斥选项之间进行选择,并且总是有一个默认值。开关应该提供即时的结果,用户可以根据需要自由的切换。

每天早上,我醒来,把水倒进我的茶壶,然后打开开关。水一开,我就把水壶关掉,给自己倒一杯。我水壶上的开关就是一个例子。如果你仔细观察,你会注意到它围绕在我们周围,因为很多东西都有两个简单的状态:它们要么已经打开,要么已经关闭。从电灯开关,到打开移动热点,再到我们APP的设置页面,我们每天都与切换器进行交互。

切换开关最适合用于更改系统功能和首选项的状态。它可以替换两个单选按钮或一个复选框,允许用户在两个相反的状态之间进行选择。有时候,决定使用哪个组件(单选按钮、复选框或切换开关)可能很困难。当您想知道哪个组件适合时,请考虑选项的数量和类型,以及是否有任何明确的默认值。下表总结了有关这些常用组件的问题和答案。

当设计人员为特定场景使用适当的组件时,它可以帮助用户预测组件将做什么以及如何控制它。为了避免用户的挫折感,请在切换开关设计上遵循以下指南。

1. 及时反馈结果

切换开关应该立即生效,不应该要求用户单击保存或提交。如果直接的结果无法实现或看起来不太合适,那么应该使用替代方法(例如单选按钮或一个复选框——参考上表)。如果您想在表单列表中包含切换开关,并且用户需要单击“ 提交”按钮以使其更改生效,请不要这样做。这种情况会使用户感到困惑,因为他们无法确定他们的切换选择是否会立即生效。我们要不惜一切代价避免混淆。单独的控件可以从需要单击命令按钮的控件生成即时结果。

❌错误案例:

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

 

✔️正确案例:

当为iOS启用飞行模式时,Apple会通过将左上角的细胞条更改为飞机图标来立即提供结果

 

2. 提供简洁明确的标签

保持开关的标签短而直接。考虑到交互原则,即“菜单和按钮标签应首先具有关键字,形成唯一标签。”例如,当设计一个用户可以更新通知的设置页面时:一定要说电子邮件通知或短信通知,不要说你想要收到我们的电子邮件通知吗?我们要知道用户只阅读他们认为他们需要的内容,所以在标签前加上关键字,去掉多余的话术。

切换标签应该描述当开关打开时控件会做什么,它们不应该是模棱两可的。

❌错误案例:

✔️正确案例:

3. 遵循标准进行设计

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

颜色是开关重要的视觉提示,有两件事需要注意:对比和文化差异。当设计师使用低对比度的颜色时,用户很难知道开关是什么状态。因此,始终使用高对比度的颜色来表示状态变化。此外,一定要评估对你的受众的社会和文化影响。

此外,状态描述符(开关旁边的单词On和Off)可以提供系统状态的清晰可见性。

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

 

在添加状态描述时,请坚持on/off以迎合现实,并分别在切换的左边和右边包含off和on,以避免混淆。如果开关旁边只有一个描述,则可以将其作为切换标签。

✔️正确案例:

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

4. 设计要一致

遵循平台规范,确保在应用中一致地设计切换开关。不一致性会迫使用户放慢速度,并花更多时间考虑如何与组件交互。不要让用户去思考不同的设计功能是否相同。

❌错误案例:

Chase Bank iOS应用程序使用切换和单选按钮不一致。在元素类型和内容量之外,这三个页面几乎相同。当我与这些页面进行交互时,我希望它们以相同的方式运行。相反,我花时间想知道为什么我的营销偏好没有生效。

5. 总结

切换开关帮助用户更新设置信息。当使用切换开关时,提供直接的标签,使用标准的设计,并给出即时的结果。请记住,切换开关只能在用户需要在两个相反的状态之间进行选择时使用。

 

原文地址:https://www.nngroup.com/articles/toggle-switch-guidelines/

参与评论