UE设计中拨动开关准则

UE视界网    ()  ()

2019-12-02 00:08:25

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

  

每天早晨,我醒来,将水倒入茶壶中,然后打开开关。水烧开后,我关掉水壶,倒入杯子。我水壶上的开关是一个拨动开关的例子。如果您密切注意,您会发现拨动开关就在我们周围,因为很多事情都有两种简单的状态:它们处于打开状态,或者它们处于关闭状态(但不是“稍微打开”)。从电灯开关到打开移动热点,再到我们最喜欢的移动应用程序上的首选项页面,我们每天都与拨动开关互动。


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


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


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

1575216124089_1.png

当设计人员针对特定场景使用适当的UI元素时,它可以帮助用户预测UI元素将执行的操作以及如何对其进行控制。为避免用户感到沮丧并确保理解,请在拨动开关上遵循以下准则。


提供即时结果

拨动开关应立即生效,并且不要求用户单击“保存”或“提交”以应用新状态。一如既往,我们应该努力使系统与现实世界相匹配。考虑一下我的茶壶:我不必关闭开关并拔下电源线即可体验状态的变化。因此,用户期望数字切换的即时结果与现实世界中的即时结果(例如电灯开关)一样。即时结果是拨动开关的一个方面,它赋予用户自由和控制权,可根据需要更新其首选项。


如果无法立即获得结果或不合适,则应使用替代方法(例如,单选按钮或单个复选框-参见上表)。如果您考虑在包含其他类型的表单字段的长格式中包括切换,并且用户需要单击“ 提交”按钮才能使其他更改生效,请不要这样做。这种情况使用户感到困惑,因为他们不确定自己的切换选择是否会立即生效。不惜一切代价避免混乱。产生即时结果的控件与需要单击命令按钮的控件分开。


 别:

1575216147841_4.png

带有美联航iOS应用中的拨动开关的屏幕截图

在美联航iOS应用程序中,除了外观上的变化外,当用户点击切换开关时,什么也不会发生。用户如何知道拨动开关是否起作用?没有提供结果。在这种情况下,单个复选框将是最佳选择。

 做:

1575216167439_5.png

在iOS上开启飞行模式时,Apple可以通过将左上角的蜂窝条更改为飞行器图标来立即获得结果。

提供简洁,非中性的标签

保持拨动开关的标签短而直。考虑一下Tog的交互设计原则,该原则指出:“菜单和按钮标签应首先具有关键字,形成唯一的标签。”例如,在设计设置页面时,用户可以更新通知首选项:请说电子邮件通知或文字 通知,不要说您要接收我们的电子邮件通知吗?我们知道用户只能阅读他们认为需要的内容,因此可以在标签上预先添加关键字并删除多余的短语。避免提出问题并撰写可扫描性。


切换标签应说明在打开开关时控件将执行的操作;它们不应中立或模棱两可。如有疑问,请大声说出标签,并在末尾附加“ on / off”。如果没有意义,请重写标签。


 别:


1575216190115_2.png

标签包括非生育项目?Le Tote上的此拨动开关是中性的,使用户第二次猜测他们是否要包含或排除产品。

 做:

1575216211691_1.png

相比较而言,Google日历应用中使用的拨动开关标签是直接且明确的;它们描述了开关打开时的系统状态,并带有“ on / off”附件。

遵循标准视觉设计

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


颜色是切换的重要视觉标志,需要牢记两点:对比和文化差异。当设计师使用低对比度的颜色时,用户将很难知道切换是打开还是关闭。因此,请始终使用高对比度的颜色来指示状态变化。此外,请务必评估对受众的社会和文化影响。例如,打开位置的红色与将其与停车标志或停车灯相关联的颜色是违反直觉的。


此外,状态描述符(切换按钮旁边的“ 开”和“ 关 ”字样)可以使系统状态清晰可见。

1575216236526_5.png

是打开还是关闭?在Windows 10中,状态描述符(单词“关”)用于标识切换(关闭)的当前状态。不幸的是,该描述符是模棱两可的:因为单词Off出现在开关的右侧,而切换点位于左侧,所以用户还可以将切换的状态解释为on(即远离标签Off)。

添加状态描述符时,请坚持使用on / off来匹配现实世界的惯例,并在切换的左侧和右侧分别包含off和on以避免混淆。如果在切换器旁边仅存在一个描述符,则可以将其用作切换器标签。


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


 做:

1575216254784_2.png

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

贯彻执行

遵循平台约定,并确保在您的应用程序中一致地实现切换开关。不一致迫使用户放慢速度,并花更多时间考虑如何与组件交互。不要让用户怀疑带有两个单选按钮的问题或陈述与拨动开关的功能相同。


 别:

1575216296557_4.png

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

结论

切换帮助用户更新首选项,设置和其他类型的信息。使用切换开关时,请提供直接标签,使用标准的视觉设计并立即产生结果。请记住,仅当用户需要在两个相对状态之间做出决定时才应使用拨动开关。在您查看网站或应用上切换的使用情况时,请评估上下文并确保一致地实施它们。请记住,这个简单的用户界面组件可能会对用户体验产生重大影响。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> 交互设计,应用程序设计,UE设计

还可以输入0个字

(审核后展示)
打开目录