复选框和切换按钮的7个使用案例

栏目: ASP.NET · 发布时间: 6年前

内容简介:欢迎关注富途web开发团队,php , 前端需要你。缺人从众表单自带的控件可以方便我们收集用户的输入。在表单设计时,恰当的使用合适的控件也是一项挑战。

欢迎关注富途web开发团队,php , 前端需要你。缺人从众

表单自带的控件可以方便我们收集用户的输入。在表单设计时,恰当的使用合适的控件也是一项挑战。

checkbox 有三种状态:未选择,选择和状态不确定的三种。最后一个状态表示子选项在父选项分组里并且子选项处于选择和未选择的中间状态。

toggle 表示物理开关,允许用户打开或者关闭,就像开关灯一样。

监听toggle开关实现了两个操作:选择和执行,然而checkbox只是选择一个选项,执行需要另外的控件来实现

在决定用checkbox还是toggle时,最好是关注具体的情景而不是功能。

以下是一些用例,以及在设计表单时决定用哪个控件的一些指引。

案例一:及时反馈

以下这些情况需要用toggle

  • 应用设置不需要有很明确的操作就可以即刻生效。
  • 设置需要开/关或者显示/隐藏来展示效果。
  • 用户选择后不必审核确认就可以执行生效。
复选框和切换按钮的7个使用案例

需要即刻响应时最好用toggle

案例二:设置需要确认

以下这些情况需要用checkbox

  • 应用设置需要用户确认和审核才能提交。
  • 定义的设置生效之前需要有一些操作,比如点击提交,OK,或者下一步。
  • 用户必须执行额外的操作才能使更改的变化生效。
复选框和切换按钮的7个使用案例

如果需要一些明确的操作才能使得应用失效,首选checkbox

案例三:多选

以下这些情况需要用checkbox

  • 在多选中用户需要选择一个或者多个选项。
  • 如果用toggle的话,需要一个一个的点击,而每一次点击都需要有额外的时间等待才能看到效果。
复选框和切换按钮的7个使用案例

在列表中选择多个选项可使用checkbox

案例四:不确定的状态

“使用更好的切换开关设计可以解决此问题。 显示开/关声明将提高清晰度。 微软有正确的想法: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles

以下这些情况需要用checkbox

  • 不确定选择状态时需要有多个子选项在父选项的分组里。这个不确定的状态意味着子选项是需要被选择的(不是全部都必选)。
复选框和切换按钮的7个使用案例

不确定的状态最好用checkbox展示

案例五:清晰的视觉

以下这些情况需要用checkbox

  • 有一种情况会让toggle的开关状态比较困惑,就是有时很难分清这个开关是展示状态还是需要操作。
  • 需要提供一个清晰的选择和未选择的状态区别。
复选框和切换按钮的7个使用案例

有时候toggle不能很清晰的表示出它是一个状态还是需要操作。

“这是toggle切换开关的主要问题。 它们(还)没有像复选框那样强大的约定来表明它们的状态。 由于不良的视觉设计和切换标签,这种模式错误也会变得更糟。

在最近对桌面应用程序中的独立切换开关的测试中,我们观察到大约200%的人中约有20%的人在他们意味着“关闭”时点击切换到开启状态。 我们认为这是因为toggle切换看起来太像按钮了:一个说关闭的按钮会让它被点击动作它(因为这就是一个按钮会做什么)。 然后用户无法从错误中恢复,因为按钮的状态现在对他们来说是正确的(现在它说'打开'因为我已将其关闭)。

直到明白左/右切换按钮的原理才会停止切换,所以最好避免暂时在桌面应用程序上切换。”


以上所述就是小编给大家介绍的《复选框和切换按钮的7个使用案例》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度探索C++对象模型

深度探索C++对象模型

[美] Stanley B. Lippman / 侯捷 / 华中科技大学出版社 / 2001-5 / 54.00元

这本书探索“对象导向程序所支持的C++对象模型”下的程序行为。对于“对象导向性质之基础实现技术”以及“各种性质背后的隐含利益交换”提供一个清楚的认识。检验由程序变形所带来的效率冲击。提供丰富的程序范例、图片,以及对象导向观念和底层对象模型之间的效率测量。一起来看看 《深度探索C++对象模型》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具