service phone

4000-288-501

NEWS CENTER

新闻资讯

Title
Checkbox 与 开关元件(Toggle Switch)的正确使用情境

发布时间:2021-04-22 16:59    作者:大兴星明度假村    点击量:

UI 上的表单往往带有一些控制元件(如:checkbox)来协助使用者更容易的输入,相对的,如何在对的时机使用对的控制元件就是设计表单的挑战之一。

Checkbox 有三种状态:未选(unselected)、已选(selected)及 indeterminate。前两个很好理解,第三个状态表示:该选项底下还有子选项,且其中包含未择及已选。

开关元件(toggle switch)模拟实体开关的操作方式,让使用者可以快速将某功能开启或关闭,例如现实生活中的电灯开关。

点击开关元件同时带有两个动作:选择并执行 ; 而 checkbox 仅表示选择了一个项目,若要执行会需要另一个控制元件触发。

那该怎么选择这两个控制元件呢?其实我们应该更关注「使用情境」来判断,而不是依造它们的功能。

以下有几个情境可以协助设计师们来判断,借此带来更好的设计与体验。

状况1:马上反应

当以下情况时,我们应该使用「开关元件」:不需要还要进行某些动作,即可反应出选择后的结果时马上显示某功能的「开启/ 关闭」或「出现/ 隐藏」的结果或状态时使用者执行一些不需要确认或审核的动作时

状况2:确认设定的选项

当以下情况时,我们应该使用「checkbox」:在送出调整或改变的需求前,使用者需要「再次确认」或「预览结果」时在显示结果前,送出需求的按钮通常是「提交」、「好」 或「下一步」时使用者必须执行额外的动作来执行这些选项时

素质拓展况3:复选

当以下情况时,我们应该使用「checkbox」:具有复数选项且使用者必须从中选择一个或以上时需要一一点选多个开关元件,且无法及时看到结果(还需等待一段时间,如系统处理中)。

复数选项时最好使用 checkboxes。

状况4:不确定选项的状态

当以下情况时,我们应该使用「checkbox」:当某选项底下还有子选项需要确认时

状况5:显示明确的状态

当以下情况时,我们应该使用「checkbox」:开关元件的「状态」 容易被使用者混淆时,例如很难了解选项上的开关按钮表明的是「状态」或「动作」需要提供明确的已择或未选状态时

有时候开关元件不易直接的表示状态或动作。

状况6:选项的关联性

北京拓展基地

当以下情况时,我们应该使用「checkbox」:使用者必须从「具关联性的选项」中选择时

选项清单中的选项都具有关联性,请用checkboxes。

当以下情况时,我们应该使用「开关元件」 返回列表

网站地图 <a href="https://www.teamrater.com">拓展训练</a>|<a href="https://www.teamrater.com">团建公司</a>