所有分类
  • 所有分类
UI 设计之单选按钮和复选框

UI 设计之单选按钮和复选框

2.4. UI 设计之单选按钮和复选框 本文章属于《跟我学线框图》系列教程,转载请注明出处。 单选按钮和复选框控件都允许用户从列表中选择项目。尽管如此,它们有不同的用途和准则。决定什么时候使用哪一个是具有挑战性的,因此本文解释了它们之间的区别,说明何...

2.4. UI 设计之单选按钮和复选框

本文章属于《跟我学线框图》系列教程,转载请注明出处。

单选按钮和复选框控件都允许用户从列表中选择项目。尽管如此,它们有不同的用途和准则。决定什么时候使用哪一个是具有挑战性的,因此本文解释了它们之间的区别,说明何时使用以及如何使用它们。

何时使用单选按钮和复选框

与下拉菜单一样,当有预定义的选项范围时,单选按钮和复选框才是合适的。它们之间的区别在于,单选按钮用于只有一个选项有效的情况(婚姻状况、性别等) ,而复选框支持零个或多个选项(例如,标签或兴趣)。

与下拉菜单不同,单选按钮和复选框可以让用户一次看到所有选项。这可以使选择更快。它们的主要限制是所占空间的大小。正因为如此,GNOME 人机界面指南建议对于一个组来说最多只能有“8个”的选择。

在单选按钮和复选框之间进行选择最困难的情况是,存在二进制选项(例如,yes / no) ,因为这种情况下两个控件都可以使用。决定因素应该是第二种选择是否使一种选择变得明显。

如上面的示例中,单选按钮用于时间选项中的 Digital vs. Analog。这些备选方案我们都很熟悉,但是如果只有一个备选方案且与复选框一起使用的话,我们该怎样安排呢?如图在使用复选框时,“ Show am / pm”的替代选项变为“ don’t Show am / pm” ,十分明了。

如何使用单选按钮和复选框

两者的准则 Guidelines

使用标签描述选项组,并使用标签描述其中的每个选项,除非它是单个复选框(请参见下面的示例)

垂直对齐更容易阅读和解析。只有当水平或矩形对齐能极大地改善窗口的布局时,才使用它们。

这些控件不应该自己启动响应,若需要用按钮来代替

用户应该能够单击/触摸按钮/复选框或其标签以将其激活

设置默认选项时要深思熟虑,避免深色图案

单选按钮指南

始终使用至少两个单选按钮。只使用一个是没有意义的

有些准则指出,默认情况下应始终选择单选按钮组中的一个选项。如果不确定应该选择哪个选项,则添加一个明确的“无选择”选项(如“ 不确定”、“ 无”、“ 拒绝说明”)

复选框指南

避免在标签上使用负面的语言,因为它们可能违反直觉,例如,“不要为我报名”

基本用法

状态 States

与大多数窗体控件一样,可以根据需要禁用单选按钮和复选框。单选按钮和复选框所特有的一种状态是非二进制不确定(也称为混合)状态(既不打开也不关闭)。

不确定 / 混合状态只应用于“表示为某些(但不是全部)子对象设置了选项”。(它)不能用来代表第3种状态。

下面的例子展示了所有的状态:

Variations 变化

当项目的数量事先不知道,或者可以由用户自定义,并且空间有限时,可以使用滚动复选框组。

在手机上,单选按钮和复选框可以看起来不同,以便为触摸进行优化。例如,在 iOS 上,复选标记可用于相互排斥选项场景,而不是使用单选按钮。复选框功能可由拨动开关指示。

参考资料

GNOME Human Interface Guidelines GNOME人机界面指南macOS Human Interface Guidelines macOS人机界面指南U.S. Web Design System 美国网页设计系统KDE Human Interface Guidelines Kde 人机界面指南

相关控件

Dropdown menus下拉菜单

Further Reading进一步阅读

本页地址:http://www.uiya.cn/26839.html; 所有素材均来自于互联网,经网友投稿后发布,仅供学习请勿商用。如有侵权,请联系 3147141550@qq.com 或 提交工单

分享海报

评论0

站点公告

 

新注册用户福利,免费领取7~90天VIP会员

点击领取

没有账号? 注册  忘记密码?