用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

在用户界面设计中切换VS复选框

表单提供了几个控件,可以更轻松地收集用户的输入。在设计表格时,在正确的位置使用正确的控件是一项挑战。

一个复选框控制有三种状态:未选中,选中和不确定的。最后一个状态表示子选项列表在父选项下分组并且子选项处于选定和未选择状态的情况。

拨动开关表示物理交换机,允许用户打开或关闭的东西,比如一个光开关。

点击切换开关是一个两步操作:选择和执行,而复选框只是选择一个选项,其执行通常需要另一个控件。

在选中复选框和切换开关控件之间时,最好关注使用上下文而不是其功能。

以下是一些用例以及在设计表单体验时决定这两个控件之间的指导原则。

案例1:即时回复

使用拨动开关时,

  • 无需明确操作即可立即响应应用的设置。
  • 设置需要开/关或显示/隐藏功能才能显示结果。
  • 用户需要执行不需要审核或确认的即时操作。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

使用切换开关可以最好地选择需要即时响应的选项。

案例2:设置确认

使用复选框 时,

  • 应用设置需要在提交之前由用户确认和审核。
  • 定义的设置需要在显示结果之前执行提交,确定,下一步,应用等操作。
  • 用户必须执行其他步骤才能使更改生效。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

如果需要显式操作来应用设置,则首选复选框。

案例4:不确定状态

使用复选框 时,

  • 当多个子选项在父选项下分组时,需要中间选择状态。中间状态将表示在列表中选择了多个子选项(但不是全部)。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

使用复选框可以最好地显示不确定状态。

案例5:清晰的视觉状态

使用复选框 时,

  • 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。
  • 需要提供明确的选定或未选择状态。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

有时拨动开关不能清楚地表明它是状态还是动作。

案例6:相关项目

使用复选框 时,

  • 用户必须从相关项目列表中选择选项。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

要选择列表中的相关项,请使用复选框。

使用拨动开关时,

  • 用户正在切换独立的功能或行为。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

独立项目使用拨动开关进行选择。

案例7:单一选项

使用复选框时,

  • 提供单个二进制是/否选择。
  • 只能选择或取消选择一个选项,其含义是显而易见的。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

单个是/否选项更适用于复选框。

使用拨动开关时,

  • 需要进行单一选择,并且你希望为开/关类型的决策提供两个选项。
用户体验设计之“复选框” vs “切换”的区别及用法「超级干货」

使用切换开关可以最好地理解单个开/关决定。

结论

重要的是在表格中的正确位置提供正确的控制以使其让用户使用友好。由于表格可能很长而且有大量选项,如果用户必须额外点击以填充他的信息,这对用户来说变得乏味。提供的用例和指南将帮助你在向表单添加控件时决定复选框和切换开关。


分享最新鲜的设计文章!提供最优质的设计服务!


分享到:


相關文章: